| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="color-scheme" content="light"> |
| <title>Humanual Amazon Review Browser</title> |
| <link rel="stylesheet" href="styles.css"> |
| </head> |
| <body> |
| <header class="app-header"> |
| <div> |
| <p class="eyebrow">Humanual-Amazon v1</p> |
| <h1>Review browser</h1> |
| </div> |
| <p id="snapshot-meta" class="snapshot-meta">Loading snapshot...</p> |
| </header> |
|
|
| <div id="notice" class="notice" role="status"></div> |
|
|
| <main> |
| <section class="filter-band" aria-label="Example filters"> |
| <label> |
| Source view |
| <select id="split-filter"></select> |
| </label> |
| <label> |
| Category |
| <select id="category-filter"></select> |
| </label> |
| <label> |
| Target rating |
| <select id="rating-filter"></select> |
| </label> |
| <label> |
| Review length |
| <select id="length-filter"></select> |
| </label> |
| <button id="reset-filters" type="button">Reset</button> |
| </section> |
|
|
| <section class="case-band"> |
| <label class="case-select-label"> |
| User and target |
| <select id="case-select"></select> |
| </label> |
| <dl id="case-metrics" class="metrics"></dl> |
| </section> |
|
|
| <nav class="tabs" aria-label="Example views" role="tablist"> |
| <button class="tab active" data-tab="target" role="tab" aria-selected="true">Target review</button> |
| <button class="tab" data-tab="history" role="tab" aria-selected="false">User history</button> |
| <button class="tab" data-tab="candidates" role="tab" aria-selected="false">Candidate samples</button> |
| <button class="tab" data-tab="pool" role="tab" aria-selected="false">Pool coverage</button> |
| </nav> |
|
|
| <section id="target-panel" class="panel active" role="tabpanel"> |
| <div class="section-heading"> |
| <div> |
| <p class="eyebrow">Product</p> |
| <h2 id="target-title"></h2> |
| </div> |
| <p id="target-rating" class="rating"></p> |
| </div> |
| <blockquote id="target-review" class="review-text"></blockquote> |
| <div class="product-grid"> |
| <div> |
| <h3>Description</h3> |
| <p id="target-description"></p> |
| </div> |
| <div> |
| <h3>Features</h3> |
| <ul id="target-features"></ul> |
| </div> |
| <div> |
| <h3>Details</h3> |
| <dl id="target-details" class="detail-list"></dl> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="history-panel" class="panel" role="tabpanel" hidden> |
| <div class="section-heading"> |
| <div> |
| <p class="eyebrow">Chronological sample</p> |
| <h2>User demonstrations</h2> |
| </div> |
| <p id="history-count" class="section-stat"></p> |
| </div> |
| <div class="table-scroll"> |
| <table> |
| <thead> |
| <tr><th>Date</th><th>Stars</th><th>Length</th><th>Product</th><th>Review</th></tr> |
| </thead> |
| <tbody id="history-body"></tbody> |
| </table> |
| </div> |
| </section> |
|
|
| <section id="candidates-panel" class="panel" role="tabpanel" hidden> |
| <div class="section-heading"> |
| <div> |
| <p class="eyebrow">Stratified sample</p> |
| <h2>Generated candidates</h2> |
| </div> |
| <p class="section-stat">Embedded scores measure target overlap</p> |
| </div> |
| <div class="candidate-layout"> |
| <label> |
| Candidate |
| <select id="candidate-select" size="7"></select> |
| </label> |
| <div class="candidate-detail"> |
| <div class="candidate-header"> |
| <div> |
| <p id="candidate-recipe" class="eyebrow"></p> |
| <h3 id="candidate-family"></h3> |
| </div> |
| <strong id="candidate-score" class="score"></strong> |
| </div> |
| <p id="candidate-response" class="review-text generated"></p> |
| <dl id="candidate-metadata" class="detail-list horizontal"></dl> |
| <h4>Judge key points</h4> |
| <p id="judge-key-points"></p> |
| <h4>Judge rationale</h4> |
| <p id="judge-thought"></p> |
| </div> |
| </div> |
| <div class="table-scroll candidate-table-wrap"> |
| <table> |
| <thead> |
| <tr><th>Family</th><th>Selection</th><th>Model</th><th>Recipe</th><th>Score</th><th>Views</th><th>Preview</th></tr> |
| </thead> |
| <tbody id="candidate-body"></tbody> |
| </table> |
| </div> |
| </section> |
|
|
| <section id="pool-panel" class="panel" role="tabpanel" hidden> |
| <div class="section-heading"> |
| <div> |
| <p class="eyebrow">All 229 slots</p> |
| <h2>Candidate pool coverage</h2> |
| </div> |
| <p id="pool-status" class="section-stat"></p> |
| </div> |
| <div class="table-scroll"> |
| <table> |
| <thead> |
| <tr><th>Family</th><th>Expected</th><th>Valid</th><th>Errors</th><th>Min</th><th>Median</th><th>Mean</th><th>Max</th></tr> |
| </thead> |
| <tbody id="pool-body"></tbody> |
| </table> |
| </div> |
| </section> |
|
|
| <section id="empty-state" class="empty-state" hidden> |
| <h2>No matching examples</h2> |
| <p>Reset the filters or select a broader combination.</p> |
| </section> |
| </main> |
|
|
| <script src="app.js" defer></script> |
| </body> |
| </html> |
|
|
