Spaces:
Paused
Paused
| import { validateRequest, validateServingResult } from './contract.js?v=studio-3'; | |
| import {validateRegistry, studioExamplesForModel, exampleMode, createModelMenu, modelReadiness, modelPresentation, groupModels, orderedModels, preferredModel, statusName} from './model-menu.js?v=studio-3'; | |
| import {queuedPrediction, requestJSON} from './queue-client.js?v=studio-3'; | |
| const $ = (id) => document.getElementById(id); | |
| const esc = (value) => String(value).replace(/[&<>"']/g, (x) => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[x])); | |
| const clone = (value) => structuredClone(value); | |
| const display = (value) => value == null ? '' : typeof value === 'string' ? value : JSON.stringify(value, null, 2); | |
| const pct = (p) => (p * 100).toFixed(1) + '%'; | |
| const TYPE_LABEL = {choice:'Choice', noul:'Noul', score:'Score'}; | |
| const CHEVRON = '<svg class="chevron" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg>'; | |
| let allExamples = [], examples = [], activeExample, draft, revision = 0, status = null; | |
| let controller = null, autoTimer, toastTimer, fleetTimer, lastResult = null, userChoseModel = false; | |
| let models = [], selectedModel = null, modelEpoch = 0; | |
| let contextMode='routing', statusFlight = null, statusPoll = null, statusTransportError = false; | |
| let initRetryDelay = 1500, initWarningShown = false; | |
| const modeWorkspaces=new Map(); | |
| const modelStatuses = new Map(), modelWorkspaces = new Map(), menuStatusVersions = new Map(); | |
| const modelInfo = () => models.find(m => m.id === selectedModel); | |
| const modelURL = (url, model = selectedModel) => url + '?model=' + encodeURIComponent(model); | |
| const nameOf = (model = modelInfo()) => model ? statusName(model, models) : 'the model'; | |
| // Decision 2.0 answers every question about one input in a single forward pass. | |
| const onePass = (model = modelInfo()) => Number.parseFloat(modelPresentation(model || {}).generation) >= 2; | |
| const isMac = /Mac|iPhone|iPad/.test(navigator.platform); | |
| $('run-shortcut').textContent = isMac ? '⌘ ↵' : 'Ctrl ↵'; | |
| const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); | |
| $('motion-toggle').addEventListener('click', () => { | |
| const paused = document.body.classList.toggle('motion-paused'); | |
| $('motion-toggle').setAttribute('aria-pressed', String(paused)); | |
| $('motion-toggle').setAttribute('aria-label', paused ? 'Resume animations' : 'Pause animations'); | |
| $('motion-toggle').title = paused ? 'Resume animations' : 'Pause animations'; | |
| $('motion-toggle').firstElementChild.textContent = paused ? '▷' : 'Ⅱ'; | |
| }); | |
| const chooseModel = id => {userChoseModel = true; switchModel(id).catch(e => toast(e.message));}; | |
| const modelMenu = createModelMenu({getModels:()=>models, getSelected:()=>selectedModel, getStatus:id=>modelStatuses.get(id), onSelect:chooseModel, onOpen:refreshMenuStatuses, reducedMotion}); | |
| function toast(text) { $('toast').textContent = text; $('toast').hidden = false; clearTimeout(toastTimer); toastTimer = setTimeout(() => $('toast').hidden = true, 4800); } | |
| // Status regions are live: rewrite them only when the message changes. | |
| function setRunStatus(text, kind = '') { const el = $('run-status'), className = 'run-status ' + kind; if (el.className === className && el.textContent === text) return; el.className = className; el.replaceChildren(); const led = document.createElement('span'); led.className = 'status-led'; el.append(led, document.createTextNode(text)); } | |
| function setConnection(text, state) { const el = $('connection'), className = 'connection' + (state ? ' ' + state : ''); if (el.className === className && el.textContent === text) return; el.className = className; el.innerHTML = `<i></i><span>${esc(text)}</span>`; } | |
| const ACTIVITY = {switching:'Connecting',submitting:'Sending',offline:'Unavailable',ready:'Ready',running:'Reading',loading:'Loading',checking:'Checking',reconnecting:'Reconnecting',queued:'Queued',complete:'Ready',busy:'Busy',error:'Error'}; | |
| function setModelActivity(phase) { | |
| $('model-card').dataset.state = phase; $('studio-card').dataset.state = phase; | |
| $('model-card').setAttribute('aria-busy',String(['switching','submitting','queued','running','loading','checking','reconnecting'].includes(phase))); | |
| $('model-state').textContent = ACTIVITY[phase] || 'Unavailable'; | |
| } | |
| function updatePass() { | |
| document.querySelector('.pass-node').textContent = !onePass() ? 'GPU batch' : contextMode === 'batch' ? '1 pass each' : '1 pass'; | |
| } | |
| function updateRunButton() { | |
| const q=draft?.questions?.length||0,n=contextMode==='batch'?(draft?.contexts?.length||0):1,total=n*q,label=`Run ${total} decision${total===1?'':'s'}`; | |
| const batchUnavailable=contextMode==='batch'&&status?.context_batch!==true; | |
| $('run').disabled=statusTransportError||!status?.configured||!status?.loaded||status?.phase==='unavailable'||!!controller||status?.running||['running','loading'].includes(status?.phase)||batchUnavailable; | |
| $('run').title=batchUnavailable?'Batch contexts is not ready on this model connection.':'Run the complete current request'; | |
| $('run-label').textContent=controller?`Working on ${total}…`:label; | |
| $('scenario-summary').textContent=contextMode==='batch'?`${n} context${n===1?'':'s'} × ${q} question${q===1?'':'s'} = ${total} decisions`:contextMode==='routing'?`1 prompt · ${q} routing decision${q===1?'':'s'}`:`1 context · ${q} decision${q===1?'':'s'}`; | |
| $('context-limit').textContent=batchUnavailable?'Connecting batch mode…':'GPU batches · Complete inputs'; | |
| } | |
| function checkStatus() { | |
| const epoch = modelEpoch, model = selectedModel; | |
| if (statusFlight?.epoch === epoch && statusFlight.model === model) return statusFlight.promise; | |
| const promise = checkStatusOnce(epoch, model).finally(() => { | |
| if (statusFlight?.promise === promise) statusFlight = null; | |
| }); | |
| statusFlight = {epoch, model, promise}; | |
| return promise; | |
| } | |
| async function checkStatusOnce(epoch, model) { | |
| try { | |
| const res = await fetch(modelURL('/api/status', model), {cache:'no-store'}); | |
| if (!res.ok) throw Error(); const current = await res.json(); | |
| if(epoch !== modelEpoch) return; | |
| if(current.model !== model || current.manifest_sha256 !== modelInfo()?.manifest_sha256) throw Error('Model identity mismatch'); | |
| statusTransportError = false; | |
| status = current; modelStatuses.set(model,current); modelMenu.updateStatuses(); updateFleet(); | |
| const readiness=modelReadiness(status), unavailable=readiness.state==='offline', connecting=readiness.state==='loading', name=nameOf(); | |
| const label = unavailable ? `${name} unavailable` : connecting ? `Connecting to ${name}…` : status.running || status.phase === 'running' ? `${name} is working` : `${name} ready${status.queued ? ' · '+status.queued+' queued' : ''}`; | |
| setConnection(label, status.loaded ? 'connected' : unavailable ? 'offline' : 'pending'); | |
| $('offline-title').textContent = `${name} is unavailable right now.`; | |
| $('offline-note').hidden = !unavailable; updateRunButton(); | |
| if((!controller&&!lastResult)||['switching','loading','checking','reconnecting'].includes($('model-card').dataset.state)) setRunStatus(unavailable ? `${name} unavailable · editing only` : connecting ? `Connecting to ${name}…` : status.running || status.phase === 'running' ? `${name} is working` : `${name} ready · run your questions`); | |
| if (!controller) setModelActivity(unavailable ? 'offline' : connecting ? 'loading' : status.running || status.phase === 'running' ? 'busy' : lastResult && !$('results').classList.contains('stale') ? 'complete' : 'ready'); | |
| else if (status.backend !== 'pull_queue' && ['running','loading'].includes(status.phase)) setModelActivity(status.phase); | |
| } catch (error) { | |
| if(epoch !== modelEpoch) return; | |
| statusTransportError = true; | |
| const identityChanged = error?.message === 'Model identity mismatch'; | |
| modelStatuses.set(model, status ? {...status, loaded:false, phase:'loading'} : null); | |
| modelMenu.updateStatuses(); updateFleet(); | |
| setConnection(identityChanged ? 'Model configuration changed · reload' : 'Connection interrupted · retrying', 'pending'); | |
| $('offline-note').hidden = true; | |
| updateRunButton(); | |
| if (!controller) setModelActivity(identityChanged ? 'error' : 'reconnecting'); | |
| } | |
| } | |
| async function refreshMenuStatuses() { | |
| // Read-only readiness discovery. Selecting a model never creates an inference job. | |
| await Promise.allSettled(models.map(async info=>{ | |
| const version=(menuStatusVersions.get(info.id)||0)+1;menuStatusVersions.set(info.id,version); | |
| try { | |
| const current=await requestJSON(modelURL('/api/status',info.id),{cache:'no-store'}); | |
| if(current.model!==info.id||current.manifest_sha256!==info.manifest_sha256)throw Error('Model identity mismatch'); | |
| if(menuStatusVersions.get(info.id)===version)modelStatuses.set(info.id,current); | |
| } catch {if(menuStatusVersions.get(info.id)===version){const previous=modelStatuses.get(info.id);modelStatuses.set(info.id,previous?{...previous,loaded:false,phase:'loading'}:null);}} | |
| modelMenu.updateStatuses(); | |
| })); | |
| updateFleet(); | |
| } | |
| function scheduleFleetRefresh() { | |
| clearTimeout(fleetTimer); | |
| fleetTimer = setTimeout(async () => { if (!document.hidden) await refreshMenuStatuses(); scheduleFleetRefresh(); }, 60000); | |
| } | |
| async function loadModels() { | |
| const result=validateRegistry(await requestJSON('/v1/models',{cache:'no-store'})); | |
| models=result.models.map(model=>({...model,id:model.wire_id,repo_id:model.id})); | |
| const serverDefault=result.default?models.find(model=>model.repo_id===result.default)?.id:undefined; | |
| const kept=models.find(model=>model.id===selectedModel); | |
| selectedModel=(kept||preferredModel(models,serverDefault)||models[0]).id; | |
| modelMenu.identity(modelInfo(),{enabled:false}); | |
| updatePass();renderFleet(); | |
| } | |
| // Before the first interaction, open on a ready model of the newest generation | |
| // rather than an unavailable default. Requests never fall back to another model. | |
| async function settleInitialModel() { | |
| if(userChoseModel||modelReadiness(modelStatuses.get(selectedModel)).state!=='offline')return; | |
| const ready=orderedModels(models).filter(m=>modelReadiness(modelStatuses.get(m.id)).state==='ready'); | |
| const choice=ready.find(m=>!modelPresentation(m).reasoning)||ready[0]; | |
| if(choice&&choice.id!==selectedModel)await switchModel(choice.id); | |
| } | |
| function saveWorkspace() { | |
| if(draft){const saved={draft:clone(draft),text:$('state-input').value,contextMode,exampleId:activeExample.id};modelWorkspaces.set(selectedModel,saved);modeWorkspaces.set(selectedModel+'/'+contextMode,saved);} | |
| } | |
| function showScenario(example) { $('scenario-title').textContent = example.title; $('scenario-category').textContent = example.category; $('scenario-title').title = example.description || ''; } | |
| function applyWorkspace(model,previous) { | |
| const catalog=studioExamplesForModel(model,allExamples); | |
| examples=catalog.examples; | |
| const saved=modelWorkspaces.get(model.id); | |
| if(saved&&examples.some(e=>e.id===saved.exampleId)) { | |
| activeExample=examples.find(e=>e.id===saved.exampleId);draft=clone(saved.draft); | |
| showScenario(activeExample); | |
| contextMode=saved.contextMode||exampleMode(activeExample);$('state-input').value=saved.text;renderContextMode();renderContexts();renderExamples();renderQuestions();updateCount();dirty(); | |
| } else { | |
| const previousExample=examples.find(e=>e.id===previous?.exampleId); | |
| const sameMode=examples.find(e=>exampleMode(e)===(previous?.contextMode||'routing')); | |
| loadExample(previousExample||sameMode||catalog.defaultExample); | |
| } | |
| } | |
| async function switchModel(model) { | |
| if(model===selectedModel||!models.some(m=>m.id===model))return; | |
| saveWorkspace();const previous=modelWorkspaces.get(selectedModel); | |
| ++modelEpoch;++revision; | |
| clearTimeout(autoTimer); | |
| if(controller){controller.abort();controller=null;} | |
| selectedModel=model;status=null;statusTransportError=false;lastResult=null; | |
| $('results').classList.remove('stale'); | |
| $('result-count').textContent='—';$('results-title').textContent='Decisions';$('timing').hidden=true;$('timing').replaceChildren(); | |
| updatePass(); | |
| applyWorkspace(modelInfo(),previous); | |
| modelMenu.identity(modelInfo(),{animate:true}); | |
| setConnection('Connecting to model','pending'); | |
| setRunStatus(`Connecting to ${nameOf()}…`);setModelActivity('switching');updateRunButton();renderFleet(); | |
| await checkStatus(); // Actual selected identity and readiness, without a cosmetic delay. | |
| } | |
| function renderExamples() { | |
| $('examples').innerHTML = examples.map((e,i) => ({e,i})).filter(({e})=>exampleMode(e)===contextMode).map(({e,i}) => `<button type="button" class="example-button${e.id===activeExample?.id?' selected':''}" data-example="${i}" aria-pressed="${e.id===activeExample?.id}" title="${esc(e.description||e.category||'')}">${esc(e.title)}</button>`).join(''); | |
| const list=$('examples'),chip=list.querySelector('.selected'); | |
| if(chip&&(chip.offsetLeft<list.scrollLeft||chip.offsetLeft+chip.offsetWidth>list.scrollLeft+list.clientWidth))list.scrollLeft=chip.offsetLeft-24; | |
| } | |
| function loadExample(example) { | |
| activeExample = example; | |
| contextMode=exampleMode(example); | |
| const states=contextMode==='batch'?example.states:[{id:'context_1',state:example.state}]; | |
| draft = {contexts:states.map(s=>({id:s.id,text:display(s.state),expanded:false})), questions: Object.entries(clone(example.questions)).map(([id,q]) => ({id,...q,expanded:false}))}; | |
| showScenario(example); | |
| $('state-input').value = draft.contexts[0].text; | |
| renderContextMode();renderContexts();renderExamples(); renderQuestions(); updateCount(); dirty(); | |
| } | |
| function updateCount() { $('state-count').textContent = `${$('state-input').value.length.toLocaleString('en')} characters`; } | |
| function renderContextMode(){ | |
| for(const mode of ['routing','single','batch'])$('context-mode-'+mode).setAttribute('aria-pressed',String(contextMode===mode)); | |
| $('single-context-editor').hidden=contextMode==='batch';$('batch-context-editor').hidden=contextMode!=='batch'; | |
| $('context-heading').textContent=contextMode==='batch'?'Contexts':contextMode==='routing'?'User prompt':'Context';$('context-count').hidden=contextMode!=='batch'; | |
| $('questions-heading').textContent=contextMode==='batch'?'Shared questions':contextMode==='routing'?'Routing decisions':'Questions';$('shared-note').hidden=contextMode!=='batch'; | |
| $('mode-description').textContent=contextMode==='batch'?'Many contexts, one set of questions.':contextMode==='routing'?'Route each request to the right model.':'One context, many decisions.'; | |
| $('workbench').dataset.mode=contextMode; | |
| updatePass(); | |
| } | |
| function renderContexts(){ | |
| $('context-count').textContent=draft.contexts.length;$('add-context').disabled=false; | |
| $('context-list').innerHTML=draft.contexts.map((c,i)=>`<article class="context-item${c.expanded?' is-open':''}"><div class="context-row"><button type="button" class="context-open" data-open-context="${i}" aria-expanded="${c.expanded}" aria-controls="context-editor-${i}" aria-label="${c.expanded?'Collapse':'Edit'} context ${esc(c.id)}">${CHEVRON}<span class="context-row-id">${esc(c.id)}</span><span class="context-preview">${esc(c.text.replace(/\s+/g,' '))||'Write a context…'}</span></button><button type="button" class="icon-button" data-delete-context="${i}" aria-label="Remove context ${esc(c.id)}" ${draft.contexts.length<=1?'disabled':''}>×</button></div><div class="context-editor" id="context-editor-${i}" ${c.expanded?'':'hidden'}><div class="context-editor-head"><label class="inline-field">ID <input data-context-id="${i}" value="${esc(c.id)}" aria-label="Context ${i+1} ID" spellcheck="false"></label></div><textarea data-context-text="${i}" class="context-text" aria-label="Context ${i+1} content" spellcheck="false">${esc(c.text)}</textarea></div></article>`).join(''); | |
| updateRunButton(); | |
| } | |
| function switchContextMode(mode){ | |
| if(!['routing','single','batch'].includes(mode))return; | |
| if(mode===contextMode)return;saveWorkspace();const saved=modeWorkspaces.get(selectedModel+'/'+mode); | |
| if(saved){draft=clone(saved.draft);activeExample=examples.find(e=>e.id===saved.exampleId)||activeExample;contextMode=mode;$('state-input').value=saved.text;showScenario(activeExample);renderContextMode();renderContexts();renderExamples();renderQuestions();updateCount();dirty();} | |
| else {const example=examples.find(e=>exampleMode(e)===mode);if(example)loadExample(example);else {contextMode=mode;if(mode!=='batch'){draft.contexts=draft.contexts.slice(0,1);$('state-input').value=draft.contexts[0].text;}renderContextMode();renderContexts();renderExamples();renderQuestions();dirty();}} | |
| } | |
| function choicesHTML(q, index) { | |
| if (q.type === 'noul') return `<p class="field-hint">Returns the probability of yes, from 0 to 1.</p><details class="noul-details" ${q.criteria?'open':''}><summary>Define what yes and no mean</summary>${['true','false'].map(k=>`<label class="criterion"><span class="criterion-tag">${k==='true'?'Yes':'No'}</span><input data-index="${index}" data-polarity="${k}" value="${esc(q.criteria?.[k] ? display(q.criteria[k]) : '')}" placeholder="${k==='true'?'Optional yes criterion':'Optional no criterion'}" aria-label="${k==='true'?'Yes':'No'} criterion"></label>`).join('')}</details>`; | |
| const entries = q.type === 'choice' ? Object.entries(q.criteria) : q.criteria.map((text,i) => [String(i),text]); | |
| return `<div class="criteria-list ${q.type}-criteria">${entries.map(([name,text],i)=>`<div class="criterion"><span class="criterion-tag">${q.type==='score'?i:String.fromCharCode(65+i%26)}</span>${q.type==='choice'?`<input class="option-name" data-index="${index}" data-option="${i}" data-field="name" value="${esc(name)}" aria-label="Option ${i+1} name">`:''}<input data-index="${index}" data-option="${i}" data-field="description" value="${esc(text===null?'':display(text))}" placeholder="${q.type==='choice'?'Description (optional)':'Describe this level'}" aria-label="${q.type==='choice'?'Option':'Level'} ${i+1} description"><button type="button" class="icon-button" data-remove-option="${i}" data-index="${index}" aria-label="Remove ${q.type==='score'?'level':'option'} ${i+1}" ${entries.length<=2?'disabled':''}>×</button></div>`).join('')}</div><div class="criteria-foot"><span>${q.type==='score'?'Ordered from lowest to highest':'Names and descriptions reach the model'}</span><button type="button" class="button-quiet small" data-add-option="${index}" ${entries.length>=(q.type==='score'?10:255)?'disabled':''}>${q.type==='score'?'Add level':'Add option'}</button></div>`; | |
| } | |
| function renderQuestions() { | |
| $('question-count').textContent = draft.questions.length; | |
| updateRunButton(); | |
| $('questions').innerHTML = draft.questions.map((q,i)=>`<article class="question-card${q.expanded?' is-open':''}"> | |
| <div class="question-head"><button type="button" class="question-toggle" data-toggle-question="${i}" aria-expanded="${!!q.expanded}" aria-controls="question-body-${i}" aria-label="${q.expanded?'Collapse':'Expand'} ${esc(q.id)}">${CHEVRON}<span class="type-tag ${q.type}">${TYPE_LABEL[q.type]}</span><span class="question-summary"><span class="question-summary-id">${esc(q.id)}</span><span class="question-summary-text">${esc(display(q.instructions))}</span></span></button><button type="button" class="icon-button" data-remove="${i}" aria-label="Remove question ${i+1}" ${draft.questions.length<=1?'disabled':''}>×</button></div> | |
| <div class="question-body" id="question-body-${i}" ${q.expanded?'':'hidden'}> | |
| <label class="field"><span>Question ID</span><input class="question-id" data-index="${i}" data-question-id value="${esc(q.id)}" spellcheck="false"></label> | |
| <label class="field"><span>Instructions</span><textarea class="question-text" data-index="${i}" data-instructions rows="2" aria-label="Question ${i+1} instructions" placeholder="Required instructions">${esc(display(q.instructions))}</textarea></label>${choicesHTML(q,i)} | |
| </div></article>`).join(''); | |
| } | |
| function dirty() { | |
| revision++; | |
| if (controller) { controller.abort(); controller = null; setRunStatus('Inputs changed · previous request detached'); checkStatus(); } | |
| if (lastResult) { $('results').classList.add('stale'); setRunStatus('Previous run · inputs have changed'); } | |
| else renderPending(); | |
| setModelActivity(!status?.configured ? 'offline' : !status.loaded || status.phase==='loading' ? 'loading' : status.running || status.phase==='running' ? 'busy' : 'ready'); | |
| clearTimeout(autoTimer); | |
| if ($('auto-run').checked && status?.configured) autoTimer = setTimeout(autoRun, 1000); | |
| updateRunButton(); | |
| } | |
| async function autoRun() { await checkStatus(); if (['running','loading'].includes(status?.phase)) { autoTimer=setTimeout(autoRun,1000); return; } run(); } | |
| function requestBody() { | |
| const questions = Object.create(null); | |
| for (const q of draft.questions) { | |
| if (!q.id.trim() || Object.hasOwn(questions, q.id)) throw Error('Every question needs a unique, nonempty ID.'); | |
| if (q.invalid) throw Error(q.invalid); | |
| questions[q.id] = {type:q.type}; | |
| if(q.type==='noul'||(q.instructions!==null&&q.instructions!==undefined&&q.instructions!=='')) questions[q.id].instructions=q.instructions; | |
| if (q.type!=='noul' || q.criteria && Object.keys(q.criteria).length) questions[q.id].criteria = clone(q.criteria); | |
| } | |
| const input=contextMode==='batch'?{states:draft.contexts.map(c=>({id:c.id,state:c.text}))}:{state:$('state-input').value}; | |
| return validateRequest({model:selectedModel,...input,questions}, selectedModel); | |
| } | |
| // Result rendering. `a` is null while a decision is pending, so the layout of | |
| // every card is visible before the run and settles in place afterwards. | |
| const shortLevel = (level) => { const text = display(level); return text.includes(':') ? text.split(':', 1)[0] : text; }; | |
| function choiceBody(q, a) { | |
| const ids = Object.keys(q.criteria || {}); | |
| const order = a ? [...ids].sort((x, y) => a.probabilities[y] - a.probabilities[x]) : ids; | |
| const head = a ? `<span class="decision-value">${esc(a.choice)}</span><span class="decision-meta">${pct(a.probabilities[a.choice])}</span>` : `<span class="decision-value is-empty">—</span><span class="decision-meta">${ids.length} options</span>`; | |
| const rows = order.map((id, i) => { | |
| const p = a ? a.probabilities[id] : 0, top = a && id === a.choice, description = display(q.criteria[id]); | |
| return `<div class="dist-row${top ? ' is-top' : ''}" style="--p:${p};--r:${i}"><span class="label" title="${esc(description || id)}">${esc(id)}</span><span class="pct">${a ? pct(p) : '—'}</span><span class="track"><span class="fill"></span></span></div>`; | |
| }).join(''); | |
| return `<div class="decision-answer">${head}</div><div class="dist">${rows}</div>`; | |
| } | |
| function noulBody(q, a) { | |
| const p = a ? a.noul : 0, yes = a && a.noul >= 0.5; | |
| const head = a ? `<span class="decision-value">${yes ? 'Yes' : 'No'}</span><span class="decision-meta">P(yes) ${pct(p)}</span>` : `<span class="decision-value is-empty">—</span><span class="decision-meta">Yes or no</span>`; | |
| return `<div class="decision-answer">${head}</div><div class="gauge${a ? (yes ? ' is-yes' : ' is-no') : ''}" style="--p:${p}" role="img" aria-label="${a ? `Probability of yes ${pct(p)}` : 'Pending'}"><span class="gauge-fill"></span><span class="gauge-mid"></span></div><div class="gauge-scale" aria-hidden="true"><span>No</span><span>50%</span><span>Yes</span></div>`; | |
| } | |
| function scoreBody(q, a) { | |
| const levels = q.criteria || [], n = levels.length; | |
| const probs = levels.map((_, i) => a ? a.probabilities[String(i)] : 0); | |
| const top = a ? probs.indexOf(Math.max(...probs)) : -1; | |
| const head = a ? `<span class="decision-value">${a.score.toFixed(2)}<em> / ${n - 1}</em></span><span class="decision-meta">${esc(shortLevel(levels[top]))} · ${pct(probs[top])}</span>` : `<span class="decision-value is-empty">—</span><span class="decision-meta">${n} levels</span>`; | |
| const cols = levels.map((level, i) => `<div class="level${i === top ? ' is-top' : ''}" style="--p:${probs[i]};--r:${i}" title="${esc(`${i} · ${display(level)}`)}"><span class="level-pct">${a ? pct(probs[i]) : '—'}</span><span class="level-bar"><span></span></span><span class="level-name"><b>${i}</b> ${esc(shortLevel(level))}</span></div>`).join(''); | |
| const marker = a ? `<span class="level-marker" style="--x:${((a.score + 0.5) / n * 100).toFixed(2)}%" title="Expected level ${a.score.toFixed(2)}"></span>` : ''; | |
| return `<div class="decision-answer">${head}</div><div class="levels${n > 5 ? ' is-dense' : ''}" style="--n:${n}">${cols}${marker}</div>`; | |
| } | |
| function decisionCard(id, q, a, i = 0) { | |
| const body = q.type === 'noul' ? noulBody(q, a) : q.type === 'score' ? scoreBody(q, a) : choiceBody(q, a); | |
| return `<article class="decision ${q.type}-result${a ? '' : ' is-pending'}" style="--i:${i}" aria-label="${esc(id)} ${a ? 'decision' : '(pending)'}"><div class="decision-head"><span class="decision-id" title="${esc(display(q.instructions))}">${esc(id)}</span><span class="decision-kind">${TYPE_LABEL[q.type]}</span></div><p class="decision-question">${esc(display(q.instructions))}</p>${body}</article>`; | |
| } | |
| function renderPending() { | |
| if (!draft) return; | |
| const n = contextMode === 'batch' ? draft.contexts.length : 1; | |
| const cards = draft.questions.map((q, i) => decisionCard(q.id || `question_${i + 1}`, q, null, i)).join(''); | |
| const lede = n > 1 ? `Each of the ${n} contexts receives these ${draft.questions.length} questions.` : ''; | |
| $('results').innerHTML = `${lede ? `<p class="results-lede">${lede}</p>` : ''}<div class="decisions is-pending${draft.questions.length === 1 ? ' single-decision' : ''}">${cards}</div>`; | |
| } | |
| function compactDecision(a,q){ | |
| if(a.type==='noul'){const yes=a.noul>=.5;return `<span class="cell-value">${yes?'Yes':'No'}</span><span class="cell-meta">P(yes) ${pct(a.noul)}</span>`;} | |
| if(a.type==='score'){const best=Object.entries(a.probabilities).reduce((x,y)=>y[1]>x[1]?y:x);return `<span class="cell-value">${a.score.toFixed(2)}<em> / ${q.criteria.length-1}</em></span><span class="cell-meta">Level ${esc(best[0])} · ${pct(best[1])}</span>`;} | |
| return `<span class="cell-value">${esc(a.choice)}</span><span class="cell-meta">${pct(a.probabilities[a.choice])}</span>`; | |
| } | |
| function renderResult(result,payload,backend,elapsed){ | |
| validateServingResult(result,payload,modelInfo().repo_id,backend);setModelActivity('complete');lastResult=result;$('results').classList.remove('stale'); | |
| const qids=Object.keys(payload.questions),isBatch=Array.isArray(payload.states),rows=isBatch?result.results:[{id:'context',answers:result.answers,usage:result.usage}],count=rows.length*qids.length; | |
| $('result-count').textContent=count;$('results-title').textContent='Decisions'; | |
| if(isBatch){ | |
| $('results').innerHTML=`<p class="results-lede">Shared questions, separate decisions. Open a row for every probability.</p><div class="result-table-scroll" tabindex="0" role="region" aria-label="Context decision table"><table class="result-table"><thead><tr><th scope="col">Context</th>${qids.map(id=>`<th scope="col" title="${esc(display(payload.questions[id].instructions))}"><span class="th-id">${esc(id)}</span><span class="th-kind">${TYPE_LABEL[payload.questions[id].type]}</span></th>`).join('')}</tr></thead><tbody>${rows.map((r,i)=>`<tr class="result-row" data-result-row="${i}"><th scope="row"><button type="button" class="row-toggle" aria-expanded="false" aria-controls="result-detail-${i}" aria-label="Show probabilities for ${esc(r.id)}">${CHEVRON}<span>${esc(r.id)}</span></button></th>${qids.map(id=>`<td class="decision-cell ${payload.questions[id].type}">${compactDecision(r.answers[id],payload.questions[id])}</td>`).join('')}</tr><tr id="result-detail-${i}" class="result-detail-row" hidden><td colspan="${qids.length+1}"><div class="decisions detail-grid">${qids.map((id,j)=>decisionCard(id,payload.questions[id],r.answers[id],j)).join('')}</div></td></tr>`).join('')}</tbody></table></div>`; | |
| }else{ | |
| $('results').innerHTML=`<div class="decisions is-settled${qids.length===1?' single-decision':''}">${qids.map((id,i)=>decisionCard(id,payload.questions[id],result.answers[id],i)).join('')}</div>`; | |
| } | |
| setRunStatus(`${nameOf()} · ${count} decision${count===1?'':'s'} ready`); | |
| $('timing').hidden=true; | |
| $('timing').replaceChildren(); | |
| } | |
| async function nativePrediction(payload, current) { | |
| return requestJSON('/api/evaluate', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload), signal:current.signal}); | |
| } | |
| async function run() { | |
| if(controller || !status?.configured || !status?.loaded || status.running || ['running','loading'].includes(status?.phase)) { if(!status?.configured) $('setup-dialog').showModal(); return; } | |
| if(contextMode==='batch'&&status.context_batch!==true){toast('Batch contexts is not ready on this model connection.');return;} | |
| let payload; try {payload=requestBody();}catch(e){toast(e.message);return;} | |
| clearTimeout(toastTimer);$('toast').hidden=true; | |
| const version=revision, epoch=modelEpoch, backend=status.backend, info=modelInfo(), current=new AbortController(); controller=current; updateRunButton(); clearTimeout(autoTimer); const begin=performance.now(); | |
| setRunStatus(status.backend==='pull_queue' ? 'Sending your request…' : status.loaded ? 'Reading your context…' : 'Loading the native model…','running'); | |
| setModelActivity(status.backend==='pull_queue' ? 'submitting' : status.loaded ? 'running' : 'loading'); | |
| try { | |
| const result = backend === 'pull_queue' ? await queuedPrediction(payload, current, info, { | |
| onProgress: phase => {setRunStatus(phase === 'queued' ? 'Waiting for the model…' : 'Reading your context…', 'running');setModelActivity(phase);}, | |
| validateCompletion: result => validateServingResult(result,payload,info.repo_id,backend), | |
| }) : await nativePrediction(payload, current); | |
| if(version!==revision || epoch!==modelEpoch || current.signal.aborted) return; | |
| if(payload.model!==selectedModel) throw Error('The selected model changed.'); | |
| renderResult(result,payload,backend,performance.now()-begin); | |
| } catch(e) {if(e.name!=='AbortError' && version===revision){setModelActivity('error');setRunStatus('Could not complete this request','error');toast(e.message); if(!lastResult)$('results').innerHTML=`<div class="error-message" role="alert"><b>No result.</b> ${esc(e.message)}</div>`;}} | |
| finally{if(controller===current)controller=null;updateRunButton();if(epoch===modelEpoch)await checkStatus();} | |
| } | |
| // Family lineup and model table: views of the same registry. | |
| const sizeValue = (label) => { const m = /^(\d+(?:\.\d+)?)\s*([BM])$/i.exec(label || ''); return m ? Number(m[1]) / (m[2].toUpperCase() === 'M' ? 1000 : 1) : null; }; | |
| const tokenText = (n) => n % 1024 === 0 ? `${n / 1024}K` : n.toLocaleString('en'); | |
| function readinessOf(model) { return modelReadiness(modelStatuses.get(model.id)); } | |
| function renderHero() { | |
| const newest = groupModels(models)[0]; | |
| const generation = document.body.dataset.generation || modelPresentation(newest?.models[0] || {}).generation || '2.0'; | |
| const title = `Decision <span class="grad">${esc(generation)}</span>`; | |
| if ($('hero-title').innerHTML !== title) $('hero-title').innerHTML = title; | |
| $('hero-eyebrow').textContent = 'INTRODUCING'; | |
| $('hero-sub').textContent = 'Open Foundation Decision Models'; | |
| $('hero-tag').textContent = Number.parseFloat(generation) >= 2 ? 'One pass. Many decisions.' : 'One input. Many decisions.'; | |
| const sizes = newest ? newest.models.filter(m => !modelPresentation(m).reasoning).map(m => modelPresentation(m).size) : []; | |
| $('hero-sizes').textContent = [...new Set(sizes)].sort((a, b) => (sizeValue(a) ?? 0) - (sizeValue(b) ?? 0)).join(' · '); | |
| } | |
| function renderLineup() { | |
| const newest = groupModels(models)[0]; | |
| const base = newest ? newest.models.filter(m => !modelPresentation(m).reasoning) : []; | |
| if (base.length < 2) { $('lineup').hidden = true; return; } | |
| const sizes = base.map(m => sizeValue(modelPresentation(m).size)); | |
| const known = sizes.filter(Number.isFinite), lo = Math.log(Math.min(...known)), hi = Math.log(Math.max(...known)); | |
| const selected = modelInfo(), sp = selected && modelPresentation(selected); | |
| $('lineup-title').textContent = newest.label; | |
| const first = modelPresentation(base.at(-1)).size, last = modelPresentation(base[0]).size; | |
| const distinct = new Set(base.map(m => modelPresentation(m).size)).size; | |
| $('lineup-meta').textContent = `${base.length} ${distinct === base.length ? 'sizes' : 'models'}${known.length === base.length ? ` · ${[first, last].sort((x, y) => sizeValue(x) - sizeValue(y)).join(' – ')}` : ''}`; | |
| const ordered = base.map((m, i) => ({m, size: sizes[i]})).sort((x, y) => (x.size ?? 0) - (y.size ?? 0)); | |
| $('lineup-stage').innerHTML = ordered.map(({m, size}) => { | |
| const p = modelPresentation(m), ratio = Number.isFinite(size) && hi > lo ? (Math.log(size) - lo) / (hi - lo) : 0.5; | |
| const active = sp && sp.generation === p.generation && sp.codename === p.codename && sp.size === p.size; | |
| const r = readinessOf(m); | |
| return `<button type="button" class="size-option" data-model="${esc(m.id)}" aria-pressed="${!!active}" data-readiness="${r.state}" style="--d:${ratio.toFixed(3)}" aria-label="${esc(p.name)}, ${r.label}"><span class="orb-wrap"><span class="orb"></span></span><span class="size-name">${esc(p.codename)}</span><span class="size-label"><span class="status-dot" aria-hidden="true"></span>${esc(p.size)}</span></button>`; | |
| }).join(''); | |
| const reasoning = newest.models.length - base.length; | |
| $('lineup-foot').textContent = reasoning ? `Plus ${reasoning} Reasoning variant${reasoning === 1 ? '' : 's'}. One API for every size.` : 'One API for every size.'; | |
| const facts = selected ? [sp.description, `${tokenText(selected.complete_input_tokens)} complete input`, sp.releaseLabel && `Released ${sp.releaseLabel}`].filter(Boolean) : []; | |
| $('lineup-detail').innerHTML = selected ? `<b>${esc(sp.name)}${sp.generation ? ` <span class="lineup-generation">${esc(sp.generation)}</span>` : ''}</b><span>${esc(facts.join(' · '))}</span>` : ''; | |
| $('lineup').hidden = false; | |
| } | |
| function renderModelTable() { | |
| const body = $('model-table').tBodies[0]; | |
| body.innerHTML = groupModels(models).map(group => `<tr class="group-row"><th colspan="6" scope="colgroup"><span>${esc(group.label)}</span><small>${group.models.length} model${group.models.length === 1 ? '' : 's'}</small></th></tr>` + group.models.map(m => { | |
| const p = modelPresentation(m), r = readinessOf(m), current = m.id === selectedModel; | |
| const compact = [p.description, `${tokenText(m.complete_input_tokens)} input`, p.releaseLabel].filter(Boolean); | |
| return `<tr class="model-row${current ? ' is-selected' : ''}"><th scope="row"><span class="model-cell"><span class="codename">${esc(p.codename)}</span><span class="compact-only size-inline" aria-hidden="true">${esc(p.size)}</span>${p.reasoning ? '<span class="badge badge-reasoning">Reasoning</span>' : ''}</span>${p.description ? `<span class="model-desc wide-only">${esc(p.description)}</span>` : ''}<span class="model-desc compact-only" aria-hidden="true">${esc(compact.join(' · '))}</span></th><td class="num">${esc(p.size || '—')}</td><td class="num">${tokenText(m.complete_input_tokens)} tokens</td><td class="num">${esc(p.releaseLabel || '—')}</td><td><span class="readiness" data-readiness-for="${esc(m.id)}" data-readiness="${r.state}"><span class="status-dot" aria-hidden="true"></span>${r.label}</span></td><td class="row-actions"><button type="button" class="button-quiet small" data-use-model="${esc(m.id)}" aria-pressed="${current}">${current ? 'In Studio' : 'Try'}</button><a class="text-link" href="https://huggingface.co/${esc(m.repo_id)}" target="_blank" rel="noopener" aria-label="${esc(p.name)} on Hugging Face">Hub <span aria-hidden="true">↗</span></a></td></tr>`; | |
| }).join('')).join(''); | |
| } | |
| // Re-rendering replaces buttons, so keep keyboard focus on the same model. | |
| function keepFocus(container, render) { | |
| const active = document.activeElement, inside = container.contains(active); | |
| const attr = inside && active.dataset.model ? 'data-model' : inside && active.dataset.useModel ? 'data-use-model' : null; | |
| const key = attr && active.getAttribute(attr); | |
| render(); | |
| if (key) container.querySelector(`[${attr}="${CSS.escape(key)}"]`)?.focus({preventScroll: true}); | |
| } | |
| function renderFleet() { if (!models.length) return; renderHero(); keepFocus($('lineup'), renderLineup); keepFocus($('model-table'), renderModelTable); } | |
| function updateFleet() { | |
| for (const button of $('lineup-stage').querySelectorAll('[data-model]')) { | |
| const model = models.find(m => m.id === button.dataset.model); if (!model) continue; | |
| const r = readinessOf(model); button.dataset.readiness = r.state; button.setAttribute('aria-label', `${modelPresentation(model).name}, ${r.label}`); | |
| } | |
| for (const cell of $('model-table').querySelectorAll('[data-readiness-for]')) { | |
| const model = models.find(m => m.id === cell.dataset.readinessFor); if (!model) continue; | |
| const r = readinessOf(model); cell.dataset.readiness = r.state; cell.lastChild.textContent = r.label; | |
| } | |
| } | |
| $('examples').addEventListener('click',e=>{const b=e.target.closest('[data-example]');if(b)loadExample(examples[Number(b.dataset.example)]);}); | |
| $('reset').onclick=()=>loadExample(activeExample); | |
| $('context-mode-routing').onclick=()=>switchContextMode('routing');$('context-mode-single').onclick=()=>switchContextMode('single');$('context-mode-batch').onclick=()=>switchContextMode('batch'); | |
| $('shared-toggle').onclick=()=>{const closed=$('shared-questions').hidden;$('shared-questions').hidden=!closed;$('shared-toggle').setAttribute('aria-expanded',String(closed));}; | |
| $('add-context').onclick=()=>{let n=1;while(draft.contexts.some(c=>c.id==='context_'+n))n++;draft.contexts.push({id:'context_'+n,text:'',expanded:true});renderContexts();dirty();$('context-list').querySelector(`[data-context-text="${draft.contexts.length-1}"]`).focus();}; | |
| $('context-list').addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return; | |
| if(b.dataset.openContext!==undefined){const i=Number(b.dataset.openContext);draft.contexts[i].expanded=!draft.contexts[i].expanded;renderContexts();$('context-list').querySelector(`[data-open-context="${i}"]`).focus();} | |
| else if(b.dataset.deleteContext!==undefined){if(draft.contexts.length<=1)return;const i=Number(b.dataset.deleteContext);draft.contexts.splice(i,1);renderContexts();dirty();$('context-list').querySelector(`[data-open-context="${Math.min(i,draft.contexts.length-1)}"]`).focus();} | |
| }); | |
| $('context-list').addEventListener('input',e=>{const el=e.target; | |
| if(el.dataset.contextText!==undefined)draft.contexts[Number(el.dataset.contextText)].text=el.value; | |
| else if(el.dataset.contextId!==undefined){const c=draft.contexts[Number(el.dataset.contextId)];c.id=el.value;el.closest('.context-item').querySelector('.context-row-id').textContent=el.value;} | |
| else return;dirty(); | |
| }); | |
| function toggleResultRow(row){const detail=$('result-detail-'+row.dataset.resultRow),toggle=row.querySelector('.row-toggle'),open=detail.hidden;detail.hidden=!open;toggle.setAttribute('aria-expanded',String(open));} | |
| $('results').addEventListener('click',e=>{const row=e.target.closest('[data-result-row]');if(row)toggleResultRow(row);}); | |
| $('state-input').addEventListener('input',()=>{draft.contexts[0].text=$('state-input').value;updateCount();dirty();}); | |
| $('questions').addEventListener('input',e=>{ | |
| const el=e.target,index=Number(el.dataset.index),q=draft.questions[index];if(!q)return; | |
| if(el.hasAttribute('data-question-id')){q.id=el.value;el.closest('.question-card').querySelector('.question-summary-id').textContent=el.value||'Untitled question';} | |
| else if(el.hasAttribute('data-instructions')){q.instructions=el.value;el.closest('.question-card').querySelector('.question-summary-text').textContent=el.value;} | |
| else if(el.dataset.polarity){q.criteria ||= {};if(el.value)q.criteria[el.dataset.polarity]=el.value;else delete q.criteria[el.dataset.polarity];} | |
| else if(el.dataset.option!==undefined){const i=Number(el.dataset.option);if(q.type==='score')q.criteria[i]=el.value;else{const entries=Object.entries(q.criteria);if(el.dataset.field==='name'){entries[i][0]=el.value;if(new Set(entries.map(x=>x[0])).size!==entries.length){q.invalid='Choice option names must be unique.';dirty();return;}q.invalid=null;}else entries[i][1]=el.value||null;q.criteria=Object.fromEntries(entries);}} | |
| dirty(); | |
| }); | |
| $('questions').addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return; | |
| if(b.dataset.toggleQuestion!==undefined){const i=Number(b.dataset.toggleQuestion);draft.questions[i].expanded=!draft.questions[i].expanded;renderQuestions();$('questions').querySelector(`[data-toggle-question="${i}"]`).focus();return;} | |
| if(b.dataset.remove!==undefined){draft.questions.splice(Number(b.dataset.remove),1);renderQuestions();dirty();} | |
| if(b.dataset.addOption!==undefined){const q=draft.questions[Number(b.dataset.addOption)];if(q.type==='score')q.criteria.push('Describe this level');else{let i=Object.keys(q.criteria).length+1;while(Object.hasOwn(q.criteria,'Option '+i))i++;q.criteria['Option '+i]=null;}renderQuestions();dirty();} | |
| if(b.dataset.removeOption!==undefined){const q=draft.questions[Number(b.dataset.index)],i=Number(b.dataset.removeOption);if(q.type==='score')q.criteria.splice(i,1);else{const entries=Object.entries(q.criteria);entries.splice(i,1);q.criteria=Object.fromEntries(entries);}renderQuestions();dirty();} | |
| }); | |
| $('add-toggle').onclick=()=>{const open=$('add-options').hidden;$('add-options').hidden=!open;$('add-toggle').setAttribute('aria-expanded',String(open));if(open)$('add-options').querySelector('button').focus();}; | |
| $('add-options').onclick=e=>{const button=e.target.closest('[data-add]');if(!button)return;const type=button.dataset.add;let i=draft.questions.length+1;while(draft.questions.some(q=>q.id==='question_'+i))i++;const q={id:'question_'+i,type,expanded:true,instructions:type==='choice'?'Which option best fits the context?':type==='noul'?'Is the statement supported by the context?':'How would you rate the context using these levels?'};if(type==='choice')q.criteria={'Option A':'Describe the first option','Option B':'Describe the second option'};if(type==='score')q.criteria=['Low','Medium','High'];draft.questions.push(q);$('add-options').hidden=true;$('add-toggle').setAttribute('aria-expanded','false');renderQuestions();const added=$('questions').lastElementChild;added.scrollIntoView({block:'nearest'});added.querySelector('.question-id').focus({preventScroll:true});dirty();}; | |
| document.addEventListener('pointerdown',e=>{if(!$('add-options').hidden&&!e.target.closest('.add-menu')){$('add-options').hidden=true;$('add-toggle').setAttribute('aria-expanded','false');}}); | |
| $('run').onclick=run;$('auto-run').onchange=()=>{if($('auto-run').checked)toast('Auto-run sends edits after you pause. A detached request may still finish on the server.');dirty();}; | |
| document.addEventListener('keydown',e=>{if(e.key==='Escape'&&!$('add-options').hidden){$('add-options').hidden=true;$('add-toggle').setAttribute('aria-expanded','false');$('add-toggle').focus();}if((e.metaKey||e.ctrlKey)&&e.key==='Enter'&&!document.querySelector('dialog[open]')){e.preventDefault();if(!$('run').disabled)run();}}); | |
| $('lineup-stage').addEventListener('click',e=>{const b=e.target.closest('[data-model]');if(b){chooseModel(b.dataset.model);$('studio').scrollIntoView({behavior:reducedMotion.matches?'auto':'smooth',block:'start'});}}); | |
| $('model-table').addEventListener('click',e=>{const b=e.target.closest('[data-use-model]');if(!b)return;chooseModel(b.dataset.useModel);$('studio').scrollIntoView({behavior:reducedMotion.matches?'auto':'smooth',block:'start'});}); | |
| $('setup-help').onclick=()=>$('setup-dialog').showModal();$('close-setup').onclick=()=>$('setup-dialog').close(); | |
| for(const dialog of document.querySelectorAll('dialog'))dialog.addEventListener('click',e=>{if(e.target===dialog){const r=dialog.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)dialog.close();}}); | |
| async function init(){try{ | |
| await loadModels();allExamples=await requestJSON('/api/examples',{cache:'no-store'}); | |
| for(const model of models)studioExamplesForModel(model,allExamples); | |
| applyWorkspace(modelInfo());modelMenu.identity(modelInfo()); | |
| await checkStatus(); | |
| const poll=async()=>{await checkStatus();statusPoll=setTimeout(poll,3000);}; | |
| statusPoll=setTimeout(poll,3000); | |
| await refreshMenuStatuses();await settleInitialModel();scheduleFleetRefresh(); | |
| }catch(e){ | |
| if(!initWarningShown)toast(e.message||'Connecting to Studio…'); | |
| initWarningShown=true; | |
| setConnection('Connecting to Studio…','pending'); | |
| setModelActivity('checking'); | |
| setTimeout(init,initRetryDelay); | |
| initRetryDelay=Math.min(15000,Math.round(initRetryDelay*1.6)); | |
| }} | |
| init(); | |