PDF Tools Web App - compress, convert, watermark removal

.env.example

@@ -0,0 +1,24 @@
+# LocalTools Configuration
+# Copy this file to .env and customize as needed
+
+# Debug mode (enables detailed logging)
+LOCALTOOLS_DEBUG=false
+
+# Directory paths (relative to server.py)
+LOCALTOOLS_WORK_DIR=work
+LOCALTOOLS_OUTPUT_DIR=outputs
+LOCALTOOLS_STATIC_DIR=static
+
+# File size limits (in MB)
+LOCALTOOLS_MAX_PDF_SIZE_MB=100
+LOCALTOOLS_MAX_IMAGE_SIZE_MB=50
+
+# Minimum image dimension (filters out icons)
+LOCALTOOLS_MIN_IMAGE_DIMENSION=50
+
+# Request timeout (seconds)
+LOCALTOOLS_REQUEST_TIMEOUT=60
+
+# Cleanup settings
+LOCALTOOLS_CLEANUP_INTERVAL_HOURS=24
+LOCALTOOLS_FILE_RETENTION_HOURS=48

.gitignore

@@ -0,0 +1,32 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+venv/
+env/
+.env
+
+# Work directories (uploaded/processed files)
+work/
+outputs/
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+
+# Tesseract/DLLs (not needed for deployment)
+*.exe
+*.dll
+tessdata/
+doc/
+*.html
+!static/**/*.html

Procfile

@@ -0,0 +1 @@
+web: uvicorn server:app --host 0.0.0.0 --port ${PORT:-8000}

requirements.txt

@@ -0,0 +1,25 @@
+# LocalTools Dependencies
+
+# Web Framework
+fastapi>=0.104.0
+uvicorn[standard]>=0.24.0
+
+# Async HTTP
+aiohttp>=3.9.0
+
+# PDF Processing
+PyMuPDF>=1.23.0
+
+# Image Processing
+Pillow>=10.0.0
+opencv-python-headless>=4.8.0
+numpy>=1.24.0
+
+# Settings Management
+pydantic-settings>=2.0.0
+
+# OCR (requires Tesseract installed on system)
+# pytesseract>=0.3.10
+
+# AI Background Removal (optional - large dependency)
+# rembg>=2.0.0

runtime.txt

@@ -0,0 +1 @@
+python-3.11.7

static/css/styles.css

@@ -0,0 +1,2175 @@
+/* =============== CSS Variables - White Theme with Light Green =============== */
+:root {
+  --bg: #ffffff;
+  --card: #ffffff;
+  --card-solid: #ffffff;
+  --card-hover: #fafafa;
+  --text: #1a1a1a;
+  --text-secondary: #555555;
+  --text-muted: #888888;
+  --border: #e0e0e0;
+  --border-light: #f0f0f0;
+  --primary: #8bc34a;
+  --primary-hover: #7cb342;
+  --primary-light: rgba(139, 195, 74, 0.12);
+  --primary-glow: rgba(139, 195, 74, 0.25);
+  --success: #4caf50;
+  --success-light: rgba(76, 175, 80, 0.12);
+  --error: #e53935;
+  --error-light: rgba(229, 57, 53, 0.1);
+  --warning: #ffc107;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
+  --shadow: 0 2px 8px rgba(0,0,0,0.08);
+  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
+  --radius: 12px;
+  --radius-sm: 8px;
+  --radius-lg: 16px;
+  --sidebar-width: 260px;
+  --transition: 0.2s ease;
+}
+
+/* =============== Dark Theme =============== */
+[data-theme="dark"] {
+  --bg: #121212;
+  --card: #1e1e1e;
+  --card-solid: #1e1e1e;
+  --card-hover: #252525;
+  --text: #f5f5f5;
+  --text-secondary: #b0b0b0;
+  --text-muted: #808080;
+  --border: #333333;
+  --border-light: #2a2a2a;
+  --primary: #aed581;
+  --primary-hover: #8bc34a;
+  --primary-light: rgba(174, 213, 129, 0.15);
+  --primary-glow: rgba(174, 213, 129, 0.3);
+  --shadow: 0 2px 8px rgba(0,0,0,0.3);
+  --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
+}
+
+
+/* =============== Reset & Base =============== */
+* { 
+  box-sizing: border-box; 
+  margin: 0; 
+  padding: 0; 
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+  transition: background var(--transition), color var(--transition);
+}
+
+/* =============== App Layout =============== */
+.app-container {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* =============== Animated Background (disabled for white theme) =============== */
+.animated-bg {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background: var(--bg);
+}
+
+/* =============== Sidebar Navigation =============== */
+.sidebar {
+  width: var(--sidebar-width);
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: var(--card);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  transition: transform var(--transition), background var(--transition);
+}
+
+.sidebar-header {
+  padding: 24px 20px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo-icon {
+  width: 44px;
+  height: 44px;
+  background: var(--primary);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 700;
+  font-size: 18px;
+  transition: transform var(--transition);
+}
+
+.logo:hover .logo-icon {
+  transform: scale(1.05);
+}
+
+
+.logo-text h1 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.5px;
+}
+
+.logo-text span {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Sidebar Navigation */
+.sidebar-nav {
+  flex: 1;
+  padding: 16px 12px;
+  overflow-y: auto;
+}
+
+.nav-section {
+  margin-bottom: 24px;
+}
+
+.nav-section-title {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 0 12px;
+  margin-bottom: 8px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  transition: all var(--transition);
+  position: relative;
+}
+
+.nav-item:hover {
+  color: var(--text);
+  background: var(--primary-light);
+}
+
+.nav-item.active {
+  color: var(--primary);
+  background: var(--primary-light);
+}
+
+.nav-item.active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 24px;
+  background: var(--primary);
+  border-radius: 0 3px 3px 0;
+}
+
+.nav-item svg {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+/* Sidebar Footer */
+.sidebar-footer {
+  padding: 16px;
+  border-top: 1px solid var(--border-light);
+}
+
+
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--border-light);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background var(--transition);
+}
+
+.theme-toggle:hover {
+  background: var(--border);
+}
+
+.theme-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.theme-toggle-label svg {
+  width: 18px;
+  height: 18px;
+}
+
+.theme-switch {
+  width: 44px;
+  height: 24px;
+  background: var(--border);
+  border-radius: 12px;
+  position: relative;
+  transition: background var(--transition);
+}
+
+.theme-switch::after {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  background: white;
+  border-radius: 50%;
+  top: 3px;
+  left: 3px;
+  transition: transform var(--transition);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+[data-theme="dark"] .theme-switch {
+  background: var(--primary);
+}
+
+[data-theme="dark"] .theme-switch::after {
+  transform: translateX(20px);
+}
+
+/* =============== Main Content =============== */
+.main-content {
+  flex: 1;
+  margin-left: var(--sidebar-width);
+  min-height: 100vh;
+  padding: 24px 32px;
+  transition: margin var(--transition);
+}
+
+/* =============== Breadcrumbs =============== */
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+  font-size: 13px;
+}
+
+.breadcrumb-item {
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.breadcrumb-item a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color var(--transition);
+}
+
+.breadcrumb-item a:hover {
+  color: var(--primary);
+}
+
+.breadcrumb-item.active {
+  color: var(--text);
+  font-weight: 500;
+}
+
+.breadcrumb-separator {
+  color: var(--text-muted);
+}
+
+
+/* =============== Page Header =============== */
+.page-header {
+  margin-bottom: 28px;
+}
+
+.page-header h2 {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  letter-spacing: -0.5px;
+  color: var(--text);
+}
+
+.page-header p {
+  color: var(--text-secondary);
+  font-size: 15px;
+  max-width: 600px;
+  line-height: 1.7;
+}
+
+/* =============== Pages =============== */
+.page {
+  display: none;
+  animation: pageIn 0.3s ease;
+}
+
+.page.active {
+  display: block;
+}
+
+@keyframes pageIn {
+  from { 
+    opacity: 0; 
+    transform: translateY(10px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0); 
+  }
+}
+
+/* =============== Cards =============== */
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: transform var(--transition), box-shadow var(--transition);
+}
+
+.card:hover {
+  box-shadow: var(--shadow);
+}
+
+.card + .card {
+  margin-top: 20px;
+}
+
+.card-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.card-header h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.card-header h3 svg {
+  width: 20px;
+  height: 20px;
+  color: var(--primary);
+}
+
+.card-header p {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.card-body {
+  padding: 24px;
+}
+
+
+/* =============== Form Elements =============== */
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 8px;
+}
+
+.form-label .optional {
+  color: var(--text-muted);
+  font-weight: 400;
+  font-size: 12px;
+}
+
+.form-input, .form-select {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  color: var(--text);
+  background: var(--card-solid);
+  transition: all var(--transition);
+}
+
+.form-input:focus, .form-select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+.form-input::placeholder {
+  color: var(--text-muted);
+}
+
+/* =============== Grid Layouts =============== */
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+@media (max-width: 768px) {
+  .grid-2, .grid-3, .grid-4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* =============== Buttons =============== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: var(--primary-hover);
+}
+
+.btn-secondary {
+  background: var(--card-solid);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+.btn-secondary:hover {
+  background: var(--card-hover);
+  border-color: var(--primary);
+}
+
+.btn-success {
+  background: var(--success);
+  color: white;
+}
+
+.btn-success:hover {
+  opacity: 0.9;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+.btn-group {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+
+/* =============== Status Messages =============== */
+.status {
+  padding: 14px 18px;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.status-info {
+  background: var(--primary-light);
+  color: var(--primary);
+  border: 1px solid rgba(139, 195, 74, 0.25);
+}
+
+.status-success {
+  background: var(--success-light);
+  color: var(--success);
+  border: 1px solid rgba(76, 175, 80, 0.25);
+}
+
+.status-error {
+  background: var(--error-light);
+  color: var(--error);
+  border: 1px solid rgba(229, 57, 53, 0.25);
+}
+
+/* =============== Split View Preview =============== */
+.preview-container {
+  position: relative;
+}
+
+.preview-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.preview-tabs {
+  display: flex;
+  gap: 8px;
+}
+
+.preview-tab {
+  padding: 10px 20px;
+  border: 1px solid var(--border);
+  background: var(--card-solid);
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition);
+}
+
+.preview-tab:hover {
+  border-color: var(--primary);
+  color: var(--text);
+}
+
+.preview-tab.active {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+.preview-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.preview-action-btn {
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--border);
+  background: var(--card-solid);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  transition: all var(--transition);
+}
+
+.preview-action-btn:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+  background: var(--primary-light);
+}
+
+.preview-action-btn.active {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+.preview-action-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+
+/* Single Preview Panel */
+.preview-panel {
+  display: none;
+}
+
+.preview-panel.active {
+  display: block;
+}
+
+.preview-frame {
+  width: 100%;
+  height: 500px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--card-solid);
+  overflow: hidden;
+}
+
+.preview-frame iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* Split View */
+.split-view {
+  display: none;
+  gap: 16px;
+}
+
+.split-view.active {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.split-panel {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--card-solid);
+}
+
+.split-panel-header {
+  padding: 12px 16px;
+  background: var(--border-light);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-light);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.split-panel-header .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.split-panel-header .dot.before {
+  background: var(--text-muted);
+}
+
+.split-panel-header .dot.after {
+  background: var(--success);
+}
+
+.split-panel iframe {
+  width: 100%;
+  height: 450px;
+  border: none;
+}
+
+/* Fullscreen Preview */
+.fullscreen-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--bg);
+  z-index: 1000;
+  display: none;
+  flex-direction: column;
+}
+
+.fullscreen-overlay.active {
+  display: flex;
+}
+
+.fullscreen-header {
+  padding: 16px 24px;
+  background: var(--card);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.fullscreen-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.fullscreen-close {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: var(--border-light);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  transition: all var(--transition);
+}
+
+.fullscreen-close:hover {
+  background: var(--error-light);
+  color: var(--error);
+}
+
+.fullscreen-content {
+  flex: 1;
+  padding: 24px;
+  overflow: hidden;
+}
+
+.fullscreen-content iframe {
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+
+/* =============== Drag & Drop Zone =============== */
+.drop-zone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius);
+  padding: 40px 24px;
+  text-align: center;
+  transition: all var(--transition);
+  cursor: pointer;
+  background: var(--border-light);
+}
+
+.drop-zone:hover,
+.drop-zone.drag-over {
+  border-color: var(--primary);
+  background: var(--primary-light);
+}
+
+.drop-zone-icon {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 16px;
+  color: var(--text-muted);
+  transition: transform var(--transition), color var(--transition);
+  pointer-events: none;
+}
+
+.drop-zone:hover .drop-zone-icon,
+.drop-zone.drag-over .drop-zone-icon {
+  color: var(--primary);
+  transform: scale(1.1);
+}
+
+.drop-zone-text {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+  pointer-events: none;
+}
+
+.drop-zone-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.drop-zone-file {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 14px 18px;
+  background: var(--card-solid);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  margin-top: 16px;
+}
+
+.drop-zone-file.active {
+  display: flex;
+}
+
+.drop-zone-file-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.drop-zone-file-size {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.drop-zone-file-remove {
+  margin-left: auto;
+  padding: 6px 12px;
+  background: var(--error-light);
+  color: var(--error);
+  border: none;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.drop-zone-file-remove:hover {
+  background: var(--error);
+  color: white;
+}
+
+/* =============== Skeleton Loaders =============== */
+.skeleton {
+  background: var(--border-light);
+  animation: shimmer 1.5s infinite;
+  border-radius: var(--radius-sm);
+}
+
+@keyframes shimmer {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+
+.skeleton-text {
+  height: 16px;
+  margin-bottom: 8px;
+}
+
+.skeleton-text:last-child {
+  width: 60%;
+}
+
+.skeleton-image {
+  height: 140px;
+  border-radius: var(--radius-sm);
+}
+
+.skeleton-card {
+  padding: 16px;
+  background: var(--card);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+}
+
+/* Image Grid Skeleton */
+.image-grid-skeleton {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.image-card-skeleton {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.image-card-skeleton .skeleton-image {
+  border-radius: 0;
+}
+
+.image-card-skeleton .skeleton-meta {
+  padding: 12px;
+}
+
+
+/* =============== Image Grid =============== */
+.image-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-light);
+  margin-bottom: 20px;
+}
+
+.image-toolbar-left,
+.image-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.counter-badge {
+  padding: 10px 16px;
+  background: var(--primary-light);
+  border: 1px solid rgba(139, 195, 74, 0.2);
+  border-radius: 20px;
+  font-size: 13px;
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.image-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  transition: all var(--transition);
+  cursor: pointer;
+  position: relative;
+}
+
+.image-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
+  border-color: var(--primary);
+}
+
+.image-card.selected {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px var(--primary-light);
+}
+
+.image-thumb {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+  background: var(--border-light);
+  transition: transform var(--transition);
+}
+
+.image-card:hover .image-thumb {
+  transform: scale(1.02);
+}
+
+.image-meta {
+  padding: 14px;
+}
+
+.image-filename {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 10px;
+}
+
+.image-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.image-badge {
+  font-size: 11px;
+  padding: 4px 10px;
+  background: var(--border-light);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.image-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.image-checkbox input {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--primary);
+  cursor: pointer;
+}
+
+.image-preview-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 36px;
+  height: 36px;
+  background: rgba(0,0,0,0.6);
+  border: none;
+  border-radius: 8px;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transform: scale(0.8);
+  transition: all var(--transition);
+  z-index: 10;
+}
+
+.image-card:hover .image-preview-btn {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.image-preview-btn:hover {
+  background: var(--primary);
+}
+
+.image-preview-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+
+/* =============== Download Section =============== */
+.download-section {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.download-section .form-input {
+  width: 140px;
+  padding: 10px 14px;
+}
+
+/* =============== Toast Notifications =============== */
+.toast-container {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 400px;
+}
+
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 16px 18px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  animation: toastIn 0.3s ease;
+}
+
+.toast.hiding {
+  animation: toastOut 0.3s ease forwards;
+}
+
+@keyframes toastIn {
+  from { 
+    transform: translateX(100%); 
+    opacity: 0; 
+  }
+  to { 
+    transform: translateX(0); 
+    opacity: 1; 
+  }
+}
+
+@keyframes toastOut {
+  from { 
+    transform: translateX(0); 
+    opacity: 1; 
+  }
+  to { 
+    transform: translateX(100%); 
+    opacity: 0; 
+  }
+}
+
+.toast-icon {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.toast-success .toast-icon { color: var(--success); }
+.toast-error .toast-icon { color: var(--error); }
+.toast-info .toast-icon { color: var(--primary); }
+
+.toast-content {
+  flex: 1;
+}
+
+.toast-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 2px;
+}
+
+.toast-message {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.toast-close {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: var(--text-muted);
+  border-radius: 6px;
+  transition: all var(--transition);
+}
+
+.toast-close:hover {
+  background: var(--border-light);
+  color: var(--text);
+}
+
+
+/* =============== Modal =============== */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 1000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.modal-overlay.active {
+  display: flex;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.modal-content {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  background: var(--card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+  animation: modalIn 0.3s ease;
+}
+
+@keyframes modalIn {
+  from { 
+    transform: scale(0.95); 
+    opacity: 0; 
+  }
+  to { 
+    transform: scale(1); 
+    opacity: 1; 
+  }
+}
+
+.modal-image {
+  max-width: 100%;
+  max-height: 75vh;
+  display: block;
+}
+
+.modal-footer {
+  padding: 18px 24px;
+  background: var(--card);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.modal-info {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.modal-info strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.modal-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 40px;
+  height: 40px;
+  background: rgba(0,0,0,0.5);
+  border: none;
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition);
+}
+
+.modal-close:hover {
+  background: var(--error);
+}
+
+/* =============== Progress Bar =============== */
+.progress-container {
+  margin-top: 16px;
+  display: none;
+}
+
+.progress-container.active {
+  display: block;
+}
+
+.progress-bar {
+  height: 6px;
+  background: var(--border);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--primary);
+  border-radius: 3px;
+  width: 0%;
+  transition: width 0.3s ease;
+}
+
+.progress-fill.indeterminate {
+  width: 30%;
+  animation: indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}
+
+.progress-text {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 8px;
+  text-align: center;
+}
+
+/* =============== Spinner =============== */
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.btn.loading {
+  pointer-events: none;
+}
+
+
+/* =============== Form Validation =============== */
+.form-group.error .form-input,
+.form-group.error .form-select {
+  border-color: var(--error);
+}
+
+.form-group.error .form-input:focus {
+  box-shadow: 0 0 0 3px var(--error-light);
+}
+
+.form-error {
+  display: none;
+  font-size: 12px;
+  color: var(--error);
+  margin-top: 6px;
+  align-items: center;
+  gap: 6px;
+}
+
+.form-group.error .form-error {
+  display: flex;
+}
+
+.form-error svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* =============== Keyboard Hints =============== */
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 8px;
+  background: var(--border-light);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 10px;
+  font-family: monospace;
+  color: var(--text-muted);
+  margin-left: 8px;
+}
+
+/* =============== Responsive =============== */
+@media (max-width: 1024px) {
+  .sidebar {
+    transform: translateX(-100%);
+  }
+  
+  .sidebar.open {
+    transform: translateX(0);
+  }
+  
+  .main-content {
+    margin-left: 0;
+  }
+  
+  .mobile-menu-btn {
+    display: flex;
+  }
+  
+  .split-view.active {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .main-content {
+    padding: 16px;
+  }
+  
+  .page-header h2 {
+    font-size: 22px;
+  }
+  
+  .image-toolbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .download-section {
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .download-section .form-input {
+    width: 100%;
+  }
+}
+
+/* Mobile Menu Button */
+.mobile-menu-btn {
+  display: none;
+  position: fixed;
+  top: 16px;
+  left: 16px;
+  z-index: 101;
+  width: 44px;
+  height: 44px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  color: var(--text);
+}
+
+@media (max-width: 1024px) {
+  .mobile-menu-btn {
+    display: flex;
+  }
+}
+
+/* Sidebar Overlay */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 99;
+}
+
+.sidebar-overlay.active {
+  display: block;
+}
+
+
+/* =============== Tooltips =============== */
+.tooltip {
+  position: relative;
+}
+
+.tooltip::before,
+.tooltip::after {
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s ease;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.tooltip::before {
+  content: attr(data-tooltip);
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 12px;
+  background: var(--text);
+  color: var(--bg);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+}
+
+.tooltip::after {
+  content: '';
+  bottom: calc(100% + 2px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-top-color: var(--text);
+}
+
+.tooltip:hover::before,
+.tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Tooltip positions */
+.tooltip-bottom::before {
+  bottom: auto;
+  top: calc(100% + 8px);
+}
+
+.tooltip-bottom::after {
+  bottom: auto;
+  top: calc(100% + 2px);
+  border-top-color: transparent;
+  border-bottom-color: var(--text);
+}
+
+.tooltip-left::before {
+  bottom: auto;
+  left: auto;
+  right: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.tooltip-left::after {
+  bottom: auto;
+  left: auto;
+  right: calc(100% + 2px);
+  top: 50%;
+  border-top-color: transparent;
+  border-left-color: var(--text);
+  transform: translateY(-50%);
+}
+
+/* =============== Step Indicator =============== */
+.step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.step-number {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--border-light);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition);
+}
+
+.step-number svg {
+  width: 16px;
+  height: 16px;
+}
+
+.step.active .step-number {
+  background: var(--primary);
+  color: white;
+}
+
+.step.completed .step-number {
+  background: var(--success);
+  color: white;
+}
+
+.step-label {
+  font-size: 13px;
+  color: var(--text-muted);
+  font-weight: 500;
+  transition: color var(--transition);
+}
+
+.step.active .step-label {
+  color: var(--text);
+}
+
+.step.completed .step-label {
+  color: var(--success);
+}
+
+.step-connector {
+  width: 40px;
+  height: 2px;
+  background: var(--border);
+  border-radius: 1px;
+  position: relative;
+  overflow: hidden;
+}
+
+.step-connector::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 0%;
+  background: var(--success);
+  transition: width 0.5s ease;
+}
+
+.step-connector.completed::after {
+  width: 100%;
+}
+
+
+/* =============== Success Animation =============== */
+.success-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(139, 195, 74, 0.1);
+  z-index: 1000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  animation: successFadeIn 0.3s ease;
+}
+
+.success-overlay.active {
+  display: flex;
+}
+
+@keyframes successFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.success-content {
+  text-align: center;
+  animation: successBounce 0.4s ease;
+}
+
+@keyframes successBounce {
+  0% { transform: scale(0.8); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+.success-icon {
+  width: 80px;
+  height: 80px;
+  background: var(--success);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+  box-shadow: var(--shadow-lg);
+}
+
+.success-icon svg {
+  width: 40px;
+  height: 40px;
+  color: white;
+}
+
+.success-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 8px;
+}
+
+.success-message {
+  font-size: 15px;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+}
+
+/* Confetti effect */
+.confetti {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  animation: confettiFall 3s ease-out forwards;
+}
+
+@keyframes confettiFall {
+  0% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(400px) rotate(720deg);
+    opacity: 0;
+  }
+}
+
+/* =============== Error States =============== */
+.error-state {
+  padding: 40px 24px;
+  text-align: center;
+  background: var(--error-light);
+  border: 1px solid rgba(229, 57, 53, 0.2);
+  border-radius: var(--radius);
+  margin-top: 16px;
+}
+
+.error-state-icon {
+  width: 64px;
+  height: 64px;
+  background: rgba(229, 57, 53, 0.15);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+}
+
+.error-state-icon svg {
+  width: 32px;
+  height: 32px;
+  color: var(--error);
+}
+
+.error-state-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--error);
+  margin-bottom: 8px;
+}
+
+.error-state-message {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.error-state-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.error-state .btn {
+  min-width: 120px;
+}
+
+/* Inline error with action */
+.inline-error {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  background: var(--error-light);
+  border: 1px solid rgba(229, 57, 53, 0.3);
+  border-radius: var(--radius-sm);
+  margin-top: 16px;
+}
+
+.inline-error-icon {
+  width: 40px;
+  height: 40px;
+  background: rgba(229, 57, 53, 0.15);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.inline-error-icon svg {
+  width: 20px;
+  height: 20px;
+  color: var(--error);
+}
+
+.inline-error-content {
+  flex: 1;
+}
+
+.inline-error-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--error);
+  margin-bottom: 2px;
+}
+
+.inline-error-message {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.inline-error-action {
+  padding: 8px 16px;
+  background: var(--error);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.inline-error-action:hover {
+  opacity: 0.9;
+}
+
+
+/* =============== Empty States =============== */
+.empty-state {
+  padding: 60px 24px;
+  text-align: center;
+}
+
+.empty-state-illustration {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto 24px;
+  background: var(--primary-light);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.empty-state-illustration::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  border: 2px dashed var(--border);
+  animation: emptyRotate 20s linear infinite;
+}
+
+@keyframes emptyRotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.empty-state-illustration svg {
+  width: 48px;
+  height: 48px;
+  color: var(--primary);
+}
+
+.empty-state-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 8px;
+}
+
+.empty-state-message {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+  max-width: 360px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.6;
+}
+
+.empty-state-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* Empty state for preview */
+.preview-empty {
+  height: 100%;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--border-light);
+  border-radius: var(--radius);
+  border: 2px dashed var(--border);
+}
+
+.preview-empty-icon {
+  width: 80px;
+  height: 80px;
+  background: var(--card);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  box-shadow: var(--shadow);
+}
+
+.preview-empty-icon svg {
+  width: 36px;
+  height: 36px;
+  color: var(--text-muted);
+}
+
+.preview-empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 6px;
+}
+
+.preview-empty-message {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* Empty state for image grid */
+.image-grid-empty {
+  grid-column: 1 / -1;
+  padding: 60px 24px;
+  text-align: center;
+  background: var(--border-light);
+  border-radius: var(--radius);
+  border: 2px dashed var(--border);
+}
+
+.image-grid-empty-icon {
+  width: 72px;
+  height: 72px;
+  background: var(--card);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  box-shadow: var(--shadow);
+}
+
+.image-grid-empty-icon svg {
+  width: 32px;
+  height: 32px;
+  color: var(--text-muted);
+}
+
+.image-grid-empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 6px;
+}
+
+.image-grid-empty-message {
+  font-size: 13px;
+  color: var(--text-muted);
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+
+/* =============== Help Tips =============== */
+.help-tip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  background: var(--border-light);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  cursor: help;
+  margin-left: 6px;
+  transition: all var(--transition);
+}
+
+.help-tip:hover {
+  background: var(--primary-light);
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+/* =============== Feature Hints =============== */
+.feature-hint {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  background: var(--primary-light);
+  border: 1px solid rgba(139, 195, 74, 0.2);
+  border-radius: var(--radius-sm);
+  margin-bottom: 20px;
+}
+
+.feature-hint-icon {
+  width: 36px;
+  height: 36px;
+  background: var(--primary);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.feature-hint-icon svg {
+  width: 18px;
+  height: 18px;
+  color: white;
+}
+
+.feature-hint-content {
+  flex: 1;
+}
+
+.feature-hint-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 2px;
+}
+
+.feature-hint-message {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.feature-hint-dismiss {
+  padding: 4px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all var(--transition);
+}
+
+.feature-hint-dismiss:hover {
+  background: var(--border-light);
+  color: var(--text);
+}
+
+/* =============== Setup Notice =============== */
+.setup-notice {
+  background: var(--primary-light);
+  border: 1px solid rgba(139, 195, 74, 0.25);
+  border-radius: var(--radius-sm);
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.setup-notice-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: rgba(139, 195, 74, 0.1);
+  border-bottom: 1px solid rgba(139, 195, 74, 0.15);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.setup-notice-header svg {
+  width: 16px;
+  height: 16px;
+}
+
+.setup-notice-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  border-radius: 4px;
+  transition: all var(--transition);
+}
+
+.setup-notice-close:hover {
+  background: rgba(139, 195, 74, 0.2);
+  color: var(--text);
+}
+
+.setup-notice-body {
+  padding: 12px;
+}
+
+.setup-notice-body p {
+  font-size: 11px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.setup-notice-code {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--card-solid);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  margin-bottom: 8px;
+}
+
+.setup-notice-code code {
+  flex: 1;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 11px;
+  color: var(--text);
+  word-break: break-all;
+}
+
+.copy-btn {
+  background: var(--border-light);
+  border: none;
+  padding: 4px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition: all var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copy-btn:hover {
+  background: var(--primary-light);
+  color: var(--primary);
+}
+
+.copy-btn.copied {
+  background: var(--success-light);
+  color: var(--success);
+}
+
+.setup-notice-hint {
+  font-size: 10px !important;
+  color: var(--text-muted) !important;
+  margin-bottom: 0 !important;
+  margin-top: 4px;
+}
+
+.setup-notice-hint strong {
+  color: var(--primary);
+}
+
+.setup-notice-or {
+  font-size: 10px !important;
+  color: var(--text-muted) !important;
+  text-align: center;
+  margin: 4px 0 !important;
+}
+
+/* Hidden state */
+.setup-notice.hidden {
+  display: none;
+}

static/js/app.js

@@ -0,0 +1,298 @@
+/**
+ * LocalTools - Main Application
+ * Handles navigation, theme, and global features
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  initTheme();
+  initNavigation();
+  initMobileMenu();
+  initSetupNotice();
+  initPdfEditor();
+  initImageScraper();
+  initGlobalShortcuts();
+  initPdfTools();
+  initImageTools();
+});
+
+/**
+ * Theme Management
+ */
+function initTheme() {
+  const themeToggle = document.getElementById('themeToggle');
+  const savedTheme = localStorage.getItem('theme') || 'light';
+  
+  document.documentElement.setAttribute('data-theme', savedTheme);
+  
+  themeToggle.addEventListener('click', () => {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    
+    showToast(
+      newTheme === 'dark' ? 'Dark Mode' : 'Light Mode',
+      'Theme updated',
+      'success',
+      2000
+    );
+  });
+}
+
+/**
+ * Setup Notice
+ */
+function initSetupNotice() {
+  const notice = document.getElementById('setupNotice');
+  const closeBtn = document.getElementById('closeSetupNotice');
+  
+  // Check if dismissed
+  if (localStorage.getItem('setupNoticeDismissed')) {
+    notice.classList.add('hidden');
+  }
+  
+  // Close button
+  closeBtn.addEventListener('click', () => {
+    notice.classList.add('hidden');
+    localStorage.setItem('setupNoticeDismissed', 'true');
+  });
+  
+  // Copy buttons
+  document.querySelectorAll('.copy-btn').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const text = btn.dataset.copy;
+      
+      try {
+        await navigator.clipboard.writeText(text);
+        btn.classList.add('copied');
+        showToast('Copied!', text, 'success', 2000);
+        
+        setTimeout(() => {
+          btn.classList.remove('copied');
+        }, 2000);
+      } catch (err) {
+        showToast('Copy failed', 'Please copy manually', 'error');
+      }
+    });
+  });
+}
+
+/**
+ * Sidebar Navigation
+ */
+function initNavigation() {
+  const navItems = document.querySelectorAll('.nav-item[data-page]');
+  const pages = document.querySelectorAll('.page');
+
+  navItems.forEach(item => {
+    item.addEventListener('click', () => {
+      const targetPage = item.dataset.page;
+      switchToPage(targetPage);
+      
+      // Close mobile menu
+      closeMobileMenu();
+    });
+  });
+}
+
+function switchToPage(pageName) {
+  const navItems = document.querySelectorAll('.nav-item[data-page]');
+  const pages = document.querySelectorAll('.page');
+  
+  navItems.forEach(item => {
+    item.classList.toggle('active', item.dataset.page === pageName);
+  });
+  
+  pages.forEach(page => {
+    page.classList.toggle('active', page.id === `page-${pageName}`);
+  });
+}
+
+/**
+ * Mobile Menu
+ */
+function initMobileMenu() {
+  const menuBtn = document.getElementById('mobileMenuBtn');
+  const sidebar = document.getElementById('sidebar');
+  const overlay = document.getElementById('sidebarOverlay');
+  
+  menuBtn.addEventListener('click', () => {
+    sidebar.classList.toggle('open');
+    overlay.classList.toggle('active');
+  });
+  
+  overlay.addEventListener('click', closeMobileMenu);
+}
+
+function closeMobileMenu() {
+  const sidebar = document.getElementById('sidebar');
+  const overlay = document.getElementById('sidebarOverlay');
+  sidebar.classList.remove('open');
+  overlay.classList.remove('active');
+}
+
+/**
+ * Global Keyboard Shortcuts
+ */
+function initGlobalShortcuts() {
+  registerShortcut('1', () => switchToPage('pdf'), 'PDF Editor');
+  registerShortcut('2', () => switchToPage('watermark'), 'Watermark Remover');
+  registerShortcut('3', () => switchToPage('img2pdf'), 'Images to PDF');
+  registerShortcut('4', () => switchToPage('merge'), 'Merge PDFs');
+  registerShortcut('5', () => switchToPage('split'), 'Split PDF');
+  registerShortcut('6', () => switchToPage('images'), 'Image Scraper');
+  
+  registerShortcut('ctrl+k', () => {
+    document.getElementById('themeToggle').click();
+  }, 'Toggle Theme');
+  
+  registerShortcut('?', () => {
+    showKeyboardShortcutsModal();
+  }, 'Show Shortcuts');
+  
+  // Nav button handlers
+  document.getElementById('navRecentFiles').addEventListener('click', showRecentFilesModal);
+  document.getElementById('navKeyboardShortcuts').addEventListener('click', showKeyboardShortcutsModal);
+  
+  // Initialize watermark removal page
+  initWatermarkRemoval();
+}
+
+/**
+ * Recent Files Modal
+ */
+function showRecentFilesModal() {
+  const recentFiles = JSON.parse(localStorage.getItem('recentFiles') || '[]');
+  
+  let content = '';
+  if (recentFiles.length === 0) {
+    content = `
+      <div class="empty-state" style="padding: 40px 20px;">
+        <div class="empty-state-illustration" style="width: 80px; height: 80px;">
+          <svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </div>
+        <div class="empty-state-title" style="font-size: 16px;">No Recent Files</div>
+        <div class="empty-state-message" style="font-size: 13px;">Files you work with will appear here</div>
+      </div>
+    `;
+  } else {
+    content = `
+      <div style="padding: 16px;">
+        <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text);">Recent Files</div>
+        <div style="display: flex; flex-direction: column; gap: 8px;">
+          ${recentFiles.map(file => `
+            <div style="display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--border-light); border-radius: 8px;">
+              <svg width="20" height="20" fill="none" stroke="var(--primary)" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+              </svg>
+              <div style="flex: 1; min-width: 0;">
+                <div style="font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${file.name}</div>
+                <div style="font-size: 11px; color: var(--text-muted);">${file.date}</div>
+              </div>
+            </div>
+          `).join('')}
+        </div>
+        <button class="btn btn-secondary" style="width: 100%; margin-top: 12px;" onclick="clearRecentFiles()">Clear History</button>
+      </div>
+    `;
+  }
+  
+  showModal('Recent Files', content);
+}
+
+function addToRecentFiles(name, type) {
+  const recentFiles = JSON.parse(localStorage.getItem('recentFiles') || '[]');
+  const newFile = {
+    name: name,
+    type: type,
+    date: new Date().toLocaleDateString()
+  };
+  
+  // Remove duplicate if exists
+  const filtered = recentFiles.filter(f => f.name !== name);
+  filtered.unshift(newFile);
+  
+  // Keep only last 10
+  localStorage.setItem('recentFiles', JSON.stringify(filtered.slice(0, 10)));
+}
+
+function clearRecentFiles() {
+  localStorage.removeItem('recentFiles');
+  closeModal();
+  showToast('Cleared', 'Recent files history cleared', 'success', 2000);
+}
+
+/**
+ * Keyboard Shortcuts Modal
+ */
+function showKeyboardShortcutsModal() {
+  const shortcuts = [
+    { key: '1', desc: 'PDF Editor' },
+    { key: '2', desc: 'Watermark Remover' },
+    { key: '3', desc: 'Images to PDF' },
+    { key: '4', desc: 'Merge PDFs' },
+    { key: '5', desc: 'Split PDF' },
+    { key: '6', desc: 'Image Scraper' },
+    { key: 'Ctrl + K', desc: 'Toggle theme' },
+    { key: '?', desc: 'Show this help' },
+  ];
+  
+  const content = `
+    <div style="padding: 16px;">
+      <div style="display: flex; flex-direction: column; gap: 8px;">
+        ${shortcuts.map(s => `
+          <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--border-light); border-radius: 8px;">
+            <span style="font-size: 13px; color: var(--text-secondary);">${s.desc}</span>
+            <kbd class="kbd" style="margin-left: 0;">${s.key}</kbd>
+          </div>
+        `).join('')}
+      </div>
+    </div>
+  `;
+  
+  showModal('Keyboard Shortcuts', content);
+}
+
+/**
+ * Generic Modal
+ */
+function showModal(title, content) {
+  // Remove existing modal if any
+  closeModal();
+  
+  const modal = document.createElement('div');
+  modal.className = 'modal-overlay active';
+  modal.id = 'genericModal';
+  modal.innerHTML = `
+    <div class="modal-content" style="max-width: 400px; width: 100%;">
+      <button class="modal-close" onclick="closeModal()">
+        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>
+      <div style="padding: 20px 24px; border-bottom: 1px solid var(--border);">
+        <h3 style="font-size: 16px; font-weight: 600; color: var(--text);">${title}</h3>
+      </div>
+      ${content}
+    </div>
+  `;
+  
+  modal.addEventListener('click', (e) => {
+    if (e.target === modal) closeModal();
+  });
+  
+  document.body.appendChild(modal);
+}
+
+function closeModal() {
+  const modal = document.getElementById('genericModal');
+  if (modal) modal.remove();
+}
+
+// Close modal on Escape
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeModal();
+});

static/js/image-scraper.js

@@ -0,0 +1,353 @@
+/**
+ * Image Scraper Module
+ */
+
+let currentJobId = null;
+let currentImages = [];
+let imageStepIndicator = null;
+
+function initImageScraper() {
+  const elements = {
+    grid: document.getElementById('imgGrid'),
+    counter: document.getElementById('img_counter'),
+    toolbar: document.getElementById('imageToolbar'),
+    skeleton: document.getElementById('imageSkeleton'),
+    btnScrape: document.getElementById('btnScrape'),
+    btnSelectAll: document.getElementById('btnSelectAll'),
+    btnSelectNone: document.getElementById('btnSelectNone'),
+    btnZip: document.getElementById('btnZip'),
+    btnPdf: document.getElementById('btnPdf'),
+    zipName: document.getElementById('zip_name'),
+    pdfName: document.getElementById('pdf_name'),
+    pageUrl: document.getElementById('page_url'),
+    progress: document.getElementById('imgProgress')
+  };
+
+  // Initialize step indicator
+  imageStepIndicator = new StepIndicator('imageStepIndicator', [
+    'Enter URL',
+    'Fetch Images',
+    'Select',
+    'Download'
+  ]);
+
+  // Show empty state initially
+  showImageGridEmpty(elements.grid);
+
+  // Event listeners
+  elements.btnScrape.addEventListener('click', () => handleScrapeImages(elements));
+  elements.btnSelectAll.addEventListener('click', () => selectAllImages(elements));
+  elements.btnSelectNone.addEventListener('click', () => clearImageSelection(elements));
+
+  elements.btnZip.addEventListener('click', () => {
+    let name = elements.zipName.value.trim() || 'images.zip';
+    if (!name.toLowerCase().endsWith('.zip')) name += '.zip';
+    handleDownload('/api/download-zip', 'zip_name', name, elements);
+  });
+
+  elements.btnPdf.addEventListener('click', () => {
+    let name = elements.pdfName.value.trim() || 'images.pdf';
+    if (!name.toLowerCase().endsWith('.pdf')) name += '.pdf';
+    handleDownload('/api/download-pdf', 'pdf_name', name, elements);
+  });
+
+  // URL input - update step
+  elements.pageUrl.addEventListener('input', () => {
+    if (elements.pageUrl.value.trim()) {
+      imageStepIndicator.setStep(1);
+    }
+    clearFieldError(elements.pageUrl.closest('.form-group'));
+  });
+
+  // URL validation
+  elements.pageUrl.addEventListener('blur', () => {
+    const value = elements.pageUrl.value.trim();
+    if (value) validateUrl(elements.pageUrl);
+  });
+
+  // Enter to scrape
+  elements.pageUrl.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      elements.btnScrape.click();
+    }
+  });
+
+  // Keyboard shortcuts
+  registerShortcut('ctrl+a', () => {
+    if (document.getElementById('page-images').classList.contains('active') && currentImages.length > 0) {
+      selectAllImages(elements);
+    }
+  });
+
+  registerShortcut('ctrl+d', () => {
+    if (document.getElementById('page-images').classList.contains('active') && currentImages.length > 0) {
+      clearImageSelection(elements);
+    }
+  });
+}
+
+function getSelectedIds(grid) {
+  const ids = [];
+  grid.querySelectorAll('input[type="checkbox"]').forEach(cb => {
+    if (cb.checked) ids.push(cb.dataset.id);
+  });
+  return ids;
+}
+
+function updateCounter(elements) {
+  const total = currentImages.length;
+  const selected = getSelectedIds(elements.grid).length;
+  elements.counter.textContent = `${total} images • ${selected} selected`;
+  
+  // Update step indicator based on selection
+  if (selected > 0 && imageStepIndicator) {
+    imageStepIndicator.setStep(3); // Ready to download
+  }
+}
+
+function setImageButtonsEnabled(elements, enabled) {
+  elements.btnSelectAll.disabled = !enabled;
+  elements.btnSelectNone.disabled = !enabled;
+  elements.btnZip.disabled = !enabled;
+  elements.btnPdf.disabled = !enabled;
+}
+
+function renderImages(images, elements) {
+  elements.grid.innerHTML = '';
+
+  images.forEach(img => {
+    const card = createImageCard(img, elements);
+    elements.grid.appendChild(card);
+  });
+
+  updateCounter(elements);
+}
+
+function createImageCard(img, elements) {
+  const card = document.createElement('div');
+  card.className = 'image-card';
+
+  // Preview button
+  const previewBtn = document.createElement('button');
+  previewBtn.className = 'image-preview-btn';
+  previewBtn.innerHTML = `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/></svg>`;
+  previewBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const dims = (img.width && img.height) ? `${img.width}×${img.height}` : null;
+    const size = img.bytes ? formatFileSize(img.bytes) : null;
+    showImageModal(img.url, img.filename, dims, size);
+  });
+
+  // Thumbnail
+  const thumb = document.createElement('img');
+  thumb.className = 'image-thumb';
+  thumb.src = img.url;
+  thumb.loading = 'lazy';
+  thumb.referrerPolicy = 'no-referrer';
+  thumb.alt = img.filename;
+
+  // Meta
+  const meta = document.createElement('div');
+  meta.className = 'image-meta';
+
+  const filename = document.createElement('div');
+  filename.className = 'image-filename';
+  filename.title = img.filename;
+  filename.textContent = img.filename;
+
+  const info = document.createElement('div');
+  info.className = 'image-info';
+
+  const sizeBadge = document.createElement('span');
+  sizeBadge.className = 'image-badge';
+  sizeBadge.textContent = (img.width && img.height) ? `${img.width}×${img.height}` : '?';
+
+  const checkboxContainer = document.createElement('div');
+  checkboxContainer.className = 'image-checkbox';
+
+  const checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  checkbox.dataset.id = img.id;
+  checkbox.addEventListener('click', e => e.stopPropagation());
+  checkbox.addEventListener('change', () => {
+    card.classList.toggle('selected', checkbox.checked);
+    updateCounter(elements);
+  });
+
+  checkboxContainer.appendChild(checkbox);
+  checkboxContainer.appendChild(document.createTextNode('Select'));
+
+  info.appendChild(sizeBadge);
+  info.appendChild(checkboxContainer);
+  meta.appendChild(filename);
+  meta.appendChild(info);
+
+  card.appendChild(previewBtn);
+  card.appendChild(thumb);
+  card.appendChild(meta);
+
+  card.addEventListener('click', () => {
+    checkbox.checked = !checkbox.checked;
+    card.classList.toggle('selected', checkbox.checked);
+    updateCounter(elements);
+  });
+
+  return card;
+}
+
+async function handleScrapeImages(elements) {
+  const pageUrl = elements.pageUrl.value.trim();
+  
+  if (!pageUrl) {
+    setFieldError(elements.pageUrl.closest('.form-group'), 'URL required');
+    showToast('URL Required', 'Enter a webpage URL', 'error');
+    return;
+  }
+  
+  if (!validateUrl(elements.pageUrl)) {
+    showToast('Invalid URL', 'Enter a valid URL', 'error');
+    return;
+  }
+
+  setButtonLoading(elements.btnScrape, true, 'Scraping...');
+  setImageButtonsEnabled(elements, false);
+  elements.toolbar.style.display = 'none';
+  elements.skeleton.style.display = 'grid';
+  elements.grid.innerHTML = '';
+  currentJobId = null;
+  currentImages = [];
+  showProgress(elements.progress, true, true);
+  imageStepIndicator.setStep(1); // Fetching
+
+  try {
+    const fd = new FormData();
+    fd.append('page_url', pageUrl);
+    
+    const res = await fetch('/api/scrape-images', { method: 'POST', body: fd });
+    
+    if (!res.ok) {
+      let err = { detail: 'Request failed' };
+      try { err = await res.json(); } catch {}
+      throw new Error(err.detail || 'Request failed');
+    }
+    
+    const data = await res.json();
+    currentJobId = data.job_id;
+    currentImages = data.images || [];
+
+    elements.skeleton.style.display = 'none';
+    
+    if (currentImages.length > 0) {
+      renderImages(currentImages, elements);
+      elements.toolbar.style.display = 'flex';
+      setImageButtonsEnabled(elements, true);
+      showToast('Scrape Complete', `Found ${currentImages.length} images`, 'success');
+      imageStepIndicator.setStep(2); // Select step
+    } else {
+      showImageGridEmpty(elements.grid);
+      showToast('No Images', 'No suitable images found on this page', 'info');
+      imageStepIndicator.setStep(0);
+    }
+  } catch (e) {
+    elements.skeleton.style.display = 'none';
+    
+    // Show error state with retry action
+    showErrorState(elements.grid, 
+      'Scraping Failed', 
+      e.message || 'Could not fetch images from this URL. The page might be blocking requests or require authentication.',
+      [
+        { id: 'retry', label: 'Try Again', primary: true, handler: () => handleScrapeImages(elements) },
+        { id: 'clear', label: 'Clear', handler: () => {
+          elements.pageUrl.value = '';
+          showImageGridEmpty(elements.grid);
+          imageStepIndicator.reset();
+        }}
+      ]
+    );
+    
+    imageStepIndicator.setStep(0);
+  } finally {
+    setButtonLoading(elements.btnScrape, false);
+    showProgress(elements.progress, false);
+  }
+}
+
+function selectAllImages(elements) {
+  elements.grid.querySelectorAll('input[type="checkbox"]').forEach(cb => {
+    cb.checked = true;
+    cb.closest('.image-card').classList.add('selected');
+  });
+  updateCounter(elements);
+  showToast('Selected All', `${currentImages.length} images`, 'success');
+  imageStepIndicator.setStep(3); // Ready to download
+}
+
+function clearImageSelection(elements) {
+  elements.grid.querySelectorAll('input[type="checkbox"]').forEach(cb => {
+    cb.checked = false;
+    cb.closest('.image-card').classList.remove('selected');
+  });
+  updateCounter(elements);
+  showToast('Cleared', 'Selection cleared', 'info');
+  imageStepIndicator.setStep(2); // Back to select
+}
+
+async function handleDownload(endpoint, nameField, nameValue, elements) {
+  if (!currentJobId) {
+    showToast('No Images', 'Fetch images first', 'error');
+    return;
+  }
+  
+  const ids = getSelectedIds(elements.grid);
+  
+  if (ids.length === 0) {
+    showToast('No Selection', 'Select at least one image', 'error');
+    return;
+  }
+
+  const isZip = nameField === 'zip_name';
+  const btn = isZip ? elements.btnZip : elements.btnPdf;
+  
+  setButtonLoading(btn, true, 'Preparing...');
+  showProgress(elements.progress, true, true);
+
+  try {
+    const fd = new FormData();
+    fd.append('job_id', currentJobId);
+    fd.append('image_ids', ids.join(','));
+    fd.append(nameField, nameValue);
+
+    const res = await fetch(endpoint, { method: 'POST', body: fd });
+    
+    if (!res.ok) {
+      let err = { detail: 'Request failed' };
+      try { err = await res.json(); } catch {}
+      throw new Error(err.detail || 'Request failed');
+    }
+    
+    const blob = await res.blob();
+
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = nameValue;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+
+    showToast('Downloaded', `${ids.length} images as ${nameValue}`, 'success');
+    imageStepIndicator.complete();
+    
+    // Show success animation
+    showSuccessAnimation('Download Complete!', `${ids.length} images saved as ${nameValue}`);
+  } catch (e) {
+    showToast('Download Failed', e.message, 'error');
+    imageStepIndicator.setStep(2);
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(elements.progress, false);
+    updateCounter(elements);
+  }
+}

static/js/image-tools.js

@@ -0,0 +1,956 @@
+/**
+ * Image Tools Module
+ * Remove Background, Add Watermark, Resize, Convert, Compress
+ */
+
+// =============== Remove Background ===============
+
+let rembgFile = null;
+
+function initRemoveBackground() {
+  const dropZone = document.getElementById('rembgDropZone');
+  const fileInput = document.getElementById('rembg_file');
+  const btn = document.getElementById('btnRembg');
+  const btnPreview = document.getElementById('btnRembgPreview');
+  const notice = document.getElementById('rembgNotice');
+
+  if (!dropZone || !fileInput) return;
+
+  // Check if rembg is available
+  fetch('/api/rembg-status')
+    .then(r => r.json())
+    .then(data => {
+      if (!data.available && notice) {
+        notice.style.display = 'flex';
+      }
+    })
+    .catch(() => {});
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 50 * 1024 * 1024,
+    onFile: (file) => {
+      rembgFile = file;
+      btn.disabled = !file;
+      btnPreview.disabled = !file;
+      document.getElementById('rembgPreviewCard').style.display = 'none';
+      if (file) showToast('Image Selected', file.name, 'success', 2000);
+    }
+  });
+
+  btnPreview.addEventListener('click', () => previewRemoveBackground());
+  btn.addEventListener('click', () => removeBackground());
+}
+
+async function previewRemoveBackground() {
+  if (!rembgFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnRembgPreview');
+  const previewCard = document.getElementById('rembgPreviewCard');
+  const originalImg = document.getElementById('rembgPreviewOriginal');
+  const processedImg = document.getElementById('rembgPreviewProcessed');
+
+  setButtonLoading(btn, true, 'Processing...');
+
+  try {
+    const fd = new FormData();
+    fd.append('file', rembgFile);
+
+    const res = await fetch('/api/preview/remove-background', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const data = await res.json();
+    originalImg.src = 'data:image/png;base64,' + data.original;
+    processedImg.src = 'data:image/png;base64,' + data.processed;
+    previewCard.style.display = 'block';
+    previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    
+    showToast('Preview Ready', 'Compare original vs processed', 'success', 2000);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+  }
+}
+
+async function removeBackground() {
+  if (!rembgFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnRembg');
+  const progress = document.getElementById('rembgProgress');
+
+  setButtonLoading(btn, true, 'Processing...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    fd.append('file', rembgFile);
+    fd.append('output_name', document.getElementById('rembg_output').value || 'no-background.png');
+
+    const res = await fetch('/api/remove-background', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const filename = document.getElementById('rembg_output').value || 'no-background.png';
+    downloadBlob(blob, filename.endsWith('.png') ? filename : filename + '.png');
+
+    showSuccessAnimation('Background Removed!', 'Download started');
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Add Watermark ===============
+
+let imgWatermarkFile = null;
+
+function initImageWatermark() {
+  const dropZone = document.getElementById('imgwatermarkDropZone');
+  const fileInput = document.getElementById('imgwatermark_file');
+  const btn = document.getElementById('btnImgWatermark');
+  const btnPreview = document.getElementById('btnImgWatermarkPreview');
+
+  if (!dropZone || !fileInput) return;
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 50 * 1024 * 1024,
+    onFile: (file) => {
+      imgWatermarkFile = file;
+      btn.disabled = !file;
+      btnPreview.disabled = !file;
+      document.getElementById('imgwatermarkPreviewCard').style.display = 'none';
+      if (file) showToast('Image Selected', file.name, 'success', 2000);
+    }
+  });
+
+  btnPreview.addEventListener('click', () => previewImageWatermark());
+  btn.addEventListener('click', () => addImageWatermark());
+}
+
+async function previewImageWatermark() {
+  if (!imgWatermarkFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const text = document.getElementById('imgwatermark_text').value;
+  if (!text.trim()) {
+    showToast('No Text', 'Enter watermark text', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnImgWatermarkPreview');
+  const previewCard = document.getElementById('imgwatermarkPreviewCard');
+  const originalImg = document.getElementById('imgwatermarkPreviewOriginal');
+  const processedImg = document.getElementById('imgwatermarkPreviewProcessed');
+
+  setButtonLoading(btn, true, 'Loading...');
+
+  try {
+    const fd = new FormData();
+    fd.append('file', imgWatermarkFile);
+    fd.append('text', text);
+    fd.append('position', document.getElementById('imgwatermark_position').value);
+    fd.append('opacity', document.getElementById('imgwatermark_opacity').value);
+    fd.append('font_size', document.getElementById('imgwatermark_fontsize').value);
+    fd.append('color', document.getElementById('imgwatermark_color').value);
+
+    const res = await fetch('/api/preview/image-watermark', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const data = await res.json();
+    originalImg.src = 'data:image/jpeg;base64,' + data.original;
+    processedImg.src = 'data:image/jpeg;base64,' + data.processed;
+    previewCard.style.display = 'block';
+    previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    
+    showToast('Preview Ready', 'Compare original vs watermarked', 'success', 2000);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+  }
+}
+
+async function addImageWatermark() {
+  if (!imgWatermarkFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const text = document.getElementById('imgwatermark_text').value;
+  if (!text.trim()) {
+    showToast('No Text', 'Enter watermark text', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnImgWatermark');
+  const progress = document.getElementById('imgwatermarkProgress');
+
+  setButtonLoading(btn, true, 'Processing...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    fd.append('file', imgWatermarkFile);
+    fd.append('text', text);
+    fd.append('position', document.getElementById('imgwatermark_position').value);
+    fd.append('opacity', document.getElementById('imgwatermark_opacity').value);
+    fd.append('font_size', document.getElementById('imgwatermark_fontsize').value);
+    fd.append('color', document.getElementById('imgwatermark_color').value);
+    fd.append('output_name', document.getElementById('imgwatermark_output').value || 'watermarked');
+
+    const res = await fetch('/api/add-image-watermark', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const contentDisposition = res.headers.get('content-disposition');
+    let filename = 'watermarked.jpg';
+    if (contentDisposition) {
+      const match = contentDisposition.match(/filename="?([^"]+)"?/);
+      if (match) filename = match[1];
+    }
+    downloadBlob(blob, filename);
+
+    showSuccessAnimation('Watermark Added!', 'Download started');
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Resize Image ===============
+
+let resizeFile = null;
+
+function initResizeImage() {
+  const dropZone = document.getElementById('resizeDropZone');
+  const fileInput = document.getElementById('resize_file');
+  const btn = document.getElementById('btnResize');
+  const btnPreview = document.getElementById('btnResizePreview');
+  const presetSelect = document.getElementById('resize_preset');
+  const widthInput = document.getElementById('resize_width');
+  const heightInput = document.getElementById('resize_height');
+
+  if (!dropZone || !fileInput) return;
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 50 * 1024 * 1024,
+    onFile: (file) => {
+      resizeFile = file;
+      btn.disabled = !file;
+      btnPreview.disabled = !file;
+      document.getElementById('resizePreviewCard').style.display = 'none';
+      if (file) showToast('Image Selected', file.name, 'success', 2000);
+    }
+  });
+
+  // Preset change handler
+  presetSelect.addEventListener('change', () => {
+    const preset = presetSelect.value;
+    if (preset !== 'custom') {
+      widthInput.disabled = true;
+      heightInput.disabled = true;
+      widthInput.placeholder = 'Auto';
+      heightInput.placeholder = 'Auto';
+    } else {
+      widthInput.disabled = false;
+      heightInput.disabled = false;
+    }
+  });
+
+  btnPreview.addEventListener('click', () => previewResizeImage());
+  btn.addEventListener('click', () => resizeImage());
+}
+
+async function previewResizeImage() {
+  if (!resizeFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnResizePreview');
+  const previewCard = document.getElementById('resizePreviewCard');
+  const originalImg = document.getElementById('resizePreviewOriginal');
+  const processedImg = document.getElementById('resizePreviewProcessed');
+  const originalSizeSpan = document.getElementById('resizeOriginalSize');
+  const newSizeSpan = document.getElementById('resizeNewSize');
+
+  setButtonLoading(btn, true, 'Loading...');
+
+  try {
+    const fd = new FormData();
+    fd.append('file', resizeFile);
+    fd.append('preset', document.getElementById('resize_preset').value);
+    fd.append('width', document.getElementById('resize_width').value || '0');
+    fd.append('height', document.getElementById('resize_height').value || '0');
+    fd.append('maintain_aspect', document.getElementById('resize_aspect').checked);
+
+    const res = await fetch('/api/preview/resize-image', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const data = await res.json();
+    originalImg.src = 'data:image/jpeg;base64,' + data.original;
+    processedImg.src = 'data:image/jpeg;base64,' + data.processed;
+    originalSizeSpan.textContent = `(${data.original_size})`;
+    newSizeSpan.textContent = `(${data.new_size})`;
+    previewCard.style.display = 'block';
+    previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    
+    showToast('Preview Ready', `${data.original_size} → ${data.new_size}`, 'success', 2000);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+  }
+}
+
+async function resizeImage() {
+  if (!resizeFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnResize');
+  const progress = document.getElementById('resizeProgress');
+
+  setButtonLoading(btn, true, 'Resizing...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    fd.append('file', resizeFile);
+    fd.append('preset', document.getElementById('resize_preset').value);
+    fd.append('width', document.getElementById('resize_width').value || '0');
+    fd.append('height', document.getElementById('resize_height').value || '0');
+    fd.append('maintain_aspect', document.getElementById('resize_aspect').checked);
+    fd.append('output_name', document.getElementById('resize_output').value || 'resized');
+
+    const res = await fetch('/api/resize-image', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const contentDisposition = res.headers.get('content-disposition');
+    let filename = 'resized.jpg';
+    if (contentDisposition) {
+      const match = contentDisposition.match(/filename="?([^"]+)"?/);
+      if (match) filename = match[1];
+    }
+    downloadBlob(blob, filename);
+
+    const newSize = res.headers.get('X-New-Size');
+    showSuccessAnimation('Image Resized!', newSize ? `New size: ${newSize}` : 'Download started');
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Convert Format ===============
+
+let convertFile = null;
+
+function initConvertImage() {
+  const dropZone = document.getElementById('convertDropZone');
+  const fileInput = document.getElementById('convert_file');
+  const btn = document.getElementById('btnConvert');
+  const formatSelect = document.getElementById('convert_format');
+  const qualityInput = document.getElementById('convert_quality');
+
+  if (!dropZone || !fileInput) return;
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 50 * 1024 * 1024,
+    onFile: (file) => {
+      convertFile = file;
+      btn.disabled = !file;
+      if (file) {
+        showToast('Image Selected', file.name, 'success', 2000);
+        // Trigger initial estimate
+        updateConvertImageEstimate();
+      }
+    }
+  });
+
+  // Format and quality change handlers with debounce
+  let estimateTimeout = null;
+  const triggerEstimate = () => {
+    if (estimateTimeout) clearTimeout(estimateTimeout);
+    estimateTimeout = setTimeout(() => {
+      updateConvertImageEstimate();
+    }, 300);
+  };
+
+  formatSelect.addEventListener('change', triggerEstimate);
+  qualityInput.addEventListener('input', triggerEstimate);
+
+  btn.addEventListener('click', () => convertImage());
+}
+
+async function updateConvertImageEstimate() {
+  if (!convertFile) return;
+  
+  const format = document.getElementById('convert_format').value;
+  const quality = document.getElementById('convert_quality').value;
+  
+  // Create estimate display if it doesn't exist
+  let displayDiv = document.getElementById('convertEstimate');
+  if (!displayDiv) {
+    displayDiv = document.createElement('div');
+    displayDiv.id = 'convertEstimate';
+    displayDiv.style.cssText = 'margin-top: 12px; padding: 12px; background: var(--border-light); border-radius: var(--radius); font-size: 13px;';
+    const btnGroup = document.querySelector('#page-convert .btn-group');
+    btnGroup.parentNode.insertBefore(displayDiv, btnGroup);
+  }
+  
+  displayDiv.innerHTML = '<span style="color: var(--text-muted);">Estimating file size...</span>';
+  
+  try {
+    const fd = new FormData();
+    fd.append('file', convertFile);
+    fd.append('target_format', format);
+    fd.append('quality', quality);
+    
+    const res = await fetch('/api/estimate/convert-image', { method: 'POST', body: fd });
+    
+    if (!res.ok) {
+      displayDiv.innerHTML = '<span style="color: var(--text-muted);">Could not estimate</span>';
+      return;
+    }
+    
+    const data = await res.json();
+    const origKB = (data.original_size / 1024).toFixed(1);
+    const estKB = (data.estimated_size / 1024).toFixed(1);
+    const diff = data.estimated_size - data.original_size;
+    const diffPercent = ((diff / data.original_size) * 100).toFixed(1);
+    
+    let sizeChange = '';
+    if (diff < 0) {
+      sizeChange = `<span style="color: var(--success); font-weight: 600;">${diffPercent}%</span>`;
+    } else if (diff > 0) {
+      sizeChange = `<span style="color: var(--warning); font-weight: 600;">+${diffPercent}%</span>`;
+    } else {
+      sizeChange = `<span style="color: var(--text-muted);">Same size</span>`;
+    }
+    
+    displayDiv.innerHTML = `
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <span><strong>Original:</strong> ${origKB} KB</span>
+        <span style="color: var(--primary);">→</span>
+        <span><strong>${data.target_format}:</strong> ${estKB} KB</span>
+        ${sizeChange}
+      </div>
+    `;
+  } catch (e) {
+    displayDiv.innerHTML = '<span style="color: var(--text-muted);">Could not estimate</span>';
+  }
+}
+
+async function convertImage() {
+  if (!convertFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnConvert');
+  const progress = document.getElementById('convertProgress');
+
+  setButtonLoading(btn, true, 'Converting...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    fd.append('file', convertFile);
+    fd.append('target_format', document.getElementById('convert_format').value);
+    fd.append('quality', document.getElementById('convert_quality').value);
+    fd.append('output_name', document.getElementById('convert_output').value || 'converted');
+
+    const res = await fetch('/api/convert-image', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const contentDisposition = res.headers.get('content-disposition');
+    let filename = 'converted.jpg';
+    if (contentDisposition) {
+      const match = contentDisposition.match(/filename="?([^"]+)"?/);
+      if (match) filename = match[1];
+    }
+    downloadBlob(blob, filename);
+
+    const format = document.getElementById('convert_format').value.toUpperCase();
+    showSuccessAnimation('Image Converted!', `Converted to ${format}`);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Compress Image ===============
+
+let compressImgFile = null;
+
+function initCompressImage() {
+  const dropZone = document.getElementById('compressimgDropZone');
+  const fileInput = document.getElementById('compressimg_file');
+  const btn = document.getElementById('btnCompressImg');
+  const btnPreview = document.getElementById('btnCompressImgPreview');
+  const qualitySlider = document.getElementById('compressimg_quality');
+  const qualityVal = document.getElementById('compressimg_quality_val');
+
+  if (!dropZone || !fileInput) return;
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 50 * 1024 * 1024,
+    onFile: (file) => {
+      compressImgFile = file;
+      btn.disabled = !file;
+      btnPreview.disabled = !file;
+      document.getElementById('compressimgResult').style.display = 'none';
+      document.getElementById('compressimgPreviewCard').style.display = 'none';
+      if (file) {
+        showToast('Image Selected', file.name, 'success', 2000);
+        // Trigger initial estimate
+        updateCompressImageEstimate();
+      }
+    }
+  });
+
+  // Quality slider with debounced estimate
+  let estimateTimeout = null;
+  qualitySlider.addEventListener('input', () => {
+    qualityVal.textContent = qualitySlider.value;
+    // Debounce the estimate call
+    if (estimateTimeout) clearTimeout(estimateTimeout);
+    estimateTimeout = setTimeout(() => {
+      updateCompressImageEstimate();
+    }, 300);
+  });
+
+  btnPreview.addEventListener('click', () => previewCompressImage());
+  btn.addEventListener('click', () => compressImage());
+}
+
+async function updateCompressImageEstimate() {
+  if (!compressImgFile) return;
+  
+  const estimateDiv = document.getElementById('compressimgEstimate');
+  const quality = document.getElementById('compressimg_quality').value;
+  
+  // Create estimate display if it doesn't exist
+  let displayDiv = estimateDiv;
+  if (!displayDiv) {
+    displayDiv = document.createElement('div');
+    displayDiv.id = 'compressimgEstimate';
+    displayDiv.style.cssText = 'margin-top: 12px; padding: 12px; background: var(--border-light); border-radius: var(--radius); font-size: 13px;';
+    const qualityGroup = document.getElementById('compressimg_quality').closest('.form-group');
+    qualityGroup.appendChild(displayDiv);
+  }
+  
+  displayDiv.innerHTML = '<span style="color: var(--text-muted);">Estimating file size...</span>';
+  
+  try {
+    const fd = new FormData();
+    fd.append('file', compressImgFile);
+    fd.append('quality', quality);
+    
+    const res = await fetch('/api/estimate/compress-image', { method: 'POST', body: fd });
+    
+    if (!res.ok) {
+      displayDiv.innerHTML = '<span style="color: var(--text-muted);">Could not estimate</span>';
+      return;
+    }
+    
+    const data = await res.json();
+    const origKB = (data.original_size / 1024).toFixed(1);
+    const estKB = (data.estimated_size / 1024).toFixed(1);
+    const reduction = data.reduction_percent;
+    
+    displayDiv.innerHTML = `
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <span><strong>Original:</strong> ${origKB} KB</span>
+        <span style="color: var(--primary);">→</span>
+        <span><strong>Estimated:</strong> ${estKB} KB</span>
+        <span style="color: ${reduction > 0 ? 'var(--success)' : 'var(--text-muted)'}; font-weight: 600;">
+          ${reduction > 0 ? '-' + reduction + '%' : 'No reduction'}
+        </span>
+      </div>
+    `;
+  } catch (e) {
+    displayDiv.innerHTML = '<span style="color: var(--text-muted);">Could not estimate</span>';
+  }
+}
+
+async function previewCompressImage() {
+  if (!compressImgFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnCompressImgPreview');
+  const previewCard = document.getElementById('compressimgPreviewCard');
+  const originalImg = document.getElementById('compressimgPreviewOriginal');
+  const processedImg = document.getElementById('compressimgPreviewProcessed');
+
+  setButtonLoading(btn, true, 'Loading...');
+
+  try {
+    const fd = new FormData();
+    fd.append('file', compressImgFile);
+    fd.append('quality', document.getElementById('compressimg_quality').value);
+
+    const res = await fetch('/api/preview/compress-image', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const data = await res.json();
+    originalImg.src = 'data:image/jpeg;base64,' + data.original;
+    processedImg.src = 'data:image/jpeg;base64,' + data.processed;
+    previewCard.style.display = 'block';
+    previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    
+    const origKB = (data.original_size / 1024).toFixed(1);
+    const compKB = (data.compressed_size / 1024).toFixed(1);
+    showToast('Preview Ready', `${origKB} KB → ${compKB} KB`, 'success', 2000);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+  }
+}
+
+async function compressImage() {
+  if (!compressImgFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnCompressImg');
+  const progress = document.getElementById('compressimgProgress');
+  const resultDiv = document.getElementById('compressimgResult');
+  const statsDiv = document.getElementById('compressimgStats');
+
+  setButtonLoading(btn, true, 'Compressing...');
+  showProgress(progress, true, true);
+  resultDiv.style.display = 'none';
+
+  try {
+    const fd = new FormData();
+    fd.append('file', compressImgFile);
+    fd.append('quality', document.getElementById('compressimg_quality').value);
+    fd.append('output_name', document.getElementById('compressimg_output').value || 'compressed');
+
+    const res = await fetch('/api/compress-image', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const contentDisposition = res.headers.get('content-disposition');
+    let filename = 'compressed.jpg';
+    if (contentDisposition) {
+      const match = contentDisposition.match(/filename="?([^"]+)"?/);
+      if (match) filename = match[1];
+    }
+    downloadBlob(blob, filename);
+
+    // Show compression stats
+    const originalSize = res.headers.get('X-Original-Size');
+    const compressedSize = res.headers.get('X-Compressed-Size');
+    const reduction = res.headers.get('X-Reduction-Percent');
+
+    if (originalSize && compressedSize) {
+      const origKB = (parseInt(originalSize) / 1024).toFixed(1);
+      const compKB = (parseInt(compressedSize) / 1024).toFixed(1);
+      statsDiv.textContent = `${origKB} KB → ${compKB} KB (${reduction}% smaller)`;
+      resultDiv.style.display = 'block';
+    }
+
+    showSuccessAnimation('Image Compressed!', `Reduced by ${reduction}%`);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Utility ===============
+
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+
+// =============== Enhance Image ===============
+
+let enhanceImgFile = null;
+
+function initEnhanceImage() {
+  const dropZone = document.getElementById('enhanceImgDropZone');
+  const fileInput = document.getElementById('enhanceimg_file');
+  const btn = document.getElementById('btnEnhanceImg');
+  const btnPreview = document.getElementById('btnEnhanceImgPreview');
+
+  if (!dropZone || !fileInput) return;
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 50 * 1024 * 1024,
+    onFile: (file) => {
+      enhanceImgFile = file;
+      btn.disabled = !file;
+      btnPreview.disabled = !file;
+      document.getElementById('enhanceimgPreviewCard').style.display = 'none';
+      if (file) showToast('Image Selected', file.name, 'success', 2000);
+    }
+  });
+
+  btnPreview.addEventListener('click', () => previewEnhanceImage());
+  btn.addEventListener('click', () => enhanceImage());
+}
+
+async function previewEnhanceImage() {
+  if (!enhanceImgFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnEnhanceImgPreview');
+  const previewCard = document.getElementById('enhanceimgPreviewCard');
+  const originalImg = document.getElementById('enhanceimgPreviewOriginal');
+  const processedImg = document.getElementById('enhanceimgPreviewProcessed');
+
+  setButtonLoading(btn, true, 'Loading...');
+
+  try {
+    const fd = new FormData();
+    fd.append('file', enhanceImgFile);
+    fd.append('level', document.getElementById('enhanceimg_level').value);
+    fd.append('upscale', document.getElementById('enhanceimg_upscale').value);
+
+    const res = await fetch('/api/preview/enhance-image', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const data = await res.json();
+    originalImg.src = 'data:image/jpeg;base64,' + data.original;
+    processedImg.src = 'data:image/jpeg;base64,' + data.processed;
+    previewCard.style.display = 'block';
+    previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    
+    showToast('Preview Ready', 'Compare original vs enhanced', 'success', 2000);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+  }
+}
+
+async function enhanceImage() {
+  if (!enhanceImgFile) {
+    showToast('No Image', 'Upload an image first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnEnhanceImg');
+  const progress = document.getElementById('enhanceimgProgress');
+
+  setButtonLoading(btn, true, 'Enhancing...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    fd.append('file', enhanceImgFile);
+    fd.append('level', document.getElementById('enhanceimg_level').value);
+    fd.append('upscale', document.getElementById('enhanceimg_upscale').value);
+    fd.append('output_name', document.getElementById('enhanceimg_output').value || 'enhanced');
+
+    const res = await fetch('/api/enhance-image', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const contentDisposition = res.headers.get('content-disposition');
+    let filename = 'enhanced.jpg';
+    if (contentDisposition) {
+      const match = contentDisposition.match(/filename="?([^"]+)"?/);
+      if (match) filename = match[1];
+    }
+    downloadBlob(blob, filename);
+
+    showSuccessAnimation('Image Enhanced!', 'Download started');
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Enhance PDF ===============
+
+let enhancePdfFile = null;
+
+function initEnhancePdf() {
+  const dropZone = document.getElementById('enhancePdfDropZone');
+  const fileInput = document.getElementById('enhancepdf_file');
+  const btn = document.getElementById('btnEnhancePdf');
+
+  if (!dropZone || !fileInput) return;
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 100 * 1024 * 1024,
+    onFile: (file) => {
+      enhancePdfFile = file;
+      btn.disabled = !file;
+      document.getElementById('enhancepdfResult').style.display = 'none';
+      if (file) showToast('PDF Selected', file.name, 'success', 2000);
+    }
+  });
+
+  btn.addEventListener('click', () => enhancePdf());
+}
+
+async function enhancePdf() {
+  if (!enhancePdfFile) {
+    showToast('No PDF', 'Upload a PDF first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnEnhancePdf');
+  const progress = document.getElementById('enhancepdfProgress');
+  const resultDiv = document.getElementById('enhancepdfResult');
+  const statsDiv = document.getElementById('enhancepdfStats');
+
+  setButtonLoading(btn, true, 'Enhancing...');
+  showProgress(progress, true, true);
+  resultDiv.style.display = 'none';
+
+  try {
+    const fd = new FormData();
+    fd.append('file', enhancePdfFile);
+    fd.append('level', document.getElementById('enhancepdf_level').value);
+    fd.append('output_name', document.getElementById('enhancepdf_output').value || 'enhanced.pdf');
+
+    const res = await fetch('/api/enhance-pdf', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const filename = document.getElementById('enhancepdf_output').value || 'enhanced.pdf';
+    downloadBlob(blob, filename.endsWith('.pdf') ? filename : filename + '.pdf');
+
+    // Show stats
+    const originalSize = res.headers.get('X-Original-Size');
+    const enhancedSize = res.headers.get('X-Enhanced-Size');
+    const imagesEnhanced = res.headers.get('X-Images-Enhanced');
+
+    if (originalSize && enhancedSize) {
+      const origMB = (parseInt(originalSize) / 1024 / 1024).toFixed(2);
+      const enhMB = (parseInt(enhancedSize) / 1024 / 1024).toFixed(2);
+      const change = (((parseInt(enhancedSize) - parseInt(originalSize)) / parseInt(originalSize)) * 100).toFixed(1);
+      statsDiv.textContent = `${origMB} MB → ${enhMB} MB (${change > 0 ? '+' : ''}${change}%), ${imagesEnhanced} images enhanced`;
+      resultDiv.style.display = 'block';
+    }
+
+    showSuccessAnimation('PDF Enhanced!', `${imagesEnhanced} images improved`);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Initialize All ===============
+
+function initImageTools() {
+  initRemoveBackground();
+  initImageWatermark();
+  initResizeImage();
+  initConvertImage();
+  initCompressImage();
+  initEnhanceImage();
+  initEnhancePdf();
+}

static/js/pdf-editor.js

@@ -0,0 +1,557 @@
+/**
+ * PDF Editor Module
+ */
+
+let pdfBeforeUrl = null;
+let pdfAfterUrl = null;
+let isSplitView = false;
+let pdfStepIndicator = null;
+
+// Config storage key and expiry (24 hours)
+const PDF_CONFIG_KEY = 'pdfEditorConfig';
+const CONFIG_EXPIRY_MS = 24 * 60 * 60 * 1000;
+
+function savePdfConfig() {
+  const config = {
+    remove_pages: document.getElementById('remove_pages').value,
+    unit: document.getElementById('unit').value,
+    top: document.getElementById('top').value,
+    bottom: document.getElementById('bottom').value,
+    left: document.getElementById('left').value,
+    right: document.getElementById('right').value,
+    watermark_text: document.getElementById('watermark_text').value,
+    watermark_size: document.getElementById('watermark_size').value,
+    watermark_rotate: document.getElementById('watermark_rotate').value,
+    output_name: document.getElementById('output_name').value,
+    savedAt: Date.now()
+  };
+  localStorage.setItem(PDF_CONFIG_KEY, JSON.stringify(config));
+}
+
+function loadPdfConfig() {
+  try {
+    const stored = localStorage.getItem(PDF_CONFIG_KEY);
+    if (!stored) return null;
+    
+    const config = JSON.parse(stored);
+    
+    // Check if expired (24 hours)
+    if (Date.now() - config.savedAt > CONFIG_EXPIRY_MS) {
+      localStorage.removeItem(PDF_CONFIG_KEY);
+      return null;
+    }
+    
+    return config;
+  } catch {
+    return null;
+  }
+}
+
+function applyPdfConfig(config) {
+  if (!config) return;
+  
+  if (config.remove_pages) document.getElementById('remove_pages').value = config.remove_pages;
+  if (config.unit) document.getElementById('unit').value = config.unit;
+  if (config.top) document.getElementById('top').value = config.top;
+  if (config.bottom) document.getElementById('bottom').value = config.bottom;
+  if (config.left) document.getElementById('left').value = config.left;
+  if (config.right) document.getElementById('right').value = config.right;
+  if (config.watermark_text) document.getElementById('watermark_text').value = config.watermark_text;
+  if (config.watermark_size) document.getElementById('watermark_size').value = config.watermark_size;
+  if (config.watermark_rotate) document.getElementById('watermark_rotate').value = config.watermark_rotate;
+  if (config.output_name) document.getElementById('output_name').value = config.output_name;
+}
+
+function clearPdfConfig() {
+  localStorage.removeItem(PDF_CONFIG_KEY);
+  document.getElementById('remove_pages').value = '';
+  document.getElementById('unit').value = 'mm';
+  document.getElementById('top').value = '';
+  document.getElementById('bottom').value = '';
+  document.getElementById('left').value = '';
+  document.getElementById('right').value = '';
+  document.getElementById('watermark_text').value = '';
+  document.getElementById('watermark_size').value = '36';
+  document.getElementById('watermark_rotate').value = '45';
+  document.getElementById('output_name').value = 'cropped.pdf';
+  showToast('Config Cleared', 'Settings reset to defaults', 'success', 2000);
+}
+
+function initPdfEditor() {
+  const elements = {
+    btnBefore: document.getElementById('btnBefore'),
+    btnAfter: document.getElementById('btnAfter'),
+    frameBefore: document.getElementById('frameBefore'),
+    frameAfter: document.getElementById('frameAfter'),
+    splitFrameBefore: document.getElementById('splitFrameBefore'),
+    splitFrameAfter: document.getElementById('splitFrameAfter'),
+    previewTabs: document.querySelectorAll('.preview-tab'),
+    dropZone: document.getElementById('pdfDropZone'),
+    fileInput: document.getElementById('pdf_file'),
+    urlInput: document.getElementById('pdf_url'),
+    progress: document.getElementById('pdfProgress'),
+    btnSplitView: document.getElementById('btnSplitView'),
+    btnFullscreen: document.getElementById('btnFullscreen'),
+    splitView: document.getElementById('splitView'),
+    fullscreenOverlay: document.getElementById('fullscreenOverlay'),
+    fullscreenFrame: document.getElementById('fullscreenFrame'),
+    fullscreenClose: document.getElementById('fullscreenClose'),
+    previewBefore: document.getElementById('preview-before'),
+    previewAfter: document.getElementById('preview-after')
+  };
+
+  // Initialize step indicator
+  pdfStepIndicator = new StepIndicator('pdfStepIndicator', [
+    'Upload PDF',
+    'Configure',
+    'Preview',
+    'Download'
+  ]);
+
+  // Load saved config (if within 24 hours)
+  const savedConfig = loadPdfConfig();
+  if (savedConfig) {
+    applyPdfConfig(savedConfig);
+    showToast('Config Restored', 'Previous settings loaded', 'info', 2000);
+  }
+
+  // Auto-save config on input changes
+  const configInputs = ['remove_pages', 'unit', 'top', 'bottom', 'left', 'right', 
+                        'watermark_text', 'watermark_size', 'watermark_rotate', 'output_name'];
+  configInputs.forEach(id => {
+    const el = document.getElementById(id);
+    if (el) {
+      el.addEventListener('change', savePdfConfig);
+      el.addEventListener('input', savePdfConfig);
+    }
+  });
+
+  // Show empty state in preview
+  showPreviewEmpty(elements.previewBefore.querySelector('.preview-frame'));
+  showPreviewEmpty(elements.previewAfter.querySelector('.preview-frame'));
+
+  // Initialize drag & drop
+  if (elements.dropZone && elements.fileInput) {
+    initDropZone(elements.dropZone, elements.fileInput, {
+      accept: 'application/pdf',
+      maxSize: 100 * 1024 * 1024,
+      onFile: (file) => {
+        if (file) {
+          showToast('File Selected', file.name, 'success');
+          elements.urlInput.value = '';
+          pdfStepIndicator.setStep(1); // Move to Configure step
+        }
+      }
+    });
+  }
+
+  // URL input change - update step
+  elements.urlInput.addEventListener('input', () => {
+    if (elements.urlInput.value.trim()) {
+      pdfStepIndicator.setStep(1);
+    }
+    clearFieldError(elements.urlInput.closest('.form-group'));
+  });
+
+  // Preview tab switching
+  elements.previewTabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      if (isSplitView) return;
+      const target = tab.dataset.preview;
+      switchPreview(target, elements.previewTabs);
+    });
+  });
+
+  // Split view toggle
+  elements.btnSplitView.addEventListener('click', () => {
+    isSplitView = !isSplitView;
+    elements.btnSplitView.classList.toggle('active', isSplitView);
+    elements.splitView.classList.toggle('active', isSplitView);
+    
+    document.getElementById('preview-before').style.display = isSplitView ? 'none' : '';
+    document.getElementById('preview-after').style.display = isSplitView ? 'none' : '';
+    
+    if (!isSplitView) {
+      const activeTab = document.querySelector('.preview-tab.active');
+      switchPreview(activeTab?.dataset.preview || 'before', elements.previewTabs);
+    }
+    
+    // Sync frames
+    if (pdfBeforeUrl) {
+      elements.splitFrameBefore.src = pdfBeforeUrl;
+    }
+    if (pdfAfterUrl) {
+      elements.splitFrameAfter.src = pdfAfterUrl;
+    }
+  });
+
+  // Fullscreen toggle
+  elements.btnFullscreen.addEventListener('click', () => {
+    const activeTab = document.querySelector('.preview-tab.active');
+    const url = activeTab?.dataset.preview === 'after' ? pdfAfterUrl : pdfBeforeUrl;
+    
+    if (url) {
+      elements.fullscreenFrame.src = url;
+      elements.fullscreenOverlay.classList.add('active');
+    } else {
+      showToast('No Preview', 'Load a PDF first', 'info');
+    }
+  });
+
+  elements.fullscreenClose.addEventListener('click', () => {
+    elements.fullscreenOverlay.classList.remove('active');
+    elements.fullscreenFrame.src = '';
+  });
+
+  // Close fullscreen on ESC
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && elements.fullscreenOverlay.classList.contains('active')) {
+      elements.fullscreenOverlay.classList.remove('active');
+      elements.fullscreenFrame.src = '';
+    }
+  });
+
+  // Button handlers
+  elements.btnBefore.addEventListener('click', () => handlePreviewOriginal(elements));
+  elements.btnAfter.addEventListener('click', () => handleProcessPdf(elements));
+  
+  // Clear config button
+  const btnClearConfig = document.getElementById('btnClearConfig');
+  if (btnClearConfig) {
+    btnClearConfig.addEventListener('click', clearPdfConfig);
+  }
+
+  // URL validation
+  elements.urlInput.addEventListener('blur', () => {
+    const value = elements.urlInput.value.trim();
+    if (value) validateUrl(elements.urlInput);
+  });
+
+  elements.urlInput.addEventListener('input', () => {
+    clearFieldError(elements.urlInput.closest('.form-group'));
+  });
+
+  // Keyboard shortcuts
+  registerShortcut('ctrl+p', () => {
+    if (document.getElementById('page-pdf').classList.contains('active')) {
+      elements.btnBefore.click();
+    }
+  });
+
+  registerShortcut('ctrl+enter', () => {
+    if (document.getElementById('page-pdf').classList.contains('active')) {
+      elements.btnAfter.click();
+    }
+  });
+}
+
+/**
+ * Watermark Removal Feature (separate page)
+ */
+function initWatermarkRemoval() {
+  const dropZone = document.getElementById('wmDropZone');
+  const fileInput = document.getElementById('wm_file');
+  const urlInput = document.getElementById('wm_url');
+  const btnRemove = document.getElementById('btnRemoveWatermark');
+  const btnPreview = document.getElementById('btnWmPreview');
+  const intensitySlider = document.getElementById('wm_intensity');
+  const intensityValue = document.getElementById('wm_intensity_value');
+  const progress = document.getElementById('wmProgress');
+
+  // Initialize drag & drop
+  if (dropZone && fileInput) {
+    initDropZone(dropZone, fileInput, {
+      accept: 'application/pdf',
+      maxSize: 100 * 1024 * 1024,
+      onFile: (file) => {
+        if (file) {
+          showToast('File Selected', file.name, 'success');
+          if (urlInput) urlInput.value = '';
+        }
+      }
+    });
+  }
+
+  // Update intensity display
+  if (intensitySlider && intensityValue) {
+    intensitySlider.addEventListener('input', () => {
+      intensityValue.textContent = intensitySlider.value;
+    });
+  }
+
+  if (btnPreview) {
+    btnPreview.addEventListener('click', handleWatermarkPreview);
+  }
+
+  if (btnRemove) {
+    btnRemove.addEventListener('click', handleRemoveWatermark);
+  }
+}
+
+async function handleWatermarkPreview() {
+  const urlInput = document.getElementById('wm_url');
+  const fileInput = document.getElementById('wm_file');
+  const btn = document.getElementById('btnWmPreview');
+  const previewCard = document.getElementById('wmPreviewCard');
+  const originalImg = document.getElementById('wmPreviewOriginal');
+  const processedImg = document.getElementById('wmPreviewProcessed');
+
+  const hasUrl = urlInput && urlInput.value.trim();
+  const hasFile = fileInput && fileInput.files.length > 0;
+
+  if (!hasUrl && !hasFile) {
+    showToast('No PDF', 'Upload a file or enter a URL first', 'error');
+    return;
+  }
+
+  setButtonLoading(btn, true, 'Loading...');
+
+  try {
+    const fd = new FormData();
+    
+    if (hasUrl) fd.append('url', urlInput.value.trim());
+    if (hasFile) fd.append('file', fileInput.files[0]);
+    
+    fd.append('page', '0');
+    fd.append('method', document.getElementById('wm_method').value || 'inpaint');
+    fd.append('intensity', document.getElementById('wm_intensity').value || '50');
+
+    const res = await fetch('/api/watermark-preview', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      let err = { detail: 'Request failed' };
+      try { err = await res.json(); } catch {}
+      throw new Error(err.detail || 'Request failed');
+    }
+
+    const data = await res.json();
+    
+    // Show preview images
+    originalImg.src = 'data:image/png;base64,' + data.original;
+    processedImg.src = 'data:image/png;base64,' + data.processed;
+    previewCard.style.display = 'block';
+    
+    // Scroll to preview
+    previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    
+    showToast('Preview Ready', 'Compare original vs processed', 'success', 2000);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+  }
+}
+
+async function handleRemoveWatermark() {
+  const urlInput = document.getElementById('wm_url');
+  const fileInput = document.getElementById('wm_file');
+  const btn = document.getElementById('btnRemoveWatermark');
+  const progress = document.getElementById('wmProgress');
+
+  const hasUrl = urlInput && urlInput.value.trim();
+  const hasFile = fileInput && fileInput.files.length > 0;
+
+  if (!hasUrl && !hasFile) {
+    showToast('No PDF', 'Upload a file or enter a URL first', 'error');
+    return;
+  }
+
+  setButtonLoading(btn, true, 'Processing...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    
+    if (hasUrl) fd.append('url', urlInput.value.trim());
+    if (hasFile) fd.append('file', fileInput.files[0]);
+    
+    fd.append('output_name', document.getElementById('wm_output_name').value || 'cleaned.pdf');
+    fd.append('watermark_text', document.getElementById('wm_text').value || 'Educated Nepal');
+    fd.append('method', document.getElementById('wm_method').value || 'inpaint');
+    fd.append('intensity', document.getElementById('wm_intensity').value || '50');
+    fd.append('dpi', document.getElementById('wm_dpi').value || '150');
+    fd.append('quality', document.getElementById('wm_quality').value || '85');
+
+    const res = await fetch('/api/remove-watermark', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      let err = { detail: 'Request failed' };
+      try { err = await res.json(); } catch {}
+      throw new Error(err.detail || 'Request failed');
+    }
+
+    const blob = await res.blob();
+    const filename = document.getElementById('wm_output_name').value || 'cleaned.pdf';
+
+    // Download
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename.endsWith('.pdf') ? filename : filename + '.pdf';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+
+    showSuccessAnimation('Watermark Removed!', `${filename} has been downloaded`);
+    
+    // Add to recent files
+    if (typeof addToRecentFiles === 'function') {
+      addToRecentFiles(filename, 'watermark-removal');
+    }
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+function switchPreview(name, tabs) {
+  tabs.forEach(t => t.classList.toggle('active', t.dataset.preview === name));
+  document.getElementById('preview-before').classList.toggle('active', name === 'before');
+  document.getElementById('preview-after').classList.toggle('active', name === 'after');
+}
+
+function validatePdfForm() {
+  const urlInput = document.getElementById('pdf_url');
+  const fileInput = document.getElementById('pdf_file');
+  
+  const hasUrl = urlInput.value.trim();
+  const hasFile = fileInput.files.length > 0;
+  
+  if (!hasUrl && !hasFile) {
+    showToast('No PDF', 'Upload a file or enter a URL', 'error');
+    return false;
+  }
+  
+  if (hasUrl && !validateUrl(urlInput)) {
+    return false;
+  }
+  
+  return true;
+}
+
+function buildPdfFormData(includeProcessOptions) {
+  const fd = new FormData();
+  
+  const url = document.getElementById('pdf_url').value.trim();
+  const file = document.getElementById('pdf_file').files[0];
+  
+  if (url) fd.append('url', url);
+  if (file) fd.append('file', file);
+  
+  fd.append('output_name', document.getElementById('output_name').value.trim() || 'cropped.pdf');
+
+  if (includeProcessOptions) {
+    fd.append('remove_pages', document.getElementById('remove_pages').value.trim());
+    fd.append('unit', document.getElementById('unit').value);
+    fd.append('top', document.getElementById('top').value || '0');
+    fd.append('bottom', document.getElementById('bottom').value || '0');
+    fd.append('left', document.getElementById('left').value || '0');
+    fd.append('right', document.getElementById('right').value || '0');
+    fd.append('watermark_text', document.getElementById('watermark_text').value || '');
+    fd.append('watermark_size', document.getElementById('watermark_size').value || '36');
+    fd.append('watermark_rotate', document.getElementById('watermark_rotate').value || '45');
+  }
+  
+  return fd;
+}
+
+async function postForBlob(endpoint, formData) {
+  const res = await fetch(endpoint, { method: 'POST', body: formData });
+  
+  if (!res.ok) {
+    let err = { detail: 'Request failed' };
+    try { err = await res.json(); } catch {}
+    throw new Error(err.detail || 'Request failed');
+  }
+  
+  return await res.blob();
+}
+
+async function handlePreviewOriginal(elements) {
+  if (!validatePdfForm()) return;
+  
+  setButtonLoading(elements.btnBefore, true, 'Loading...');
+  elements.btnAfter.disabled = true;
+  showProgress(elements.progress, true, true);
+  pdfStepIndicator.setStep(2); // Preview step
+
+  try {
+    const blob = await postForBlob('/api/fetch', buildPdfFormData(false));
+    
+    if (pdfBeforeUrl) URL.revokeObjectURL(pdfBeforeUrl);
+    pdfBeforeUrl = URL.createObjectURL(blob);
+    
+    // Clear empty state and show iframe
+    elements.previewBefore.querySelector('.preview-frame').innerHTML = '<iframe id="frameBefore"></iframe>';
+    elements.frameBefore = document.getElementById('frameBefore');
+    elements.frameBefore.src = pdfBeforeUrl;
+    elements.splitFrameBefore.src = pdfBeforeUrl;
+    
+    if (!isSplitView) {
+      switchPreview('before', elements.previewTabs);
+    }
+    
+    showToast('Preview Ready', 'Original PDF loaded', 'success');
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+    pdfStepIndicator.setStep(1); // Back to configure
+  } finally {
+    setButtonLoading(elements.btnBefore, false);
+    elements.btnAfter.disabled = false;
+    showProgress(elements.progress, false);
+  }
+}
+
+async function handleProcessPdf(elements) {
+  if (!validatePdfForm()) return;
+  
+  setButtonLoading(elements.btnAfter, true, 'Processing...');
+  elements.btnBefore.disabled = true;
+  showProgress(elements.progress, true, true);
+  pdfStepIndicator.setStep(3); // Download step
+
+  try {
+    const outName = document.getElementById('output_name').value.trim() || 'cropped.pdf';
+    const filename = outName.toLowerCase().endsWith('.pdf') ? outName : outName + '.pdf';
+
+    const blob = await postForBlob('/api/process', buildPdfFormData(true));
+    
+    if (pdfAfterUrl) URL.revokeObjectURL(pdfAfterUrl);
+    pdfAfterUrl = URL.createObjectURL(blob);
+    
+    // Clear empty state and show iframe
+    elements.previewAfter.querySelector('.preview-frame').innerHTML = '<iframe id="frameAfter"></iframe>';
+    elements.frameAfter = document.getElementById('frameAfter');
+    elements.frameAfter.src = pdfAfterUrl;
+    elements.splitFrameAfter.src = pdfAfterUrl;
+
+    // Download
+    const a = document.createElement('a');
+    a.href = pdfAfterUrl;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+
+    if (!isSplitView) {
+      switchPreview('after', elements.previewTabs);
+    }
+    
+    pdfStepIndicator.complete();
+    
+    // Show success animation
+    showSuccessAnimation('PDF Processed!', `${filename} has been downloaded`);
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+    pdfStepIndicator.setStep(2);
+  } finally {
+    setButtonLoading(elements.btnAfter, false);
+    elements.btnBefore.disabled = false;
+    showProgress(elements.progress, false);
+  }
+}

static/js/pdf-tools.js

@@ -0,0 +1,1052 @@
+/**
+ * PDF Tools Module
+ * Images to PDF, Merge PDFs, Split PDF
+ */
+
+// =============== Images to PDF ===============
+
+let img2pdfFiles = [];
+
+function initImagesToPdf() {
+  const dropZone = document.getElementById('img2pdfDropZone');
+  const fileInput = document.getElementById('img2pdf_files');
+  const preview = document.getElementById('img2pdfPreview');
+  const btnCreate = document.getElementById('btnImg2Pdf');
+  const btnClear = document.getElementById('btnImg2PdfClear');
+  const progress = document.getElementById('img2pdfProgress');
+
+  if (!dropZone || !fileInput) return;
+
+  // Click to browse - handle clicks on the drop zone and its children
+  dropZone.addEventListener('click', (e) => {
+    // Don't trigger if clicking on a remove button
+    if (e.target.classList.contains('drop-zone-file-remove')) return;
+    fileInput.click();
+  });
+
+  // Drag & drop
+  ['dragenter', 'dragover'].forEach(e => {
+    dropZone.addEventListener(e, (ev) => {
+      ev.preventDefault();
+      dropZone.classList.add('drag-over');
+    });
+  });
+
+  ['dragleave', 'drop'].forEach(e => {
+    dropZone.addEventListener(e, (ev) => {
+      ev.preventDefault();
+      dropZone.classList.remove('drag-over');
+    });
+  });
+
+  dropZone.addEventListener('drop', (e) => {
+    const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/'));
+    addImages(files);
+  });
+
+  fileInput.addEventListener('change', () => {
+    addImages(Array.from(fileInput.files));
+    fileInput.value = '';
+  });
+
+  btnClear.addEventListener('click', () => {
+    img2pdfFiles = [];
+    renderImagePreview();
+  });
+
+  btnCreate.addEventListener('click', () => createPdfFromImages());
+
+  function addImages(files) {
+    files.forEach(file => {
+      img2pdfFiles.push(file);
+    });
+    renderImagePreview();
+    showToast('Images Added', `${files.length} image(s) added`, 'success', 2000);
+  }
+
+  function renderImagePreview() {
+    preview.innerHTML = '';
+    btnCreate.disabled = img2pdfFiles.length === 0;
+    btnClear.disabled = img2pdfFiles.length === 0;
+
+    img2pdfFiles.forEach((file, index) => {
+      const card = document.createElement('div');
+      card.className = 'image-card';
+      card.draggable = true;
+      card.dataset.index = index;
+      
+      const url = URL.createObjectURL(file);
+      card.innerHTML = `
+        <img class="image-thumb" src="${url}" alt="${file.name}" />
+        <div class="image-meta">
+          <div class="image-filename">${file.name}</div>
+          <div class="image-info">
+            <span class="image-badge">#${index + 1}</span>
+            <button class="drop-zone-file-remove" data-index="${index}">×</button>
+          </div>
+        </div>
+      `;
+
+      // Remove button
+      card.querySelector('.drop-zone-file-remove').addEventListener('click', (e) => {
+        e.stopPropagation();
+        img2pdfFiles.splice(index, 1);
+        renderImagePreview();
+      });
+
+      // Drag reorder
+      card.addEventListener('dragstart', (e) => {
+        e.dataTransfer.setData('text/plain', index);
+        card.style.opacity = '0.5';
+      });
+
+      card.addEventListener('dragend', () => {
+        card.style.opacity = '1';
+      });
+
+      card.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        card.style.borderColor = 'var(--primary)';
+      });
+
+      card.addEventListener('dragleave', () => {
+        card.style.borderColor = '';
+      });
+
+      card.addEventListener('drop', (e) => {
+        e.preventDefault();
+        card.style.borderColor = '';
+        const fromIndex = parseInt(e.dataTransfer.getData('text/plain'));
+        const toIndex = index;
+        if (fromIndex !== toIndex) {
+          const item = img2pdfFiles.splice(fromIndex, 1)[0];
+          img2pdfFiles.splice(toIndex, 0, item);
+          renderImagePreview();
+        }
+      });
+
+      preview.appendChild(card);
+    });
+  }
+}
+
+
+async function createPdfFromImages() {
+  if (img2pdfFiles.length === 0) {
+    showToast('No Images', 'Add images first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnImg2Pdf');
+  const progress = document.getElementById('img2pdfProgress');
+
+  setButtonLoading(btn, true, 'Creating...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    img2pdfFiles.forEach((file, i) => {
+      fd.append('files', file);
+    });
+    fd.append('order', img2pdfFiles.map((_, i) => i).join(','));
+    fd.append('output_name', document.getElementById('img2pdf_output').value || 'images.pdf');
+    fd.append('page_size', document.getElementById('img2pdf_pagesize').value || 'a4');
+
+    const res = await fetch('/api/images-to-pdf', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const filename = document.getElementById('img2pdf_output').value || 'images.pdf';
+    downloadBlob(blob, filename.endsWith('.pdf') ? filename : filename + '.pdf');
+
+    showSuccessAnimation('PDF Created!', `${img2pdfFiles.length} images converted`);
+    
+    if (typeof addToRecentFiles === 'function') {
+      addToRecentFiles(filename, 'images-to-pdf');
+    }
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Merge PDFs ===============
+
+let mergeFiles = [];
+
+function initMergePdf() {
+  const dropZone = document.getElementById('mergeDropZone');
+  const fileInput = document.getElementById('merge_files');
+  const fileList = document.getElementById('mergeFileList');
+  const btnMerge = document.getElementById('btnMerge');
+  const btnClear = document.getElementById('btnMergeClear');
+  const progress = document.getElementById('mergeProgress');
+
+  if (!dropZone || !fileInput) return;
+
+  // Click to browse - handle clicks on the drop zone and its children
+  dropZone.addEventListener('click', (e) => {
+    if (e.target.classList.contains('drop-zone-file-remove')) return;
+    fileInput.click();
+  });
+
+  ['dragenter', 'dragover'].forEach(e => {
+    dropZone.addEventListener(e, (ev) => {
+      ev.preventDefault();
+      dropZone.classList.add('drag-over');
+    });
+  });
+
+  ['dragleave', 'drop'].forEach(e => {
+    dropZone.addEventListener(e, (ev) => {
+      ev.preventDefault();
+      dropZone.classList.remove('drag-over');
+    });
+  });
+
+  dropZone.addEventListener('drop', (e) => {
+    const files = Array.from(e.dataTransfer.files).filter(f => f.type === 'application/pdf');
+    addPdfs(files);
+  });
+
+  fileInput.addEventListener('change', () => {
+    addPdfs(Array.from(fileInput.files));
+    fileInput.value = '';
+  });
+
+  btnClear.addEventListener('click', () => {
+    mergeFiles = [];
+    renderMergeList();
+  });
+
+  btnMerge.addEventListener('click', () => mergePdfs());
+
+  function addPdfs(files) {
+    files.forEach(file => mergeFiles.push(file));
+    renderMergeList();
+    showToast('PDFs Added', `${files.length} file(s) added`, 'success', 2000);
+  }
+
+  function renderMergeList() {
+    fileList.innerHTML = '';
+    btnMerge.disabled = mergeFiles.length < 2;
+    btnClear.disabled = mergeFiles.length === 0;
+
+    mergeFiles.forEach((file, index) => {
+      const item = document.createElement('div');
+      item.style.cssText = 'display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--border-light); border-radius: 8px; margin-bottom: 8px; cursor: move;';
+      item.draggable = true;
+      item.dataset.index = index;
+
+      item.innerHTML = `
+        <svg width="20" height="20" fill="none" stroke="var(--primary)" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+        <span style="flex: 1; font-size: 13px; font-weight: 500;">${file.name}</span>
+        <span style="font-size: 11px; color: var(--text-muted);">#${index + 1}</span>
+        <button class="drop-zone-file-remove" data-index="${index}" style="padding: 4px 8px;">×</button>
+      `;
+
+      item.querySelector('.drop-zone-file-remove').addEventListener('click', (e) => {
+        e.stopPropagation();
+        mergeFiles.splice(index, 1);
+        renderMergeList();
+      });
+
+      // Drag reorder
+      item.addEventListener('dragstart', (e) => {
+        e.dataTransfer.setData('text/plain', index);
+        item.style.opacity = '0.5';
+      });
+      item.addEventListener('dragend', () => item.style.opacity = '1');
+      item.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        item.style.background = 'var(--primary-light)';
+      });
+      item.addEventListener('dragleave', () => item.style.background = '');
+      item.addEventListener('drop', (e) => {
+        e.preventDefault();
+        item.style.background = '';
+        const fromIndex = parseInt(e.dataTransfer.getData('text/plain'));
+        if (fromIndex !== index) {
+          const moved = mergeFiles.splice(fromIndex, 1)[0];
+          mergeFiles.splice(index, 0, moved);
+          renderMergeList();
+        }
+      });
+
+      fileList.appendChild(item);
+    });
+  }
+}
+
+async function mergePdfs() {
+  if (mergeFiles.length < 2) {
+    showToast('Need More Files', 'Add at least 2 PDFs', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnMerge');
+  const progress = document.getElementById('mergeProgress');
+
+  setButtonLoading(btn, true, 'Merging...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    mergeFiles.forEach(file => fd.append('files', file));
+    fd.append('order', mergeFiles.map((_, i) => i).join(','));
+    fd.append('output_name', document.getElementById('merge_output').value || 'merged.pdf');
+
+    const res = await fetch('/api/merge-pdf', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const filename = document.getElementById('merge_output').value || 'merged.pdf';
+    downloadBlob(blob, filename.endsWith('.pdf') ? filename : filename + '.pdf');
+
+    showSuccessAnimation('PDFs Merged!', `${mergeFiles.length} files combined`);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Split PDF ===============
+
+let splitFile = null;
+
+function initSplitPdf() {
+  const dropZone = document.getElementById('splitDropZone');
+  const fileInput = document.getElementById('split_file');
+  const btnSplit = document.getElementById('btnSplit');
+  const modeSelect = document.getElementById('split_mode');
+  const pagesInput = document.getElementById('split_pages');
+  const pagesLabel = document.getElementById('split_pages_label');
+  const progress = document.getElementById('splitProgress');
+
+  if (!dropZone) return;
+
+  // Initialize drop zone
+  initDropZone(dropZone, fileInput, {
+    maxSize: 100 * 1024 * 1024,
+    onFile: (file) => {
+      splitFile = file;
+      btnSplit.disabled = !file;
+      if (file) {
+        showToast('PDF Selected', file.name, 'success', 2000);
+      }
+    }
+  });
+
+  // Mode change - update label
+  modeSelect.addEventListener('change', () => {
+    const mode = modeSelect.value;
+    if (mode === 'all') {
+      pagesLabel.textContent = 'Not needed for this mode';
+      pagesInput.placeholder = 'Not needed';
+      pagesInput.disabled = true;
+    } else if (mode === 'range') {
+      pagesLabel.textContent = 'Pages to Extract';
+      pagesInput.placeholder = 'e.g., 1,3,5-8';
+      pagesInput.disabled = false;
+    } else if (mode === 'chunks') {
+      pagesLabel.textContent = 'Pages per Chunk';
+      pagesInput.placeholder = 'e.g., 5';
+      pagesInput.disabled = false;
+    }
+  });
+
+  // Trigger initial state
+  modeSelect.dispatchEvent(new Event('change'));
+
+  btnSplit.addEventListener('click', () => splitPdf());
+}
+
+async function splitPdf() {
+  if (!splitFile) {
+    showToast('No PDF', 'Upload a PDF first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnSplit');
+  const progress = document.getElementById('splitProgress');
+  const mode = document.getElementById('split_mode').value;
+  const pages = document.getElementById('split_pages').value;
+
+  if ((mode === 'range' || mode === 'chunks') && !pages.trim()) {
+    showToast('Missing Input', 'Enter pages or chunk size', 'error');
+    return;
+  }
+
+  setButtonLoading(btn, true, 'Splitting...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    fd.append('file', splitFile);
+    fd.append('mode', mode);
+    fd.append('pages', pages);
+    fd.append('output_name', document.getElementById('split_output').value || 'split');
+
+    const res = await fetch('/api/split-pdf', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const contentType = res.headers.get('content-type');
+    const outputName = document.getElementById('split_output').value || 'split';
+    
+    if (contentType.includes('zip')) {
+      downloadBlob(blob, `${outputName}.zip`);
+    } else {
+      downloadBlob(blob, `${outputName}.pdf`);
+    }
+
+    showSuccessAnimation('PDF Split!', 'Download started');
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Utility ===============
+
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+
+// =============== PDF to Images ===============
+
+let pdf2imgFile = null;
+
+function initPdf2Img() {
+  const dropZone = document.getElementById('pdf2imgDropZone');
+  const fileInput = document.getElementById('pdf2img_file');
+  const btn = document.getElementById('btnPdf2Img');
+
+  if (!dropZone || !fileInput) return;
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 100 * 1024 * 1024,
+    onFile: (file) => {
+      pdf2imgFile = file;
+      btn.disabled = !file;
+      if (file) showToast('PDF Selected', file.name, 'success', 2000);
+    }
+  });
+
+  btn.addEventListener('click', () => convertPdfToImages());
+}
+
+async function convertPdfToImages() {
+  if (!pdf2imgFile) {
+    showToast('No PDF', 'Upload a PDF first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnPdf2Img');
+  const progress = document.getElementById('pdf2imgProgress');
+
+  setButtonLoading(btn, true, 'Converting...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    fd.append('file', pdf2imgFile);
+    fd.append('format', document.getElementById('pdf2img_format').value);
+    fd.append('dpi', document.getElementById('pdf2img_dpi').value);
+    fd.append('pages', document.getElementById('pdf2img_pages').value);
+    fd.append('output_name', document.getElementById('pdf2img_output').value || 'pages');
+
+    const res = await fetch('/api/pdf-to-images', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const outputName = document.getElementById('pdf2img_output').value || 'pages';
+    downloadBlob(blob, `${outputName}_images.zip`);
+
+    showSuccessAnimation('Conversion Complete!', 'Images downloaded as ZIP');
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Compress PDF ===============
+
+let compressFile = null;
+
+function initCompressPdf() {
+  const dropZone = document.getElementById('compressDropZone');
+  const fileInput = document.getElementById('compress_file');
+  const btn = document.getElementById('btnCompress');
+  const btnPreview = document.getElementById('btnCompressPreview');
+  const qualitySlider = document.getElementById('compress_quality');
+  const qualityVal = document.getElementById('compress_quality_val');
+
+  if (!dropZone || !fileInput) return;
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 100 * 1024 * 1024,
+    onFile: (file) => {
+      compressFile = file;
+      btn.disabled = !file;
+      if (btnPreview) btnPreview.disabled = !file;
+      const resultEl = document.getElementById('compressResult');
+      const previewEl = document.getElementById('compressPreviewCard');
+      if (resultEl) resultEl.style.display = 'none';
+      if (previewEl) previewEl.style.display = 'none';
+      if (file) {
+        showToast('PDF Selected', file.name, 'success', 2000);
+        // Trigger initial estimate
+        updateCompressPdfEstimate();
+      }
+    }
+  });
+
+  // Quality slider with debounced estimate
+  if (qualitySlider && qualityVal) {
+    let estimateTimeout = null;
+    qualitySlider.addEventListener('input', () => {
+      qualityVal.textContent = qualitySlider.value;
+      // Debounce the estimate call
+      if (estimateTimeout) clearTimeout(estimateTimeout);
+      estimateTimeout = setTimeout(() => {
+        updateCompressPdfEstimate();
+      }, 300);
+    });
+  }
+
+  if (btnPreview) btnPreview.addEventListener('click', () => previewCompressPdf());
+  btn.addEventListener('click', () => compressPdf());
+}
+
+async function updateCompressPdfEstimate() {
+  if (!compressFile) return;
+  
+  const qualitySlider = document.getElementById('compress_quality');
+  if (!qualitySlider) return;
+  
+  const quality = qualitySlider.value;
+  
+  // Create estimate display if it doesn't exist
+  let displayDiv = document.getElementById('compressPdfEstimate');
+  if (!displayDiv) {
+    displayDiv = document.createElement('div');
+    displayDiv.id = 'compressPdfEstimate';
+    displayDiv.style.cssText = 'margin-top: 12px; padding: 12px; background: var(--border-light); border-radius: var(--radius); font-size: 13px;';
+    const qualityGroup = qualitySlider.closest('.form-group');
+    if (qualityGroup) {
+      qualityGroup.appendChild(displayDiv);
+    }
+  }
+  
+  displayDiv.innerHTML = '<span style="color: var(--text-muted);">Estimating file size...</span>';
+  
+  try {
+    const fd = new FormData();
+    fd.append('file', compressFile);
+    fd.append('quality', quality);
+    
+    const res = await fetch('/api/estimate/compress-pdf', { method: 'POST', body: fd });
+    
+    if (!res.ok) {
+      displayDiv.innerHTML = '<span style="color: var(--text-muted);">Could not estimate</span>';
+      return;
+    }
+    
+    const data = await res.json();
+    const origKB = (data.original_size / 1024).toFixed(1);
+    const estKB = (data.estimated_size / 1024).toFixed(1);
+    const origMB = (data.original_size / 1024 / 1024).toFixed(2);
+    const estMB = (data.estimated_size / 1024 / 1024).toFixed(2);
+    const reduction = data.reduction_percent;
+    
+    // Use KB for small files, MB for large
+    const useKB = data.original_size < 1024 * 1024;
+    const origDisplay = useKB ? `${origKB} KB` : `${origMB} MB`;
+    const estDisplay = useKB ? `${estKB} KB` : `${estMB} MB`;
+    
+    displayDiv.innerHTML = `
+      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
+        <span><strong>Original:</strong> ${origDisplay}</span>
+        <span style="color: var(--primary);">→</span>
+        <span><strong>Estimated:</strong> ${estDisplay}</span>
+        <span style="color: ${reduction > 0 ? 'var(--success)' : 'var(--text-muted)'}; font-weight: 600;">
+          ${reduction > 0 ? '-' + reduction + '%' : 'Minimal reduction'}
+        </span>
+      </div>
+    `;
+  } catch (e) {
+    console.error('Estimate error:', e);
+    displayDiv.innerHTML = '<span style="color: var(--text-muted);">Could not estimate</span>';
+  }
+}
+
+async function previewCompressPdf() {
+  if (!compressFile) {
+    showToast('No PDF', 'Upload a PDF first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnCompressPreview');
+  const previewCard = document.getElementById('compressPreviewCard');
+  const originalImg = document.getElementById('compressPreviewOriginal');
+  const processedImg = document.getElementById('compressPreviewProcessed');
+
+  setButtonLoading(btn, true, 'Loading...');
+
+  try {
+    const fd = new FormData();
+    fd.append('file', compressFile);
+    fd.append('quality', document.getElementById('compress_quality').value);
+
+    const res = await fetch('/api/preview/compress-pdf', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const data = await res.json();
+    originalImg.src = 'data:image/png;base64,' + data.original;
+    processedImg.src = 'data:image/png;base64,' + data.processed;
+    previewCard.style.display = 'block';
+    previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    
+    showToast('Preview Ready', 'Compare original vs compressed', 'success', 2000);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+  }
+}
+
+async function compressPdf() {
+  if (!compressFile) {
+    showToast('No PDF', 'Upload a PDF first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnCompress');
+  const progress = document.getElementById('compressProgress');
+  const resultDiv = document.getElementById('compressResult');
+  const statsDiv = document.getElementById('compressStats');
+
+  setButtonLoading(btn, true, 'Compressing...');
+  showProgress(progress, true, true);
+  resultDiv.style.display = 'none';
+
+  try {
+    const fd = new FormData();
+    fd.append('file', compressFile);
+    fd.append('quality', document.getElementById('compress_quality').value);
+    fd.append('output_name', document.getElementById('compress_output').value || 'compressed.pdf');
+
+    const res = await fetch('/api/compress-pdf', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const filename = document.getElementById('compress_output').value || 'compressed.pdf';
+    downloadBlob(blob, filename.endsWith('.pdf') ? filename : filename + '.pdf');
+
+    // Show compression stats
+    const originalSize = res.headers.get('X-Original-Size');
+    const compressedSize = res.headers.get('X-Compressed-Size');
+    const reduction = res.headers.get('X-Reduction-Percent');
+
+    if (originalSize && compressedSize) {
+      const origMB = (parseInt(originalSize) / 1024 / 1024).toFixed(2);
+      const compMB = (parseInt(compressedSize) / 1024 / 1024).toFixed(2);
+      statsDiv.textContent = `${origMB} MB → ${compMB} MB (${reduction}% smaller)`;
+      resultDiv.style.display = 'block';
+    }
+
+    showSuccessAnimation('PDF Compressed!', `Reduced by ${reduction}%`);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Rotate PDF ===============
+
+let rotateFile = null;
+
+function initRotatePdf() {
+  const dropZone = document.getElementById('rotateDropZone');
+  const fileInput = document.getElementById('rotate_file');
+  const btn = document.getElementById('btnRotate');
+  const btnPreview = document.getElementById('btnRotatePreview');
+
+  if (!dropZone || !fileInput) return;
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 100 * 1024 * 1024,
+    onFile: (file) => {
+      rotateFile = file;
+      btn.disabled = !file;
+      btnPreview.disabled = !file;
+      document.getElementById('rotatePreviewCard').style.display = 'none';
+      if (file) showToast('PDF Selected', file.name, 'success', 2000);
+    }
+  });
+
+  btnPreview.addEventListener('click', () => previewRotatePdf());
+  btn.addEventListener('click', () => rotatePdf());
+}
+
+async function previewRotatePdf() {
+  if (!rotateFile) {
+    showToast('No PDF', 'Upload a PDF first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnRotatePreview');
+  const previewCard = document.getElementById('rotatePreviewCard');
+  const originalImg = document.getElementById('rotatePreviewOriginal');
+  const processedImg = document.getElementById('rotatePreviewProcessed');
+
+  setButtonLoading(btn, true, 'Loading...');
+
+  try {
+    const fd = new FormData();
+    fd.append('file', rotateFile);
+    fd.append('rotation', document.getElementById('rotate_angle').value);
+
+    const res = await fetch('/api/preview/rotate-pdf', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const data = await res.json();
+    originalImg.src = 'data:image/png;base64,' + data.original;
+    processedImg.src = 'data:image/png;base64,' + data.processed;
+    previewCard.style.display = 'block';
+    previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    
+    showToast('Preview Ready', 'Compare original vs rotated', 'success', 2000);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+  }
+}
+
+async function rotatePdf() {
+  if (!rotateFile) {
+    showToast('No PDF', 'Upload a PDF first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnRotate');
+  const progress = document.getElementById('rotateProgress');
+
+  setButtonLoading(btn, true, 'Rotating...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    fd.append('file', rotateFile);
+    fd.append('rotation', document.getElementById('rotate_angle').value);
+    fd.append('pages', document.getElementById('rotate_pages').value);
+    fd.append('output_name', document.getElementById('rotate_output').value || 'rotated.pdf');
+
+    const res = await fetch('/api/rotate-pdf', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const filename = document.getElementById('rotate_output').value || 'rotated.pdf';
+    downloadBlob(blob, filename.endsWith('.pdf') ? filename : filename + '.pdf');
+
+    showSuccessAnimation('PDF Rotated!', 'Download started');
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== Page Numbers ===============
+
+let pagenumsFile = null;
+
+function initPageNums() {
+  const dropZone = document.getElementById('pagenumsDropZone');
+  const fileInput = document.getElementById('pagenums_file');
+  const btn = document.getElementById('btnPageNums');
+  const btnPreview = document.getElementById('btnPageNumsPreview');
+
+  if (!dropZone || !fileInput) return;
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 100 * 1024 * 1024,
+    onFile: (file) => {
+      pagenumsFile = file;
+      btn.disabled = !file;
+      btnPreview.disabled = !file;
+      document.getElementById('pagenumsPreviewCard').style.display = 'none';
+      if (file) showToast('PDF Selected', file.name, 'success', 2000);
+    }
+  });
+
+  btnPreview.addEventListener('click', () => previewPageNums());
+  btn.addEventListener('click', () => addPageNumbers());
+}
+
+async function previewPageNums() {
+  if (!pagenumsFile) {
+    showToast('No PDF', 'Upload a PDF first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnPageNumsPreview');
+  const previewCard = document.getElementById('pagenumsPreviewCard');
+  const originalImg = document.getElementById('pagenumsPreviewOriginal');
+  const processedImg = document.getElementById('pagenumsPreviewProcessed');
+
+  setButtonLoading(btn, true, 'Loading...');
+
+  try {
+    const fd = new FormData();
+    fd.append('file', pagenumsFile);
+    fd.append('position', document.getElementById('pagenums_position').value);
+    fd.append('format', document.getElementById('pagenums_format').value);
+    fd.append('start_number', document.getElementById('pagenums_start').value);
+    fd.append('font_size', document.getElementById('pagenums_fontsize').value);
+
+    const res = await fetch('/api/preview/page-numbers', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const data = await res.json();
+    originalImg.src = 'data:image/png;base64,' + data.original;
+    processedImg.src = 'data:image/png;base64,' + data.processed;
+    previewCard.style.display = 'block';
+    previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    
+    showToast('Preview Ready', 'Compare original vs numbered', 'success', 2000);
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+  }
+}
+
+async function addPageNumbers() {
+  if (!pagenumsFile) {
+    showToast('No PDF', 'Upload a PDF first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnPageNums');
+  const progress = document.getElementById('pagenumsProgress');
+
+  setButtonLoading(btn, true, 'Processing...');
+  showProgress(progress, true, true);
+
+  try {
+    const fd = new FormData();
+    fd.append('file', pagenumsFile);
+    fd.append('position', document.getElementById('pagenums_position').value);
+    fd.append('format', document.getElementById('pagenums_format').value);
+    fd.append('start_number', document.getElementById('pagenums_start').value);
+    fd.append('font_size', document.getElementById('pagenums_fontsize').value);
+    fd.append('output_name', document.getElementById('pagenums_output').value || 'numbered.pdf');
+
+    const res = await fetch('/api/add-page-numbers', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const blob = await res.blob();
+    const filename = document.getElementById('pagenums_output').value || 'numbered.pdf';
+    downloadBlob(blob, filename.endsWith('.pdf') ? filename : filename + '.pdf');
+
+    showSuccessAnimation('Page Numbers Added!', 'Download started');
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+
+// =============== PDF OCR ===============
+
+let ocrFile = null;
+let ocrExtractedText = '';
+
+function initPdfOcr() {
+  const dropZone = document.getElementById('ocrDropZone');
+  const fileInput = document.getElementById('ocr_file');
+  const btn = document.getElementById('btnOcr');
+  const copyBtn = document.getElementById('btnOcrCopy');
+  const notice = document.getElementById('ocrNotice');
+
+  if (!dropZone || !fileInput) return;
+
+  // Check if Tesseract is available
+  fetch('/api/ocr-status')
+    .then(r => r.json())
+    .then(data => {
+      if (!data.available && notice) {
+        notice.style.display = 'flex';
+      }
+    })
+    .catch(() => {});
+
+  initDropZone(dropZone, fileInput, {
+    maxSize: 100 * 1024 * 1024,
+    onFile: (file) => {
+      ocrFile = file;
+      btn.disabled = !file;
+      document.getElementById('ocrResult').style.display = 'none';
+      copyBtn.disabled = true;
+      if (file) showToast('PDF Selected', file.name, 'success', 2000);
+    }
+  });
+
+  btn.addEventListener('click', () => extractPdfText());
+  copyBtn.addEventListener('click', () => copyOcrText());
+}
+
+async function extractPdfText() {
+  if (!ocrFile) {
+    showToast('No PDF', 'Upload a PDF first', 'error');
+    return;
+  }
+
+  const btn = document.getElementById('btnOcr');
+  const copyBtn = document.getElementById('btnOcrCopy');
+  const progress = document.getElementById('ocrProgress');
+  const resultDiv = document.getElementById('ocrResult');
+  const textArea = document.getElementById('ocrText');
+
+  setButtonLoading(btn, true, 'Extracting...');
+  showProgress(progress, true, true);
+  resultDiv.style.display = 'none';
+
+  try {
+    const fd = new FormData();
+    fd.append('file', ocrFile);
+    fd.append('language', document.getElementById('ocr_language').value);
+    fd.append('pages', document.getElementById('ocr_pages').value);
+    fd.append('dpi', document.getElementById('ocr_dpi').value);
+    fd.append('output_format', 'json');
+
+    const res = await fetch('/api/pdf-ocr', { method: 'POST', body: fd });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ detail: 'Failed' }));
+      throw new Error(err.detail);
+    }
+
+    const data = await res.json();
+    ocrExtractedText = data.text;
+    
+    textArea.value = ocrExtractedText;
+    resultDiv.style.display = 'block';
+    copyBtn.disabled = false;
+
+    showToast('Text Extracted', `${data.pages} page(s) processed`, 'success');
+
+  } catch (e) {
+    showToast('Error', e.message, 'error');
+  } finally {
+    setButtonLoading(btn, false);
+    showProgress(progress, false);
+  }
+}
+
+async function copyOcrText() {
+  if (!ocrExtractedText) return;
+  
+  try {
+    await navigator.clipboard.writeText(ocrExtractedText);
+    showToast('Copied!', 'Text copied to clipboard', 'success', 2000);
+  } catch (e) {
+    showToast('Copy Failed', 'Please select and copy manually', 'error');
+  }
+}
+
+
+// =============== Initialize All ===============
+
+function initPdfTools() {
+  initImagesToPdf();
+  initMergePdf();
+  initSplitPdf();
+  initPdf2Img();
+  initCompressPdf();
+  initRotatePdf();
+  initPageNums();
+  initPdfOcr();
+}

static/js/utils.js

@@ -0,0 +1,571 @@
+/**
+ * Utility Functions
+ * Toast, loading, validation, drag-drop, modal
+ */
+
+// =============== Toast Notifications ===============
+
+const toastContainer = document.createElement('div');
+toastContainer.className = 'toast-container';
+document.body.appendChild(toastContainer);
+
+const toastIcons = {
+  success: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`,
+  error: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`,
+  info: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`
+};
+
+function showToast(title, message, type = 'info', duration = 4000) {
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type}`;
+  
+  toast.innerHTML = `
+    <div class="toast-icon">${toastIcons[type]}</div>
+    <div class="toast-content">
+      <div class="toast-title">${title}</div>
+      ${message ? `<div class="toast-message">${message}</div>` : ''}
+    </div>
+    <button class="toast-close">
+      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </button>
+  `;
+  
+  toast.querySelector('.toast-close').addEventListener('click', () => removeToast(toast));
+  toastContainer.appendChild(toast);
+  
+  if (duration > 0) {
+    setTimeout(() => removeToast(toast), duration);
+  }
+  
+  return toast;
+}
+
+function removeToast(toast) {
+  if (!toast.parentNode) return;
+  toast.classList.add('hiding');
+  setTimeout(() => toast.remove(), 300);
+}
+
+// =============== Loading States ===============
+
+function setButtonLoading(btn, loading, loadingText = 'Loading...') {
+  if (loading) {
+    btn.dataset.originalText = btn.innerHTML;
+    btn.innerHTML = `<span class="spinner"></span> ${loadingText}`;
+    btn.classList.add('loading');
+    btn.disabled = true;
+  } else {
+    btn.innerHTML = btn.dataset.originalText || btn.innerHTML;
+    btn.classList.remove('loading');
+    btn.disabled = false;
+  }
+}
+
+function showProgress(container, show = true, indeterminate = true) {
+  if (!container) return;
+  
+  if (show) {
+    container.classList.add('active');
+    const fill = container.querySelector('.progress-fill');
+    if (fill) {
+      if (indeterminate) {
+        fill.classList.add('indeterminate');
+        fill.style.width = '';
+      } else {
+        fill.classList.remove('indeterminate');
+      }
+    }
+  } else {
+    container.classList.remove('active');
+  }
+}
+
+// =============== Form Validation ===============
+
+function validateUrl(input, errorMsg = 'Invalid URL') {
+  const value = input.value.trim();
+  const formGroup = input.closest('.form-group');
+  
+  if (!value) {
+    clearFieldError(formGroup);
+    return true;
+  }
+  
+  try {
+    new URL(value);
+    clearFieldError(formGroup);
+    return true;
+  } catch {
+    setFieldError(formGroup, errorMsg);
+    return false;
+  }
+}
+
+function setFieldError(formGroup, message) {
+  if (!formGroup) return;
+  formGroup.classList.add('error');
+  
+  let errorEl = formGroup.querySelector('.form-error');
+  if (!errorEl) {
+    errorEl = document.createElement('div');
+    errorEl.className = 'form-error';
+    errorEl.innerHTML = `
+      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>
+      <span></span>
+    `;
+    formGroup.appendChild(errorEl);
+  }
+  
+  errorEl.querySelector('span').textContent = message;
+}
+
+function clearFieldError(formGroup) {
+  if (!formGroup) return;
+  formGroup.classList.remove('error');
+}
+
+// =============== Drag & Drop ===============
+
+function initDropZone(dropZone, fileInput, options = {}) {
+  const {
+    onFile = () => {},
+    maxSize = 50 * 1024 * 1024
+  } = options;
+  
+  const fileDisplay = dropZone.querySelector('.drop-zone-file');
+  const fileName = dropZone.querySelector('.drop-zone-file-name');
+  const fileSize = dropZone.querySelector('.drop-zone-file-size');
+  const removeBtn = dropZone.querySelector('.drop-zone-file-remove');
+  
+  dropZone.addEventListener('click', (e) => {
+    if (e.target === removeBtn) return;
+    fileInput.click();
+  });
+  
+  ['dragenter', 'dragover'].forEach(event => {
+    dropZone.addEventListener(event, (e) => {
+      e.preventDefault();
+      dropZone.classList.add('drag-over');
+    });
+  });
+  
+  ['dragleave', 'drop'].forEach(event => {
+    dropZone.addEventListener(event, (e) => {
+      e.preventDefault();
+      dropZone.classList.remove('drag-over');
+    });
+  });
+  
+  dropZone.addEventListener('drop', (e) => {
+    const files = e.dataTransfer.files;
+    if (files.length > 0) handleFile(files[0]);
+  });
+  
+  fileInput.addEventListener('change', () => {
+    if (fileInput.files.length > 0) handleFile(fileInput.files[0]);
+  });
+  
+  if (removeBtn) {
+    removeBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      clearFile();
+    });
+  }
+  
+  function handleFile(file) {
+    if (file.size > maxSize) {
+      showToast('File Too Large', `Max size: ${formatFileSize(maxSize)}`, 'error');
+      return;
+    }
+    
+    if (fileDisplay) {
+      fileDisplay.classList.add('active');
+      if (fileName) fileName.textContent = file.name;
+      if (fileSize) fileSize.textContent = formatFileSize(file.size);
+    }
+    
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    fileInput.files = dt.files;
+    
+    onFile(file);
+  }
+  
+  function clearFile() {
+    fileInput.value = '';
+    if (fileDisplay) fileDisplay.classList.remove('active');
+    onFile(null);
+  }
+  
+  return { handleFile, clearFile };
+}
+
+function formatFileSize(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
+// =============== Image Modal ===============
+
+let currentModal = null;
+
+function showImageModal(imageUrl, filename, dimensions, size) {
+  closeImageModal();
+  
+  const modal = document.createElement('div');
+  modal.className = 'modal-overlay';
+  modal.innerHTML = `
+    <div class="modal-content">
+      <button class="modal-close">
+        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>
+      <img class="modal-image" src="${imageUrl}" alt="${filename}" />
+      <div class="modal-footer">
+        <div class="modal-info">
+          <strong>${filename}</strong><br>
+          ${dimensions || 'Unknown'} • ${size || ''}
+        </div>
+        <a href="${imageUrl}" target="_blank" class="btn btn-secondary">Open Original</a>
+      </div>
+    </div>
+  `;
+  
+  document.body.appendChild(modal);
+  requestAnimationFrame(() => modal.classList.add('active'));
+  
+  modal.querySelector('.modal-close').addEventListener('click', closeImageModal);
+  modal.addEventListener('click', (e) => {
+    if (e.target === modal) closeImageModal();
+  });
+  
+  document.addEventListener('keydown', handleModalEsc);
+  currentModal = modal;
+}
+
+function closeImageModal() {
+  if (currentModal) {
+    currentModal.classList.remove('active');
+    setTimeout(() => currentModal?.remove(), 200);
+    currentModal = null;
+    document.removeEventListener('keydown', handleModalEsc);
+  }
+}
+
+function handleModalEsc(e) {
+  if (e.key === 'Escape') closeImageModal();
+}
+
+// =============== Keyboard Shortcuts ===============
+
+const shortcuts = {};
+
+function registerShortcut(key, callback, description = '') {
+  shortcuts[key.toLowerCase()] = { callback, description };
+}
+
+document.addEventListener('keydown', (e) => {
+  if (e.target.matches('input, textarea, select')) return;
+  
+  let key = '';
+  if (e.ctrlKey || e.metaKey) key += 'ctrl+';
+  if (e.shiftKey) key += 'shift+';
+  if (e.altKey) key += 'alt+';
+  key += e.key.toLowerCase();
+  
+  const shortcut = shortcuts[key];
+  if (shortcut) {
+    e.preventDefault();
+    shortcut.callback();
+  }
+});
+
+
+// =============== Success Animation ===============
+
+function showSuccessAnimation(title = 'Success!', message = 'Operation completed') {
+  // Create overlay
+  const overlay = document.createElement('div');
+  overlay.className = 'success-overlay';
+  overlay.innerHTML = `
+    <div class="success-content">
+      <div class="success-icon">
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
+        </svg>
+      </div>
+      <div class="success-title">${title}</div>
+      <div class="success-message">${message}</div>
+      <button class="btn btn-primary">Continue</button>
+    </div>
+  `;
+  
+  document.body.appendChild(overlay);
+  
+  // Add confetti
+  createConfetti(overlay);
+  
+  // Show overlay
+  requestAnimationFrame(() => overlay.classList.add('active'));
+  
+  // Close handlers
+  const closeBtn = overlay.querySelector('.btn');
+  closeBtn.addEventListener('click', () => closeSuccessAnimation(overlay));
+  
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) closeSuccessAnimation(overlay);
+  });
+  
+  // Auto close after 3 seconds
+  setTimeout(() => closeSuccessAnimation(overlay), 3000);
+}
+
+function closeSuccessAnimation(overlay) {
+  if (!overlay) return;
+  overlay.style.opacity = '0';
+  setTimeout(() => overlay.remove(), 300);
+}
+
+function createConfetti(container) {
+  const colors = ['#4caf50', '#66bb6a', '#81c784', '#a5d6a7', '#c8e6c9', '#2e7d32'];
+  
+  for (let i = 0; i < 50; i++) {
+    const confetti = document.createElement('div');
+    confetti.className = 'confetti';
+    confetti.style.left = Math.random() * 100 + '%';
+    confetti.style.top = '-10px';
+    confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
+    confetti.style.animationDelay = Math.random() * 0.5 + 's';
+    confetti.style.animationDuration = (2 + Math.random() * 2) + 's';
+    container.appendChild(confetti);
+  }
+}
+
+// =============== Step Indicator ===============
+
+class StepIndicator {
+  constructor(containerId, steps) {
+    this.container = document.getElementById(containerId);
+    this.steps = steps;
+    this.currentStep = 0;
+    this.render();
+  }
+  
+  render() {
+    if (!this.container) return;
+    
+    let html = '';
+    this.steps.forEach((step, index) => {
+      const isActive = index === this.currentStep;
+      const isCompleted = index < this.currentStep;
+      
+      html += `
+        <div class="step ${isActive ? 'active' : ''} ${isCompleted ? 'completed' : ''}">
+          <div class="step-number ${isActive ? 'pulse' : ''}">
+            ${isCompleted ? '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>' : index + 1}
+          </div>
+          <span class="step-label">${step}</span>
+        </div>
+      `;
+      
+      if (index < this.steps.length - 1) {
+        html += `<div class="step-connector ${isCompleted ? 'completed' : ''}"></div>`;
+      }
+    });
+    
+    this.container.innerHTML = html;
+  }
+  
+  setStep(stepIndex) {
+    this.currentStep = Math.max(0, Math.min(stepIndex, this.steps.length - 1));
+    this.render();
+  }
+  
+  next() {
+    if (this.currentStep < this.steps.length - 1) {
+      this.currentStep++;
+      this.render();
+    }
+  }
+  
+  prev() {
+    if (this.currentStep > 0) {
+      this.currentStep--;
+      this.render();
+    }
+  }
+  
+  complete() {
+    this.currentStep = this.steps.length;
+    this.render();
+  }
+  
+  reset() {
+    this.currentStep = 0;
+    this.render();
+  }
+}
+
+// =============== Error States ===============
+
+function showErrorState(container, title, message, actions = []) {
+  const errorHtml = `
+    <div class="error-state">
+      <div class="error-state-icon">
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+        </svg>
+      </div>
+      <div class="error-state-title">${title}</div>
+      <div class="error-state-message">${message}</div>
+      <div class="error-state-actions">
+        ${actions.map(a => `<button class="btn ${a.primary ? 'btn-primary' : 'btn-secondary'}" data-action="${a.id}">${a.label}</button>`).join('')}
+      </div>
+    </div>
+  `;
+  
+  container.innerHTML = errorHtml;
+  
+  // Bind action handlers
+  actions.forEach(action => {
+    const btn = container.querySelector(`[data-action="${action.id}"]`);
+    if (btn && action.handler) {
+      btn.addEventListener('click', action.handler);
+    }
+  });
+}
+
+function showInlineError(container, title, message, actionLabel, actionHandler) {
+  const errorEl = document.createElement('div');
+  errorEl.className = 'inline-error';
+  errorEl.innerHTML = `
+    <div class="inline-error-icon">
+      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>
+    </div>
+    <div class="inline-error-content">
+      <div class="inline-error-title">${title}</div>
+      <div class="inline-error-message">${message}</div>
+    </div>
+    ${actionLabel ? `<button class="inline-error-action">${actionLabel}</button>` : ''}
+  `;
+  
+  if (actionLabel && actionHandler) {
+    errorEl.querySelector('.inline-error-action').addEventListener('click', () => {
+      errorEl.remove();
+      actionHandler();
+    });
+  }
+  
+  container.appendChild(errorEl);
+  return errorEl;
+}
+
+// =============== Empty States ===============
+
+function showEmptyState(container, icon, title, message, actions = []) {
+  const emptyHtml = `
+    <div class="empty-state">
+      <div class="empty-state-illustration">
+        ${icon}
+      </div>
+      <div class="empty-state-title">${title}</div>
+      <div class="empty-state-message">${message}</div>
+      ${actions.length > 0 ? `
+        <div class="empty-state-actions">
+          ${actions.map(a => `<button class="btn ${a.primary ? 'btn-primary' : 'btn-secondary'}" data-action="${a.id}">${a.label}</button>`).join('')}
+        </div>
+      ` : ''}
+    </div>
+  `;
+  
+  container.innerHTML = emptyHtml;
+  
+  // Bind action handlers
+  actions.forEach(action => {
+    const btn = container.querySelector(`[data-action="${action.id}"]`);
+    if (btn && action.handler) {
+      btn.addEventListener('click', action.handler);
+    }
+  });
+}
+
+function showPreviewEmpty(container) {
+  container.innerHTML = `
+    <div class="preview-empty">
+      <div class="preview-empty-icon">
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+      </div>
+      <div class="preview-empty-title">No PDF loaded</div>
+      <div class="preview-empty-message">Upload a file or enter a URL to preview</div>
+    </div>
+  `;
+}
+
+function showImageGridEmpty(container) {
+  container.innerHTML = `
+    <div class="image-grid-empty">
+      <div class="image-grid-empty-icon">
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+        </svg>
+      </div>
+      <div class="image-grid-empty-title">No images yet</div>
+      <div class="image-grid-empty-message">Enter a webpage URL above and click "Fetch Images" to get started</div>
+    </div>
+  `;
+}
+
+// =============== Feature Hints ===============
+
+function showFeatureHint(container, icon, title, message, dismissKey) {
+  // Check if already dismissed
+  if (localStorage.getItem(`hint_${dismissKey}`)) return;
+  
+  const hint = document.createElement('div');
+  hint.className = 'feature-hint';
+  hint.innerHTML = `
+    <div class="feature-hint-icon">${icon}</div>
+    <div class="feature-hint-content">
+      <div class="feature-hint-title">${title}</div>
+      <div class="feature-hint-message">${message}</div>
+    </div>
+    <button class="feature-hint-dismiss">
+      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </button>
+  `;
+  
+  hint.querySelector('.feature-hint-dismiss').addEventListener('click', () => {
+    localStorage.setItem(`hint_${dismissKey}`, 'true');
+    hint.style.opacity = '0';
+    hint.style.transform = 'translateY(-10px)';
+    setTimeout(() => hint.remove(), 300);
+  });
+  
+  container.prepend(hint);
+}
+
+// =============== Tooltip Initialization ===============
+
+function initTooltips() {
+  // Add tooltip class to elements with data-tooltip
+  document.querySelectorAll('[data-tooltip]').forEach(el => {
+    if (!el.classList.contains('tooltip')) {
+      el.classList.add('tooltip');
+    }
+  });
+}
+
+// Initialize tooltips on load
+document.addEventListener('DOMContentLoaded', initTooltips);

watermark_remover.py

@@ -0,0 +1,251 @@
+"""
+Watermark Remover Module
+Removes text watermarks from PDF pages using image processing
+Optimized for file size and quality
+"""
+
+import io
+import fitz  # PyMuPDF
+import numpy as np
+from PIL import Image
+from concurrent.futures import ThreadPoolExecutor
+import time
+
+try:
+    import cv2
+    CV2_AVAILABLE = True
+except ImportError:
+    CV2_AVAILABLE = False
+
+
+def remove_watermark_from_pdf(
+    pdf_bytes: bytes,
+    watermark_text: str = "Educated Nepal",
+    method: str = "inpaint",
+    intensity: int = 50,
+    dpi: int = 150,
+    jpeg_quality: int = 75,
+    max_workers: int = 4
+) -> bytes:
+    """
+    Remove watermark from PDF pages with optimized output size.
+    Uses JPEG compression to keep file size small.
+    
+    Args:
+        pdf_bytes: Input PDF as bytes
+        watermark_text: Text to remove (not used in current methods)
+        method: 'inpaint', 'threshold', or 'color'
+        intensity: 0-100, higher = more aggressive removal
+        dpi: Resolution for processing (lower = smaller file, 100-150 recommended)
+        jpeg_quality: JPEG quality 10-100 (lower = smaller file, 60-80 recommended)
+        max_workers: Parallel processing threads
+    """
+    if not CV2_AVAILABLE:
+        raise ImportError("OpenCV not installed. Run: pip install opencv-python-headless")
+    
+    start_time = time.time()
+    original_size = len(pdf_bytes)
+    
+    doc = fitz.open(stream=pdf_bytes, filetype="pdf")
+    output_doc = fitz.open()
+    
+    # Get original page sizes to maintain dimensions
+    page_sizes = [(doc[i].rect.width, doc[i].rect.height) for i in range(len(doc))]
+    
+    def process_page(page_num):
+        page = doc[page_num]
+        orig_width, orig_height = page_sizes[page_num]
+        
+        # Render at specified DPI
+        mat = fitz.Matrix(dpi / 72, dpi / 72)
+        pix = page.get_pixmap(matrix=mat)
+        
+        # Convert to numpy array directly (faster than PNG encoding)
+        img = np.frombuffer(pix.samples, dtype=np.uint8).reshape(pix.height, pix.width, pix.n)
+        
+        # Convert RGB to BGR for OpenCV if needed
+        if pix.n == 4:  # RGBA
+            img = cv2.cvtColor(img, cv2.COLOR_RGBA2BGR)
+        elif pix.n == 3:  # RGB
+            img = cv2.cvtColor(img, cv2.COLOR_RGB2BGR)
+        
+        # Process to remove watermark
+        if method == "inpaint":
+            result = remove_by_inpainting(img, intensity)
+        elif method == "threshold":
+            result = remove_by_threshold(img, intensity)
+        elif method == "color":
+            result = remove_by_color(img, intensity)
+        else:
+            result = remove_by_inpainting(img, intensity)
+        
+        # Convert back to RGB for PIL
+        result_rgb = cv2.cvtColor(result, cv2.COLOR_BGR2RGB)
+        
+        # Encode as JPEG with specified quality
+        pil_img = Image.fromarray(result_rgb)
+        jpeg_buffer = io.BytesIO()
+        pil_img.save(jpeg_buffer, format='JPEG', quality=jpeg_quality, optimize=True)
+        jpeg_bytes = jpeg_buffer.getvalue()
+        
+        return page_num, jpeg_bytes, (orig_width, orig_height)
+    
+    # Process pages in parallel
+    with ThreadPoolExecutor(max_workers=max_workers) as executor:
+        results = list(executor.map(lambda i: process_page(i), range(len(doc))))
+    
+    # Sort by page number
+    results.sort(key=lambda x: x[0])
+    
+    # Create output PDF with original page sizes
+    for page_num, jpeg_bytes, (orig_width, orig_height) in results:
+        # Create page with original dimensions
+        pdf_page = output_doc.new_page(width=orig_width, height=orig_height)
+        
+        # Insert image to fill the page
+        rect = fitz.Rect(0, 0, orig_width, orig_height)
+        pdf_page.insert_image(rect, stream=jpeg_bytes)
+    
+    # Save with maximum compression
+    output_bytes = output_doc.tobytes(deflate=True, garbage=4, clean=True)
+    
+    page_count = len(doc)
+    doc.close()
+    output_doc.close()
+    
+    elapsed = time.time() - start_time
+    output_size = len(output_bytes)
+    ratio = output_size / original_size if original_size > 0 else 1
+    print(f"Watermark removal: {page_count} pages in {elapsed:.1f}s, "
+          f"{original_size/1024:.0f}KB -> {output_size/1024:.0f}KB ({ratio:.1%})")
+    
+    return output_bytes
+
+
+def remove_by_inpainting(img: np.ndarray, intensity: int) -> np.ndarray:
+    """Remove watermark using inpainting - best for handwritten notes."""
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+    
+    # Adaptive threshold based on intensity
+    # Higher intensity = lower threshold = more aggressive
+    thresh_value = 220 - int(intensity * 0.4)  # Range: 220 to 180
+    
+    # Find light gray areas (watermark)
+    _, mask = cv2.threshold(gray, thresh_value, 255, cv2.THRESH_BINARY)
+    
+    # Exclude pure white (paper) and very light areas
+    white_mask = gray > 248
+    mask[white_mask] = 0
+    
+    # Also exclude dark areas (actual content)
+    dark_mask = gray < 200
+    mask[dark_mask] = 0
+    
+    # Small dilation to cover watermark edges
+    kernel = np.ones((2, 2), np.uint8)
+    mask = cv2.dilate(mask, kernel, iterations=1)
+    
+    # Inpaint - use TELEA for better results
+    result = cv2.inpaint(img, mask, inpaintRadius=3, flags=cv2.INPAINT_TELEA)
+    
+    return result
+
+
+def remove_by_threshold(img: np.ndarray, intensity: int) -> np.ndarray:
+    """Remove watermark by converting light gray to white - fast method."""
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+    
+    # Threshold: higher intensity = more aggressive
+    thresh_value = 230 - int(intensity * 0.5)  # Range: 230 to 180
+    
+    # Create mask for light gray areas
+    mask = (gray > thresh_value) & (gray < 250)
+    
+    result = img.copy()
+    result[mask] = [255, 255, 255]
+    
+    return result
+
+
+def remove_by_color(img: np.ndarray, intensity: int) -> np.ndarray:
+    """Remove watermark by targeting gray color range."""
+    hsv = cv2.cvtColor(img, cv2.COLOR_BGR2HSV)
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+    
+    # Target low saturation (gray) and high value (light)
+    lower_gray = np.array([0, 0, 200 - intensity // 2])
+    upper_gray = np.array([180, 40 + intensity // 3, 250])
+    
+    mask = cv2.inRange(hsv, lower_gray, upper_gray)
+    
+    # Don't remove dark content
+    mask[gray < 150] = 0
+    
+    # Don't remove pure white
+    mask[gray > 250] = 0
+    
+    kernel = np.ones((2, 2), np.uint8)
+    mask = cv2.dilate(mask, kernel, iterations=1)
+    
+    result = img.copy()
+    result[mask > 0] = [255, 255, 255]
+    
+    return result
+
+
+def preview_single_page(
+    pdf_bytes: bytes,
+    page_num: int = 0,
+    method: str = "inpaint",
+    intensity: int = 50,
+    dpi: int = 100
+) -> tuple[bytes, bytes]:
+    """
+    Preview watermark removal on a single page.
+    Returns (original_jpeg, processed_jpeg) for comparison.
+    """
+    if not CV2_AVAILABLE:
+        raise ImportError("OpenCV not installed")
+    
+    doc = fitz.open(stream=pdf_bytes, filetype="pdf")
+    
+    if page_num >= len(doc):
+        page_num = 0
+    
+    page = doc[page_num]
+    mat = fitz.Matrix(dpi / 72, dpi / 72)
+    pix = page.get_pixmap(matrix=mat)
+    
+    # Convert to numpy
+    img = np.frombuffer(pix.samples, dtype=np.uint8).reshape(pix.height, pix.width, pix.n)
+    
+    if pix.n == 4:
+        img_bgr = cv2.cvtColor(img, cv2.COLOR_RGBA2BGR)
+        img_rgb = cv2.cvtColor(img, cv2.COLOR_RGBA2RGB)
+    else:
+        img_bgr = cv2.cvtColor(img, cv2.COLOR_RGB2BGR)
+        img_rgb = img
+    
+    # Original as JPEG
+    pil_original = Image.fromarray(img_rgb)
+    orig_buffer = io.BytesIO()
+    pil_original.save(orig_buffer, format='JPEG', quality=85)
+    original_bytes = orig_buffer.getvalue()
+    
+    # Process
+    if method == "inpaint":
+        result = remove_by_inpainting(img_bgr, intensity)
+    elif method == "threshold":
+        result = remove_by_threshold(img_bgr, intensity)
+    else:
+        result = remove_by_color(img_bgr, intensity)
+    
+    # Processed as JPEG
+    result_rgb = cv2.cvtColor(result, cv2.COLOR_BGR2RGB)
+    pil_processed = Image.fromarray(result_rgb)
+    proc_buffer = io.BytesIO()
+    pil_processed.save(proc_buffer, format='JPEG', quality=85)
+    processed_bytes = proc_buffer.getvalue()
+    
+    doc.close()
+    return original_bytes, processed_bytes