| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content"> |
| <meta name="theme-color" content="#f5f3ed"> |
| <meta name="description" content="Give OpenSysOne a context, a question and possible answers. Explore the probabilities it assigns to each choice."> |
| <title>Model playground · OpenSysOne</title> |
| <link rel="stylesheet" href="/playground.css"> |
| <script src="/playground.js" defer></script> |
| </head> |
| <body> |
| <a class="skip-link" href="#context">Skip to the playground</a> |
| <div class="page-shell"> |
| <header class="site-header"> |
| <div class="brand-group"> |
| <a class="wordmark" href="/" aria-label="OpenSysOne playground home"> |
| <svg class="brand-mark" viewBox="0 0 28 28" fill="none" aria-hidden="true"><path d="M5 7h18M5 14h12M5 21h6" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg> |
| <span>OpenSysOne</span> |
| </a> |
| <h1 id="page-title">Playground</h1> |
| </div> |
| <div class="connection" id="connection" data-state="connecting" role="status"><span class="status-dot" aria-hidden="true"></span><span id="connection-text">Connecting</span></div> |
| </header> |
| <main aria-labelledby="page-title"> |
| <div class="model-toolbar"> |
| <div class="model-picker"> |
| <label class="field-label" for="model">Model</label> |
| <div class="select-wrap"> |
| <select id="model" name="model" disabled aria-describedby="model-description model-limit"><option value="">Loading available models…</option></select> |
| <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m6 8 4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg> |
| </div> |
| </div> |
| <div class="model-info"> |
| <p class="model-description" id="model-description">Finding available checkpoints.</p> |
| <div class="model-details"><span class="calibration-badge" id="calibration-badge" hidden></span><span id="model-limit" class="model-limit"></span></div> |
| </div> |
| <button class="text-button retry-button" id="retry-models" type="button" hidden>Retry connection</button> |
| </div> |
| <form id="decision-form" class="workspace-form" novalidate> |
| <div class="workspace" id="workspace" data-active-view="context"> |
| <div class="workspace-tabs" id="workspace-tabs" role="tablist" aria-label="Playground workspace" hidden> |
| <button type="button" id="tab-context" role="tab" aria-controls="view-context" aria-selected="true" tabindex="0">Context</button> |
| <button type="button" id="tab-choices" role="tab" aria-controls="view-choices" aria-selected="false" tabindex="-1">Choices</button> |
| <button type="button" id="tab-results" role="tab" aria-controls="results-panel" aria-selected="false" tabindex="-1">Results</button> |
| </div> |
| <section class="editor-panel" aria-labelledby="editor-title"> |
| <h2 id="editor-title" class="sr-only">Your decision</h2> |
| <div class="editor-views"> |
| <section class="input-view context-view" id="view-context" aria-labelledby="context-label"> |
| <div class="label-row"> |
| <label class="field-label" id="context-label" for="context">Context</label> |
| <span class="field-hint" id="context-count">0 characters</span> |
| <button type="button" class="text-button next-choices" id="next-choices">Choices <span aria-hidden="true">→</span></button> |
| </div> |
| <div class="examples" aria-label="Try an invented example"> |
| <span class="example-label">Examples</span> |
| <div class="example-buttons"> |
| <button type="button" class="example-button" data-example="0" aria-pressed="true">Weekend plans</button> |
| <button type="button" class="example-button" data-example="1" aria-pressed="false">Parcel handoff</button> |
| <button type="button" class="example-button" data-example="2" aria-pressed="false">Studio booking</button> |
| </div> |
| </div> |
| <textarea id="context" name="context" rows="7" placeholder="Add the information the model should use…" aria-describedby="context-hint context-count" required>Ari and Noor are planning Saturday afternoon. Rain is forecast from noon onward. They want an indoor activity, enjoy art, and have a small budget. The city gallery has a free exhibition open until 6 pm. The hiking trail has no shelter, and the rooftop restaurant is expensive.</textarea> |
| <p class="field-hint" id="context-hint">Use your own words, or adapt an invented example.</p> |
| </section> |
| <section class="input-view choices-view" id="view-choices" aria-labelledby="choices-title"> |
| <h2 class="sr-only" id="choices-title">Question and possible answers</h2> |
| <div class="field-group question-group"> |
| <label class="field-label" for="question">Question</label> |
| <textarea class="question-input" id="question" name="question" rows="2" placeholder="What would you like the model to decide?" required>Which plan best fits their preferences?</textarea> |
| </div> |
| <div class="field-group options-group"> |
| <div class="label-row"><label class="field-label" for="options">Possible answers</label><span class="field-hint" id="option-count">3 options</span></div> |
| <textarea class="options-input" id="options" name="options" rows="4" placeholder="First answer Second answer Another possibility" aria-describedby="options-hint option-count" required>Visit the free art gallery |
| Take a long hike |
| Book a rooftop lunch</textarea> |
| <p class="field-hint" id="options-hint">One per line. At least two distinct answers.</p> |
| </div> |
| </section> |
| </div> |
| </section> |
| <section class="results-panel" id="results-panel" aria-labelledby="results-title" aria-busy="false"> |
| <div class="panel-heading"><h2 id="results-title" tabindex="-1">Probabilities</h2><span class="results-count" id="results-count" hidden></span></div> |
| <div class="empty-state" id="empty-state"> |
| <div class="empty-mark" aria-hidden="true"><span></span><span></span><span></span></div> |
| <h3>Room for every possibility.</h3><p>Run the example, or make it your own.<br>Your results will appear here.</p> |
| </div> |
| <div class="loading-state" id="loading-state" hidden> |
| <div class="loading-orbit" aria-hidden="true"></div><h3 id="loading-title">Weighing the options</h3><p id="loading-detail">The model is reading your context.</p><span class="elapsed-timer" id="elapsed-timer" aria-hidden="true">0.0 s</span> |
| </div> |
| <div class="results-content" id="results-content" hidden> |
| <p class="stale-notice" id="stale-notice" role="status" hidden>Inputs changed. Run again to update these results.</p> |
| <div class="results-scroll" id="results-scroll" tabindex="0" role="region" aria-label="Ranked answers"> |
| <p class="result-question" id="result-question"></p> |
| <ol class="probability-list" id="probability-list" aria-label="Answers ranked by probability"></ol> |
| <p class="probability-note">Probabilities are relative to the answers you provide.</p> |
| </div> |
| <div class="result-footer"> |
| <div class="result-metadata"><span class="result-model" id="result-model"></span><span id="result-timing"></span></div> |
| <button class="copy-button" id="copy-results" type="button"><svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><rect x="6" y="6" width="8" height="9" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M4 12H3.5A1.5 1.5 0 0 1 2 10.5v-7A1.5 1.5 0 0 1 3.5 2h6A1.5 1.5 0 0 1 11 3.5V4" stroke="currentColor" stroke-width="1.3"/></svg><span id="copy-label">Copy JSON</span></button> |
| </div> |
| </div> |
| <p class="sr-only" id="result-announcement" role="status" aria-live="polite" aria-atomic="true"></p> |
| </section> |
| <div class="action-dock"> |
| <div class="error-message" id="error-message" role="alert" tabindex="0" hidden></div> |
| <div class="form-actions"> |
| <button class="primary-button" id="submit" type="submit" disabled><span class="button-spinner" aria-hidden="true"></span><span id="submit-label">Get probabilities</span><svg class="submit-arrow" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button> |
| <span class="keyboard-hint" id="keyboard-hint"><kbd>Ctrl</kbd> + <kbd>Enter</kbd></span> |
| <button type="button" class="text-button" id="clear">Clear</button> |
| <button type="button" class="text-button" id="reset" aria-label="Reset example" title="Reset example">Reset</button> |
| </div> |
| </div> |
| </div> |
| </form> |
| </main> |
| </div> |
| <noscript><p class="noscript-message">Enable JavaScript to load models and get probabilities.</p></noscript> |
| </body> |
| </html> |
|
|
