cot-anc / app /frontend /index.html
BART-ender's picture
Deploy Thought Anchors
fda8fb3 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Thought Anchors</title>
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<main class="page">
<section class="auth-strip panel">
<div>
<p class="eyebrow">Public Hugging Face Space</p>
<p id="auth-summary" class="lede compact">Checking sign-in status.</p>
</div>
<div class="auth-actions">
<a id="login-link" class="pill-link" href="/oauth/huggingface/login">Sign in with Hugging Face</a>
<a id="logout-link" class="pill-link secondary" href="/oauth/huggingface/logout">Sign out</a>
</div>
</section>
<section class="hero">
<p class="eyebrow">Online Chain-of-Thought Analysis</p>
<h1>Reasoning traces with white-box sentence influence.</h1>
<p class="lede">
Submit a question, watch the answer appear first, then inspect the sentence-to-sentence
attribution matrix once analysis completes. Results can be exported as JSON or CSV.
</p>
</section>
<section class="panel composer">
<form id="question-form">
<label class="label" for="question">Question</label>
<textarea id="question" name="question" rows="5" placeholder="Explain why the derivative of x^2 is 2x" required></textarea>
<div class="controls">
<label>
<span>Max new tokens</span>
<input id="max-new-tokens" type="number" min="16" max="512" value="128" />
</label>
<label>
<span>Max trace tokens</span>
<input id="max-trace-tokens" type="number" min="64" max="1024" value="256" />
</label>
<label>
<span>Max sentences</span>
<input id="max-sentences" type="number" min="4" max="40" value="16" />
</label>
</div>
<button id="submit-button" type="submit">Start analysis</button>
</form>
</section>
<section class="status-row">
<div class="status-chip" id="status-chip">Idle</div>
<div class="status-detail" id="status-detail">Submit a question to create a session.</div>
</section>
<section class="grid">
<article class="panel jobs-panel">
<div class="panel-heading">
<h2>Your Sessions</h2>
<span class="muted">Ephemeral instance history</span>
</div>
<div id="recent-sessions" class="recent-sessions placeholder">Sign in to view your jobs.</div>
</article>
<article class="panel answer-panel">
<div class="panel-heading">
<h2>Answer</h2>
<span id="session-id" class="muted"></span>
</div>
<p id="answer-output" class="placeholder">No answer yet.</p>
</article>
<article class="panel trace-panel">
<div class="panel-heading">
<h2>Reasoning Trace</h2>
<span class="muted" id="trace-count"></span>
</div>
<ol id="sentence-list" class="sentence-list"></ol>
</article>
<article class="panel heatmap-panel">
<div class="panel-heading">
<h2>Sentence Influence Matrix</h2>
<span class="muted">Rows: targets, columns: sources</span>
</div>
<div id="heatmap" class="heatmap placeholder-box">Analysis pending.</div>
</article>
<article class="panel details-panel">
<div class="panel-heading">
<h2>Selection</h2>
</div>
<div id="selection-details" class="placeholder">Choose a sentence or heatmap cell.</div>
<div class="metrics" id="metrics"></div>
<div class="edges" id="top-edges"></div>
<div class="export-actions">
<a id="export-json" class="pill-link is-disabled" href="#" aria-disabled="true">Export JSON</a>
<a id="export-csv" class="pill-link secondary is-disabled" href="#" aria-disabled="true">Export CSV</a>
</div>
</article>
</section>
</main>
<script src="/static/app.js" defer></script>
</body>
</html>