wildchat-aqa-viewer / index.html
timchen0618's picture
Force static rebuild: set index.html as root entry
13f9f60 verified
Raw
History Blame Contribute Delete
6.64 kB
<!DOCTYPE html>
<!-- WildChat-AQA static viewer -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WildChat-AQA Viewer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-shell">
<aside class="app-sidebar">
<header>
<h1>💬 WildChat-AQA</h1>
<p class="subtitle">Aggregative QA Viewer · <span id="totalCount"></span> questions<br>over WildChat chat logs</p>
</header>
<div class="controls">
<div class="search-box">
<div class="sidebar-label">Search</div>
<input type="text" id="searchInput" placeholder="Search question / hash…" />
<div style="display:flex;gap:6px;">
<button id="searchBtn" style="flex:1;">Search</button>
<button id="clearBtn" style="flex:1;">Clear</button>
</div>
</div>
<div class="filters">
<div class="sidebar-label">Filter</div>
<select id="targetFilter">
<option value="all">All target types</option>
<option value="label_level_1">Topic (level 1)</option>
<option value="label_level_2">Subtopic (level 2)</option>
<option value="user_name">User</option>
<option value="country">Country</option>
<option value="language">Language</option>
<option value="time_week">Time (week)</option>
<option value="keywords_aggregated">Keywords / entities</option>
</select>
<select id="keywordsFilter">
<option value="all">All keyword types</option>
</select>
<select id="condFilter">
<option value="all">Any condition</option>
<option value="across">Across all (no condition)</option>
<option value="user_name">Conditions on user</option>
<option value="country">Conditions on country</option>
<option value="language">Conditions on language</option>
<option value="label_level_1">Conditions on topic</option>
<option value="label_level_2">Conditions on subtopic</option>
<option value="time_week">Conditions on time</option>
<option value="keywords_aggregated">Conditions on keywords</option>
</select>
</div>
<div>
<div class="sidebar-label">Navigate</div>
<div class="nav-controls">
<button id="prevBtn" title="Previous (←)">← Prev</button>
<span id="counter">0 / 0</span>
<button id="nextBtn" title="Next (→)">Next →</button>
</div>
</div>
</div>
<footer class="sidebar-footer">
<a href="https://huggingface.co/datasets/wtzhang-nlp/wildchat_aqa" target="_blank">Dataset ↗</a>
<a href="https://github.com/yuntian-group/wildchat_aggregative_question_answering" target="_blank">GitHub ↗</a>
<a href="https://aclanthology.org/2025.emnlp-main.1667.pdf" target="_blank">Paper (EMNLP 2025) ↗</a>
</footer>
</aside>
<main class="app-main">
<div id="mainBody" class="app-main-body">
<div class="container">
<div id="loading">Loading dataset…</div>
<div id="card" class="card" style="display:none;">
<div class="card-header">
<div class="badge-row" id="badgeRow"></div>
<h2 id="questionText"></h2>
<div id="conditionBar" class="condition-bar"></div>
</div>
<div class="section" id="answerSection">
<h3 class="section-title" data-toggle="answer">
<span class="toggle-icon"></span> ✅ Answer <span class="count" id="answerHint"></span>
</h3>
<div id="answerContent" class="section-content">
<div id="answerBanner"></div>
<div id="optionsList"></div>
</div>
</div>
<div class="section" id="evidenceSection">
<h3 class="section-title" data-toggle="evidence">
<span class="toggle-icon"></span> 📊 Aggregation Evidence
<span class="count" id="evidenceHint"></span>
</h3>
<div id="evidenceContent" class="section-content">
<div id="evidenceList"></div>
</div>
</div>
<div class="section" id="supportSection">
<h3 class="section-title" data-toggle="support">
<span class="toggle-icon"></span> 💬 Supporting Conversations
<span class="count" id="supportHint"></span>
</h3>
<div id="supportContent" class="section-content">
<div id="supportNote" class="support-note"></div>
<div id="supportList"></div>
</div>
</div>
<div class="section" id="metaSection">
<h3 class="section-title collapsed" data-toggle="meta">
<span class="toggle-icon"></span> 🔎 PROBE Query &amp; Metadata
</h3>
<div id="metaContent" class="section-content" style="display:none;">
<div id="metaBody"></div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="viewer.js"></script>
</body>
</html>