Integrate PaddleOCR and redesign UI with Xerox Star aesthetic

Image-to-XML pipeline:
- New /ocr endpoint: upload image -> PaddleOCR -> ALTO/PAGE XML
- No more manual JSON payload needed for the main workflow
- src/app/ocr/ module wraps PaddleOCR with lazy loading
- Auto-detects image dimensions via Pillow
- 20 MB upload limit with format validation

UI redesign (Xerox Star / early Mac inspired):
- Desktop icons for navigation (Scan Document, Documents, Advanced)
- Window chrome with titlebars, close boxes, and striped decorations
- Drag-and-drop zone for image upload
- Retro button styles, dithered background, monospace fonts
- Status bar at bottom of each window
- "Advanced" mode preserves the old raw payload workflow

Infrastructure:
- Add paddlepaddle + paddleocr to dependencies
- Add libgl1, libglib2.0-0 to Dockerfile for OpenCV (PaddleOCR dep)
- Pre-download OCR models at Docker build time
- Increase healthcheck start-period to 30s (model loading)

508 tests pass. 0 ruff warnings.

https://claude.ai/code/session_01AdT5qvpceqqRs1AGJNgD1Y

Dockerfile

@@ -1,8 +1,9 @@
 FROM python:3.11-slim
 
-# System deps for lxml and Pillow
+# System deps for lxml, Pillow, and PaddleOCR
 RUN apt-get update && apt-get install -y --no-install-recommends \
     libxml2 libxslt1.1 libjpeg62-turbo libwebp7 libtiff6 \
+    libgl1 libglib2.0-0 libgomp1 \
     && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /app
@@ -23,6 +24,9 @@ RUN useradd -m -u 1000 appuser \
 
 USER appuser
 
+# Pre-download PaddleOCR models at build time (avoids first-request delay)
+RUN python -c "from paddleocr import PaddleOCR; PaddleOCR(use_angle_cls=True, lang='fr', show_log=False)" 2>/dev/null || true
+
 # Default storage root — overridden in Space mode via /data
 ENV STORAGE_ROOT=/app/data
 ENV HOST=0.0.0.0
@@ -30,8 +34,7 @@ ENV PORT=7860
 
 EXPOSE 7860
 
-# Health check
-HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+HEALTHCHECK --interval=30s --timeout=5s --start-period=30s --retries=3 \
     CMD python -c "import urllib.request; urllib.request.urlopen('http://localhost:7860/health')" || exit 1
 
 CMD ["uvicorn", "src.app.main:app", "--host", "0.0.0.0", "--port", "7860"]

frontend/static/index.html

@@ -5,270 +5,678 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>XmLLM — Document Structure Engine</title>
   <style>
-    :root { --bg: #1a1a2e; --surface: #16213e; --primary: #0f3460; --accent: #e94560; --text: #eee; --muted: #888; --border: #2a2a4a; }
+    @import url('https://fonts.googleapis.com/css2?family=Chicago&display=swap');
+
+    :root {
+      --bg: #a8a8a8;
+      --window-bg: #ffffff;
+      --titlebar: #000000;
+      --titlebar-text: #ffffff;
+      --border: #000000;
+      --text: #000000;
+      --button-bg: #ffffff;
+      --button-shadow: #555555;
+      --select-bg: #000000;
+      --select-text: #ffffff;
+      --disabled: #888888;
+      --success: #006600;
+      --error: #cc0000;
+      --accent: #000000;
+    }
+
     * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
-    header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; gap: 1rem; }
-    header h1 { font-size: 1.4rem; font-weight: 600; }
-    header h1 span { color: var(--accent); }
-    nav { display: flex; gap: .5rem; margin-left: auto; }
-    nav button { background: var(--primary); color: var(--text); border: 1px solid var(--border); padding: .4rem 1rem; border-radius: 4px; cursor: pointer; font-size: .85rem; }
-    nav button.active { background: var(--accent); border-color: var(--accent); }
-    main { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
-    .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
-    .card h2 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--accent); }
-    label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
-    input, select { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: .5rem; border-radius: 4px; width: 100%; margin-bottom: .8rem; font-size: .9rem; }
-    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
-    .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
-    button.primary { background: var(--accent); color: white; border: none; padding: .6rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: .9rem; font-weight: 600; }
-    button.primary:disabled { opacity: .5; cursor: not-allowed; }
-    button.secondary { background: var(--primary); color: var(--text); border: 1px solid var(--border); padding: .4rem 1rem; border-radius: 4px; cursor: pointer; font-size: .85rem; }
-    .status { display: inline-block; padding: .15rem .6rem; border-radius: 12px; font-size: .75rem; font-weight: 600; }
-    .status.succeeded { background: #0a3d2a; color: #4ade80; }
-    .status.failed { background: #3d0a0a; color: #f87171; }
-    .status.partial_success { background: #3d2a0a; color: #fbbf24; }
-    .status.running { background: #0a2a3d; color: #60a5fa; }
-    .status.queued { background: #2a2a2a; color: #aaa; }
-    table { width: 100%; border-collapse: collapse; font-size: .85rem; }
-    th { text-align: left; color: var(--muted); font-weight: 500; padding: .5rem; border-bottom: 1px solid var(--border); }
-    td { padding: .5rem; border-bottom: 1px solid var(--border); }
-    tr:hover td { background: rgba(255,255,255,.03); }
+
+    body {
+      font-family: "Geneva", "Chicago", "Charcoal", "Lucida Grande", "Helvetica", monospace;
+      font-size: 12px;
+      background: var(--bg);
+      background-image:
+        linear-gradient(45deg, #9e9e9e 25%, transparent 25%),
+        linear-gradient(-45deg, #9e9e9e 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #9e9e9e 75%),
+        linear-gradient(-45deg, transparent 75%, #9e9e9e 75%);
+      background-size: 4px 4px;
+      background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
+      color: var(--text);
+      min-height: 100vh;
+      padding: 8px;
+    }
+
+    /* ── Desktop icons ─────────────────────────────────── */
+    .desktop {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+    }
+
+    .desktop-icon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      width: 80px;
+      padding: 6px 4px;
+      cursor: pointer;
+      border: 2px solid transparent;
+      user-select: none;
+    }
+    .desktop-icon:hover { border: 2px dotted var(--border); }
+    .desktop-icon.active {
+      background: var(--select-bg);
+      color: var(--select-text);
+      border: 2px solid var(--border);
+    }
+    .desktop-icon .icon-img {
+      width: 48px;
+      height: 48px;
+      border: 2px solid var(--border);
+      background: var(--window-bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 22px;
+    }
+    .desktop-icon.active .icon-img {
+      background: var(--select-bg);
+      color: var(--select-text);
+      border-color: var(--select-text);
+    }
+    .desktop-icon .icon-label {
+      font-size: 10px;
+      text-align: center;
+      word-break: break-word;
+    }
+
+    /* ── Window chrome ─────────────────────────────────── */
+    .window {
+      background: var(--window-bg);
+      border: 2px solid var(--border);
+      box-shadow: 3px 3px 0 var(--border);
+      max-width: 760px;
+      margin: 0 auto;
+    }
+
+    .titlebar {
+      background: var(--titlebar);
+      color: var(--titlebar-text);
+      padding: 3px 8px;
+      font-size: 12px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: default;
+      user-select: none;
+    }
+    .titlebar .close-box {
+      width: 14px;
+      height: 14px;
+      border: 1px solid var(--titlebar-text);
+      display: inline-block;
+      cursor: pointer;
+    }
+    .titlebar .title-text { flex: 1; text-align: center; }
+    .titlebar .stripes {
+      flex: 0 0 40px;
+      height: 10px;
+      background: repeating-linear-gradient(
+        0deg,
+        var(--titlebar-text) 0px, var(--titlebar-text) 1px,
+        var(--titlebar) 1px, var(--titlebar) 3px
+      );
+    }
+
+    .window-body { padding: 16px; }
+
+    /* ── Menu bar ──────────────────────────────────────── */
+    .menubar {
+      background: var(--window-bg);
+      border-bottom: 2px solid var(--border);
+      padding: 2px 8px;
+      font-size: 11px;
+      display: flex;
+      gap: 16px;
+    }
+    .menubar span { cursor: default; font-weight: bold; }
+
+    /* ── Buttons ───────────────────────────────────────── */
+    button, .btn {
+      font-family: inherit;
+      font-size: 12px;
+      background: var(--button-bg);
+      border: 2px solid var(--border);
+      padding: 4px 16px;
+      cursor: pointer;
+      box-shadow: 2px 2px 0 var(--button-shadow);
+      user-select: none;
+    }
+    button:active, .btn:active {
+      box-shadow: none;
+      transform: translate(2px, 2px);
+    }
+    button:disabled {
+      color: var(--disabled);
+      border-color: var(--disabled);
+      box-shadow: 1px 1px 0 var(--disabled);
+      cursor: not-allowed;
+    }
+    button.primary {
+      background: var(--accent);
+      color: var(--titlebar-text);
+      font-weight: bold;
+      border-radius: 6px;
+      padding: 6px 24px;
+    }
+    button.primary:active {
+      background: #333;
+    }
+
+    /* ── Form elements ─────────────────────────────────── */
+    label {
+      font-size: 11px;
+      font-weight: bold;
+      display: block;
+      margin-bottom: 2px;
+    }
+    input[type="file"] {
+      font-family: inherit;
+      font-size: 11px;
+    }
+
+    /* ── Drop zone ─────────────────────────────────────── */
+    .drop-zone {
+      border: 3px dashed var(--border);
+      padding: 32px 16px;
+      text-align: center;
+      cursor: pointer;
+      margin-bottom: 12px;
+      transition: background 0.15s;
+    }
+    .drop-zone:hover, .drop-zone.dragover {
+      background: #e0e0e0;
+    }
+    .drop-zone .icon { font-size: 36px; margin-bottom: 8px; }
+    .drop-zone .hint { font-size: 11px; color: var(--disabled); }
+    .drop-zone .filename {
+      font-weight: bold;
+      margin-top: 8px;
+      word-break: break-all;
+    }
+
+    /* ── Status / progress ─────────────────────────────── */
+    .status-bar {
+      background: var(--window-bg);
+      border-top: 2px solid var(--border);
+      padding: 3px 8px;
+      font-size: 10px;
+      color: var(--disabled);
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .progress-text {
+      font-weight: bold;
+      padding: 8px;
+      text-align: center;
+      font-size: 11px;
+    }
+
+    /* ── Result card ───────────────────────────────────── */
+    .result-area {
+      border: 2px solid var(--border);
+      padding: 12px;
+      margin-top: 12px;
+      background: #f5f5f5;
+    }
+    .result-area h3 {
+      font-size: 12px;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 4px;
+      margin-bottom: 8px;
+    }
+
+    .result-row {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 8px;
+      align-items: center;
+    }
+    .result-label { font-weight: bold; min-width: 80px; font-size: 11px; }
+    .result-value { font-size: 11px; }
+
+    .tag {
+      display: inline-block;
+      border: 1px solid var(--border);
+      padding: 1px 6px;
+      font-size: 10px;
+      font-weight: bold;
+    }
+    .tag.ok { background: #c6f5c6; }
+    .tag.no { background: #f0f0f0; color: var(--disabled); }
+
+    .download-btn {
+      display: inline-block;
+      font-family: inherit;
+      font-size: 11px;
+      background: var(--window-bg);
+      border: 2px solid var(--border);
+      padding: 3px 12px;
+      cursor: pointer;
+      text-decoration: none;
+      color: var(--text);
+      box-shadow: 2px 2px 0 var(--button-shadow);
+      margin: 2px;
+    }
+    .download-btn:active {
+      box-shadow: none;
+      transform: translate(2px, 2px);
+    }
+
+    /* ── Event log ─────────────────────────────────────── */
+    .event-log {
+      font-family: "Monaco", "Courier New", monospace;
+      font-size: 10px;
+      background: var(--window-bg);
+      border: 2px inset var(--border);
+      padding: 6px;
+      max-height: 200px;
+      overflow-y: auto;
+      white-space: pre;
+      margin-top: 8px;
+    }
+
+    /* ── Jobs table ────────────────────────────────────── */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 11px;
+    }
+    th {
+      text-align: left;
+      font-weight: bold;
+      border-bottom: 2px solid var(--border);
+      padding: 4px 6px;
+      background: #e8e8e8;
+    }
+    td {
+      padding: 3px 6px;
+      border-bottom: 1px solid #ccc;
+    }
+    tr:hover td { background: #e8e8f0; }
+
+    .status-badge {
+      display: inline-block;
+      padding: 1px 6px;
+      font-size: 10px;
+      font-weight: bold;
+      border: 1px solid;
+    }
+    .status-badge.succeeded { background: #c6f5c6; border-color: var(--success); }
+    .status-badge.failed { background: #f5c6c6; border-color: var(--error); }
+    .status-badge.partial_success { background: #f5eec6; border-color: #886600; }
+    .status-badge.running { background: #c6e0f5; border-color: #004488; }
+    .status-badge.queued { background: #e8e8e8; border-color: var(--disabled); }
+
     .hidden { display: none; }
-    #log { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1rem; font-family: monospace; font-size: .8rem; max-height: 300px; overflow-y: auto; white-space: pre-wrap; color: var(--muted); }
-    .exports { display: flex; gap: .5rem; flex-wrap: wrap; }
-    .tag { background: var(--primary); padding: .2rem .5rem; border-radius: 3px; font-size: .75rem; }
-    .tag.yes { background: #0a3d2a; color: #4ade80; }
-    .tag.no { background: #2a2a2a; color: #666; }
-    #viewer-area { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; min-height: 400px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-style: italic; }
-    .stats { display: flex; gap: 2rem; margin-bottom: 1rem; }
-    .stat { text-align: center; }
-    .stat .value { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
-    .stat .label { font-size: .75rem; color: var(--muted); }
+
+    /* ── Responsive ────────────────────────────────────── */
+    @media (max-width: 600px) {
+      .desktop { justify-content: center; }
+      .window { margin: 0 4px; }
+    }
   </style>
 </head>
 <body>
-  <header>
-    <h1><span>XmLLM</span> Document Structure Engine</h1>
-    <nav>
-      <button class="active" onclick="showPage('upload')">Upload</button>
-      <button onclick="showPage('jobs')">Jobs</button>
-      <button onclick="showPage('providers')">Providers</button>
-    </nav>
-  </header>
-
-  <main>
-    <!-- UPLOAD PAGE -->
-    <div id="page-upload">
-      <div class="card">
-        <h2>New Job</h2>
-        <div class="row">
-          <div>
-            <label>Raw Payload JSON</label>
-            <input type="file" id="payload-file" accept=".json">
-          </div>
-          <div>
-            <label>Provider Family</label>
-            <select id="provider-family">
-              <option value="word_box_json">word_box_json (PaddleOCR)</option>
-              <option value="line_box_json">line_box_json</option>
-              <option value="text_only">text_only (mLLM)</option>
-            </select>
-          </div>
+
+  <!-- ═══ Desktop Icons ═══ -->
+  <div class="desktop">
+    <div class="desktop-icon active" onclick="showPage('scan')">
+      <div class="icon-img">&#128196;</div>
+      <div class="icon-label">Scan Document</div>
+    </div>
+    <div class="desktop-icon" onclick="showPage('jobs')">
+      <div class="icon-img">&#128193;</div>
+      <div class="icon-label">Documents</div>
+    </div>
+    <div class="desktop-icon" onclick="showPage('advanced')">
+      <div class="icon-img">&#9881;</div>
+      <div class="icon-label">Advanced</div>
+    </div>
+  </div>
+
+  <!-- ═══ SCAN WINDOW ═══ -->
+  <div id="page-scan" class="window">
+    <div class="titlebar">
+      <span class="close-box"></span>
+      <span class="stripes"></span>
+      <span class="title-text">Scan Document</span>
+      <span class="stripes"></span>
+    </div>
+    <div class="menubar">
+      <span>File</span>
+      <span>Edit</span>
+      <span>View</span>
+    </div>
+    <div class="window-body">
+
+      <div class="drop-zone" id="drop-zone" onclick="document.getElementById('image-input').click()">
+        <div class="icon">&#128444;</div>
+        <div><b>Drop an image here</b></div>
+        <div class="hint">or click to browse &mdash; PNG, JPEG, TIFF, WebP</div>
+        <div class="filename hidden" id="file-label"></div>
+        <input type="file" id="image-input" accept=".png,.jpg,.jpeg,.tiff,.tif,.webp,.bmp" style="display:none">
+      </div>
+
+      <div style="text-align:center;">
+        <button class="primary" id="btn-scan" onclick="runScan()" disabled>
+          &#9654; Run OCR Pipeline
+        </button>
+      </div>
+
+      <div class="progress-text hidden" id="progress">Processing&hellip;</div>
+
+      <div class="result-area hidden" id="result-area">
+        <h3>&#9745; Result</h3>
+        <div class="result-row">
+          <span class="result-label">Status</span>
+          <span class="result-value" id="res-status"></span>
         </div>
-        <div class="row-3">
-          <div>
-            <label>Provider ID</label>
-            <input type="text" id="provider-id" value="paddleocr" placeholder="paddleocr">
-          </div>
-          <div>
-            <label>Image Width (px)</label>
-            <input type="number" id="img-width" value="2480">
-          </div>
-          <div>
-            <label>Image Height (px)</label>
-            <input type="number" id="img-height" value="3508">
-          </div>
+        <div class="result-row">
+          <span class="result-label">Duration</span>
+          <span class="result-value" id="res-duration"></span>
+        </div>
+        <div class="result-row">
+          <span class="result-label">Exports</span>
+          <span class="result-value" id="res-exports"></span>
+        </div>
+        <div class="result-row" id="res-downloads-row">
+          <span class="result-label">Download</span>
+          <span class="result-value" id="res-downloads"></span>
+        </div>
+        <div class="event-log hidden" id="event-log"></div>
+        <div style="margin-top:6px;text-align:right;">
+          <button onclick="toggleLog()">Show Log</button>
         </div>
-        <button class="primary" id="btn-run" onclick="runJob()">Run Pipeline</button>
-        <span id="run-status" style="margin-left:1rem;color:var(--muted)"></span>
       </div>
 
-      <div class="card hidden" id="result-card">
-        <h2>Result</h2>
-        <div class="stats" id="result-stats"></div>
-        <div class="exports" id="result-exports"></div>
-        <div id="log" style="margin-top:1rem"></div>
-      </div>
     </div>
+    <div class="status-bar">
+      <span id="statusbar-left">Ready</span>
+      <span>XmLLM v0.1.0</span>
+    </div>
+  </div>
 
-    <!-- JOBS PAGE -->
-    <div id="page-jobs" class="hidden">
-      <div class="card">
-        <h2>Job History</h2>
-        <table>
-          <thead><tr><th>ID</th><th>Status</th><th>Provider</th><th>File</th><th>ALTO</th><th>PAGE</th><th>Duration</th><th>Actions</th></tr></thead>
-          <tbody id="jobs-table"></tbody>
-        </table>
-      </div>
-      <div class="card hidden" id="job-detail-card">
-        <h2>Job Detail</h2>
-        <div id="job-detail"></div>
-        <div id="job-exports" style="margin-top:1rem"></div>
-        <div id="job-log" style="margin-top:1rem"></div>
-      </div>
+  <!-- ═══ JOBS WINDOW ═══ -->
+  <div id="page-jobs" class="window hidden">
+    <div class="titlebar">
+      <span class="close-box"></span>
+      <span class="stripes"></span>
+      <span class="title-text">Documents</span>
+      <span class="stripes"></span>
     </div>
+    <div class="menubar">
+      <span>File</span>
+      <span>View</span>
+    </div>
+    <div class="window-body">
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Status</th>
+            <th>Source</th>
+            <th>ALTO</th>
+            <th>PAGE</th>
+            <th>Duration</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody id="jobs-table">
+          <tr><td colspan="7" style="text-align:center;color:#888;">Loading&hellip;</td></tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="status-bar">
+      <span id="jobs-count">-</span>
+      <span>XmLLM v0.1.0</span>
+    </div>
+  </div>
 
-    <!-- PROVIDERS PAGE -->
-    <div id="page-providers" class="hidden">
-      <div class="card">
-        <h2>Register Provider</h2>
-        <div class="row-3">
-          <div><label>Provider ID</label><input id="prov-id" placeholder="my_paddle"></div>
-          <div><label>Display Name</label><input id="prov-name" placeholder="PaddleOCR Local"></div>
-          <div><label>Family</label>
-            <select id="prov-family">
-              <option value="word_box_json">word_box_json</option>
-              <option value="line_box_json">line_box_json</option>
-              <option value="text_only">text_only</option>
-            </select>
-          </div>
+  <!-- ═══ ADVANCED WINDOW (raw payload) ═══ -->
+  <div id="page-advanced" class="window hidden">
+    <div class="titlebar">
+      <span class="close-box"></span>
+      <span class="stripes"></span>
+      <span class="title-text">Advanced &mdash; Raw Payload</span>
+      <span class="stripes"></span>
+    </div>
+    <div class="menubar">
+      <span>File</span>
+    </div>
+    <div class="window-body">
+      <p style="margin-bottom:12px;font-size:11px;color:#555;">
+        Upload a raw OCR JSON payload manually (for providers other than PaddleOCR).
+      </p>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;">
+        <div>
+          <label>Raw Payload JSON</label>
+          <input type="file" id="payload-file" accept=".json">
         </div>
-        <div class="row">
-          <div><label>Runtime Type</label>
-            <select id="prov-runtime"><option>local</option><option>hub</option><option>api</option></select>
-          </div>
-          <div><label>Model ID / Path</label><input id="prov-model" placeholder="/models/paddle"></div>
+        <div>
+          <label>Provider Family</label>
+          <select id="provider-family" style="font-family:inherit;font-size:11px;padding:2px;width:100%;border:2px solid var(--border);">
+            <option value="word_box_json">word_box_json (PaddleOCR)</option>
+            <option value="line_box_json">line_box_json</option>
+            <option value="text_only">text_only (mLLM)</option>
+          </select>
         </div>
-        <button class="primary" onclick="registerProvider()">Register</button>
-        <span id="prov-status" style="margin-left:1rem;color:var(--muted)"></span>
       </div>
-      <div class="card">
-        <h2>Registered Providers</h2>
-        <table>
-          <thead><tr><th>ID</th><th>Name</th><th>Family</th><th>Runtime</th><th>Actions</th></tr></thead>
-          <tbody id="providers-table"></tbody>
-        </table>
+      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px;">
+        <div>
+          <label>Provider ID</label>
+          <input type="text" id="provider-id" value="paddleocr" style="font-family:inherit;font-size:11px;padding:2px;width:100%;border:2px solid var(--border);">
+        </div>
+        <div>
+          <label>Image Width (px)</label>
+          <input type="number" id="img-width" value="2480" style="font-family:inherit;font-size:11px;padding:2px;width:100%;border:2px solid var(--border);">
+        </div>
+        <div>
+          <label>Image Height (px)</label>
+          <input type="number" id="img-height" value="3508" style="font-family:inherit;font-size:11px;padding:2px;width:100%;border:2px solid var(--border);">
+        </div>
       </div>
+      <button class="primary" id="btn-run-advanced" onclick="runAdvanced()">Run Pipeline</button>
+      <span id="adv-status" style="margin-left:8px;font-size:11px;color:#888;"></span>
+    </div>
+    <div class="status-bar">
+      <span>Manual mode</span>
+      <span>XmLLM v0.1.0</span>
     </div>
-  </main>
-
-  <script>
-    const API = '';
-
-    function showPage(name) {
-      document.querySelectorAll('main > div').forEach(d => d.classList.add('hidden'));
-      document.getElementById('page-' + name).classList.remove('hidden');
-      document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
-      event.target.classList.add('active');
-      if (name === 'jobs') loadJobs();
-      if (name === 'providers') loadProviders();
-    }
-
-    async function runJob() {
-      const fileInput = document.getElementById('payload-file');
-      if (!fileInput.files.length) { alert('Select a payload JSON file'); return; }
-      const btn = document.getElementById('btn-run');
-      const status = document.getElementById('run-status');
-      btn.disabled = true; status.textContent = 'Running...';
-
-      const fd = new FormData();
-      fd.append('raw_payload_file', fileInput.files[0]);
-
-      const params = new URLSearchParams({
-        provider_id: document.getElementById('provider-id').value,
-        provider_family: document.getElementById('provider-family').value,
-        image_width: document.getElementById('img-width').value,
-        image_height: document.getElementById('img-height').value,
-      });
-
-      try {
-        const r = await fetch(API + '/jobs?' + params, { method: 'POST', body: fd });
-        const data = await r.json();
-        btn.disabled = false; status.textContent = '';
-        showResult(data);
-      } catch(e) {
-        btn.disabled = false; status.textContent = 'Error: ' + e.message;
-      }
-    }
-
-    function showResult(data) {
-      const card = document.getElementById('result-card');
-      card.classList.remove('hidden');
-      document.getElementById('result-stats').innerHTML = `
-        <div class="stat"><div class="value"><span class="status ${data.status}">${data.status}</span></div><div class="label">Status</div></div>
-        <div class="stat"><div class="value">${data.duration_ms ? Math.round(data.duration_ms) + 'ms' : '-'}</div><div class="label">Duration</div></div>
-      `;
-      const jobId = data.job_id;
-      document.getElementById('result-exports').innerHTML = `
-        <span class="tag ${data.has_alto ? 'yes' : 'no'}">ALTO ${data.has_alto ? '✓' : '✗'}</span>
-        <span class="tag ${data.has_page_xml ? 'yes' : 'no'}">PAGE ${data.has_page_xml ? '✓' : '✗'}</span>
-        ${data.has_alto ? `<a href="${API}/jobs/${jobId}/alto" class="secondary" style="color:var(--text);text-decoration:none;padding:.2rem .5rem;background:var(--primary);border-radius:3px;font-size:.75rem">Download ALTO</a>` : ''}
-        ${data.has_page_xml ? `<a href="${API}/jobs/${jobId}/pagexml" class="secondary" style="color:var(--text);text-decoration:none;padding:.2rem .5rem;background:var(--primary);border-radius:3px;font-size:.75rem">Download PAGE</a>` : ''}
-        <a href="${API}/jobs/${jobId}/canonical" target="_blank" class="secondary" style="color:var(--text);text-decoration:none;padding:.2rem .5rem;background:var(--primary);border-radius:3px;font-size:.75rem">Canonical JSON</a>
-      `;
-      if (data.error) {
-        document.getElementById('log').textContent = 'ERROR: ' + data.error;
-      } else {
-        fetch(API + '/jobs/' + jobId + '/logs').then(r => r.json()).then(events => {
-          document.getElementById('log').textContent = events.map(e =>
-            `[${e.status.padEnd(9)}] ${e.step.padEnd(20)} ${e.duration_ms ? Math.round(e.duration_ms) + 'ms' : e.message || ''}`
-          ).join('\n');
-        });
-      }
-    }
-
-    async function loadJobs() {
-      const r = await fetch(API + '/jobs');
-      const jobs = await r.json();
-      const tbody = document.getElementById('jobs-table');
-      tbody.innerHTML = jobs.map(j => `<tr>
-        <td style="font-family:monospace;font-size:.8rem">${j.job_id}</td>
-        <td><span class="status ${j.status}">${j.status}</span></td>
-        <td>${j.provider_id}</td>
-        <td>${j.source_filename || '-'}</td>
-        <td><span class="tag ${j.has_alto ? 'yes' : 'no'}">${j.has_alto ? '✓' : '✗'}</span></td>
-        <td><span class="tag ${j.has_page_xml ? 'yes' : 'no'}">${j.has_page_xml ? '✓' : '✗'}</span></td>
-        <td>${j.duration_ms ? Math.round(j.duration_ms) + 'ms' : '-'}</td>
-        <td>
-          ${j.has_alto ? `<a href="${API}/jobs/${j.job_id}/alto" class="secondary" style="font-size:.75rem">ALTO</a> ` : ''}
-          ${j.has_page_xml ? `<a href="${API}/jobs/${j.job_id}/pagexml" class="secondary" style="font-size:.75rem">PAGE</a>` : ''}
-        </td>
-      </tr>`).join('');
-    }
-
-    async function loadProviders() {
-      const r = await fetch(API + '/providers');
-      const provs = await r.json();
-      const tbody = document.getElementById('providers-table');
-      tbody.innerHTML = provs.map(p => `<tr>
-        <td>${p.provider_id}</td>
-        <td>${p.display_name}</td>
-        <td><span class="tag">${p.family}</span></td>
-        <td>${p.runtime_type}</td>
-        <td><button class="secondary" onclick="deleteProvider('${p.provider_id}')" style="font-size:.75rem">Delete</button></td>
-      </tr>`).join('');
-    }
-
-    async function registerProvider() {
-      const body = {
-        provider_id: document.getElementById('prov-id').value,
-        display_name: document.getElementById('prov-name').value,
-        family: document.getElementById('prov-family').value,
-        runtime_type: document.getElementById('prov-runtime').value,
-        model_id_or_path: document.getElementById('prov-model').value,
-      };
-      const r = await fetch(API + '/providers', {
-        method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body),
-      });
-      document.getElementById('prov-status').textContent = r.ok ? 'Registered!' : 'Error';
-      loadProviders();
-    }
-
-    async function deleteProvider(id) {
-      await fetch(API + '/providers/' + id, { method: 'DELETE' });
-      loadProviders();
-    }
-  </script>
+  </div>
+
+<script>
+const API = '';
+
+/* ── Page switching ── */
+function showPage(name) {
+  ['scan','jobs','advanced'].forEach(p => {
+    document.getElementById('page-' + p).classList.add('hidden');
+  });
+  document.getElementById('page-' + name).classList.remove('hidden');
+  document.querySelectorAll('.desktop-icon').forEach(d => d.classList.remove('active'));
+  event.currentTarget.classList.add('active');
+  if (name === 'jobs') loadJobs();
+}
+
+/* ── File drop zone ── */
+const dropZone = document.getElementById('drop-zone');
+const imageInput = document.getElementById('image-input');
+
+['dragenter','dragover'].forEach(e => {
+  dropZone.addEventListener(e, ev => { ev.preventDefault(); dropZone.classList.add('dragover'); });
+});
+['dragleave','drop'].forEach(e => {
+  dropZone.addEventListener(e, ev => { ev.preventDefault(); dropZone.classList.remove('dragover'); });
+});
+dropZone.addEventListener('drop', ev => {
+  if (ev.dataTransfer.files.length) {
+    imageInput.files = ev.dataTransfer.files;
+    onFileSelected();
+  }
+});
+imageInput.addEventListener('change', onFileSelected);
+
+function onFileSelected() {
+  const f = imageInput.files[0];
+  if (!f) return;
+  const label = document.getElementById('file-label');
+  label.textContent = f.name + ' (' + (f.size / 1024).toFixed(0) + ' KB)';
+  label.classList.remove('hidden');
+  document.getElementById('btn-scan').disabled = false;
+  document.getElementById('statusbar-left').textContent = 'Image loaded: ' + f.name;
+}
+
+/* ── Main scan (image → OCR → XML) ── */
+async function runScan() {
+  const f = imageInput.files[0];
+  if (!f) return;
+
+  const btn = document.getElementById('btn-scan');
+  const progress = document.getElementById('progress');
+  const result = document.getElementById('result-area');
+
+  btn.disabled = true;
+  progress.classList.remove('hidden');
+  result.classList.add('hidden');
+  document.getElementById('statusbar-left').textContent = 'Running OCR pipeline\u2026';
+
+  const fd = new FormData();
+  fd.append('image', f);
+
+  try {
+    const r = await fetch(API + '/ocr', { method: 'POST', body: fd });
+    const data = await r.json();
+
+    if (!r.ok) {
+      progress.textContent = 'Error: ' + (data.detail || r.statusText);
+      progress.style.color = 'var(--error)';
+      document.getElementById('statusbar-left').textContent = 'Error';
+      btn.disabled = false;
+      return;
+    }
+
+    progress.classList.add('hidden');
+    progress.style.color = '';
+    progress.textContent = 'Processing\u2026';
+    btn.disabled = false;
+    showResult(data);
+    document.getElementById('statusbar-left').textContent = 'Done \u2014 ' + data.status;
+  } catch(e) {
+    progress.textContent = 'Network error: ' + e.message;
+    progress.style.color = 'var(--error)';
+    btn.disabled = false;
+  }
+}
+
+function showResult(data) {
+  const area = document.getElementById('result-area');
+  area.classList.remove('hidden');
+
+  document.getElementById('res-status').innerHTML =
+    '<span class="status-badge ' + data.status + '">' + data.status.toUpperCase() + '</span>';
+
+  document.getElementById('res-duration').textContent =
+    data.duration_ms ? Math.round(data.duration_ms) + ' ms' : '\u2014';
+
+  document.getElementById('res-exports').innerHTML =
+    '<span class="tag ' + (data.has_alto ? 'ok' : 'no') + '">ALTO ' + (data.has_alto ? '\u2713' : '\u2717') + '</span> ' +
+    '<span class="tag ' + (data.has_page_xml ? 'ok' : 'no') + '">PAGE ' + (data.has_page_xml ? '\u2713' : '\u2717') + '</span>';
+
+  const dl = document.getElementById('res-downloads');
+  const id = data.job_id;
+  dl.innerHTML = '';
+  if (data.has_alto)
+    dl.innerHTML += '<a class="download-btn" href="' + API + '/jobs/' + id + '/alto">&#128196; ALTO XML</a>';
+  if (data.has_page_xml)
+    dl.innerHTML += '<a class="download-btn" href="' + API + '/jobs/' + id + '/pagexml">&#128196; PAGE XML</a>';
+  dl.innerHTML += '<a class="download-btn" href="' + API + '/jobs/' + id + '/canonical" target="_blank">&#128203; Canonical JSON</a>';
+
+  // Load event log
+  fetch(API + '/jobs/' + id + '/logs').then(r => r.json()).then(events => {
+    document.getElementById('event-log').textContent = events.map(e =>
+      '[' + e.status.padEnd(9) + '] ' + e.step.padEnd(20) + ' ' +
+      (e.duration_ms ? Math.round(e.duration_ms) + 'ms' : e.message || '')
+    ).join('\n');
+  }).catch(() => {});
+}
+
+function toggleLog() {
+  const log = document.getElementById('event-log');
+  log.classList.toggle('hidden');
+}
+
+/* ── Jobs list ── */
+async function loadJobs() {
+  try {
+    const r = await fetch(API + '/jobs');
+    const jobs = await r.json();
+    const tbody = document.getElementById('jobs-table');
+    if (!jobs.length) {
+      tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;color:#888;">No documents yet</td></tr>';
+      document.getElementById('jobs-count').textContent = '0 documents';
+      return;
+    }
+    tbody.innerHTML = jobs.map(j => `<tr>
+      <td style="font-family:monospace;font-size:10px;">${j.job_id.slice(-8)}</td>
+      <td><span class="status-badge ${j.status}">${j.status}</span></td>
+      <td>${j.source_filename || '\u2014'}</td>
+      <td><span class="tag ${j.has_alto ? 'ok' : 'no'}">${j.has_alto ? '\u2713' : '\u2717'}</span></td>
+      <td><span class="tag ${j.has_page_xml ? 'ok' : 'no'}">${j.has_page_xml ? '\u2713' : '\u2717'}</span></td>
+      <td>${j.duration_ms ? Math.round(j.duration_ms) + 'ms' : '\u2014'}</td>
+      <td>
+        ${j.has_alto ? `<a class="download-btn" href="${API}/jobs/${j.job_id}/alto" style="font-size:10px;">ALTO</a>` : ''}
+        ${j.has_page_xml ? `<a class="download-btn" href="${API}/jobs/${j.job_id}/pagexml" style="font-size:10px;">PAGE</a>` : ''}
+      </td>
+    </tr>`).join('');
+    document.getElementById('jobs-count').textContent = jobs.length + ' document' + (jobs.length > 1 ? 's' : '');
+  } catch(e) {
+    document.getElementById('jobs-table').innerHTML =
+      '<tr><td colspan="7" style="color:var(--error);">Failed to load</td></tr>';
+  }
+}
+
+/* ── Advanced (raw payload) ── */
+async function runAdvanced() {
+  const fileInput = document.getElementById('payload-file');
+  if (!fileInput.files.length) { alert('Select a payload JSON file'); return; }
+  const btn = document.getElementById('btn-run-advanced');
+  const status = document.getElementById('adv-status');
+  btn.disabled = true;
+  status.textContent = 'Running\u2026';
+
+  const fd = new FormData();
+  fd.append('raw_payload_file', fileInput.files[0]);
+
+  const params = new URLSearchParams({
+    provider_id: document.getElementById('provider-id').value,
+    provider_family: document.getElementById('provider-family').value,
+    image_width: document.getElementById('img-width').value,
+    image_height: document.getElementById('img-height').value,
+  });
+
+  try {
+    const r = await fetch(API + '/jobs?' + params, { method: 'POST', body: fd });
+    const data = await r.json();
+    btn.disabled = false;
+    status.textContent = r.ok
+      ? '\u2713 ' + data.status + (data.duration_ms ? ' (' + Math.round(data.duration_ms) + 'ms)' : '')
+      : 'Error: ' + (data.detail || r.statusText);
+  } catch(e) {
+    btn.disabled = false;
+    status.textContent = 'Error: ' + e.message;
+  }
+}
+</script>
 </body>
 </html>

pyproject.toml

@@ -23,6 +23,8 @@ dependencies = [
     "python-multipart>=0.0.9",
     "aiosqlite>=0.20,<1",
     "httpx>=0.27,<1",
+    "paddlepaddle>=2.6,<3",
+    "paddleocr>=2.8",
 ]
 
 [project.optional-dependencies]

src/app/api/routes_ocr.py

@@ -0,0 +1,86 @@
+"""Image upload route — accepts an image, runs OCR, produces XML."""
+
+from __future__ import annotations
+
+import tempfile
+from pathlib import Path
+from typing import Any
+
+from fastapi import APIRouter, HTTPException, UploadFile
+
+from src.app.api import get_job_service
+from src.app.domain.models import RawProviderPayload
+
+router = APIRouter(tags=["ocr"])
+
+ALLOWED_EXTENSIONS = {".png", ".jpg", ".jpeg", ".tiff", ".tif", ".webp", ".bmp"}
+MAX_IMAGE_SIZE = 20 * 1024 * 1024  # 20 MB
+
+
+@router.post("/ocr", status_code=201)
+async def ocr_image(image: UploadFile) -> dict[str, Any]:
+    """Upload an image, run PaddleOCR, and produce ALTO/PAGE XML.
+
+    This is the main user-facing endpoint — no JSON payload needed.
+    """
+    if not image.filename:
+        raise HTTPException(status_code=422, detail="No filename provided")
+
+    ext = Path(image.filename).suffix.lower()
+    if ext not in ALLOWED_EXTENSIONS:
+        raise HTTPException(
+            status_code=422,
+            detail=f"Unsupported format '{ext}'. Use: {', '.join(sorted(ALLOWED_EXTENSIONS))}",
+        )
+
+    content = await image.read(MAX_IMAGE_SIZE + 1)
+    if len(content) > MAX_IMAGE_SIZE:
+        raise HTTPException(status_code=413, detail="Image too large (max 20 MB)")
+
+    with tempfile.NamedTemporaryFile(suffix=ext, delete=False) as tmp:
+        tmp.write(content)
+        tmp_path = Path(tmp.name)
+
+    try:
+        from PIL import Image as PILImage
+        with PILImage.open(tmp_path) as img:
+            image_width, image_height = img.size
+
+        from src.app.ocr import paddle_result_to_payload, run_paddle_ocr
+        results = run_paddle_ocr(tmp_path)
+
+        if not results:
+            raise HTTPException(
+                status_code=422,
+                detail="PaddleOCR found no text in this image",
+            )
+
+        payload = paddle_result_to_payload(results)
+
+        raw = RawProviderPayload(
+            provider_id="paddleocr",
+            adapter_id="adapter.word_box_json.v1",
+            runtime_type="local",
+            payload=payload,
+            image_width=image_width,
+            image_height=image_height,
+        )
+
+        svc = get_job_service()
+        job = svc.create_job(
+            provider_id="paddleocr",
+            provider_family="word_box_json",
+            source_filename=image.filename,
+        )
+
+        result = svc.run_job(
+            job, raw,
+            image_width=image_width,
+            image_height=image_height,
+            image_path=tmp_path,
+        )
+
+        return result.to_summary()
+
+    finally:
+        tmp_path.unlink(missing_ok=True)

src/app/main.py

@@ -18,6 +18,7 @@ from src.app.api import init_services, shutdown_services
 from src.app.api.routes_exports import router as exports_router
 from src.app.api.routes_health import router as health_router
 from src.app.api.routes_jobs import router as jobs_router
+from src.app.api.routes_ocr import router as ocr_router
 from src.app.api.routes_providers import router as providers_router
 from src.app.api.routes_viewer import router as viewer_router
 from src.app.settings import get_settings
@@ -54,6 +55,7 @@ app.add_middleware(
 # -- Register routers --------------------------------------------------------
 
 app.include_router(health_router)
+app.include_router(ocr_router)
 app.include_router(providers_router)
 app.include_router(jobs_router)
 app.include_router(exports_router)

src/app/ocr/__init__.py

@@ -0,0 +1,43 @@
+"""PaddleOCR integration — runs OCR on an image and returns word_box_json payload."""
+
+from __future__ import annotations
+
+import logging
+from pathlib import Path
+from typing import Any
+
+logger = logging.getLogger(__name__)
+
+_ocr_instance = None
+
+
+def _get_ocr() -> Any:
+    """Lazy-load PaddleOCR (heavy import, ~2s first time)."""
+    global _ocr_instance
+    if _ocr_instance is None:
+        from paddleocr import PaddleOCR
+        _ocr_instance = PaddleOCR(use_angle_cls=True, lang="fr", show_log=False)
+    return _ocr_instance
+
+
+def run_paddle_ocr(image_path: Path) -> list[Any]:
+    """Run PaddleOCR on an image file.
+
+    Returns the raw PaddleOCR result in word_box_json format:
+        [[[x1,y1],[x2,y2],[x3,y3],[x4,y4]], ("text", confidence)]
+    """
+    ocr = _get_ocr()
+    results = ocr.ocr(str(image_path), cls=True)
+    if not results or not results[0]:
+        return []
+    return results[0]
+
+
+def paddle_result_to_payload(results: list[Any]) -> list[Any]:
+    """Convert PaddleOCR results to the word_box_json payload format."""
+    payload = []
+    for item in results:
+        points = item[0]
+        text, conf = item[1]
+        payload.append([points, [text, conf]])
+    return payload