Skip to content

Phase 3: playground — grounded extraction demo (Hono API + Vite/React) - #3

Merged
RATCHAW merged 1 commit into
mainfrom
RATCHAW/chisinau
Jul 12, 2026
Merged

Phase 3: playground — grounded extraction demo (Hono API + Vite/React)#3
RATCHAW merged 1 commit into
mainfrom
RATCHAW/chisinau

Conversation

@RATCHAW

@RATCHAW RATCHAW commented Jul 12, 2026

Copy link
Copy Markdown
Owner

Ships Phase 3 of the roadmap: apps/playground, the hosted demo. Drag-drop a PDF/image, watch fields stream in, and hover a JSON field to highlight the exact region it came from on the page.

What's here

  • Server (src/server) — Hono on @hono/node-server:
    • GET /api/config — preset schemas + models resolved from whichever provider keys are set
    • POST /api/extract — multipart upload streamed back as SSE, driving core's streamExtract, then a terminal result or typed error
    • Model registry is injectable, so route tests run against a mock model with no API key
    • Preset invoice/receipt schemas are defined server-side (no arbitrary-code eval — respects the scope lock)
  • Client (src/client) — Vite + React 19: drag-drop with validation, pdfjs for PDFs (lazy-loaded) + images, bbox overlays from core's normalized 0–1 coords, live field reveal, per-field confidence bars, token usage + cost.

Verification

  • 150 tests pass across the monorepo (50 new for the playground)
  • Full build + typecheck + test green (dual client/server tsconfigs)
  • Production Node server smoke-tested (API + SPA + static assets); app browser-verified with no console errors

Still gated on a provider key

The demo GIF and first end-to-end live extraction need a real provider key — the same gate as the Phase 2 first live run — so that ROADMAP item stays unchecked rather than fabricated.

🤖 Generated with Claude Code

apps/playground: drag-drop a PDF/image, watch fields stream in, hover a
field to highlight its source region on the page.

- Hono API (@hono/node-server): GET /api/config, POST /api/extract streamed
  as SSE via core's streamExtract; model registry injectable so routes test
  against a mock model with no API key.
- Vite/React client: pdfjs for PDFs (lazy-loaded) + images, bbox overlays
  from core's normalized coords, live field reveal, per-field confidence,
  token usage and cost.
- Preset invoice/receipt schemas defined server-side; models resolved from
  whichever provider keys are present.
- 50 tests (SSE parser, geometry, field tree, upload, model/schema
  registries, full /api/extract SSE flow); dual client/server tsconfigs.

Docs (README, ROADMAP, CLAUDE.md, apps/playground/README) updated. The demo
GIF + first live extraction remain gated on a provider key.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@RATCHAW
RATCHAW merged commit 68cd251 into main Jul 12, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant