| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Dataset Visualiser</title> |
| <link rel="stylesheet" href="styles.css" /> |
| </head> |
| <body> |
| <header class="app-header"> |
| <h1>Dataset Visualiser</h1> |
| <p class="tagline">Browse and explore QA datasets</p> |
| </header> |
|
|
| <main class="app-main"> |
| <div class="app-shell"> |
| <aside class="sidebar"> |
| <section class="panel panel-controls"> |
| <header class="panel-heading"> |
| <h2>Dataset Picker</h2> |
| <p>Select a dataset or upload a JSONL file</p> |
| </header> |
|
|
| <div class="control-group"> |
| <label for="datasetSelect" class="control-label">Choose dataset</label> |
| <div class="control-row"> |
| <select id="datasetSelect" class="select"> |
| <option value="" disabled selected>Loading list…</option> |
| </select> |
| <button id="loadDatasetBtn" class="button" type="button">Load</button> |
| </div> |
| </div> |
|
|
| <div class="divider" role="separator"> |
| <span>or upload</span> |
| </div> |
|
|
| <div class="control-group"> |
| <label for="fileInput" class="control-label">Upload file</label> |
| <input id="fileInput" class="file-input" type="file" accept=".jsonl,.json" /> |
| </div> |
|
|
| <div id="currentSelection" class="current-selection hidden" aria-live="polite"> |
| <span class="current-selection-label">Currently viewing:</span> |
| <span id="currentSelectionLabel" class="current-selection-value">—</span> |
| </div> |
| </section> |
|
|
| <section id="statusBar" class="panel panel-status" aria-live="polite"> |
| <header class="status-header"> |
| <span id="datasetInfo" class="dataset-info">No dataset loaded.</span> |
| <div class="nav-buttons"> |
| <button id="prevBtn" class="button button-secondary" type="button" disabled>Prev</button> |
| <button id="nextBtn" class="button" type="button" disabled>Next</button> |
| </div> |
| </header> |
| <progress |
| id="progressBar" |
| class="progress" |
| value="0" |
| max="1" |
| aria-label="Dataset progress" |
| ></progress> |
| </section> |
|
|
| <section id="message" class="message hidden" role="status" aria-live="polite"></section> |
| </aside> |
|
|
| <section class="content"> |
| <article id="recordCard" class="record-card hidden" aria-live="polite"> |
| <header class="record-header"> |
| <div class="record-title-group"> |
| <p class="record-subtitle" id="recordSource">Question detail</p> |
| <h2 id="questionTitle" class="question-title"></h2> |
| </div> |
| <span id="validityBadge" class="badge">—</span> |
| </header> |
|
|
| <section class="meta-grid" role="list"> |
| <div class="meta-chip" role="listitem"> |
| <span class="meta-label">Finance Concept</span> |
| <span id="conceptField" class="meta-value">—</span> |
| </div> |
| <div class="meta-chip" role="listitem"> |
| <span class="meta-label">Question Type</span> |
| <span id="questionTypeField" class="meta-value">—</span> |
| </div> |
| <div class="meta-chip" role="listitem"> |
| <span class="meta-label">Difficulty</span> |
| <span id="difficultyField" class="meta-value">—</span> |
| </div> |
| </section> |
|
|
| <div class="record-grid"> |
| <section class="block block--wide"> |
| <h3>Question</h3> |
| <p id="questionField" class="text-block"></p> |
| </section> |
|
|
| <section class="block block--wide"> |
| <h3>Options</h3> |
| <ul id="optionsList" class="options-list"></ul> |
| </section> |
|
|
| <section class="block"> |
| <h3>Correct Answer</h3> |
| <p id="correctAnswerField" class="text-block"></p> |
| </section> |
|
|
| <section class="block"> |
| <h3>Explanation</h3> |
| <p id="explanationField" class="text-block"></p> |
| </section> |
|
|
| <section class="block"> |
| <h3>Validation</h3> |
| <dl class="definition-list"> |
| <dt>Validity</dt> |
| <dd id="validField"></dd> |
| <dt>Reasoning</dt> |
| <dd id="validationReasoningField" class="text-block"></dd> |
| </dl> |
| </section> |
|
|
| <section class="block"> |
| <h3>Context</h3> |
| <dl class="definition-list"> |
| <dt>Focus Area</dt> |
| <dd id="focusAreaField" class="text-block"></dd> |
| <dt>Relevant Passages</dt> |
| <dd id="relevantPassagesField" class="text-block"></dd> |
| </dl> |
| </section> |
| </div> |
| </article> |
| </section> |
| </div> |
| </main> |
|
|
| <footer class="app-footer"> |
| <p>Add new datasets to <code>datasets.json</code> to make them available in the picker</p> |
| </footer> |
|
|
| <script src="app.js" type="module"></script> |
| </body> |
| </html> |
|
|
