Spaces:

aditya0103
/

structured-data-extractor

Sleeping

structured-data-extractor / ui /README.md

Tasks 5-7: eval harness, FastAPI backend, Paper & Ink UI- src/eval/ — precision/recall/F1 harness with type-aware comparators,micro/macro F1, CSV + markdown reports, --model benchmark flag- src/api/ — FastAPI backend with /extract, /schemas, /health,request-ID middleware, typed error envelope, injectable extractor- ui/ — Vite + React + TS + Tailwind + Motion + React Three FiberPaper & Ink editorial UI with 3D paper hero, dark/light mode,confidence inkwell, wax-stamp metrics, kinetic typography- 95 passing tests (up from 54); UI is a separate npm workspace

557ab38 25 days ago

preview code

Raw

History Blame Contribute Delete

3.38 kB

Ledger UI

The Paper & Ink frontend for the structured-data-extraction API.

Stack

Vite + React + TypeScript — fast dev loop, small bundle.
Tailwind — utility layout only. All colors, typography, and design tokens live as CSS variables in src/styles/theme.css, so dark/light mode is a single attribute flip on <html data-theme="...">.
Motion (motion/react) — component-level animation.
React Three Fiber + drei + three — the 3D paper sheet in the hero.
Google Fonts — Instrument Serif (display), Geist (UI), JetBrains Mono (code). All free.

Run locally

# 1. Install
cd ui
npm install

# 2. Point at the API (in another terminal, from the repo root):
uvicorn src.api.main:app --reload

# 3. Start the dev server
npm run dev

# open http://localhost:5173

Vite proxies /api/* to http://localhost:8000, so no CORS needed in dev.

Configuration

VITE_API_BASE (optional) — override the API origin for prod builds. Defaults to /api.

Design tokens

Everything visual is in src/styles/theme.css:

--bg, --surface, --surface-2, --rule — surfaces + dividers
--ink, --ink-strong, --ink-soft, --ink-mute — text weights
--accent, --accent-hover, --accent-soft — coral
--sage, --mustard — confidence tiers + warnings

To try a color, edit the variable — both modes update simultaneously.

Project shape

ui/
├── index.html                  # font preload + theme priming (no-flash)
├── src/
│   ├── main.tsx                # ReactDOM render
│   ├── App.tsx                 # page composition
│   ├── styles/
│   │   ├── theme.css           # design tokens (light + dark)
│   │   └── globals.css         # base + grain overlay + focus/cursor
│   ├── components/
│   │   ├── TopNav.tsx          # logo + theme toggle
│   │   ├── ThemeToggle.tsx     # hand-drawn sun/moon
│   │   ├── CustomCursor.tsx    # spring-lag ink dot
│   │   ├── Hero.tsx            # kinetic headline + stats + 3D scene
│   │   ├── PaperScene.tsx      # R3F: floating paper w/ mouse parallax
│   │   ├── ExtractSection.tsx  # workbench (dropzone + results)
│   │   ├── Dropzone.tsx        # drop + browse + doc-type + samples
│   │   ├── ResultsPanel.tsx    # composes the below
│   │   ├── ConfidenceInkwell.tsx # confidence as an ink vessel
│   │   ├── MetricsStrip.tsx    # cost/latency/tokens/model
│   │   ├── JsonView.tsx        # syntax-highlighted JSON
│   │   ├── WarningsList.tsx    # model-flagged concerns
│   │   ├── HowItWorks.tsx      # three chapters
│   │   ├── Numbers.tsx         # magazine-style data page
│   │   └── Footer.tsx          # signature line
│   ├── hooks/
│   │   ├── useTheme.ts         # dark/light + localStorage
│   │   └── useExtract.ts       # upload lifecycle
│   ├── lib/
│   │   ├── api.ts              # thin fetch client + typed error envelope
│   │   └── samples.ts          # committed sample docs
│   └── types.ts                # mirrors src/schemas server-side
└── public/samples/             # sample_receipt.png, sample_invoice.pdf