File size: 5,649 Bytes
cfff5b6 effe186 cfff5b6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 | <!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>
|