| <!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 Feedback Trajectories</title> |
| <link rel="stylesheet" href="styles.css"> |
| </head> |
| <body> |
| <header class="app-header"> |
| <div> |
| <p class="eyebrow">Humanual training inspection</p> |
| <h1 id="page-title">Feedback trajectories</h1> |
| </div> |
| <div class="header-meta"> |
| <strong id="strategy-label">self_reflection_best</strong> |
| <span id="dataset-count"></span> |
| </div> |
| </header> |
|
|
| <nav class="view-tabs" aria-label="Browser views" role="tablist"> |
| <button class="tab active" data-view="trajectory" type="button" role="tab" aria-selected="true">Trajectory</button> |
| <button class="tab" data-view="overview" type="button" role="tab" aria-selected="false">Overview</button> |
| </nav> |
|
|
| <main> |
| <section id="trajectory-view" role="tabpanel"> |
| <div class="control-band"> |
| <label> |
| Checkpoint example |
| <select id="checkpoint-select"></select> |
| </label> |
| <label class="trajectory-picker"> |
| Rubric and judge path |
| <span class="select-with-actions"> |
| <button id="previous-trajectory" class="icon-button" type="button" title="Previous trajectory" aria-label="Previous trajectory"> |
| <i data-lucide="chevron-left" aria-hidden="true"></i> |
| </button> |
| <select id="trajectory-select"></select> |
| <button id="next-trajectory" class="icon-button" type="button" title="Next trajectory" aria-label="Next trajectory"> |
| <i data-lucide="chevron-right" aria-hidden="true"></i> |
| </button> |
| </span> |
| </label> |
| <label> |
| Outcome |
| <select id="outcome-select"> |
| <option value="all">All outcomes</option> |
| <option value="improved">Gold improved</option> |
| <option value="unchanged">Gold unchanged</option> |
| <option value="worsened">Gold worsened</option> |
| </select> |
| </label> |
| <p id="trajectory-position" class="control-status"></p> |
| </div> |
|
|
| <div id="loading" class="loading" role="status">Loading trajectory snapshot</div> |
| <div id="error" class="error-state" role="alert" hidden></div> |
| <div id="trajectory-content" hidden> |
| <section class="summary-section"> |
| <div class="section-heading"> |
| <div> |
| <p id="record-eyebrow" class="eyebrow"></p> |
| <h2 id="record-title">Trajectory</h2> |
| <p id="record-subtitle" class="section-subtitle"></p> |
| </div> |
| <span id="record-id" class="mono"></span> |
| </div> |
| <div id="trajectory-summary" class="metric-strip" aria-label="Trajectory reward summary"></div> |
| <p class="score-key"><strong>Proxy</strong> trainable rubric-judge score <span aria-hidden="true">|</span> <strong>Gold</strong> hidden external-judge reward against the human reference</p> |
| </section> |
|
|
| <section class="context-section"> |
| <div class="section-heading"> |
| <div> |
| <p class="eyebrow">Source material</p> |
| <h2>Target context and human response</h2> |
| </div> |
| </div> |
| <div class="context-layout"> |
| <div class="context-column"> |
| <dl id="context-meta" class="context-meta"></dl> |
| <div id="context-text" class="structured-text context-text clampable is-clamped"></div> |
| <button id="context-toggle" class="text-button" type="button" aria-expanded="false">Show full context</button> |
| </div> |
| <article class="reference-column"> |
| <div class="column-heading"> |
| <p class="eyebrow">Gold reference</p> |
| <h3>Actual human review</h3> |
| </div> |
| <div id="target-response" class="structured-text response-text"></div> |
| </article> |
| </div> |
| <details class="prompt-details"> |
| <summary><span>Persona, demonstrations, and candidate prompt</span><span id="candidate-prompt-size" class="trace-size"></span></summary> |
| <div id="candidate-messages" class="message-list"></div> |
| </details> |
| <details class="prompt-details"> |
| <summary><span>Full rubric-generation prompt</span><span id="rubric-prompt-size" class="trace-size"></span></summary> |
| <div id="rubric-messages" class="message-list"></div> |
| </details> |
| </section> |
|
|
| <section class="rubric-section"> |
| <div class="section-heading"> |
| <div> |
| <p id="rubric-eyebrow" class="eyebrow">Trainable judge rubric</p> |
| <h2>Generated rubric</h2> |
| </div> |
| <span id="rubric-status" class="status-badge"></span> |
| </div> |
| <div id="rubric-text" class="structured-text rubric-text clampable is-clamped"></div> |
| <button id="rubric-toggle" class="text-button" type="button" aria-expanded="false">Show full rubric</button> |
| <details id="parsed-rubric-details" class="prompt-details"> |
| <summary><span>Parsed rubric used for judging</span><span id="parsed-rubric-size" class="trace-size"></span></summary> |
| <div id="parsed-rubric" class="structured-text details-content"></div> |
| </details> |
| </section> |
|
|
| <section class="round-section"> |
| <div class="section-heading round-heading"> |
| <div> |
| <p class="eyebrow">Nine candidate states</p> |
| <h2>Feedback and revision</h2> |
| <p class="section-subtitle">Select a round to inspect its response, judge feedback, and resulting next response.</p> |
| </div> |
| <div class="round-actions"> |
| <button id="previous-round" class="icon-button" type="button" title="Previous round" aria-label="Previous round"> |
| <i data-lucide="chevron-left" aria-hidden="true"></i> |
| </button> |
| <button id="next-round" class="icon-button" type="button" title="Next round" aria-label="Next round"> |
| <i data-lucide="chevron-right" aria-hidden="true"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div id="round-track" class="round-track" role="listbox" aria-label="Trajectory rounds"></div> |
|
|
| <div class="feedback-band"> |
| <div class="feedback-heading"> |
| <div> |
| <p id="feedback-eyebrow" class="eyebrow">Judge feedback</p> |
| <h3 id="feedback-title">Instruction for the next revision</h3> |
| </div> |
| <div id="feedback-score-pills" class="score-pills"></div> |
| </div> |
| <blockquote id="feedback-text"></blockquote> |
| <p id="feedback-note" class="feedback-note"></p> |
| </div> |
|
|
| <div class="revision-comparison"> |
| <article class="response-pane current-pane"> |
| <div class="response-pane-heading"> |
| <div> |
| <p class="eyebrow">Evaluated response</p> |
| <h3 id="current-response-title">Round 0</h3> |
| </div> |
| <div id="current-badges" class="badge-row"></div> |
| </div> |
| <div id="current-scores" class="response-scores"></div> |
| <div id="current-response" class="structured-text response-text"></div> |
| </article> |
|
|
| <div class="revision-arrow" aria-hidden="true"> |
| <i data-lucide="arrow-right"></i> |
| </div> |
|
|
| <article class="response-pane next-pane"> |
| <div class="response-pane-heading"> |
| <div> |
| <p class="eyebrow">Resulting revision</p> |
| <h3 id="next-response-title">Round 1</h3> |
| </div> |
| <div id="next-badges" class="badge-row"></div> |
| </div> |
| <div id="next-scores" class="response-scores"></div> |
| <div id="next-response" class="structured-text response-text"></div> |
| </article> |
| </div> |
|
|
| <div class="history-section"> |
| <div class="section-heading compact-heading"> |
| <div><p class="eyebrow">Complete path</p><h3>Round history</h3></div> |
| </div> |
| <div class="history-scroll"> |
| <table class="history-table"> |
| <thead><tr><th>Round</th><th>Proxy</th><th>Gold</th><th>Gold change</th><th>Decision</th><th>Selection</th><th>Feedback preview</th></tr></thead> |
| <tbody id="history-body"></tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
| </div> |
| </section> |
|
|
| <section id="overview-view" role="tabpanel" hidden> |
| <div class="overview-heading"> |
| <p class="eyebrow">Logged checkpoint sample</p> |
| <h2>Aggregate trajectory behavior</h2> |
| <p class="section-subtitle">Descriptive summaries of the trajectories available in this browser, not the full training run.</p> |
| </div> |
| <div id="overview-summary" class="overview-summary"></div> |
| <section class="overview-band"> |
| <div class="section-heading"><div><p class="eyebrow">Selected vs initial</p><h3>Gold outcome distribution</h3></div></div> |
| <div id="outcome-chart" class="outcome-chart"></div> |
| </section> |
| <section class="overview-band alternate"> |
| <div class="section-heading"><div><p class="eyebrow">Rounds 0 through 8</p><h3>Mean score trajectory</h3></div></div> |
| <div id="round-chart" class="round-chart" aria-label="Mean proxy and gold score by round"></div> |
| <div class="chart-key"><span class="proxy-key">Proxy mean</span><span class="gold-key">Gold mean</span></div> |
| </section> |
| <section class="overview-band"> |
| <div class="section-heading"><div><p class="eyebrow">Checkpoint sample</p><h3>Available source examples</h3></div></div> |
| <div class="history-scroll"><table class="history-table checkpoint-table"><thead><tr><th>Step</th><th>Source</th><th>Paths</th><th>Initial gold</th><th>Selected gold</th><th>Oracle best</th></tr></thead><tbody id="checkpoint-body"></tbody></table></div> |
| </section> |
| </section> |
| </main> |
|
|
| <script src="https://unpkg.com/lucide@0.468.0/dist/umd/lucide.min.js"></script> |
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
