aagparekh's picture
Add interactive frontend UI
b0c701c
Raw
History Blame Contribute Delete
2.82 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ContextCorruption-Env</title>
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<main class="shell">
<section class="hero">
<div>
<p class="eyebrow">OpenEnv Demo</p>
<h1>ContextCorruption-Env</h1>
<p class="lede">
Explore a multi-document QA episode where some retrieved evidence is corrupted.
Flag suspicious documents, submit an answer, and inspect the deterministic reward.
</p>
</div>
<div class="hero-card">
<div class="stat">
<span id="budget">12</span>
<label>Budget Left</label>
</div>
<div class="stat">
<span id="turn">0</span>
<label>Turns Used</label>
</div>
<div class="stat">
<span id="flags">0</span>
<label>Docs Flagged</label>
</div>
</div>
</section>
<section class="toolbar panel">
<button id="resetBtn" type="button">New Episode</button>
<button id="modelBtn" class="secondary" type="button">Ask Trained Model</button>
<a class="link-button" href="/docs" target="_blank" rel="noreferrer">API Docs</a>
<span id="status" class="status">Ready</span>
</section>
<section class="question panel">
<p class="section-label">Question</p>
<h2 id="questionText">Start a new episode to load a question.</h2>
</section>
<section class="workspace">
<div class="panel">
<div class="panel-heading">
<div>
<p class="section-label">Retrieved Documents</p>
<h2>Evidence Board</h2>
</div>
<p class="hint">Use read to spend budget; flag documents that disagree or look fabricated.</p>
</div>
<div id="documents" class="documents"></div>
</div>
<aside class="panel answer-panel">
<p class="section-label">Final Answer</p>
<label for="answerInput">Answer</label>
<textarea id="answerInput" rows="4" placeholder="Type the answer you believe is correct..."></textarea>
<label for="confidenceInput">Confidence: <span id="confidenceValue">0.80</span></label>
<input id="confidenceInput" type="range" min="0" max="1" step="0.05" value="0.8" />
<button id="submitBtn" type="button">Submit Answer</button>
<div id="result" class="result hidden"></div>
<div id="modelOutput" class="model-output hidden"></div>
</aside>
</section>
</main>
<script src="/static/app.js"></script>
</body>
</html>