herb-viewer / index.html
timchen0618's picture
Add HERB computation comparison split
8b27dd6 verified
Raw
History Blame Contribute Delete
9.77 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HERB Viewer</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="trajectory-ui.css">
<link rel="stylesheet" href="e2e-structures.css">
</head>
<body>
<div class="app-shell">
<aside class="app-sidebar">
<header>
<h1>🏢 HERB</h1>
<p class="subtitle">Deep Search over Heterogeneous Enterprise Data</p>
</header>
<div class="controls">
<div class="view-toggle-row">
<div class="sidebar-label">Tab</div>
<div class="view-toggle" id="viewToggle"></div>
<div class="scope-note">Run and Compare tabs: 815 answerable questions only</div>
</div>
<!-- Corpus controls -->
<div id="corpusControls">
<div class="search-box">
<div class="sidebar-label">Artifact</div>
<select id="corpusProduct"></select>
<select id="artifactType"></select>
<input type="text" id="corpusFilter" placeholder="Filter artifacts by title..." />
<select id="artifactSelect" size="1"></select>
</div>
<div>
<div class="sidebar-label">Navigate artifacts</div>
<div class="nav-controls">
<button id="corpusPrevBtn" title="Previous (←)">← Prev</button>
<span id="corpusCounter">0 / 0</span>
<button id="corpusNextBtn" title="Next (→)">Next →</button>
</div>
</div>
</div>
<!-- Eval controls -->
<div id="evalControls" style="display:none;">
<div class="search-box">
<div class="sidebar-label">Question</div>
<input type="text" id="evalSearch" placeholder="Question / answer / id..." />
<div style="display:flex;gap:6px;">
<button id="evalSearchBtn" style="flex:1;">Search</button>
<button id="evalClearBtn" style="flex:1;">Clear</button>
</div>
<select id="evalProduct"><option value="">All products</option></select>
<div class="filter-row">
<select id="kindFilter">
<option value="">Answerable + unanswerable</option>
<option value="answerable">Answerable</option>
<option value="unanswerable">Unanswerable</option>
</select>
<select id="qTypeFilter">
<option value="">All types</option>
<option value="person">person</option>
<option value="content">content</option>
<option value="company">company</option>
<option value="pr">pr</option>
<option value="url">url</option>
</select>
</div>
<select id="evalComputationFilter">
<option value="">All computation categories</option>
<option value="yes">Computation / comparison</option>
<option value="no">Other</option>
</select>
<select id="qSelect" size="1"></select>
</div>
<div>
<div class="sidebar-label">Navigate questions</div>
<div class="nav-controls">
<button id="evalPrevBtn" title="Previous (←)">← Prev</button>
<span id="evalCounter">0 / 0</span>
<button id="evalNextBtn" title="Next (→)">Next →</button>
</div>
</div>
</div>
<!-- Full-run controls -->
<div id="runControls" style="display:none;">
<div class="search-box">
<div class="sidebar-label">Answerable question (815)</div>
<input type="text" id="runSearch" placeholder="Question / answer / qid..." />
<div class="filter-row">
<select id="runProduct"><option value="">All products</option></select>
<select id="runType"><option value="">All types</option></select>
</div>
<select id="runStatus">
<option value="">All statuses</option>
<option value="correct">Correct</option>
<option value="partial">Partial credit</option>
<option value="incorrect">Answered, incorrect</option>
<option value="failure">Judge failure</option>
<option value="missing">Missing / unanswered</option>
</select>
<select id="runComputationFilter">
<option value="">All computation categories</option>
<option value="yes">Computation / comparison</option>
<option value="no">Other</option>
</select>
<select id="runQSelect" size="1"></select>
</div>
<div>
<div class="sidebar-label">Navigate run questions</div>
<div class="nav-controls">
<button id="runPrevBtn" title="Previous (←)">← Prev</button>
<span id="runCounter" class="nav-counter">0 / 0</span>
<button id="runNextBtn" title="Next (→)">Next →</button>
</div>
</div>
</div>
<!-- Compare controls -->
<div id="compareControls" style="display:none;">
<div class="search-box">
<div class="sidebar-label">Compare 6 runs (815 answerable)</div>
<input type="text" id="compareSearch" placeholder="Question / qid..." />
<div class="filter-row">
<select id="compareProduct"><option value="">All products</option></select>
<select id="compareType"><option value="">All types</option></select>
</div>
<select id="compareFilter">
<option value="">All questions</option>
<option value="disagreement">Disagreement</option>
<option value="missing">Any missing / unanswered</option>
<option value="combined-correct">Only E2E-combined correct</option>
</select>
<select id="compareComputationFilter">
<option value="">All computation categories</option>
<option value="yes">Computation / comparison</option>
<option value="no">Other</option>
</select>
<select id="compareQSelect" size="1"></select>
</div>
<div>
<div class="sidebar-label">Navigate comparisons</div>
<div class="nav-controls">
<button id="comparePrevBtn" title="Previous (←)">← Prev</button>
<span id="compareCounter" class="nav-counter">0 / 0</span>
<button id="compareNextBtn" title="Next (→)">Next →</button>
</div>
</div>
</div>
<div class="sidebar-footer" id="sidebarFooter"></div>
</div>
</aside>
<main class="app-main">
<div id="loading">Loading dataset…</div>
<!-- Corpus view -->
<section id="corpusView" style="display:none;">
<div class="doc-meta-card" id="artifactMeta"></div>
<div class="artifact-body" id="artifactBody"></div>
</section>
<!-- Eval view -->
<section id="evalView" style="display:none;">
<div class="card" id="evalCard"></div>
</section>
<!-- Full-run view -->
<section id="runView" style="display:none;">
<div id="runSummary"></div>
<div class="card run-card" id="runCard"></div>
</section>
<!-- Six-run comparison -->
<section id="compareView" style="display:none;">
<div id="compareSummary"></div>
<div class="card compare-question" id="compareQuestion"></div>
<div class="compare-grid" id="compareGrid"></div>
</section>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
<script src="trajectory-ui.js"></script>
<script src="viewer.js"></script>
<script src="e2e-structures.js"></script>
</body>
</html>