File size: 9,539 Bytes
cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 e60eab9 cc3f990 | 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 | <!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>
|