Spaces:

Ma-Ri-Ba-Ku
/

XmLLM

Sleeping

Claude commited on 5 days ago

Commit

2ba385f

unverified ·

1 Parent(s): 84ced9b

Sprint 11: minimal web frontend — upload, jobs, providers, exports

Single-page HTML/JS frontend served via FastAPI StaticFiles:

Pages:
- Upload: select payload JSON, configure provider family/ID/dimensions,
run pipeline, see result (status, duration, export links, event log)
- Jobs: history table with status badges, export availability, download
links for ALTO/PAGE XML
- Providers: register new providers (ID, name, family, runtime, model),
list registered providers, delete

Features:
- Dark theme UI
- Status badges (succeeded/failed/partial_success/running/queued)
- Direct download links for ALTO XML, PAGE XML, canonical JSON
- Pipeline event log display with step names and durations
- Provider CRUD

Served at / with static assets at /static. Dockerfile updated to include
frontend directory. No build step needed — vanilla HTML/JS.

497 tests still passing.

https://claude.ai/code/session_01Cuzvc9Pjfo5u46eT3ta2Cg

Files changed (3) hide show

Dockerfile +2 -1
frontend/static/index.html +274 -0
src/app/main.py +14 -0

Dockerfile CHANGED Viewed

@@ -11,8 +11,9 @@ WORKDIR /app
 COPY pyproject.toml README.md ./
 RUN pip install --no-cache-dir .
-# Copy application code
 COPY src/ src/
 COPY AGENTS.md ./
 # Default storage root — overridden in Space mode via /data

 COPY pyproject.toml README.md ./
 RUN pip install --no-cache-dir .
+# Copy application code and frontend
 COPY src/ src/
+COPY frontend/ frontend/
 COPY AGENTS.md ./
 # Default storage root — overridden in Space mode via /data

frontend/static/index.html ADDED Viewed

	@@ -0,0 +1,274 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <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; }
+    * { 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); }
+    .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); }
+  </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>
+        </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>
+        <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>
+    <!-- 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>
+    </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>
+        </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>
+        <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>
+    </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>
+</body>
+</html>

src/app/main.py CHANGED Viewed

@@ -6,10 +6,13 @@ FastAPI application entry point.
 from __future__ import annotations
 from contextlib import asynccontextmanager
 from typing import AsyncIterator
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from src.app.api import init_services, shutdown_services
 from src.app.api.routes_exports import router as exports_router
@@ -52,3 +55,14 @@ app.include_router(providers_router)
 app.include_router(jobs_router)
 app.include_router(exports_router)
 app.include_router(viewer_router)

 from __future__ import annotations
 from contextlib import asynccontextmanager
+from pathlib import Path
 from typing import AsyncIterator
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 from src.app.api import init_services, shutdown_services
 from src.app.api.routes_exports import router as exports_router
 app.include_router(jobs_router)
 app.include_router(exports_router)
 app.include_router(viewer_router)
+# -- Static frontend ----------------------------------------------------------
+_FRONTEND_DIR = Path(__file__).resolve().parent.parent.parent / "frontend" / "static"
+if _FRONTEND_DIR.exists():
+    app.mount("/static", StaticFiles(directory=str(_FRONTEND_DIR)), name="static")
+    @app.get("/")
+    async def serve_frontend() -> FileResponse:
+        return FileResponse(str(_FRONTEND_DIR / "index.html"))