Spaces:
Sleeping
Sleeping
| import React, { useEffect, useMemo, useRef, useState } from "react"; | |
| import { createRoot } from "react-dom/client"; | |
| import { Activity, BarChart3, CheckCircle2, ChevronRight, Clock3, Download, FileChartColumn, FileText, Layers3, LoaderCircle, RefreshCcw, Search, ShieldCheck, Sparkles, Upload, X, AlertTriangle } from "lucide-react"; | |
| import "./styles.css"; | |
| const API = ""; | |
| const MODELS = ["xgboost", "logistic_regression", "random_forest", "linear_svm", "sentence_embedding_lr"]; | |
| async function jsonRequest(url, options) { | |
| const response = await fetch(`${API}${url}`, options); | |
| const body = await response.json().catch(() => ({})); | |
| if (!response.ok) throw new Error(body.detail || body.error || `Request failed (${response.status})`); | |
| return body; | |
| } | |
| function App() { | |
| const [view, setView] = useState("analysis"); | |
| const [inputMode, setInputMode] = useState("upload"); | |
| const [samples, setSamples] = useState([]); | |
| const [sampleId, setSampleId] = useState(""); | |
| const [file, setFile] = useState(null); | |
| const [result, setResult] = useState(null); | |
| const [loading, setLoading] = useState(false); | |
| const [error, setError] = useState(""); | |
| const [batchFiles, setBatchFiles] = useState([]); | |
| const [batchResults, setBatchResults] = useState([]); | |
| const [analyticsModel, setAnalyticsModel] = useState("xgboost"); | |
| const [analytics, setAnalytics] = useState(null); | |
| const fileInput = useRef(null); | |
| useEffect(() => { jsonRequest("/api/samples").then(setSamples).catch((e) => setError(e.message)); }, []); | |
| useEffect(() => { if (view === "analytics") jsonRequest(`/api/analytics?model=${analyticsModel}`).then(setAnalytics).catch((e) => setError(e.message)); }, [view, analyticsModel]); | |
| const activeSample = samples.find((item) => item.id === sampleId); | |
| const previewUrl = file ? URL.createObjectURL(file) : sampleId ? `/api/samples/${sampleId}/preview` : ""; | |
| async function analyze() { | |
| setError(""); setResult(null); setLoading(true); | |
| try { | |
| if (inputMode === "upload") { | |
| if (!file) throw new Error("Choose a PNG, JPG, JPEG, or PDF document first."); | |
| const data = new FormData(); data.append("file", file); | |
| setResult(await jsonRequest("/api/process", { method: "POST", body: data })); | |
| } else { | |
| if (!sampleId) throw new Error("Select a sample document first."); | |
| setResult(await jsonRequest(`/api/process-sample/${sampleId}`, { method: "POST" })); | |
| } | |
| } catch (e) { setError(e.message); } finally { setLoading(false); } | |
| } | |
| async function runBatch() { | |
| if (!batchFiles.length) return setError("Choose at least one document for batch processing."); | |
| setError(""); setLoading(true); | |
| try { const data = new FormData(); batchFiles.forEach((item) => data.append("files", item)); setBatchResults(await jsonRequest("/api/process-batch", { method: "POST", body: data })); } | |
| catch (e) { setError(e.message); } finally { setLoading(false); } | |
| } | |
| function resetAnalysis() { setFile(null); setSampleId(""); setResult(null); setError(""); } | |
| return <div className="shell"> | |
| <header className="topbar"> | |
| <div className="brand"><div className="brand-mark"><ShieldCheck size={20}/></div><div><strong>Document_intelligence</strong><span>Document intelligence studio</span></div></div> | |
| <div className="topbar-status"><span className="live-dot"/> Pipeline online <span className="divider"/> CPU inference</div> | |
| </header> | |
| <div className="workspace"> | |
| <aside className="sidebar"> | |
| <div className="eyebrow">Workspace</div> | |
| <nav> | |
| <NavButton icon={<FileText size={17}/>} label="Document analysis" active={view === "analysis"} onClick={() => setView("analysis")}/> | |
| <NavButton icon={<Layers3 size={17}/>} label="Batch processing" active={view === "batch"} onClick={() => setView("batch")}/> | |
| <NavButton icon={<BarChart3 size={17}/>} label="Model analytics" active={view === "analytics"} onClick={() => setView("analytics")}/> | |
| </nav> | |
| <div className="sidebar-bottom"><div className="mini-label">System status</div><div className="system-line"><span className="live-dot"/> API ready</div><div className="system-line muted"><Activity size={14}/> OCR + classification</div></div> | |
| </aside> | |
| <main className="main"> | |
| {error && <div className="alert error"><AlertTriangle size={17}/><span>{error}</span><button onClick={() => setError("")} aria-label="Dismiss"><X size={16}/></button></div>} | |
| {view === "analysis" && <AnalysisView {...{inputMode, setInputMode, samples, sampleId, setSampleId, activeSample, file, setFile, previewUrl, result, loading, analyze, resetAnalysis, fileInput}}/>} | |
| {view === "batch" && <BatchView {...{batchFiles, setBatchFiles, batchResults, runBatch, loading}}/>} | |
| {view === "analytics" && <AnalyticsView {...{analyticsModel, setAnalyticsModel, analytics}}/>} | |
| </main> | |
| </div> | |
| </div>; | |
| } | |
| function NavButton({ icon, label, active, onClick }) { return <button className={`nav-button ${active ? "active" : ""}`} onClick={onClick}>{icon}<span>{label}</span>{active && <ChevronRight size={15}/>}</button>; } | |
| function AnalysisView({ inputMode, setInputMode, samples, sampleId, setSampleId, activeSample, file, setFile, previewUrl, result, loading, analyze, resetAnalysis, fileInput }) { | |
| return <> | |
| <PageHeading kicker="Document analysis" title="Classify, extract, decide" description="Turn an uploaded document into structured fields, confidence scores, and a clear routing decision." action={<button className="ghost-button" onClick={resetAnalysis}><RefreshCcw size={16}/> Reset</button>}/> | |
| <section className="control-strip"> | |
| <div className="segmented"><button className={inputMode === "upload" ? "selected" : ""} onClick={() => setInputMode("upload")}><Upload size={15}/> Upload document</button><button className={inputMode === "sample" ? "selected" : ""} onClick={() => setInputMode("sample")}><Sparkles size={15}/> Use sample</button></div> | |
| {inputMode === "sample" && <select value={sampleId} onChange={(e) => setSampleId(e.target.value)}><option value="">Select a sample document</option>{samples.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)}</select>} | |
| </section> | |
| <div className="analysis-grid"> | |
| <section className="panel document-panel"> | |
| <div className="panel-heading"><div><span className="panel-kicker">Input document</span><h2>{file?.name || activeSample?.label || "No document selected"}</h2></div>{(file || activeSample) && <span className="ready-badge"><CheckCircle2 size={14}/> Ready</span>}</div> | |
| {inputMode === "upload" && <div className="dropzone" onClick={() => fileInput.current?.click()} onDragOver={(e) => e.preventDefault()} onDrop={(e) => { e.preventDefault(); setFile(e.dataTransfer.files[0]); }}><input ref={fileInput} type="file" accept=".png,.jpg,.jpeg,.pdf" onChange={(e) => setFile(e.target.files[0])}/><Upload size={24}/><strong>{file ? "Replace document" : "Choose a document"}</strong><span>PNG, JPG, JPEG, or PDF · maximum 10 MB</span></div>} | |
| {inputMode === "sample" && <div className="sample-note"><Sparkles size={18}/><div><strong>{activeSample?.label || "Choose a sample above"}</strong><span>{activeSample?.description || "Use a curated document to check the pipeline without uploading a file."}</span></div></div>} | |
| {previewUrl && (file?.type?.startsWith("image/") || activeSample) ? <div className="preview-wrap"><img src={previewUrl} alt="Document preview"/></div> : previewUrl ? <div className="pdf-preview"><FileText size={32}/><span>PDF document selected</span></div> : <div className="empty-preview"><FileChartColumn size={28}/><span>Preview appears here after selecting a document</span></div>} | |
| <button className="primary-button analyze-button" disabled={loading} onClick={analyze}>{loading ? <><LoaderCircle className="spin" size={17}/> Analyzing document...</> : <><Search size={17}/> Analyze document</>}</button> | |
| </section> | |
| <ResultsPanel result={result} loading={loading}/> | |
| </div> | |
| </>; | |
| } | |
| function ResultsPanel({ result, loading }) { | |
| if (loading) return <section className="panel result-panel loading-panel"><LoaderCircle className="spin big" size={28}/><h2>Processing document</h2><p>OCR, layout classification, and field extraction are running.</p><div className="progress-line"><span/></div></section>; | |
| if (!result) return <section className="panel result-panel empty-results"><div className="empty-icon"><Activity size={22}/></div><span className="panel-kicker">Analysis output</span><h2>Ready for processing</h2><p>Select a document and run the pipeline to see classification, extracted fields, and routing confidence.</p></section>; | |
| const cls = result.doc_class.replaceAll("_", " "); | |
| return <section className="panel result-panel"><div className="panel-heading"><div><span className="panel-kicker">Analysis output</span><h2>Document decision</h2></div><span className={`class-badge ${result.needs_review ? "review" : "accepted"}`}>{result.needs_review ? "Review" : "Accepted"}</span></div><div className="classification"><div><span>Predicted class</span><strong>{cls}</strong></div><div className="confidence"><span>Class confidence</span><strong>{(result.class_confidence * 100).toFixed(1)}%</strong><div className="meter"><i style={{width: `${result.class_confidence * 100}%`}}/></div></div></div><div className="stat-row"><Stat icon={<FileText size={16}/>} label="OCR words" value={result.ocr_token_count}/><Stat icon={<Clock3 size={16}/>} label="Latency" value={`${result.processing_time_ms} ms`}/></div><div className="section-title">Structured fields</div><div className="field-list">{Object.entries(result.fields || {}).map(([key, value]) => <div className="field-row" key={key}><span>{key.replaceAll("_", " ")}</span><strong>{value ?? "Not detected"}</strong><em>{result.field_confidences?.[key] ? `${(result.field_confidences[key] * 100).toFixed(0)}%` : "—"}</em></div>)}</div><div className={`route-note ${result.needs_review ? "warn" : "good"}`}><ShieldCheck size={17}/><span>{result.routing_reason || (result.needs_review ? "Manual review recommended" : "Confidence thresholds satisfied")}</span></div><div className="download-row"><button className="secondary-button" onClick={() => downloadJson(result)}><Download size={15}/> JSON</button><button className="secondary-button" onClick={() => downloadCsv(result)}><Download size={15}/> CSV</button></div></section>; | |
| } | |
| function Stat({ icon, label, value }) { return <div className="stat"><span>{icon}{label}</span><strong>{value}</strong></div>; } | |
| function BatchView({ batchFiles, setBatchFiles, batchResults, runBatch, loading }) { const input = useRef(null); return <><PageHeading kicker="Batch processing" title="Process a document queue" description="Run the same classification and extraction pipeline across multiple documents."/><section className="panel batch-panel"><div className="panel-heading"><div><span className="panel-kicker">Batch input</span><h2>{batchFiles.length ? `${batchFiles.length} documents selected` : "Select documents"}</h2></div><button className="secondary-button" onClick={() => input.current?.click()}><Upload size={15}/> Add files</button><input ref={input} hidden type="file" multiple accept=".png,.jpg,.jpeg,.pdf" onChange={(e) => setBatchFiles([...e.target.files])}/></div><div className="batch-list">{batchFiles.length ? batchFiles.map((file) => <div className="batch-item" key={file.name}><FileText size={17}/><span>{file.name}</span><small>{(file.size / 1024).toFixed(0)} KB</small></div>) : <div className="empty-preview compact"><Layers3 size={26}/><span>Your selected documents will appear here.</span></div>}</div><button className="primary-button" disabled={loading || !batchFiles.length} onClick={runBatch}>{loading ? <><LoaderCircle className="spin" size={17}/> Running batch...</> : <><Activity size={17}/> Execute batch analysis</>}</button></section>{batchResults.length > 0 && <section className="panel table-panel"><div className="panel-heading"><div><span className="panel-kicker">Batch output</span><h2>Processing summary</h2></div></div><div className="table-scroll"><table><thead><tr><th>Document</th><th>Class</th><th>Confidence</th><th>Decision</th><th>Words</th><th>Latency</th></tr></thead><tbody>{batchResults.map((item) => <tr key={item.file_name}><td>{item.file_name}</td><td>{item.error ? <span className="error-text">Error</span> : item.doc_class}</td><td>{item.confidence ? `${(item.confidence * 100).toFixed(1)}%` : "—"}</td><td>{item.error ? item.error : item.needs_review ? "Review" : "Accepted"}</td><td>{item.words ?? "—"}</td><td>{item.latency_ms ? `${item.latency_ms} ms` : "—"}</td></tr>)}</tbody></table></div></section>}</>; } | |
| function AnalyticsView({ analyticsModel, setAnalyticsModel, analytics }) { return <><PageHeading kicker="Model analytics" title="Benchmark the decision engine" description="Inspect champion model metrics and confusion matrices from the training artifacts."/><section className="analytics-toolbar"><label>Model<select value={analyticsModel} onChange={(e) => setAnalyticsModel(e.target.value)}>{MODELS.map((model) => <option key={model}>{model}</option>)}</select></label></section><div className="analytics-grid"><section className="panel"><div className="panel-heading"><div><span className="panel-kicker">Confusion matrix</span><h2>{analyticsModel.replaceAll("_", " ")}</h2></div></div>{analytics?.matrix_url ? <img className="matrix" src={analytics.matrix_url} alt="Normalized confusion matrix"/> : <div className="empty-preview compact">Matrix artifact not found.</div>}</section><section className="panel"><div className="panel-heading"><div><span className="panel-kicker">Performance report</span><h2>Classification metrics</h2></div></div><MetricsTable data={analytics?.metrics}/></section></div></>; } | |
| function MetricsTable({ data }) { if (!data) return <div className="empty-preview compact">Metrics are not available.</div>; return <div className="table-scroll"><table><thead><tr><th>Class</th><th>Precision</th><th>Recall</th><th>F1</th><th>Support</th></tr></thead><tbody>{Object.entries(data).map(([key, value]) => typeof value === "object" ? <tr key={key}><td>{key}</td><td>{fmt(value.precision)}</td><td>{fmt(value.recall)}</td><td>{fmt(value["f1-score"])}</td><td>{value.support ?? "—"}</td></tr> : null)}</tbody></table></div>; } | |
| function fmt(value) { return typeof value === "number" ? value.toFixed(3) : "—"; } | |
| function PageHeading({ kicker, title, description, action }) { return <div className="page-heading"><div><span className="eyebrow">{kicker}</span><h1>{title}</h1><p>{description}</p></div>{action}</div>; } | |
| function downloadJson(result) { downloadBlob(JSON.stringify(result, null, 2), `${result.doc_id}_results.json`, "application/json"); } | |
| function downloadCsv(result) { const rows = [["Field Name", "Extracted Value", "Confidence"], ...Object.entries(result.fields || {}).map(([key, value]) => [key, value ?? "", result.field_confidences?.[key] ?? ""])]; downloadBlob(rows.map((row) => row.map((cell) => `"${String(cell).replaceAll('"', '""')}"`).join(",")).join("\n"), `${result.doc_id}_fields.csv`, "text/csv"); } | |
| function downloadBlob(content, name, type) { const url = URL.createObjectURL(new Blob([content], {type})); const anchor = document.createElement("a"); anchor.href = url; anchor.download = name; anchor.click(); URL.revokeObjectURL(url); } | |
| createRoot(document.getElementById("root")).render(<App/>); | |