Auto-deploy from GitHub: 48eb1bb0a56448763c25a67b22cabdf45eae8a7e

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,29 @@
+FROM python:3.10-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    git \
+    curl \
+    build-essential \
+    libgl1 \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy project files
+COPY pyproject.toml .
+COPY . .
+
+# Install dependencies and project
+RUN pip install --no-cache-dir .
+
+# Create necessary directories
+RUN mkdir -p uploads temp_dir
+
+# Expose port
+EXPOSE 7860
+
+# Run the FastAPI app (worker starts automatically on first upload)
+CMD ["python", "run.py"]

README.md

@@ -1,10 +1,34 @@
 ---
-title: OCR
-emoji: 🏢
-colorFrom: red
+title: OCR Text Extractor
+emoji: 📝
+colorFrom: green
 colorTo: yellow
 sdk: docker
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# OCR Text Extractor
+
+A Python-based OCR service with neobrutalist web interface.
+
+## Features
+- 📷 Image upload via REST API
+- 🤖 Automatic OCR using PaddleOCR/EasyOCR
+- 💾 SQLite database for queue management
+- 🎨 Neobrutalist UI with smooth animations
+- 🔄 Real-time status updates
+
+## Usage
+Access the web interface at the Space URL above.
+
+## API Endpoints
+- POST `/api/upload` - Upload image file
+- GET `/api/files` - Get all files
+- GET `/api/files/<id>` - Get specific file
+
+## Supported Formats
+PNG, JPG, JPEG, BMP, TIFF, WEBP, GIF, PDF
+
+---
+*Auto-deployed from GitHub*

app/__init__.py

@@ -0,0 +1 @@
+# OCR App Package

app/api/routes.py

@@ -0,0 +1,110 @@
+from fastapi import APIRouter, UploadFile, File, Form, HTTPException
+from fastapi.responses import FileResponse, JSONResponse
+import os
+import uuid
+import aiofiles
+from app.core.config import settings
+from custom_logger import logger_config as logger
+from app.db import crud
+from app.services.worker import start_worker, is_worker_running
+
+router = APIRouter()
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in settings.ALLOWED_EXTENSIONS
+
+@router.get("/")
+async def index():
+    return FileResponse('index.html')
+
+@router.post("/api/tasks/upload")
+async def upload_task(image: UploadFile = File(...), hide_from_ui: str = Form("")):
+    if not image.filename:
+        raise HTTPException(status_code=400, detail="No file selected")
+    
+    if not allowed_file(image.filename):
+        raise HTTPException(status_code=400, detail="Invalid file type")
+    
+    task_id = str(uuid.uuid4())
+    filename = image.filename
+    filepath = os.path.join(settings.UPLOAD_FOLDER, f"{task_id}_{filename}")
+    
+    try:
+        async with aiofiles.open(filepath, 'wb') as out_file:
+            content = await image.read()
+            await out_file.write(content)
+        logger.info(f"File uploaded successfully: {filename} -> {filepath}")
+    except Exception as e:
+        logger.error(f"Error saving uploaded file {filename}: {e}")
+        raise HTTPException(status_code=500, detail="Could not save file")
+    
+    hide_from_ui_val = 1 if hide_from_ui.lower() in ['true', '1'] else 0
+    
+    await crud.insert_task(task_id, filename, filepath, 'not_started', hide_from_ui_val)
+    
+    await start_worker()
+    
+    return JSONResponse(status_code=201, content={
+        'id': task_id,
+        'filename': filename,
+        'status': 'not_started',
+        'message': 'File uploaded successfully'
+    })
+
+@router.get("/api/tasks")
+async def get_tasks():
+    rows, queue_ids, processing_count, avg_time = await crud.get_all_tasks()
+    
+    tasks = []
+    for row in rows:
+        queue_position = None
+        estimated_start_seconds = None
+        
+        if row['status'] == 'not_started' and row['id'] in queue_ids:
+            queue_position = queue_ids.index(row['id']) + 1
+            tasks_ahead = queue_position - 1 + processing_count
+            estimated_start_seconds = round(tasks_ahead * avg_time)
+        
+        tasks.append({
+            'id': row['id'],
+            'filename': row['filename'],
+            'status': row['status'],
+            'result': "HIDDEN_IN_LIST_VIEW",
+            'created_at': row['created_at'],
+            'processed_at': row['processed_at'],
+            'progress': row['progress'] or 0,
+            'progress_text': row['progress_text'],
+            'queue_position': queue_position,
+            'estimated_start_seconds': estimated_start_seconds
+        })
+    
+    return tasks
+
+@router.get("/api/tasks/{task_id}")
+async def get_task(task_id: str):
+    result = await crud.get_task_by_id(task_id)
+    if not result:
+        raise HTTPException(status_code=404, detail="Task not found")
+        
+    row, queue_position, estimated_start_seconds = result
+    
+    return {
+        'id': row['id'],
+        'filename': row['filename'],
+        'status': row['status'],
+        'result': row['result'],
+        'created_at': row['created_at'],
+        'processed_at': row['processed_at'],
+        'progress': row['progress'] or 0,
+        'progress_text': row['progress_text'],
+        'queue_position': queue_position,
+        'estimated_start_seconds': estimated_start_seconds
+    }
+
+@router.get("/health")
+async def health():
+    return {
+        'status': 'healthy',
+        'service': 'ocr-runner',
+        'worker_running': is_worker_running()
+    }

app/core/config.py

@@ -0,0 +1,18 @@
+import os
+
+class Config:
+    PORT = int(os.environ.get('PORT', 7860))
+    UPLOAD_FOLDER = 'uploads'
+    TEMP_DIR = 'temp_dir'
+    DATABASE_FILE = 'ocr_results.db'
+    ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'bmp', 'tiff', 'tif', 'webp', 'gif', 'pdf'}
+    
+    CWD = "./"
+    PYTHON_PATH = "ocr-process"
+    OCR_MODEL_NAME = "paddleocr"
+    POLL_INTERVAL = 3
+
+settings = Config()
+
+os.makedirs(settings.UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(settings.TEMP_DIR, exist_ok=True)

app/db/crud.py

@@ -0,0 +1,157 @@
+import aiosqlite
+import os
+from datetime import datetime, timedelta
+from app.core.config import settings
+from custom_logger import logger_config as logger
+
+async def insert_task(task_id: str, filename: str, filepath: str, status: str, hide_from_ui: int):
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        await db.execute('''INSERT INTO image_files 
+                     (id, filename, filepath, status, created_at, hide_from_ui)
+                     VALUES (?, ?, ?, ?, ?, ?)''',
+                  (task_id, filename, filepath, status, datetime.now().isoformat(), hide_from_ui))
+        await db.commit()
+    logger.debug(f"Inserted task {filename} (ID: {task_id}) into database.")
+
+async def update_status(task_id: str, status: str, result: str = None, error: str = None):
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        if status == 'completed':
+            await db.execute('''UPDATE image_files 
+                         SET status = ?, result = ?, processed_at = ?, progress = 100, progress_text = 'Completed'
+                         WHERE id = ?''',
+                      (status, result, datetime.now().isoformat(), task_id))
+            logger.info(f"Task ID {task_id} marked as completed.")
+        elif status == 'failed':
+            await db.execute('''UPDATE image_files 
+                         SET status = ?, result = ?, processed_at = ?, progress_text = 'Failed'
+                         WHERE id = ?''',
+                      (status, f"Error: {error}", datetime.now().isoformat(), task_id))
+            logger.error(f"Task ID {task_id} marked as failed. Error: {error}")
+        else:
+            await db.execute('UPDATE image_files SET status = ? WHERE id = ?', (status, task_id))
+            logger.debug(f"Task ID {task_id} status updated to {status}.")
+        await db.commit()
+
+async def update_progress(task_id: str, progress: int, progress_text: str = None):
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        await db.execute('UPDATE image_files SET progress = ?, progress_text = ? WHERE id = ?',
+                  (progress, progress_text, task_id))
+        await db.commit()
+    logger.debug(f"Task ID {task_id} progress updated to {progress}% ({progress_text}).")
+
+async def get_next_not_started():
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute('''SELECT * FROM image_files 
+                     WHERE status = 'not_started' 
+                     ORDER BY created_at ASC 
+                     LIMIT 1''') as cursor:
+            return await cursor.fetchone()
+
+async def cleanup_old_entries():
+    try:
+        async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+            db.row_factory = aiosqlite.Row
+            cutoff_date = (datetime.now() - timedelta(days=10)).isoformat()
+            
+            async with db.execute('''SELECT id, filepath FROM image_files 
+                         WHERE created_at < ?''', (cutoff_date,)) as cursor:
+                old_entries = await cursor.fetchall()
+            
+            if old_entries:
+                deleted_files = 0
+                deleted_rows = 0
+                
+                for entry in old_entries:
+                    filepath = entry['filepath']
+                    if filepath and os.path.exists(filepath):
+                        try:
+                            os.remove(filepath)
+                            deleted_files += 1
+                        except Exception as e:
+                            logger.warning(f"Failed to delete old file {filepath}: {e}")
+                
+                async with db.execute('''DELETE FROM image_files WHERE created_at < ?''', (cutoff_date,)) as cursor:
+                    deleted_rows = cursor.rowcount
+                await db.commit()
+                
+                if deleted_rows > 0 or deleted_files > 0:
+                    logger.info(f"Cleanup: Deleted {deleted_rows} old entries and {deleted_files} files (older than 10 days)")
+    except Exception as e:
+        logger.error(f"Cleanup error: {e}")
+
+async def get_average_processing_time():
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute('''SELECT created_at, processed_at FROM image_files 
+                          WHERE status = 'completed' AND processed_at IS NOT NULL
+                          ORDER BY processed_at DESC LIMIT 20''') as cursor:
+            completed_rows = await cursor.fetchall()
+        
+        if not completed_rows:
+            return 30.0
+        
+        total_seconds = 0
+        count = 0
+        for r in completed_rows:
+            try:
+                created = datetime.fromisoformat(r['created_at'])
+                processed = datetime.fromisoformat(r['processed_at'])
+                duration = (processed - created).total_seconds()
+                if duration > 0:
+                    total_seconds += duration
+                    count += 1
+            except:
+                continue
+        
+        return total_seconds / count if count > 0 else 30.0
+
+async def get_all_tasks():
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        db.row_factory = aiosqlite.Row
+        
+        avg_time = await get_average_processing_time()
+        
+        async with db.execute('''SELECT id FROM image_files 
+                     WHERE status = 'not_started' 
+                     ORDER BY created_at ASC''') as cursor:
+            queue_ids = [row['id'] for row in await cursor.fetchall()]
+        
+        async with db.execute('''SELECT COUNT(*) as count FROM image_files WHERE status = 'processing' ''') as cursor:
+            row = await cursor.fetchone()
+            processing_count = row['count']
+        
+        async with db.execute('SELECT * FROM image_files WHERE hide_from_ui = 0 OR hide_from_ui IS NULL ORDER BY created_at DESC') as cursor:
+            rows = await cursor.fetchall()
+            
+        return rows, queue_ids, processing_count, avg_time
+
+async def get_task_by_id(task_id: str):
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute('SELECT * FROM image_files WHERE id = ?', (task_id,)) as cursor:
+            row = await cursor.fetchone()
+            
+        if not row:
+            return None
+            
+        queue_position = None
+        estimated_start_seconds = None
+        
+        if row['status'] == 'not_started':
+            avg_time = await get_average_processing_time()
+            
+            async with db.execute('''SELECT COUNT(*) as position FROM image_files 
+                         WHERE status = 'not_started' AND created_at < ?''',
+                      (row['created_at'],)) as cursor:
+                position_row = await cursor.fetchone()
+                queue_position = position_row['position'] + 1
+            
+            async with db.execute('''SELECT COUNT(*) as count FROM image_files WHERE status = 'processing' ''') as cursor:
+                count_row = await cursor.fetchone()
+                processing_count = count_row['count']
+            
+            tasks_ahead = queue_position - 1 + processing_count
+            estimated_start_seconds = round(tasks_ahead * avg_time)
+            
+        return row, queue_position, estimated_start_seconds

app/db/database.py

@@ -0,0 +1,21 @@
+import aiosqlite
+from app.core.config import settings
+from custom_logger import logger_config as logger
+
+async def init_db():
+    logger.info(f"Initializing database at {settings.DATABASE_FILE}")
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        await db.execute('''CREATE TABLE IF NOT EXISTS image_files
+                     (id TEXT PRIMARY KEY,
+                      filename TEXT NOT NULL,
+                      filepath TEXT NOT NULL,
+                      status TEXT NOT NULL,
+                      result TEXT,
+                      created_at TEXT NOT NULL,
+                      processed_at TEXT,
+                      progress INTEGER DEFAULT 0,
+                      progress_text TEXT,
+                      hide_from_ui INTEGER DEFAULT 0)'''
+        )
+        await db.commit()
+    logger.info("Database initialized successfully.")

app/main.py

@@ -0,0 +1,31 @@
+from contextlib import asynccontextmanager
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from app.api.routes import router
+from app.db.database import init_db
+from custom_logger import logger_config as logger
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    logger.info("="*60)
+    logger.info("OCR Runner API Server Starting Up")
+    logger.info("="*60)
+    logger.info("Worker will start automatically on first upload")
+    logger.info("Image files will be deleted after successful processing")
+    logger.info("="*60)
+    
+    await init_db()
+    yield
+    logger.info("OCR Runner API Server Shutting Down")
+
+app = FastAPI(title="OCR Runner API", version="2.0.0", lifespan=lifespan)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(router)

app/services/worker.py

@@ -0,0 +1,127 @@
+import asyncio
+import os
+import json
+import shlex
+import re
+from app.core.config import settings
+from custom_logger import logger_config as logger
+from app.db import crud
+
+worker_task = None
+worker_running = False
+
+def is_worker_running():
+    return worker_running
+
+async def start_worker():
+    global worker_task, worker_running
+    
+    logger.info(f"start_worker called: worker_running={worker_running}")
+    
+    if not worker_running:
+        worker_running = True
+        worker_task = asyncio.create_task(worker_loop())
+        logger.info("Worker task started")
+    else:
+        logger.info("Worker already running")
+
+async def worker_loop():
+    global worker_running
+    logger.info("OCR Worker started. Monitoring for new image files...")
+    
+    while worker_running:
+        logger.debug("Worker loop iteration, checking for files...")
+        await crud.cleanup_old_entries()
+        
+        try:
+            row = await crud.get_next_not_started()
+            
+            if row:
+                task_id = row['id']
+                filepath = row['filepath']
+                filename = row['filename']
+                
+                logger.info(f"\n{'='*60}\nProcessing: {filename}\nID: {task_id}\n{'='*60}")
+                
+                await crud.update_status(task_id, 'processing')
+                
+                try:
+                    await crud.update_progress(task_id, 10, "Starting OCR...")
+                    
+                    command = f"cd {settings.CWD} && {settings.PYTHON_PATH} --input {shlex.quote(os.path.abspath(filepath))} --model {settings.OCR_MODEL_NAME}"
+                    
+                    logger.debug(f"Executing command: {command}")
+                    
+                    process = await asyncio.create_subprocess_shell(
+                        command,
+                        stdout=asyncio.subprocess.PIPE,
+                        stderr=asyncio.subprocess.STDOUT,
+                        cwd=settings.CWD,
+                        env={
+                            **os.environ,
+                            'PYTHONUNBUFFERED': '1',
+                            'CUDA_LAUNCH_BLOCKING': '1',
+                            'USE_CPU_IF_POSSIBLE': 'true'
+                        }
+                    )
+                    
+                    while True:
+                        line = await process.stdout.readline()
+                        if not line:
+                            break
+                            
+                        line_str = line.decode('utf-8', errors='replace').strip()
+                        if line_str:
+                            logger.info(f"[OCR] {line_str}")
+                            
+                            percent_match = re.search(r'(\d+)%', line_str)
+                            if percent_match:
+                                try:
+                                    percent = int(percent_match.group(1))
+                                    await crud.update_progress(task_id, min(percent, 90), "Processing...")
+                                except: pass
+                            
+                            if 'initializing paddleocr' in line_str.lower():
+                                await crud.update_progress(task_id, 15, "Initializing engine...")
+                            elif 'loading model' in line_str.lower():
+                                await crud.update_progress(task_id, 25, "Loading OCR models...")
+                            elif 'model loaded successfully' in line_str.lower():
+                                await crud.update_progress(task_id, 40, "Models ready.")
+                            elif 'processing:' in line_str.lower():
+                                await crud.update_progress(task_id, 50, "Analyzing image...")
+                            elif 'ocr completed successfully' in line_str.lower():
+                                await crud.update_progress(task_id, 90, "OCR completed.")
+                            elif 'json ocr saved' in line_str.lower():
+                                await crud.update_progress(task_id, 95, "Saving data...")
+                    
+                    await process.wait()
+                    if process.returncode != 0:
+                        raise Exception(f"OCR process failed with return code {process.returncode}")
+                    
+                    await crud.update_progress(task_id, 98, "Reading results...")
+                    
+                    output_path = os.path.join(settings.CWD, settings.TEMP_DIR, 'output_ocr.json')
+                    with open(output_path, 'r') as file:
+                        result = json.loads(file.read().strip())
+                    
+                    result_data = result.get('text', '') or str(result)
+                    
+                    logger.success(f"Successfully processed: {filename}")
+                    logger.info(f"Text preview: {result_data[:100]}...")
+                    
+                    await crud.update_status(task_id, 'completed', result=json.dumps(result))
+                    
+                    if os.path.exists(filepath):
+                        os.remove(filepath)
+                        logger.debug(f"Deleted image file: {filepath}")
+                    
+                except Exception as e:
+                    logger.error(f"Failed to process {filename}: {str(e)}")
+                    await crud.update_status(task_id, 'failed', error=str(e))
+                    
+            else:
+                await asyncio.sleep(settings.POLL_INTERVAL)
+                
+        except Exception as e:
+            logger.error(f"Worker error: {str(e)}")
+            await asyncio.sleep(settings.POLL_INTERVAL)

index.html

@@ -0,0 +1,818 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>OCR - Optical Character Recognition</title>
+
+    <!-- External Assets -->
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Caveat:wght@400..700&display=swap"
+        rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+        rel="stylesheet" />
+
+    <!-- Tailwind Configuration -->
+    <script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        surface: "#e6f0fd",
+                        "crayon-blue": "#2563eb",
+                        "crayon-red": "#dc2626",
+                        "crayon-green": "#16a34a",
+                        "crayon-yellow": "#ca8a04",
+                        "crayon-orange": "#ea580c",
+                        "crayon-purple": "#7c3aed",
+                        "crayon-dark": "#1A1A1A"
+                    },
+                    fontFamily: {
+                        "fredoka": ["Fredoka", "sans-serif"],
+                        "caveat": ["Caveat", "cursive"]
+                    },
+                    fontSize: {
+                        "headline-lg": ["42px", { lineHeight: "1.1", fontWeight: "700" }],
+                        "headline-md": ["28px", { lineHeight: "1.2", fontWeight: "600" }],
+                        "body-lg": ["24px", { lineHeight: "1.5", fontWeight: "500" }],
+                        "label-sm": ["18px", { lineHeight: "1.2", letterSpacing: "0.01em", fontWeight: "500" }],
+                        "body-md": ["20px", { lineHeight: "1.5", fontWeight: "400" }]
+                    }
+                },
+            },
+        }
+    </script>
+
+    <svg height="0" style="position: absolute;" width="0">
+        <filter height="120%" id="crayon-texture" width="120%" x="-10%" y="-10%">
+            <feTurbulence baseFrequency="0.4" numOctaves="3" result="noise" type="fractalNoise"></feTurbulence>
+            <feDisplacementMap in="SourceGraphic" in2="noise" scale="2.5" xChannelSelector="R" yChannelSelector="G">
+            </feDisplacementMap>
+        </filter>
+        <filter height="120%" id="crayon-heavy" width="120%" x="-10%" y="-10%">
+            <feTurbulence baseFrequency="0.5" numOctaves="4" result="noise" type="fractalNoise"></feTurbulence>
+            <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" xChannelSelector="R" yChannelSelector="G">
+            </feDisplacementMap>
+        </filter>
+    </svg>
+
+    <style>
+        /* Sketchbook Styles */
+        body {
+            background-color: #e6f0fd;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
+            color: #1A1A1A;
+            font-family: 'Fredoka', sans-serif;
+        }
+
+        .bg-surface {
+            background-color: rgb(255 255 255 / 0%) !important;
+            backdrop-filter: blur(2px);
+        }
+
+        .crayon-filter {
+            filter: url('#crayon-texture');
+        }
+
+        .crayon-heavy {
+            filter: url('#crayon-heavy');
+        }
+
+        .crayon-border-green {
+            border: 4px solid #16a34a;
+            border-radius: 12px 8px 15px 10px / 8px 14px 10px 12px;
+            filter: url('#crayon-texture');
+        }
+
+        .task-card {
+            border: 3px solid rgba(124, 58, 237, 0.4);
+            border-radius: 20px 15px 25px 18px / 18px 25px 15px 20px;
+            filter: url('#crayon-texture');
+        }
+
+        .crayon-border-blue {
+            border: 4px dashed #2563eb;
+            border-radius: 15px 10px 12px 18px / 12px 18px 15px 10px;
+            filter: url('#crayon-texture');
+        }
+
+        .crayon-border-purple {
+            border: 4px solid #7c3aed;
+            border-radius: 10px 16px 12px 14px / 16px 12px 14px 10px;
+            filter: url('#crayon-texture');
+        }
+
+        .crayon-button {
+            border: 4px solid #2563eb;
+            border-radius: 12px 8px 14px 10px / 8px 14px 10px 12px;
+            transition: all 0.2s ease;
+            filter: url('#crayon-texture');
+            cursor: pointer;
+        }
+
+        .crayon-button:hover {
+            transform: scale(1.05) rotate(1deg);
+            box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.1);
+        }
+
+        .crayon-button:hover .material-symbols-outlined.spin-on-hover {
+            animation: spin 2s linear infinite;
+        }
+
+        @keyframes spin {
+            from {
+                transform: rotate(0deg);
+            }
+
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes drift {
+            0% {
+                transform: translateX(0);
+            }
+
+            50% {
+                transform: translateX(20px);
+            }
+
+            100% {
+                transform: translateX(0);
+            }
+        }
+
+        .drift-slow {
+            animation: drift 8s ease-in-out infinite;
+        }
+
+        .drift-medium {
+            animation: drift 5s ease-in-out infinite;
+        }
+
+        .organic-shape {
+            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
+            filter: url('#crayon-texture');
+        }
+
+        .scribble-fill-green {
+            background: repeating-linear-gradient(60deg, #16a34a, #16a34a 2px, #15803d 3px, #16a34a 4px);
+        }
+
+        .progress-fill {
+            background: repeating-linear-gradient(80deg, #2563eb, #2563eb 2px, #1d4ed8 3px, #2563eb 5px);
+        }
+
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+            filter: url('#crayon-texture');
+        }
+
+        /* --- Modals --- */
+        .modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(15, 23, 42, 0.6);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 100;
+            padding: 2rem;
+        }
+
+        .modal.active {
+            display: flex;
+        }
+
+        .modal-content {
+            border: 4px solid #2563eb;
+            width: 100%;
+            max-width: 900px;
+            border-radius: 24px;
+            display: flex;
+            flex-direction: column;
+            max-height: 85vh;
+            box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 0.1);
+            position: relative;
+        }
+
+        .modal-sketch-bg {
+            position: absolute;
+            inset: -8px;
+            border: 6px solid #2563eb;
+            backdrop-filter: blur(10px);
+            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
+            z-index: -1;
+            filter: url('#crayon-texture');
+            pointer-events: none;
+        }
+
+        .modal-header {
+            padding: 1.5rem 2rem;
+            border-bottom: 3px dashed #adc6ff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+            z-index: 10;
+        }
+
+        .modal-body {
+            padding: 2rem;
+            overflow-y: auto;
+            position: relative;
+            z-index: 10;
+        }
+
+        #resultText,
+        pre {
+            border: 3px dashed #adc6ff !important;
+            padding: 2rem !important;
+            border-radius: 20px !important;
+            font-family: 'Fredoka', sans-serif !important;
+            font-size: 1.5rem !important;
+            font-weight: 600 !important;
+            color: #fff !important;
+            white-space: pre-wrap !important;
+            word-break: break-all !important;
+            line-height: 1.6 !important;
+            filter: url('#crayon-texture');
+        }
+
+        .close-modal {
+            background: transparent;
+            border: none;
+            color: #dc2626;
+            font-size: 3rem;
+            cursor: pointer;
+            font-weight: 700;
+        }
+
+        .text-headline-lg {
+            filter: url('#crayon-texture');
+        }
+
+        .copy-btn {
+            background: #16a34a;
+            color: white;
+            padding: 0.5rem 1.5rem;
+            border-radius: 12px;
+            font-weight: 700;
+            box-shadow: 4px 4px 0px 0px #15803d;
+            transition: all 0.2s;
+            filter: url('#crayon-texture');
+        }
+
+        .copy-btn:hover {
+            transform: translate(-2px, -2px);
+            box-shadow: 6px 6px 0px 0px #15803d;
+        }
+
+        /* --- Specific UI Elements --- */
+        .status-modal-content {
+            max-width: 450px;
+            text-align: center;
+            padding: 3rem 2rem;
+        }
+
+        .status-modal-bg {
+            position: absolute;
+            inset: -12px;
+            border: 8px solid #2563eb;
+            background: #e6f0fd;
+            border-radius: 20px 40px 15px 35px / 35px 15px 40px 20px;
+            z-index: -1;
+            filter: url('#crayon-texture');
+            pointer-events: none;
+        }
+
+        .status-icon-container {
+            width: 100px;
+            height: 100px;
+            margin: 0 auto 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 20px 15px 25px 18px / 18px 25px 15px 20px;
+            border: 4px solid currentColor;
+            filter: url('#crayon-texture');
+            position: relative;
+            z-index: 20;
+        }
+
+        .status-icon-bg {
+            position: absolute;
+            inset: 0;
+            background: currentColor;
+            opacity: 0.15;
+            z-index: -1;
+            border-radius: inherit;
+        }
+
+        .modal-decoration {
+            position: absolute;
+            pointer-events: none;
+            opacity: 0.3;
+            z-index: 5;
+            filter: url('#crayon-texture');
+        }
+
+        .table-container::-webkit-scrollbar {
+            width: 10px;
+        }
+
+        .table-container::-webkit-scrollbar-track {
+            background: #f1f5f9;
+            border-radius: 10px;
+        }
+
+        .table-container::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 10px;
+            border: 2px solid #f1f5f9;
+        }
+
+        .dragging {
+            border-color: #16a34a !important;
+            background-color: #f0fdf4 !important;
+        }
+    </style>
+</head>
+
+<body class="h-screen flex flex-col overflow-hidden relative">
+    <!-- Main Background Decorations -->
+    <div class="fixed inset-0 pointer-events-none overflow-hidden -z-10 opacity-40">
+        <!-- Stars -->
+        <span
+            class="material-symbols-outlined absolute text-5xl text-crayon-yellow top-20 left-[10%] rotate-12 crayon-heavy animate-pulse">star</span>
+        <span
+            class="material-symbols-outlined absolute text-3xl text-crayon-orange top-[40%] left-[5%] -rotate-12 crayon-filter">star</span>
+        <span
+            class="material-symbols-outlined absolute text-4xl text-crayon-yellow bottom-[20%] left-[15%] rotate-45 animate-pulse">star</span>
+        <span
+            class="material-symbols-outlined absolute text-6xl text-crayon-orange top-[15%] right-[15%] rotate-[-15deg] crayon-heavy">star</span>
+        <span
+            class="material-symbols-outlined absolute text-3xl text-crayon-yellow bottom-[30%] right-[10%] rotate-12 animate-pulse">star</span>
+
+        <!-- Clouds -->
+        <span
+            class="material-symbols-outlined absolute text-[120px] text-crayon-blue top-[10%] left-[25%] opacity-20 drift-slow">cloud</span>
+        <span
+            class="material-symbols-outlined absolute text-[80px] text-crayon-purple bottom-[15%] left-[40%] opacity-10 drift-medium">cloud</span>
+        <span
+            class="material-symbols-outlined absolute text-[100px] text-crayon-blue top-[60%] right-[25%] opacity-15 drift-slow">cloud</span>
+        <span
+            class="material-symbols-outlined absolute text-[150px] text-crayon-purple top-[30%] right-[5%] opacity-10 drift-medium">cloud</span>
+
+        <!-- Hearts -->
+        <span
+            class="material-symbols-outlined absolute text-4xl text-crayon-red top-[25%] left-[18%] rotate-[-15deg] crayon-filter animate-pulse">favorite</span>
+        <span
+            class="material-symbols-outlined absolute text-2xl text-crayon-red bottom-[10%] right-[20%] rotate-12 crayon-filter">favorite</span>
+        <span
+            class="material-symbols-outlined absolute text-5xl text-crayon-red top-[70%] left-[8%] rotate-[10deg] animate-pulse">favorite</span>
+    </div>
+
+    <!-- SVG Filters -->
+    <svg height="0" width="0" style="position: absolute;">
+        <filter id="crayon-texture" x="-10%" y="-10%" width="120%" height="120%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="3" result="noise" />
+            <feDisplacementMap in="SourceGraphic" in2="noise" scale="2.5" xChannelSelector="R" yChannelSelector="G" />
+        </filter>
+        <filter id="crayon-heavy" x="-10%" y="-10%" width="120%" height="120%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" result="noise" />
+            <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" xChannelSelector="R" yChannelSelector="G" />
+        </filter>
+    </svg>
+
+    <!-- Header -->
+    <header
+        class="bg-surface flex justify-between items-center w-[calc(100%-48px)] mx-6 mt-6 px-8 py-5 crayon-border-green z-10 shrink-0 organic-shape shadow-sm">
+        <div class="flex items-center gap-5">
+            <div
+                class="bg-crayon-green text-white w-14 h-14 rounded-2xl flex items-center justify-center border-[3px] border-crayon-green rotate-[-4deg] crayon-filter scribble-fill-green shadow-md">
+                <span class="material-symbols-outlined text-4xl">document_scanner</span>
+            </div>
+            <div class="flex flex-col -rotate-1">
+                <h1 class="text-headline-lg text-[#4c1d95] leading-none mb-1">OCR</h1>
+                <span class="text-label-sm text-[#4b5563] font-bold">Optical Character Recognition</span>
+            </div>
+        </div>
+
+        <div class="flex items-center gap-10 relative">
+            <div class="absolute -left-48 top-2 rotate-12 crayon-heavy">
+                <span class="material-symbols-outlined text-4xl text-crayon-yellow">star</span>
+            </div>
+            <div class="absolute -left-24 top-0 -rotate-6 crayon-heavy opacity-80">
+                <span class="material-symbols-outlined text-5xl text-crayon-blue">cloud</span>
+            </div>
+            <button id="apiDocBtn"
+                class="flex items-center gap-2 text-headline-md text-crayon-purple px-8 py-3 bg-surface crayon-button rotate-1 shadow-md">
+                <span class="material-symbols-outlined text-3xl">menu_book</span>
+                API DOC
+            </button>
+            <div
+                class="flex items-center gap-4 bg-surface px-6 py-3 rounded-full border-[4px] border-crayon-green organic-shape shadow-md">
+                <div id="healthDot" class="w-4 h-4 rounded-full bg-crayon-green shadow-[0_0_12px_rgba(22,163,74,0.5)]">
+                </div>
+                <span id="healthText" class="text-headline-md text-crayon-green text-2xl">Service Online</span>
+                <div class="text-crayon-orange flex items-center justify-center rotate-[15deg]">
+                    <span class="material-symbols-outlined text-4xl">light_mode</span>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex overflow-hidden p-8 gap-8 mx-auto w-full relative">
+        <!-- Input Section -->
+        <section class="w-[450px] flex flex-col gap-8">
+            <div id="uploadZone"
+                class="flex flex-col gap-6 p-8 bg-surface crayon-border-blue flex-1 relative organic-shape cursor-pointer group shadow-sm hover:shadow-md transition-shadow">
+                <div class="flex items-center gap-4 mb-2 rotate-1">
+                    <div
+                        class="bg-crayon-blue text-white rounded-full w-14 h-14 flex items-center justify-center border-2 border-crayon-blue crayon-filter shadow-md">
+                        <span class="material-symbols-outlined text-4xl">upload</span>
+                    </div>
+                    <div>
+                        <h2 class="text-headline-md text-crayon-blue leading-none mb-1 flex items-center gap-2">
+                            INPUT
+                            <span class="material-symbols-outlined text-crayon-red text-2xl rotate-12">favorite</span>
+                        </h2>
+                        <p class="text-label-sm text-[#6b7280]">Upload your file</p>
+                    </div>
+                </div>
+
+                <div
+                    class="flex-1 flex flex-col items-center justify-center relative border-[4px] border-dashed border-[#adc6ff] rounded-[32px] bg-surface p-6 group-hover:bg-blue-50 transition-colors">
+                    <div class="relative w-48 h-48 mb-8 flex items-center justify-center">
+                        <div
+                            class="absolute w-36 h-44 bg-blue-100 border-[3px] border-crayon-blue rounded-xl rotate-[12deg] right-4 bottom-4 organic-shape opacity-60">
+                        </div>
+                        <div
+                            class="absolute w-36 h-44 bg-surface border-[3px] border-crayon-blue rounded-xl z-10 flex flex-col items-center p-4 organic-shape rotate-[-4deg] shadow-sm">
+                            <div
+                                class="w-8 h-8 rounded-full bg-crayon-yellow self-start mb-4 border-[2px] border-[#1A1A1A]">
+                            </div>
+                            <div class="w-full h-2 bg-[#adc6ff] rounded-full mb-3"></div>
+                            <div class="w-2/3 h-2 bg-[#adc6ff] rounded-full self-start"></div>
+                        </div>
+                        <div
+                            class="absolute -bottom-4 -right-4 bg-crayon-blue text-white rounded-full w-16 h-16 flex items-center justify-center border-[4px] border-white z-20 shadow-xl group-hover:scale-110 transition-transform rotate-12 crayon-filter">
+                            <span class="material-symbols-outlined text-4xl">arrow_upward</span>
+                        </div>
+                    </div>
+                    <p class="text-headline-md text-[#1A1A1A] mb-1 font-bold">Drag & drop here</p>
+                    <p class="text-label-sm text-crayon-purple mb-8 font-bold">or click to browse</p>
+                    <div class="flex gap-2 mt-auto w-full justify-center flex-wrap">
+                        <span
+                            class="px-4 py-1.5 bg-surface border-[2px] border-crayon-blue text-crayon-blue text-lg font-bold rounded-xl organic-shape -rotate-2">PNG</span>
+                        <span
+                            class="px-4 py-1.5 bg-surface border-[2px] border-crayon-green text-crayon-green text-lg font-bold rounded-xl organic-shape rotate-1">JPG</span>
+                        <span
+                            class="px-4 py-1.5 bg-surface border-[2px] border-crayon-red text-crayon-red text-lg font-bold rounded-xl organic-shape -rotate-1">PDF</span>
+                    </div>
+                </div>
+                <input type="file" id="fileInput" hidden accept="image/*,application/pdf">
+            </div>
+        </section>
+
+        <!-- Activity Section -->
+        <section
+            class="flex-1 flex flex-col bg-surface crayon-border-purple p-8 relative organic-shape overflow-hidden shadow-sm">
+            <div class="flex items-center justify-between mb-8">
+                <div class="flex items-center gap-4 rotate-1">
+                    <div
+                        class="bg-crayon-purple text-white rounded-full w-14 h-14 flex items-center justify-center border-[3px] border-crayon-purple shadow-md">
+                        <span class="material-symbols-outlined text-4xl">schedule</span>
+                    </div>
+                    <div>
+                        <h2 class="text-headline-lg text-[#4c1d95] leading-none mb-1">ACTIVITY</h2>
+                        <p class="text-label-sm text-[#6b7280] font-bold">Recent tasks</p>
+                    </div>
+                </div>
+                <div class="relative w-40 h-20 flex items-center">
+                    <svg class="absolute left-[-30px] top-4 w-32 h-16 crayon-filter text-crayon-yellow" fill="none"
+                        stroke="currentColor" stroke-dasharray="6 6" stroke-linecap="round" stroke-width="3"
+                        viewBox="0 0 100 50">
+                        <path d="M10,40 Q40,50 60,30 T90,10" />
+                    </svg>
+                    <span
+                        class="material-symbols-outlined text-5xl text-crayon-orange absolute right-0 top-0 rotate-12">send</span>
+                </div>
+                <button onclick="loadTasks()"
+                    class="flex items-center gap-2 text-headline-md text-crayon-blue px-8 py-3 bg-surface crayon-button border-[4px] -rotate-1 shadow-md">
+                    <span class="material-symbols-outlined text-3xl spin-on-hover">sync</span>
+                    Refresh
+                </button>
+            </div>
+
+            <!-- List Header -->
+            <div class="flex w-full px-6 pb-4 border-b-[5px] text-[#4c1d95] font-bold text-xl uppercase tracking-wider"
+                style="border-color: rgba(124, 58, 237, 0.4); border-radius: 20px 15px 25px 18px / 18px 25px 15px 20px; filter: url(#crayon-texture);">
+                <div class="w-1/2">CONTENT</div>
+                <div class="w-1/6 text-center">STATUS</div>
+                <div class="w-1/4 text-center">PROGRESS</div>
+                <div class="w-[10%] text-center">ACTION</div>
+            </div>
+
+            <!-- Task List Body -->
+            <div id="queueBody" class="flex flex-col gap-5 mt-6 overflow-y-auto flex-1 table-container pr-4">
+                <div class="text-center py-32 text-headline-md text-[#94a3b8] font-bold opacity-60">No tasks found
+                    yet...</div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Modals -->
+    <!-- Result & API Modal -->
+    <div id="resultModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-sketch-bg"></div>
+
+            <!-- Decorations -->
+            <span
+                class="material-symbols-outlined modal-decoration text-6xl text-crayon-yellow top-4 left-4 -rotate-12">star</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-8xl text-crayon-blue top-12 right-20 opacity-20">cloud</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-4xl text-crayon-orange bottom-10 left-10 rotate-45">star</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-7xl text-crayon-purple bottom-4 right-4 -rotate-6 opacity-40">cloud</span>
+
+            <div class="modal-header">
+                <div class="flex items-center gap-6">
+                    <span id="modalTitle" class="text-headline-lg text-[#1e1b4b]">Extraction Result</span>
+                    <button id="copyBtn" onclick="copyResult()" class="copy-btn">📋 Copy Text</button>
+                </div>
+                <button class="close-modal" onclick="closeModal()">&times;</button>
+            </div>
+            <div class="modal-body">
+                <pre id="resultText"></pre>
+            </div>
+        </div>
+    </div>
+
+    <!-- Status Modal -->
+    <div id="statusModal" class="modal">
+        <div class="modal-content status-modal-content">
+            <div id="statusBg" class="status-modal-bg"></div>
+
+            <span
+                class="material-symbols-outlined modal-decoration text-4xl text-crayon-yellow top-6 right-6 rotate-12">star</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-6xl text-crayon-blue top-10 left-4 opacity-30">cloud</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-3xl text-crayon-orange bottom-8 right-10 -rotate-12">star</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-5xl text-crayon-purple bottom-10 left-8 rotate-6 opacity-30">cloud</span>
+
+            <div id="statusIconContainer" class="status-icon-container text-crayon-blue">
+                <div class="status-icon-bg"></div>
+                <span id="statusIcon" class="material-symbols-outlined text-6xl animate-bounce">upload</span>
+            </div>
+            <h2 id="statusMessage" class="text-headline-lg text-crayon-blue mb-2">Uploading...</h2>
+            <p id="statusSubMessage" class="text-body-lg text-[#4b5563]">Processing your request, please wait.</p>
+        </div>
+    </div>
+
+    <!-- Application Logic -->
+    <script>
+        // --- Configuration ---
+        const API_BASE = '/api';
+
+        // --- DOM Elements ---
+        const UI = {
+            uploadZone: document.getElementById('uploadZone'),
+            fileInput: document.getElementById('fileInput'),
+            queueBody: document.getElementById('queueBody'),
+            resultModal: document.getElementById('resultModal'),
+            statusModal: document.getElementById('statusModal'),
+            resultText: document.getElementById('resultText'),
+            modalTitle: document.getElementById('modalTitle'),
+            statusMessage: document.getElementById('statusMessage'),
+            statusSubMessage: document.getElementById('statusSubMessage'),
+            statusIcon: document.getElementById('statusIcon'),
+            statusIconContainer: document.getElementById('statusIconContainer'),
+            statusBg: document.getElementById('statusBg'),
+            healthDot: document.getElementById('healthDot'),
+            healthText: document.getElementById('healthText'),
+            apiDocBtn: document.getElementById('apiDocBtn')
+        };
+
+        // --- UI Helpers ---
+        function updateStatusModal(type, msg, subMsg) {
+            UI.statusMessage.innerText = msg;
+            UI.statusSubMessage.innerText = subMsg || "Processing your request, please wait.";
+            UI.statusIconContainer.className = "status-icon-container";
+            UI.statusIcon.className = "material-symbols-outlined text-6xl";
+            UI.statusBg.style.borderColor = "";
+
+            if (type === 'uploading') {
+                UI.statusIconContainer.classList.add('text-crayon-blue');
+                UI.statusIcon.innerText = "upload";
+                UI.statusIcon.classList.add('animate-bounce');
+                UI.statusBg.style.borderColor = "#2563eb";
+            } else if (type === 'success') {
+                UI.statusIconContainer.classList.add('text-crayon-green');
+                UI.statusIcon.innerText = "check_circle";
+                UI.statusBg.style.borderColor = "#16a34a";
+            } else if (type === 'error') {
+                UI.statusIconContainer.classList.add('text-crayon-red');
+                UI.statusIcon.innerText = "error";
+                UI.statusBg.style.borderColor = "#dc2626";
+            }
+        }
+
+        function closeModal() {
+            UI.resultModal.classList.remove('active');
+        }
+
+        function copyResult() {
+            const text = UI.resultText.innerText;
+            const btn = document.getElementById('copyBtn');
+            navigator.clipboard.writeText(text).then(() => {
+                const orig = btn.innerText;
+                btn.innerText = '✓ Copied!';
+                setTimeout(() => { btn.innerText = orig; }, 2000);
+            });
+        }
+
+        // --- API Functions ---
+        async function loadTasks() {
+            try {
+                const res = await fetch(`${API_BASE}/tasks`);
+                const data = await res.json();
+                renderQueue(data);
+            } catch (err) {
+                console.error("Load tasks error:", err);
+            }
+        }
+
+        async function handleFile(file) {
+            if (!file) return;
+
+            UI.statusModal.classList.add('active');
+            updateStatusModal('uploading', "Uploading...", "Sending file to server...");
+
+            const formData = new FormData();
+            formData.append('image', file);
+
+            try {
+                const res = await fetch(`${API_BASE}/tasks/upload`, { method: 'POST', body: formData });
+                if (res.ok) {
+                    updateStatusModal('success', "Success! ✨", "File uploaded and task created.");
+                    setTimeout(() => {
+                        UI.statusModal.classList.remove('active');
+                        loadTasks();
+                    }, 1200);
+                } else {
+                    updateStatusModal('error', "Upload Failed ❌", "Something went wrong on our end.");
+                    setTimeout(() => UI.statusModal.classList.remove('active'), 2000);
+                }
+            } catch (err) {
+                console.error("Upload error:", err);
+                updateStatusModal('error', "Connection Error ⚠️", "Could not reach the server.");
+                setTimeout(() => UI.statusModal.classList.remove('active'), 2000);
+            }
+        }
+
+        async function showResult(id) {
+            try {
+                const res = await fetch(`${API_BASE}/tasks/${id}`);
+                const data = await res.json();
+                const text = data.result;
+
+                UI.modalTitle.innerText = "Extracted Content";
+
+                let formatted = text;
+                try {
+                    const parsed = JSON.parse(text);
+                    formatted = JSON.stringify(parsed, null, 2);
+                } catch (e) { /* Not JSON, use raw text */ }
+
+                UI.resultText.innerText = formatted;
+                UI.resultModal.classList.add('active');
+            } catch (err) {
+                console.error("Show result error:", err);
+            }
+        }
+
+        async function checkHealth() {
+            try {
+                const res = await fetch('/health');
+                const data = await res.json();
+                const healthy = data.status === 'healthy';
+
+                UI.healthDot.className = `w-4 h-4 rounded-full ${healthy ? 'bg-crayon-green' : 'bg-crayon-red'} shadow-md`;
+                UI.healthText.innerText = healthy ? 'Service Online' : 'Service Down';
+                UI.healthText.className = `text-headline-md font-bold ${healthy ? 'text-crayon-green' : 'text-crayon-red'}`;
+            } catch (e) {
+                UI.healthDot.className = 'w-4 h-4 rounded-full bg-crayon-red shadow-md';
+                UI.healthText.innerText = 'Connection Error';
+                UI.healthText.className = 'text-headline-md font-bold text-crayon-red';
+            }
+        }
+
+        // --- Renderers ---
+        function renderQueue(tasks) {
+            if (tasks.length === 0) {
+                UI.queueBody.innerHTML = '<div class="text-center py-32 text-headline-md text-[#94a3b8] font-bold opacity-60">No tasks found yet...</div>';
+                return;
+            }
+
+            UI.queueBody.innerHTML = tasks.map((t, i) => {
+                const rotate = i % 2 === 0 ? 'rotate-[0.3deg]' : '-rotate-[0.3deg]';
+                const status = t.status.toLowerCase();
+                const colors = {
+                    completed: { text: 'crayon-green', bg: 'bg-[#f0fdf4]' },
+                    failed: { text: 'crayon-red', bg: 'bg-[#fef2f2]' },
+                    processing: { text: 'crayon-blue', bg: 'bg-[#eff6ff]' },
+                    pending: { text: 'crayon-purple', bg: 'bg-[#f5f3ff]' }
+                };
+                const theme = colors[status] || colors.pending;
+
+                return `
+                    <div class="task-card flex items-center p-6 bg-surface hover:border-crayon-purple transition-colors shadow-sm ${rotate}">
+                        <div class="flex items-center gap-5 w-1/2">
+                            <div class="w-16 h-20 border-[3px] border-crayon-blue rounded-xl p-2 bg-surface flex shadow-sm organic-shape rotate-[-3deg]">
+                                <div class="w-1/2 h-full border-r-[2px] border-[#adc6ff] flex flex-col gap-1.5 p-0.5">
+                                    <div class="w-full h-2 bg-[#adc6ff] rounded-sm"></div>
+                                    <div class="w-full h-2 bg-[#adc6ff] rounded-sm"></div>
+                                    <div class="w-full h-2 bg-[#adc6ff] rounded-sm"></div>
+                                </div>
+                                <div class="w-1/2 h-full flex flex-col gap-1.5 p-0.5 relative">
+                                    <div class="w-full h-2 bg-[#adc6ff] rounded-sm"></div>
+                                    <div class="mt-auto flex gap-1.5 bottom-1 absolute">
+                                        <div class="w-2.5 h-2.5 bg-crayon-yellow rounded-sm"></div>
+                                        <div class="w-2.5 h-2.5 bg-crayon-green rounded-sm"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col">
+                                <span class="text-headline-md text-[#1A1A1A] leading-tight font-bold mb-1">${t.filename}</span>
+                                <div class="text-label-sm text-[#94a3b8] font-bold">${t.id.substring(0, 12)}</div>
+                            </div>
+                        </div>
+                        <div class="w-1/6 flex justify-center">
+                            <div class="px-4 py-2 ${theme.bg} border-[3px] border-${theme.text} text-${theme.text} font-bold rounded-2xl uppercase tracking-tight crayon-filter">
+                                ${status.replace('_', ' ')}
+                            </div>
+                        </div>
+                        <div class="w-1/4 flex items-center justify-center gap-4">
+                            <div class="flex-1 h-6 border-[3px] border-[#adc6ff] rounded-full overflow-hidden bg-surface p-[2px] crayon-filter">
+                                <div class="h-full rounded-full progress-fill shadow-sm" style="width:${t.progress}%"></div>
+                            </div>
+                            <span class="text-headline-md text-2xl text-[#1A1A1A] font-bold w-12 text-right">${status === 'completed' ? '' : t.progress + '%'}</span>
+                        </div>
+                        <div class="w-[10%] flex justify-center">
+                            ${status === 'completed' ? `
+                                <button onclick="showResult('${t.id}')" class="flex items-center gap-2 px-5 py-2.5 bg-white border-[3px] border-crayon-blue text-crayon-blue font-bold rounded-2xl hover:bg-crayon-blue hover:text-white transition-all shadow-sm crayon-filter">
+                                    <span class="material-symbols-outlined text-2xl">visibility</span>
+                                    VIEW
+                                </button>
+                            ` : '—'}
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // --- Event Listeners ---
+        UI.uploadZone.onclick = () => UI.fileInput.click();
+        UI.uploadZone.ondragover = (e) => { e.preventDefault(); UI.uploadZone.classList.add('dragging'); };
+        UI.uploadZone.ondragleave = () => UI.uploadZone.classList.remove('dragging');
+        UI.uploadZone.ondrop = (e) => {
+            e.preventDefault();
+            UI.uploadZone.classList.remove('dragging');
+            handleFile(e.dataTransfer.files[0]);
+        };
+        UI.fileInput.onchange = (e) => handleFile(e.target.files[0]);
+        UI.apiDocBtn.onclick = () => {
+            const doc = {
+                base_url: window.location.origin,
+                endpoints: [
+                    { method: "POST", path: "/api/tasks/upload", desc: "Upload image for OCR" },
+                    { method: "GET", path: "/api/tasks", desc: "List all tasks" },
+                    { method: "GET", path: "/api/tasks/{task_id}", desc: "Get OCR result" },
+                    { method: "GET", path: "/health", desc: "Service health" }
+                ],
+                example_usage: `curl -X POST -F 'image=@file.jpg' ${window.location.origin}/api/tasks/upload`
+            };
+            UI.resultText.innerText = JSON.stringify(doc, null, 2);
+            UI.modalTitle.innerText = "API Documentation";
+            UI.resultModal.classList.add('active');
+        };
+
+        // --- Lifecycle ---
+        loadTasks();
+        setInterval(loadTasks, 5000);
+        setInterval(checkHealth, 10000);
+    </script>
+</body>
+
+</html>

pyproject.toml

@@ -0,0 +1,20 @@
+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "ocr-runner-backend"
+version = "2.0.0"
+description = "FastAPI backend for OCR Runner"
+dependencies = [
+    "fastapi",
+    "uvicorn",
+    "aiosqlite",
+    "aiofiles",
+    "python-multipart",
+    "custom_logger @ git+https://github.com/jebin2/custom_logger.git",
+    "ocr-runner[paddleocr] @ git+https://github.com/jebin2/OCR.git"
+]
+
+[project.scripts]
+ocr-backend = "app.main:app"

run.py

@@ -0,0 +1,5 @@
+import uvicorn
+from app.core.config import settings
+
+if __name__ == "__main__":
+    uvicorn.run("app.main:app", host="0.0.0.0", port=settings.PORT, reload=False)