Spaces:
Running
Running
| const state = { data: null, environment: null, target: null, budget: "4", reveal: false }; | |
| const $ = (id) => document.getElementById(id); | |
| const letter = (index) => `Candidate ${String.fromCharCode(65 + index)}`; | |
| function fillSelect(select, values) { | |
| select.replaceChildren(...values.map((value) => { | |
| const option = document.createElement("option"); | |
| option.value = value; | |
| option.textContent = value; | |
| return option; | |
| })); | |
| } | |
| function candidateName(index) { | |
| return state.reveal ? state.data.environments[state.environment].labels[index] : letter(index); | |
| } | |
| function renderBudgets() { | |
| $("budgets").replaceChildren(...["1", "2", "4", "8"].map((value) => { | |
| const button = document.createElement("button"); | |
| button.type = "button"; | |
| button.textContent = `K=${value}`; | |
| button.className = value === state.budget ? "active" : ""; | |
| button.addEventListener("click", () => { state.budget = value; render(); }); | |
| return button; | |
| })); | |
| } | |
| function renderCandidates() { | |
| const result = state.data.environments[state.environment].results[state.budget][state.target]; | |
| const selectedIndex = result.scores.indexOf(Math.max(...result.scores)); | |
| $("choice").textContent = candidateName(selectedIndex); | |
| $("context-summary").textContent = `K=${state.budget} observations per candidate`; | |
| $("candidate-grid").replaceChildren(...result.scores.map((score, index) => { | |
| const card = document.createElement("article"); | |
| card.className = `candidate${index === selectedIndex ? " selected" : ""}`; | |
| const name = document.createElement("div"); | |
| name.className = "candidate-top"; | |
| const strong = document.createElement("strong"); | |
| strong.textContent = candidateName(index); | |
| name.append(strong); | |
| if (index === selectedIndex) { | |
| const badge = document.createElement("span"); badge.textContent = "selected"; name.append(badge); | |
| } | |
| card.append(name, measure("Predicted quality", score, false), measure("Predicted relative cost", result.costs[index], true)); | |
| return card; | |
| })); | |
| } | |
| function measure(label, value, cost) { | |
| const wrap = document.createElement("div"); wrap.className = `measure${cost ? " cost" : ""}`; | |
| const row = document.createElement("label"); row.textContent = label; | |
| const number = document.createElement("b"); number.textContent = value.toFixed(3); row.append(number); | |
| const bar = document.createElement("div"); bar.className = "bar"; | |
| const fill = document.createElement("i"); fill.style.width = `${Math.min(100, Math.max(0, value * 100))}%`; bar.append(fill); | |
| wrap.append(row, bar); return wrap; | |
| } | |
| function renderContext() { | |
| const env = state.data.environments[state.environment]; | |
| const header = document.createElement("tr"); | |
| ["Context query", ...env.labels.flatMap((_, index) => [`${String.fromCharCode(65 + index)} · score`, `${String.fromCharCode(65 + index)} · cost`])].forEach((value) => { | |
| const th = document.createElement("th"); th.textContent = value; header.append(th); | |
| }); | |
| $("context-head").replaceChildren(header); | |
| $("context-body").replaceChildren(...env.observations.slice(0, Number(state.budget)).map((observation) => { | |
| const tr = document.createElement("tr"); | |
| [observation.query, ...observation.scores.flatMap((score, index) => [score.toFixed(2), observation.costs[index].toFixed(2)])].forEach((value) => { | |
| const td = document.createElement("td"); td.textContent = value; tr.append(td); | |
| }); | |
| return tr; | |
| })); | |
| } | |
| function render() { renderBudgets(); renderCandidates(); renderContext(); } | |
| fetch("data.json").then((response) => { | |
| if (!response.ok) throw new Error(`Could not load demo data (${response.status}).`); | |
| return response.json(); | |
| }).then((data) => { | |
| state.data = data; | |
| const environments = Object.keys(data.environments); | |
| state.environment = environments[0]; | |
| fillSelect($("environment"), environments); | |
| fillSelect($("target"), data.environments[state.environment].targets); | |
| state.target = data.environments[state.environment].targets[0]; | |
| $("environment").addEventListener("change", (event) => { | |
| state.environment = event.target.value; | |
| const targets = data.environments[state.environment].targets; | |
| fillSelect($("target"), targets); state.target = targets[0]; render(); | |
| }); | |
| $("target").addEventListener("change", (event) => { state.target = event.target.value; renderCandidates(); }); | |
| $("reveal").addEventListener("change", (event) => { state.reveal = event.target.checked; renderCandidates(); }); | |
| render(); | |
| }).catch((error) => { | |
| $("candidate-grid").textContent = error.message; | |
| }); | |