Paste text

40+ words recommended for stable signals.

Endpoint: {endpointLabel} {wc} words

setText(e.target.value)} placeholder="Paste text here (40+ words recommended)…" /> </div> <div className="editorFooter"> <div className="leftFoot"> <span className={`badge ${badge}`}> Score: {scorePct}% </span> <span className="badge neutral">{mode.toUpperCase()}</span> </div> <div className="rightFoot"> <button className="btn small" onClick={() => setText("")} disabled={busy || !text.trim()}> Clear </button> <button className="btn small" onClick={openFilePicker} disabled={busy}> Upload </button> </div> </div> {error && (<div className="alert bad"> <div className="alertTitle">Error</div> <div className="alertBody">{error}</div> </div>)} <div className="card resultsCard"> <div className="resultTop"> <div className="donut" aria-label="Score donut"> <svg width="92" height="92" viewBox="0 0 92 92"> <circle className="donutTrack" cx="46" cy="46" r="36" /> <circle className="donutValue" cx="46" cy="46" r="36" strokeDasharray={donutDash.dash} /> </svg> <div className="donutCenter"> <div className="donutPct">{scorePct}%</div> <div className="donutLabel">risk</div> </div> </div> <div className="resultSummary"> <div> <div className="resultScoreLabel">Probabilistic signal score</div> <div className="resultScoreValue">{scorePct}%</div> </div> <div className="scoreBarWrap"> <div className="scoreBar"> <div className="scoreFill" style={{width: `${scorePct}%`}} /> </div> <div className="scoreTicks"> <span>likely human</span> <span>mixed</span> <span>likely ai</span> </div> </div> </div> </div> <div className="grid3"> <div className="metric"> <div className="metricLabel">Mode</div> <div className="metricValue">{mode}</div> <div className="metricHint">Switch scan types in the sidebar.</div> </div> <div className="metric"> <div className="metricLabel">Words</div> <div className="metricValue">{wc}</div> <div className="metricHint">More text improves stability.</div> </div> <div className="metric"> <div className="metricLabel">Calibration</div> <div className="metricValue">{calibration}</div> <div className="metricHint">Small bias only (not accuracy).</div> </div> <div className="metric wide"> <div className="metricLabel">Signals</div> <div className="metricValue"> {Object.keys(meta).length ? Object.entries(meta).map(([k,v]) => `${k}: ${v}`).join(" • ") : "—"} </div> <div className="metricHint">Some signals only appear in AI mode.</div> </div> </div> <div className="notes"> <div className="notesTitle">Notes</div> {notes?.length ? (<ul> {notes.map((n,idx) => (<li key={idx}>{n}</li>))} </ul>) : (<div className="smallMuted">Run a scan to see guidance.</div>)} </div> </div> <div className="card previewCard"> <div className="cardHeader"> <div> <div className="cardTitle">Preview heatmap</div> <div className="cardHint">Sentence-level highlighting (heuristic).</div> </div> </div> <div className="previewBody" dangerouslySetInnerHTML={{__html: highlightedHtml || '<span class="smallMuted">No preview yet.</span>'}} /> </div> </section> <aside className="card sideCard"> <div className="sideHeader"> <div className="sideTitle">Scans</div> <div className="sideSub">Pick a scan type,then Analyze.</div> </div> <div className="sideTabs"> <button className={`tabBtn ${mode === "ai" ? "active" : ""}`} onClick={() => setMode("ai")} > Detector <span className="tabPill">API</span> </button> <button className={`tabBtn ${mode !== "ai" ? "active" : ""}`} onClick={() => setMode("readability")} > Heuristics <span className="tabPill">Local</span> </button> </div> <div className="scanList"> {scanModes.map((s) => (<button key={s.key} className={`scanItem ${mode === s.key ? "active" : ""}`} onClick={() => setMode(s.key)} > <div className="scanIcon">{s.title.slice(0,1)}</div> <div className="scanText"> <div className="scanName">{s.title}</div> <div className="scanDesc">{s.desc}</div> </div> <div className={`scanTag ${s.tag === "ok" ? "ok" : s.tag === "off" ? "off" : ""}`}> {s.key === "ai" ? "on" : "ok"} </div> </button>))} </div> <div className="historyTools"> <button className="btn small" onClick={() => setHistory([])} disabled={!history.length}> Clear history </button> </div> <div className="historyList"> {!history.length ? (<div className="empty"> <div className="emptyTitle">No runs yet</div> <div className="smallMuted">Analyze something and your results will show up here.</div> </div>) : (history.map((h) => (<button key={h.id} className={`historyItem ${h.label}`} onClick={() => loadHistory(h)} > <div className="historyTop"> <div className="historyScore">{pct(h.score)}%</div> <div className="historyMeta"> <span>{new Date(h.createdAt).toLocaleTimeString()}</span> <span>•</span> <span>{h.mode}</span> <span>•</span> <span>{h.meta.words}w</span> </div> </div> <div className="historySnippet">{h.snippet}</div> <div className="historyBottom"> <span className="miniPill">{h.meta.endpoint}</span> </div> </button>)))} </div> <div className="sideFooter"> <div className="smallMuted"> Tip: if you see a blank page after deploy,open DevTools → Console. A broken import (like <code>mammoth/mammoth.browser</code>) will stop React from rendering. </div> </div> </aside> </main> <div className="footer"> <div className="smallMuted"> This starter uses lightweight statistical signals to stay Edge-compatible. If you want stronger detection,add a second-pass method later. </div> </div> </div>)}