feat: optimize UI, SEO metadata for Google Search Console, and add reprocess fallback models

app.py

@@ -89,6 +89,8 @@ with gr.Blocks(title="Background Remover AI") as demo:
                     "birefnet-portrait",
                     "birefnet-general",
                     "isnet-general-use",
+                    "isnet-anime",
+                    "u2net",
                     "u2net_human_seg",
                 ],
                 value="birefnet-portrait",

frontend/.env.example

@@ -1,3 +1,6 @@
+# Domain URL Website (Canonical URL & Google Search Console)
+NEXT_PUBLIC_SITE_URL=https://rembg.vercel.app
+
 # URL Backend Hugging Face ZeroGPU (Default: https://ilhamdev-rembg.hf.space)
 NEXT_PUBLIC_HF_SPACE_URL=https://ilhamdev-rembg.hf.space
 

frontend/src/app/globals.css

@@ -1,35 +1,38 @@
-/* ===== GLOBAL CSS — RemBG Frontend ===== */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+/* ===== GLOBAL STYLES: STUDIO DARK MINIMALIST ===== */
 
 :root {
-  /* Color palette — deep dark with violet accent */
+  /* Neutral Studio Dark Palette */
   --bg-base: #09090b;
-  --bg-surface: #111113;
+  --bg-surface: #121215;
   --bg-card: #18181b;
-  --bg-card-hover: #1f1f23;
-  --border: rgba(255, 255, 255, 0.08);
-  --border-accent: rgba(139, 92, 246, 0.4);
+  --bg-card-subtle: #202024;
+  --bg-input: #141418;
 
-  --text-primary: #fafafa;
+  --border: rgba(255, 255, 255, 0.10);
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-strong: rgba(255, 255, 255, 0.20);
+  --border-focus: #e4e4e7;
+
+  --text-primary: #f4f4f5;
   --text-secondary: #a1a1aa;
-  --text-muted: #52525b;
+  --text-muted: #71717a;
 
-  --accent: #8b5cf6;
-  --accent-light: #a78bfa;
-  --accent-dark: #7c3aed;
-  --accent-glow: rgba(139, 92, 246, 0.25);
+  --accent-cta-bg: #fafafa;
+  --accent-cta-text: #09090b;
+  --accent-cta-hover: #ffffff;
 
-  --success: #22c55e;
-  --error: #ef4444;
-  --warning: #f59e0b;
+  --status-success: #22c55e;
+  --status-warning: #f59e0b;
+  --status-error: #ef4444;
 
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 16px;
-  --radius-xl: 24px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
 
-  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
-  --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.15);
+  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45);
 }
 
 *, *::before, *::after {
@@ -40,41 +43,49 @@
 
 html {
   scroll-behavior: smooth;
+  color-scheme: dark;
 }
 
 body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: inherit;
   background-color: var(--bg-base);
   color: var(--text-primary);
   min-height: 100vh;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Accessible focus visible ring */
+:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
 }
 
-/* ===== LAYOUT ===== */
+/* ===== APP LAYOUT ===== */
 .app-wrapper {
   min-height: 100vh;
-  background:
-    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(139, 92, 246, 0.12) 0%, transparent 70%),
-    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 60%),
-    var(--bg-base);
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-base);
 }
 
 .container {
-  max-width: 1100px;
+  width: 100%;
+  max-width: 980px;
   margin: 0 auto;
-  padding: 0 24px;
+  padding: 0 20px;
 }
 
 /* ===== HEADER ===== */
 .header {
-  padding: 24px 0;
-  border-bottom: 1px solid var(--border);
-  backdrop-filter: blur(12px);
-  background: rgba(9, 9, 11, 0.8);
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  background-color: rgba(9, 9, 11, 0.85);
+  backdrop-filter: blur(10px);
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: 50;
 }
 
 .header-inner {
@@ -84,358 +95,380 @@ body {
 }
 
 .logo {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
+  color: var(--text-primary);
 }
 
-.logo-icon {
-  width: 36px;
-  height: 36px;
-  background: linear-gradient(135deg, var(--accent), #3b82f6);
-  border-radius: var(--radius-sm);
-  display: flex;
+.logo-badge {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
-  box-shadow: 0 0 20px var(--accent-glow);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
 }
 
 .logo-text {
-  font-size: 20px;
+  font-size: 17px;
   font-weight: 700;
-  background: linear-gradient(135deg, var(--text-primary), var(--accent-light));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  letter-spacing: -0.02em;
 }
 
-.header-badge {
+.header-meta {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: rgba(139, 92, 246, 0.1);
-  border: 1px solid var(--border-accent);
-  border-radius: 100px;
+  gap: 12px;
+}
+
+.system-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
   font-size: 12px;
-  color: var(--accent-light);
-  font-weight: 500;
+  color: var(--text-secondary);
+  padding: 5px 10px;
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
 }
 
-.badge-dot {
-  width: 6px;
-  height: 6px;
-  background: var(--success);
+.status-dot {
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
-  animation: pulse 2s infinite;
+  background-color: var(--status-success);
+}
+
+.hf-link {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: color 0.15s ease;
 }
 
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(0.8); }
+.hf-link:hover {
+  color: var(--text-primary);
 }
 
 /* ===== HERO ===== */
 .hero {
-  padding: 72px 0 48px;
+  padding: 48px 0 32px;
   text-align: center;
 }
 
-.hero-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  background: rgba(139, 92, 246, 0.08);
-  border: 1px solid var(--border-accent);
-  border-radius: 100px;
-  font-size: 12px;
-  color: var(--accent-light);
-  font-weight: 500;
-  margin-bottom: 24px;
-}
-
 .hero h1 {
-  font-size: clamp(36px, 6vw, 64px);
-  font-weight: 800;
-  line-height: 1.1;
+  font-size: clamp(28px, 4.5vw, 44px);
+  font-weight: 700;
+  line-height: 1.2;
   letter-spacing: -0.03em;
-  margin-bottom: 20px;
-}
-
-.hero h1 span {
-  background: linear-gradient(135deg, var(--accent-light) 0%, #60a5fa 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: var(--text-primary);
+  margin-bottom: 12px;
 }
 
 .hero-desc {
-  font-size: 18px;
+  font-size: 15px;
   color: var(--text-secondary);
-  max-width: 560px;
-  margin: 0 auto 40px;
-  line-height: 1.7;
+  max-width: 580px;
+  margin: 0 auto;
+  line-height: 1.6;
 }
 
-/* ===== MAIN CARD ===== */
+/* ===== MAIN TOOL CARD ===== */
 .main-card {
-  background: var(--bg-card);
+  background-color: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: var(--radius-xl);
-  padding: 32px;
-  margin-bottom: 24px;
+  border-radius: var(--radius-lg);
+  padding: 24px;
   box-shadow: var(--shadow-card);
-  transition: border-color 0.3s ease;
 }
 
-.main-card:hover {
-  border-color: rgba(139, 92, 246, 0.2);
-}
-
-/* ===== SETTINGS ROW ===== */
-.settings-row {
+/* Configuration grid */
+.config-grid {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr 220px;
   gap: 16px;
-  align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
 }
 
-.field-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.select-wrapper {
-  position: relative;
+.field-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
 }
 
-.select-wrapper select {
+.select-control {
   width: 100%;
-  padding: 10px 36px 10px 14px;
-  background: var(--bg-surface);
+  padding: 10px 12px;
+  background-color: var(--bg-input);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   color: var(--text-primary);
-  font-size: 14px;
+  font-size: 13px;
   font-family: inherit;
-  appearance: none;
   cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s;
   outline: none;
+  transition: border-color 0.15s ease;
 }
 
-.select-wrapper select:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
+.select-control:focus {
+  border-color: var(--border-focus);
 }
 
-.select-arrow {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--text-muted);
-  pointer-events: none;
-}
-
-.toggle-group {
+.toggle-card {
   display: flex;
   align-items: center;
   gap: 10px;
+  padding: 9px 12px;
+  background-color: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  user-select: none;
+  min-height: 42px;
 }
 
-.toggle-label {
-  font-size: 14px;
+.toggle-card input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--accent-cta-bg);
+}
+
+.toggle-text {
+  font-size: 13px;
   color: var(--text-secondary);
-  white-space: nowrap;
+  line-height: 1.3;
 }
 
-/* Toggle switch */
-.toggle {
-  position: relative;
-  width: 44px;
-  height: 24px;
+/* ===== DROPZONE & UPLOAD ===== */
+.dropzone {
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-md);
+  background-color: var(--bg-surface);
+  padding: 40px 20px;
+  text-align: center;
   cursor: pointer;
+  position: relative;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
 }
 
-.toggle input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-  position: absolute;
+.dropzone:hover,
+.dropzone.drag-active {
+  border-color: var(--border-focus);
+  background-color: var(--bg-card-subtle);
 }
 
-.toggle-track {
-  position: absolute;
-  inset: 0;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 100px;
-  transition: background 0.3s, border-color 0.3s;
+.dropzone-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
 }
 
-.toggle input:checked + .toggle-track {
-  background: var(--accent);
-  border-color: var(--accent);
+.dropzone-icon {
+  width: 44px;
+  height: 44px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.toggle-thumb {
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 16px;
-  height: 16px;
-  background: white;
-  border-radius: 50%;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+.dropzone-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
 }
 
-.toggle input:checked ~ .toggle-thumb {
-  transform: translateX(20px);
+.dropzone-hint {
+  font-size: 13px;
+  color: var(--text-muted);
 }
 
-/* ===== UPLOAD ZONE ===== */
-.upload-zone {
-  border: 2px dashed var(--border);
-  border-radius: var(--radius-lg);
-  padding: 48px 24px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  position: relative;
-  background: var(--bg-surface);
-  overflow: hidden;
+/* Uploaded Image Preview */
+.preview-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
-.upload-zone::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
-  opacity: 0;
-  transition: opacity 0.3s;
+.preview-media-box {
+  background-color: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 240px;
+  max-height: 420px;
+  overflow: hidden;
 }
 
-.upload-zone:hover::before,
-.upload-zone.dragover::before {
-  opacity: 1;
+.preview-img {
+  max-width: 100%;
+  max-height: 380px;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
 }
 
-.upload-zone:hover,
-.upload-zone.dragover {
-  border-color: var(--accent);
-  background: rgba(139, 92, 246, 0.04);
-  transform: scale(1.005);
+.preview-meta-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4px;
 }
 
-.upload-zone.has-image {
-  border-style: solid;
-  border-color: var(--border-accent);
-  padding: 0;
+.meta-info {
+  font-size: 12px;
+  color: var(--text-muted);
+  display: flex;
+  gap: 8px;
 }
 
-.upload-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-  display: block;
-  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.4));
+.btn-ghost-small {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 12px;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  min-height: 32px;
 }
 
-.upload-title {
-  font-size: 18px;
-  font-weight: 600;
+.btn-ghost-small:hover {
   color: var(--text-primary);
-  margin-bottom: 8px;
-}
-
-.upload-sub {
-  font-size: 14px;
-  color: var(--text-muted);
+  border-color: var(--border-strong);
 }
 
-.upload-sub span {
-  color: var(--accent-light);
+/* Progress bar */
+.progress-track {
+  height: 4px;
+  background-color: var(--bg-surface);
+  border-radius: var(--radius-xs);
+  margin-top: 16px;
+  overflow: hidden;
 }
 
-#file-input {
-  display: none;
+.progress-bar-fill {
+  height: 100%;
+  background-color: var(--accent-cta-bg);
+  transition: width 0.3s ease;
 }
 
-/* Preview image */
-.preview-image {
-  width: 100%;
-  max-height: 400px;
-  object-fit: contain;
-  border-radius: calc(var(--radius-lg) - 2px);
-  display: block;
+/* Error message */
+.error-banner {
+  margin-top: 14px;
+  padding: 12px 14px;
+  background-color: rgba(239, 68, 68, 0.10);
+  border: 1px solid rgba(239, 68, 68, 0.30);
+  border-radius: var(--radius-sm);
+  color: #fca5a5;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-/* ===== REMOVE BUTTON ===== */
-.btn-remove {
-  width: 100%;
-  padding: 16px 32px;
-  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
-  border: none;
-  border-radius: var(--radius-md);
-  color: white;
-  font-size: 16px;
-  font-weight: 600;
-  font-family: inherit;
-  cursor: pointer;
+/* Turnstile container */
+.turnstile-box {
+  margin-top: 20px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 4px 24px rgba(139, 92, 246, 0.3);
+  gap: 6px;
+  min-height: 65px;
 }
 
-.btn-remove::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
-  opacity: 0;
-  transition: opacity 0.3s;
+.turnstile-notice {
+  font-size: 11px;
+  color: var(--text-muted);
 }
 
-.btn-remove:hover:not(:disabled)::before {
-  opacity: 1;
+/* Action button area */
+.action-row {
+  margin-top: 20px;
+  display: flex;
+  gap: 12px;
 }
 
-.btn-remove:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.45);
+.btn-primary {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: var(--accent-cta-bg);
+  color: var(--accent-cta-text);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 600;
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  min-height: 44px;
 }
 
-.btn-remove:active:not(:disabled) {
-  transform: translateY(0);
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--accent-cta-hover);
 }
 
-.btn-remove:disabled {
-  opacity: 0.5;
+.btn-primary:disabled {
+  opacity: 0.45;
   cursor: not-allowed;
 }
 
-/* Loading spinner */
-.spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid rgba(255,255,255,0.3);
-  border-top-color: white;
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background-color: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 500;
+  padding: 10px 16px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  min-height: 44px;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  color: var(--text-primary);
+  border-color: var(--border-strong);
+}
+
+/* Minimalist loading spinner */
+.spinner-icon {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(9, 9, 11, 0.25);
+  border-top-color: #09090b;
   border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+  animation: spin 0.6s linear infinite;
 }
 
 @keyframes spin {
@@ -445,248 +478,260 @@ body {
 /* ===== RESULT SECTION ===== */
 .result-section {
   margin-top: 24px;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  box-shadow: var(--shadow-card);
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
 }
 
-.section-title {
+.result-title {
   font-size: 14px;
   font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 16px;
+  color: var(--text-primary);
+}
+
+/* Preview background inspector toggle */
+.bg-inspector-group {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
+  background-color: var(--bg-input);
+  padding: 3px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
 }
 
-.result-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  box-shadow: var(--shadow-card);
+.bg-inspector-btn {
+  background: transparent;
+  border: none;
+  font-size: 11px;
+  color: var(--text-muted);
+  padding: 5px 9px;
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  min-height: 28px;
 }
 
-/* Checkerboard background untuk transparan */
+.bg-inspector-btn.active {
+  background-color: var(--bg-card);
+  color: var(--text-primary);
+  font-weight: 600;
+  box-shadow: var(--shadow-subtle);
+}
+
+/* Canvas backgrounds */
 .result-canvas {
-  background-image:
-    linear-gradient(45deg, #2a2a2e 25%, transparent 25%),
-    linear-gradient(-45deg, #2a2a2e 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #2a2a2e 75%),
-    linear-gradient(-45deg, transparent 75%, #2a2a2e 75%);
-  background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-  background-color: #1e1e22;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
   padding: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 300px;
+  min-height: 320px;
+  max-height: 520px;
+  overflow: hidden;
+  transition: background-color 0.2s ease;
 }
 
-.result-img {
-  max-width: 100%;
-  max-height: 500px;
-  object-fit: contain;
-  border-radius: var(--radius-md);
-  animation: fadeIn 0.5s ease;
+.result-canvas.checkerboard {
+  background-image:
+    linear-gradient(45deg, #232328 25%, transparent 25%),
+    linear-gradient(-45deg, #232328 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #232328 75%),
+    linear-gradient(-45deg, transparent 75%, #232328 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+  background-color: #17171b;
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; transform: scale(0.97); }
-  to { opacity: 1; transform: scale(1); }
+.result-canvas.white {
+  background-color: #ffffff;
 }
 
-.result-actions {
-  padding: 16px 20px;
-  border-top: 1px solid var(--border);
-  display: flex;
-  gap: 12px;
-  background: var(--bg-surface);
+.result-canvas.dark {
+  background-color: #09090b;
 }
 
-.btn-download {
-  flex: 1;
-  padding: 12px;
-  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
-  border: none;
-  border-radius: var(--radius-sm);
-  color: white;
-  font-size: 14px;
-  font-weight: 600;
-  font-family: inherit;
-  cursor: pointer;
+.result-image {
+  max-width: 100%;
+  max-height: 480px;
+  object-fit: contain;
+}
+
+.result-footer-actions {
+  margin-top: 18px;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
+  gap: 12px;
 }
 
-.btn-download:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.4);
+/* Reprocess panel in result card */
+.reprocess-panel {
+  margin-top: 20px;
+  padding: 16px;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
 }
 
-.btn-reset {
-  padding: 12px 20px;
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
+.reprocess-header {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: all 0.2s ease;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 12px;
 }
 
-.btn-reset:hover {
-  border-color: var(--border-accent);
-  color: var(--accent-light);
-  background: rgba(139, 92, 246, 0.05);
+.reprocess-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
 }
 
-/* ===== ERROR MESSAGE ===== */
-.error-msg {
-  margin-top: 12px;
-  padding: 12px 16px;
-  background: rgba(239, 68, 68, 0.08);
-  border: 1px solid rgba(239, 68, 68, 0.25);
-  border-radius: var(--radius-sm);
-  color: #fca5a5;
-  font-size: 14px;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  animation: fadeIn 0.3s ease;
+.reprocess-desc {
+  font-size: 12px;
+  color: var(--text-muted);
 }
 
-/* ===== FEATURES GRID ===== */
-.features {
-  padding: 64px 0;
+.reprocess-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 16px;
+.reprocess-field {
+  flex: 1;
+  min-width: 220px;
 }
 
-.feature-card {
-  padding: 24px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  transition: all 0.3s ease;
+/* ===== TECHNICAL / PROJECT INFORMATION ===== */
+.info-section {
+  padding: 48px 0 24px;
 }
 
-.feature-card:hover {
-  border-color: var(--border-accent);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 32px rgba(0,0,0,0.3), var(--shadow-glow);
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
 }
 
-.feature-icon {
-  font-size: 28px;
-  margin-bottom: 16px;
-  display: block;
+.info-card {
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 20px;
 }
 
-.feature-title {
-  font-size: 16px;
+.info-card h2 {
+  font-size: 14px;
   font-weight: 600;
-  margin-bottom: 8px;
   color: var(--text-primary);
+  margin-bottom: 8px;
+  letter-spacing: -0.01em;
 }
 
-.feature-desc {
-  font-size: 14px;
+.info-card p {
+  font-size: 13px;
   color: var(--text-secondary);
-  line-height: 1.6;
+  line-height: 1.5;
 }
 
-/* ===== FOOTER ===== */
-.footer {
-  padding: 32px 0;
-  border-top: 1px solid var(--border);
-  text-align: center;
+.model-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
 }
 
-.footer-text {
-  font-size: 14px;
-  color: var(--text-muted);
+.model-list li {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.4;
 }
 
-.footer-text a {
-  color: var(--accent-light);
-  text-decoration: none;
-  transition: color 0.2s;
+.model-list strong {
+  color: var(--text-primary);
 }
 
-.footer-text a:hover {
-  color: var(--accent);
+/* ===== FOOTER ===== */
+.footer {
+  margin-top: auto;
+  padding: 32px 0 24px;
+  border-top: 1px solid var(--border-subtle);
 }
 
-/* ===== PROGRESS BAR ===== */
-.progress-bar {
-  height: 3px;
-  background: var(--bg-surface);
-  border-radius: 100px;
-  margin-top: 16px;
-  overflow: hidden;
+.footer-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
 }
 
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent), #60a5fa);
-  border-radius: 100px;
-  width: 0%;
-  transition: width 0.5s ease;
-  animation: shimmer 1.5s infinite;
+.footer-text {
+  font-size: 12px;
+  color: var(--text-muted);
 }
 
-@keyframes shimmer {
-  0% { background-position: -200px 0; }
-  100% { background-position: 200px 0; }
+.footer-links {
+  display: flex;
+  gap: 16px;
 }
 
-/* ===== CLOUDFLARE TURNSTILE ===== */
-.turnstile-wrapper {
-  margin-top: 18px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  min-height: 65px;
+.footer-link {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.15s ease;
 }
 
-.turnstile-hint {
-  font-size: 0.78rem;
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  gap: 5px;
+.footer-link:hover {
+  color: var(--text-primary);
 }
 
-/* ===== RESPONSIVE ===== */
-@media (max-width: 640px) {
-  .settings-row {
+/* ===== RESPONSIVE BREAKPOINTS ===== */
+@media (max-width: 720px) {
+  .hf-link {
+    display: none;
+  }
+
+  .config-grid {
     grid-template-columns: 1fr;
   }
+
   .hero {
-    padding: 48px 0 32px;
+    padding: 32px 0 24px;
   }
+
   .main-card {
-    padding: 20px;
+    padding: 16px;
   }
-  .result-actions {
+
+  .result-section {
+    padding: 16px;
+  }
+
+  .result-footer-actions {
+    flex-direction: column;
+  }
+
+  .btn-primary, .btn-secondary {
+    width: 100%;
+  }
+
+  .footer-content {
     flex-direction: column;
+    align-items: flex-start;
   }
 }

frontend/src/app/layout.js

@@ -1,22 +1,116 @@
 import { Inter } from 'next/font/google'
 import './globals.css'
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+const SITE_URL = (process.env.NEXT_PUBLIC_SITE_URL || 'https://rembg.vercel.app').replace(/\/+$/, '')
+
+export const viewport = {
+  themeColor: '#09090b',
+  width: 'device-width',
+  initialScale: 1,
+}
 
 export const metadata = {
-  title: 'RemBG — AI Background Remover',
-  description: 'Hapus background foto secara otomatis menggunakan AI. Powered by HuggingFace ZeroGPU & rembg.',
-  keywords: 'remove background, hapus background, AI, rembg, transparan',
+  metadataBase: new URL(SITE_URL),
+  title: 'RemBG: Hapus Background Foto AI Otomatis & Presisi Tinggi',
+  description: 'Hapus background foto secara instan menggunakan AI ZeroGPU dan rembg. Mendukung foto orang, produk, dan objek umum secara gratis tanpa watermark.',
+  keywords: [
+    'hapus background foto',
+    'remove background online',
+    'background transparan AI',
+    'rembg online',
+    'BiRefNet',
+    'potong latar belakang gratis',
+  ],
+  authors: [{ name: 'RemBG' }],
+  creator: 'RemBG',
+  publisher: 'RemBG',
+  alternates: {
+    canonical: '/',
+  },
   openGraph: {
-    title: 'RemBG — AI Background Remover',
-    description: 'Hapus background foto otomatis dengan AI. Gratis, cepat, presisi tinggi.',
+    title: 'RemBG: Hapus Background Foto AI Otomatis & Presisi Tinggi',
+    description: 'Hapus background foto instan dengan AI ZeroGPU dan rembg. Gratis, cepat, dan transparan tanpa kompresi.',
+    url: SITE_URL,
+    siteName: 'RemBG',
+    locale: 'id_ID',
     type: 'website',
   },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'RemBG: Hapus Background Foto AI Otomatis & Presisi Tinggi',
+    description: 'Hapus background foto instan dengan AI ZeroGPU dan rembg. Gratis, cepat, dan transparan tanpa kompresi.',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+}
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    {
+      '@type': 'WebApplication',
+      '@id': `${SITE_URL}/#app`,
+      name: 'RemBG',
+      url: SITE_URL,
+      description: 'Aplikasi web penghapus background foto otomatis berbasis AI dengan model BiRefNet dan ISNet.',
+      applicationCategory: 'MultimediaApplication',
+      operatingSystem: 'All',
+      browserRequirements: 'Requires JavaScript. Requires HTML5.',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'USD',
+      },
+    },
+    {
+      '@type': 'HowTo',
+      '@id': `${SITE_URL}/#howto`,
+      name: 'Cara Menghapus Background Foto dengan RemBG',
+      description: 'Langkah mudah menghapus background foto secara otomatis menggunakan AI.',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Pilih atau Tarik Foto',
+          text: 'Unggah foto berformat JPG, PNG, atau WEBP ke area unggah.',
+        },
+        {
+          '@type': 'HowToStep',
+          name: 'Pilih Model AI yang Sesuai',
+          text: 'Pilih model BiRefNet Portrait untuk orang atau BiRefNet General untuk produk dan objek.',
+        },
+        {
+          '@type': 'HowToStep',
+          name: 'Unduh Hasil PNG Transparan',
+          text: 'Klik tombol Hapus Background, periksa hasil pratinjau, dan unduh foto PNG transparan.',
+        },
+      ],
+    },
+  ],
 }
 
 export default function RootLayout({ children }) {
   return (
     <html lang="id">
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+      </head>
       <body className={inter.className}>{children}</body>
     </html>
   )

frontend/src/app/page.js

@@ -1,19 +1,28 @@
 'use client'
 
-import { useState, useRef, useCallback } from 'react'
+import { useState, useRef, useCallback, useEffect } from 'react'
 import { Turnstile } from '@marsidev/react-turnstile'
 import { DEFAULT_TEST_SITE_KEY } from '@/lib/turnstile'
-import './globals.css'
 
 const TURNSTILE_SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || DEFAULT_TEST_SITE_KEY
 
 const MODELS = [
-  { value: 'birefnet-portrait', label: '👤 BiRefNet Portrait — Terbaik untuk orang' },
-  { value: 'birefnet-general', label: '📦 BiRefNet General — Terbaik untuk objek/produk' },
-  { value: 'isnet-general-use', label: '⚡ ISNet General — Seimbang: cepat & bagus' },
-  { value: 'u2net_human_seg', label: '🚀 U2Net Human — Ringan untuk orang' },
+  { value: 'birefnet-portrait', label: 'BiRefNet Portrait (Optimal untuk manusia & rambut)' },
+  { value: 'birefnet-general', label: 'BiRefNet General (Optimal untuk produk & objek)' },
+  { value: 'isnet-general-use', label: 'ISNet General (Serbaguna, cepat & seimbang)' },
+  { value: 'isnet-anime', label: 'ISNet Anime (Optimal untuk kartun, anime & ilustrasi)' },
+  { value: 'u2net', label: 'U2Net (Model umum klasik yang stabil)' },
+  { value: 'u2net_human_seg', label: 'U2Net Human (Segmentasi manusia ringan)' },
 ]
 
+function formatFileSize(bytes) {
+  if (!bytes) return ''
+  const mb = bytes / (1024 * 1024)
+  if (mb >= 1) return `${mb.toFixed(1)} MB`
+  const kb = bytes / 1024
+  return `${kb.toFixed(0)} KB`
+}
+
 export default function Home() {
   const [previewUrl, setPreviewUrl] = useState(null)
   const [resultUrl, setResultUrl] = useState(null)
@@ -25,13 +34,14 @@ export default function Home() {
   const [progress, setProgress] = useState(0)
   const [dragover, setDragover] = useState(false)
   const [turnstileToken, setTurnstileToken] = useState(null)
+  const [inspectorBg, setInspectorBg] = useState('checkerboard')
 
   const fileInputRef = useRef(null)
   const turnstileRef = useRef(null)
 
   const handleFile = useCallback((file) => {
     if (!file || !file.type.startsWith('image/')) {
-      setError('File harus berupa gambar (JPG, PNG, WEBP)')
+      setError('File harus berupa gambar (JPG, PNG, atau WEBP)')
       return
     }
     if (file.size > 20 * 1024 * 1024) {
@@ -45,6 +55,23 @@ export default function Home() {
     setPreviewUrl(url)
   }, [])
 
+  // Dukungan paste gambar dari clipboard
+  useEffect(() => {
+    const handlePaste = (e) => {
+      const items = e.clipboardData?.items
+      if (!items) return
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          const file = item.getAsFile()
+          if (file) handleFile(file)
+          break
+        }
+      }
+    }
+    window.addEventListener('paste', handlePaste)
+    return () => window.removeEventListener('paste', handlePaste)
+  }, [handleFile])
+
   const handleDrop = useCallback((e) => {
     e.preventDefault()
     setDragover(false)
@@ -60,7 +87,9 @@ export default function Home() {
   const handleDragLeave = () => setDragover(false)
 
   const handleFileInput = (e) => {
-    handleFile(e.target.files[0])
+    if (e.target.files?.[0]) {
+      handleFile(e.target.files[0])
+    }
   }
 
   const handleRemoveBg = async () => {
@@ -76,7 +105,6 @@ export default function Home() {
     setResultUrl(null)
     setProgress(0)
 
-    // Simulasi progress
     const progressInterval = setInterval(() => {
       setProgress(prev => Math.min(prev + Math.random() * 15, 85))
     }, 800)
@@ -99,14 +127,15 @@ export default function Home() {
       const data = await res.json()
 
       if (!res.ok || !data.success) {
-        throw new Error(data.error || 'Terjadi kesalahan pada server')
+        throw new Error(data.error || 'Terjadi kesalahan pada server saat memproses gambar')
       }
 
-      // API route sekarang mengembalikan base64 langsung di data.image
-      if (!data.image) throw new Error('Tidak ada gambar hasil dari server')
+      if (!data.image) {
+        throw new Error('Tidak ada gambar hasil dari server')
+      }
 
       setProgress(100)
-      setResultUrl(data.image)  // base64 data URL, langsung bisa dipakai sebagai src
+      setResultUrl(data.image)
     } catch (err) {
       clearInterval(progressInterval)
       setError(err.message)
@@ -133,7 +162,8 @@ export default function Home() {
     if (!resultUrl) return
     const a = document.createElement('a')
     a.href = resultUrl
-    a.download = `rembg_${imageFile?.name?.replace(/\.[^.]+$/, '') || 'result'}.png`
+    const baseName = imageFile?.name?.replace(/\.[^.]+$/, '') || 'hasil'
+    a.download = `${baseName}-nobg.png`
     a.click()
   }
 
@@ -143,13 +173,36 @@ export default function Home() {
       <header className="header">
         <div className="container">
           <div className="header-inner">
-            <a className="logo" href="/">
-              <div className="logo-icon">✂️</div>
+            <a className="logo" href="/" aria-label="RemBG Beranda">
+              <span className="logo-badge" aria-hidden="true">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="6" cy="6" r="3"/>
+                  <circle cx="6" cy="18" r="3"/>
+                  <line x1="20" y1="4" x2="8.12" y2="15.88"/>
+                  <line x1="14.47" y1="14.48" x2="20" y2="20"/>
+                  <line x1="8.12" y1="8.12" x2="12" y2="12"/>
+                </svg>
+              </span>
               <span className="logo-text">RemBG</span>
             </a>
-            <div className="header-badge">
-              <div className="badge-dot" />
-              Powered by ZeroGPU
+            <div className="header-meta">
+              <span className="system-status">
+                <span className="status-dot" aria-hidden="true" />
+                ZeroGPU Online
+              </span>
+              <a
+                href="https://huggingface.co/spaces/ilhamdev/rembg"
+                target="_blank"
+                rel="noreferrer"
+                className="hf-link"
+              >
+                Hugging Face Space
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+                  <polyline points="15 3 21 3 21 9"/>
+                  <line x1="10" y1="14" x2="21" y2="3"/>
+                </svg>
+              </a>
             </div>
           </div>
         </div>
@@ -158,107 +211,141 @@ export default function Home() {
       {/* Hero */}
       <section className="hero">
         <div className="container">
-          <div className="hero-label">
-            🤖 AI Background Removal
-          </div>
-          <h1>
-            Hapus Background Foto<br />
-            <span>Secara Otomatis</span>
-          </h1>
+          <h1>Hapus Background Foto Otomatis</h1>
           <p className="hero-desc">
-            Upload foto, pilih model AI terbaik, dan dapatkan hasil dengan background transparan dalam hitungan detik. Gratis, presisi tinggi, tanpa watermark.
+            Pemisahan objek foto secara presisi dengan model BiRefNet dan ISNet. Diproses tanpa watermark dengan resolusi penuh.
           </p>
         </div>
       </section>
 
-      {/* Main Tool */}
+      {/* Main Card */}
       <main>
         <div className="container">
           <div className="main-card">
-            {/* Settings */}
-            <div className="settings-row">
-              <div>
-                <div className="field-label">Model AI</div>
-                <div className="select-wrapper">
-                  <select
-                    id="model-select"
-                    value={model}
-                    onChange={e => setModel(e.target.value)}
-                    disabled={loading}
-                  >
-                    {MODELS.map(m => (
-                      <option key={m.value} value={m.value}>{m.label}</option>
-                    ))}
-                  </select>
-                  <span className="select-arrow">▾</span>
-                </div>
+            {/* Konfigurasi Model */}
+            <div className="config-grid">
+              <div className="field-group">
+                <label htmlFor="model-select" className="field-label">Model Segmentasi</label>
+                <select
+                  id="model-select"
+                  className="select-control"
+                  value={model}
+                  onChange={(e) => setModel(e.target.value)}
+                  disabled={loading}
+                >
+                  {MODELS.map((m) => (
+                    <option key={m.value} value={m.value}>{m.label}</option>
+                  ))}
+                </select>
               </div>
-              <div>
-                <div className="field-label">Alpha Matting</div>
-                <div className="toggle-group">
-                  <label className="toggle">
-                    <input
-                      id="alpha-toggle"
-                      type="checkbox"
-                      checked={alphaMatting}
-                      onChange={e => setAlphaMatting(e.target.checked)}
-                      disabled={loading}
-                    />
-                    <div className="toggle-track" />
-                    <div className="toggle-thumb" />
-                  </label>
-                  <span className="toggle-label">
-                    {alphaMatting ? '✅ Aktif' : 'Haluskan edge rambut'}
+
+              <div className="field-group">
+                <span className="field-label">Detail Tepi</span>
+                <label className="toggle-card" htmlFor="alpha-toggle">
+                  <input
+                    id="alpha-toggle"
+                    type="checkbox"
+                    checked={alphaMatting}
+                    onChange={(e) => setAlphaMatting(e.target.checked)}
+                    disabled={loading}
+                  />
+                  <span className="toggle-text">
+                    Alpha Matting (helai rambut)
                   </span>
-                </div>
+                </label>
               </div>
             </div>
 
-            {/* Upload Zone */}
+            {/* Input Tersembunyi */}
             <input
               ref={fileInputRef}
               id="file-input"
               type="file"
-              accept="image/*"
+              accept="image/png,image/jpeg,image/webp"
               onChange={handleFileInput}
+              style={{ display: 'none' }}
             />
-            <div
-              className={`upload-zone ${dragover ? 'dragover' : ''} ${previewUrl ? 'has-image' : ''}`}
-              onClick={() => !previewUrl && fileInputRef.current?.click()}
-              onDrop={handleDrop}
-              onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              id="upload-dropzone"
-            >
-              {previewUrl ? (
-                <img src={previewUrl} alt="Preview" className="preview-image" />
-              ) : (
-                <>
-                  <span className="upload-icon">🖼️</span>
-                  <div className="upload-title">Drop gambar di sini atau klik untuk upload</div>
-                  <div className="upload-sub">
-                    Mendukung <span>JPG, PNG, WEBP</span> · Maks <span>20MB</span>
+
+            {/* Area Dropzone / Pratinjau */}
+            {!previewUrl ? (
+              <div
+                className={`dropzone ${dragover ? 'drag-active' : ''}`}
+                onClick={() => fileInputRef.current?.click()}
+                onDrop={handleDrop}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    fileInputRef.current?.click()
+                  }
+                }}
+                aria-label="Area unggah gambar"
+              >
+                <div className="dropzone-inner">
+                  <div className="dropzone-icon" aria-hidden="true">
+                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+                      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                      <circle cx="8.5" cy="8.5" r="1.5"/>
+                      <polyline points="21 15 16 10 5 21"/>
+                    </svg>
                   </div>
-                </>
-              )}
-            </div>
+                  <div className="dropzone-title">Pilih file atau tarik gambar ke sini</div>
+                  <div className="dropzone-hint">
+                    Mendukung JPG, PNG, WEBP (maksimal 20MB) atau tempel (Ctrl+V)
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="preview-container">
+                <div className="preview-media-box">
+                  <img
+                    src={previewUrl}
+                    alt="Pratinjau foto sebelum pemisahan latar belakang"
+                    className="preview-img"
+                  />
+                </div>
+                <div className="preview-meta-row">
+                  <div className="meta-info">
+                    <span>{imageFile?.name}</span>
+                    <span>•</span>
+                    <span>{formatFileSize(imageFile?.size)}</span>
+                  </div>
+                  <button
+                    type="button"
+                    className="btn-ghost-small"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={loading}
+                  >
+                    Ganti Foto
+                  </button>
+                </div>
+              </div>
+            )}
 
-            {/* Progress Bar */}
+            {/* Indikator Progres */}
             {loading && (
-              <div className="progress-bar">
-                <div className="progress-fill" style={{ width: `${progress}%` }} />
+              <div className="progress-track" role="progressbar" aria-valuenow={progress} aria-valuemin={0} aria-valuemax={100}>
+                <div className="progress-bar-fill" style={{ width: `${progress}%` }} />
               </div>
             )}
 
-            {/* Error */}
+            {/* Pesan Kesalahan */}
             {error && (
-              <div className="error-msg" id="error-message">
-                ⚠️ {error}
+              <div className="error-banner" role="alert">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <circle cx="12" cy="12" r="10"/>
+                  <line x1="12" y1="8" x2="12" y2="12"/>
+                  <line x1="12" y1="16" x2="12.01" y2="16"/>
+                </svg>
+                <span>{error}</span>
               </div>
             )}
 
             {/* Cloudflare Turnstile */}
-            <div className="turnstile-wrapper">
+            <div className="turnstile-box">
               <Turnstile
                 ref={turnstileRef}
                 siteKey={TURNSTILE_SITE_KEY}
@@ -276,105 +363,222 @@ export default function Home() {
                   size: 'normal',
                 }}
               />
-              <div className="turnstile-hint">
-                🔒 Dilindungi oleh Cloudflare Turnstile anti-bot
-              </div>
+              <span className="turnstile-notice">
+                Verifikasi keamanan bot Cloudflare
+              </span>
             </div>
 
-            {/* Action Buttons */}
-            <div style={{ marginTop: '20px', display: 'flex', gap: '12px' }}>
+            {/* Tombol Aksi */}
+            <div className="action-row">
               <button
                 id="remove-bg-btn"
-                className="btn-remove"
+                className="btn-primary"
                 onClick={handleRemoveBg}
                 disabled={!imageFile || loading || !turnstileToken}
               >
                 {loading ? (
                   <>
-                    <div className="spinner" />
-                    Memproses dengan AI...
+                    <span className="spinner-icon" aria-hidden="true" />
+                    Sedang Memproses...
                   </>
                 ) : (
                   <>
-                    ✂️ Hapus Background
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <polyline points="20 6 9 17 4 12"/>
+                    </svg>
+                    Hapus Background
                   </>
                 )}
               </button>
               {previewUrl && (
                 <button
                   id="reset-btn"
-                  className="btn-reset"
+                  className="btn-secondary"
                   onClick={handleReset}
-                  style={{ minWidth: 'auto', padding: '12px 16px' }}
+                  disabled={loading}
                 >
-                  🔄
+                  Reset
                 </button>
               )}
             </div>
           </div>
 
-          {/* Result */}
+          {/* Bagian Hasil & Inspeksi Latar Belakang */}
           {resultUrl && (
             <div className="result-section" id="result-section">
-              <div className="section-title">
-                ✅ Hasil Background Removed
-              </div>
-              <div className="result-card">
-                <div className="result-canvas">
-                  <img src={resultUrl} alt="Hasil remove background" className="result-img" id="result-image" />
-                </div>
-                <div className="result-actions">
+              <div className="result-header">
+                <span className="result-title">Hasil Pemotongan Background</span>
+                <div className="bg-inspector-group" role="group" aria-label="Pilihan latar inspeksi">
                   <button
-                    id="download-btn"
-                    className="btn-download"
-                    onClick={handleDownload}
+                    type="button"
+                    className={`bg-inspector-btn ${inspectorBg === 'checkerboard' ? 'active' : ''}`}
+                    onClick={() => setInspectorBg('checkerboard')}
                   >
-                    ⬇️ Download PNG Transparan
+                    Transparan
                   </button>
                   <button
-                    id="try-again-btn"
-                    className="btn-reset"
-                    onClick={handleReset}
+                    type="button"
+                    className={`bg-inspector-btn ${inspectorBg === 'white' ? 'active' : ''}`}
+                    onClick={() => setInspectorBg('white')}
                   >
-                    🔄 Coba Lagi
+                    Latar Putih
+                  </button>
+                  <button
+                    type="button"
+                    className={`bg-inspector-btn ${inspectorBg === 'dark' ? 'active' : ''}`}
+                    onClick={() => setInspectorBg('dark')}
+                  >
+                    Latar Gelap
+                  </button>
+                </div>
+              </div>
+
+              <div className={`result-canvas ${inspectorBg}`}>
+                <img
+                  src={resultUrl}
+                  alt="Hasil foto dengan background transparan"
+                  className="result-image"
+                  id="result-image"
+                />
+              </div>
+
+              <div className="result-footer-actions">
+                <button
+                  id="download-btn"
+                  className="btn-primary"
+                  onClick={handleDownload}
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                    <polyline points="7 10 12 15 17 10"/>
+                    <line x1="12" y1="15" x2="12" y2="3"/>
+                  </svg>
+                  Unduh PNG Transparan
+                </button>
+                <button
+                  id="try-again-btn"
+                  className="btn-secondary"
+                  onClick={handleReset}
+                >
+                  Coba Foto Lain
+                </button>
+              </div>
+
+              {/* Panel Proses Ulang dengan Model Alternatif */}
+              <div className="reprocess-panel">
+                <div className="reprocess-header">
+                  <span className="reprocess-title">Hasil Kurang Pas? Coba Model Alternatif</span>
+                  <span className="reprocess-desc">
+                    Ubah model atau aktifkan Alpha Matting lalu klik proses ulang langsung pada foto ini tanpa upload ulang.
+                  </span>
+                </div>
+                <div className="reprocess-controls">
+                  <div className="reprocess-field">
+                    <select
+                      id="reprocess-model-select"
+                      className="select-control"
+                      value={model}
+                      onChange={(e) => setModel(e.target.value)}
+                      disabled={loading}
+                    >
+                      {MODELS.map((m) => (
+                        <option key={m.value} value={m.value}>{m.label}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <label className="toggle-card" htmlFor="reprocess-alpha-toggle">
+                    <input
+                      id="reprocess-alpha-toggle"
+                      type="checkbox"
+                      checked={alphaMatting}
+                      onChange={(e) => setAlphaMatting(e.target.checked)}
+                      disabled={loading}
+                    />
+                    <span className="toggle-text">
+                      Alpha Matting
+                    </span>
+                  </label>
+                  <button
+                    type="button"
+                    className="btn-secondary"
+                    onClick={handleRemoveBg}
+                    disabled={loading || !turnstileToken}
+                  >
+                    {loading ? (
+                      <>
+                        <span className="spinner-icon" aria-hidden="true" />
+                        Memproses...
+                      </>
+                    ) : (
+                      <>
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                          <polyline points="23 4 23 10 17 10"/>
+                          <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+                        </svg>
+                        Proses Ulang
+                      </>
+                    )}
                   </button>
                 </div>
               </div>
             </div>
           )}
-        </div>
-      </main>
 
-      {/* Features */}
-      <section className="features">
-        <div className="container">
-          <div className="features-grid">
-            {[
-              { icon: '🤖', title: 'Powered by ZeroGPU', desc: 'Berjalan di HuggingFace ZeroGPU — gratis, cepat, dan tanpa antrian.' },
-              { icon: '🎯', title: '4 Model AI', desc: 'Pilih model terbaik sesuai kebutuhan: portrait, produk, atau objek umum.' },
-              { icon: '💎', title: 'Kualitas HD', desc: 'Hasilkan PNG transparan berkualitas tinggi tanpa kompresi.' },
-              { icon: '🔒', title: 'Privasi Terjaga', desc: 'Gambar tidak disimpan. Diproses langsung dan langsung dibuang.' },
-            ].map((f) => (
-              <div key={f.title} className="feature-card">
-                <span className="feature-icon">{f.icon}</span>
-                <div className="feature-title">{f.title}</div>
-                <div className="feature-desc">{f.desc}</div>
-              </div>
-            ))}
-          </div>
+          {/* Informasi Teknis & Spesifikasi Proyek */}
+          <section className="info-section">
+            <div className="info-grid">
+              <article className="info-card">
+                <h2>Panduan Model AI</h2>
+                <p>Pilih model yang tepat untuk hasil segmentasi paling optimal:</p>
+                <ul className="model-list">
+                  <li><strong>BiRefNet Portrait:</strong> Dirancang khusus untuk foto orang, mendeteksi lekuk pakaian dan helai rambut secara halus.</li>
+                  <li><strong>BiRefNet General:</strong> Optimal untuk foto produk, kemasan e-commerce, dan benda padat.</li>
+                  <li><strong>ISNet General:</strong> Model seimbang dengan kecepatan inferensi tinggi dan kualitas tajam.</li>
+                  <li><strong>ISNet Anime:</strong> Spesialis gambar kartun, ilustrasi 2D, anime, dan grafik vektor.</li>
+                  <li><strong>U2Net:</strong> Model umum klasik dengan toleransi tinggi terhadap berbagai tipe objek.</li>
+                  <li><strong>U2Net Human:</strong> Segmentasi manusia ringan untuk pemrosesan cepat.</li>
+                </ul>
+              </article>
+
+              <article className="info-card">
+                <h2>Spesifikasi & Privasi</h2>
+                <ul className="model-list">
+                  <li><strong>Format Masukan:</strong> Mendukung JPG, JPEG, PNG, dan WEBP hingga ukuran 20MB.</li>
+                  <li><strong>Format Keluaran:</strong> Format PNG 32-bit dengan saluran alpha transparan penuh tanpa kompresi rusak.</li>
+                  <li><strong>Pemrosesan Aman:</strong> Gambar diproses langsung pada memori inferensi Hugging Face ZeroGPU dan tidak disimpan secara permanen pada server.</li>
+                </ul>
+              </article>
+            </div>
+          </section>
         </div>
-      </section>
+      </main>
 
       {/* Footer */}
       <footer className="footer">
         <div className="container">
-          <p className="footer-text">
-            © 2026 RemBG · Backend:{' '}
-            <a href="https://huggingface.co/spaces/ilhamdev/rembg" target="_blank" rel="noopener">
-              HuggingFace Space ilhamdev/rembg
-            </a>{' '}
-            · Dibuat dengan ❤️
-          </p>
+          <div className="footer-content">
+            <span className="footer-text">
+              RemBG: Penghapus Background Foto AI
+            </span>
+            <div className="footer-links">
+              <a
+                href="https://huggingface.co/spaces/ilhamdev/rembg"
+                target="_blank"
+                rel="noreferrer"
+                className="footer-link"
+              >
+                Hugging Face ZeroGPU Space
+              </a>
+              <a
+                href="https://github.com/danielgatis/rembg"
+                target="_blank"
+                rel="noreferrer"
+                className="footer-link"
+              >
+                Pustaka rembg Python
+              </a>
+            </div>
+          </div>
         </div>
       </footer>
     </div>

frontend/src/app/robots.js

@@ -0,0 +1,12 @@
+const SITE_URL = (process.env.NEXT_PUBLIC_SITE_URL || 'https://rembg.vercel.app').replace(/\/+$/, '')
+
+export default function robots() {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: ['/api/'],
+    },
+    sitemap: `${SITE_URL}/sitemap.xml`,
+  }
+}

frontend/src/app/sitemap.js

@@ -0,0 +1,12 @@
+const SITE_URL = (process.env.NEXT_PUBLIC_SITE_URL || 'https://rembg.vercel.app').replace(/\/+$/, '')
+
+export default function sitemap() {
+  return [
+    {
+      url: SITE_URL,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 1.0,
+    },
+  ]
+}