Spaces:

irregular6612
/

AgentnessBench

Runtime error

App Files Files Community

irregular6612 commited on Jun 2

Commit

5ba7629

1 Parent(s): 642444a

feat(web): single-file color-grid frontend (start / play / review)

Browse files

Files changed (1) hide show

proteus/web/static/index.html +196 -1

proteus/web/static/index.html CHANGED Viewed

	@@ -1 +1,196 @@
1	- <!doctype html>~~<title>proteus</title><body>placeholder</body>~~

+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>PROTEUS Arena — Play</title>
+<style>
+  :root { --bg:#11131a; --fg:#e8e8ee; --muted:#8a90a2; --line:#2a2e3a; }
+  * { box-sizing: border-box; }
+  body { margin:0; background:var(--bg); color:var(--fg);
+         font:14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+         display:flex; min-height:100vh; align-items:center; justify-content:center; }
+  .card { background:#171a23; border:1px solid var(--line); border-radius:12px;
+          padding:24px; width:min(720px, 94vw); }
+  h1 { font-size:18px; margin:0 0 16px; }
+  label { display:block; margin:10px 0 4px; color:var(--muted); }
+  select, input { background:#0e1017; color:var(--fg); border:1px solid var(--line);
+                  border-radius:6px; padding:6px 8px; font:inherit; }
+  .row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
+  button { background:#2a3140; color:var(--fg); border:1px solid var(--line);
+           border-radius:8px; padding:8px 14px; font:inherit; cursor:pointer; }
+  button:hover { background:#343c4e; }
+  button.primary { background:#3b5bdb; border-color:#3b5bdb; }
+  #grid { display:grid; gap:2px; margin:18px auto; width:max-content;
+          background:var(--line); padding:2px; border-radius:6px; }
+  .cell { width:30px; height:30px; border-radius:3px; }
+  .status { color:var(--muted); display:flex; justify-content:space-between; }
+  .pad { display:grid; grid-template-columns:repeat(3,56px); gap:8px;
+         justify-content:center; margin-top:12px; }
+  .pad button { height:48px; }
+  .pad .blank { visibility:hidden; }
+  .hidden { display:none; }
+  .outcome { font-size:22px; text-align:center; margin:8px 0 16px; }
+  .win { color:#4FCC30; } .lose { color:#F93C31; }
+  table { width:100%; border-collapse:collapse; margin-top:10px; }
+  th, td { border-bottom:1px solid var(--line); padding:4px 6px; text-align:right; }
+  th:first-child, td:first-child { text-align:left; }
+  .diag { color:#FFDC00; }
+</style>
+</head>
+<body>
+<div class="card">
+  <h1>PROTEUS Arena — predator&nbsp;evade</h1>
+  <!-- START SCREEN -->
+  <div id="start">
+    <div class="row">
+      <div><label>scenario</label><select id="scenario"></select></div>
+      <div><label>difficulty</label><select id="difficulty"></select></div>
+      <div><label>seed</label><input id="seed" type="number" value="42" style="width:90px"></div>
+      <div><label>turns</label><input id="turns" type="number" value="10" style="width:70px"></div>
+      <div><label><input id="probe" type="checkbox"> probe</label></div>
+      <div><button class="primary" id="startBtn">New game</button></div>
+    </div>
+    <p style="color:var(--muted)">Move <b>A</b> (you) to survive the predator <b>B</b>. Arrow keys or WASD; walls block.</p>
+  </div>
+  <!-- PLAY SCREEN -->
+  <div id="play" class="hidden">
+    <div class="status"><span id="meta"></span><span id="turnInfo"></span></div>
+    <div id="grid"></div>
+    <div class="pad">
+      <span class="blank"></span><button data-a="up">↑</button><span class="blank"></span>
+      <button data-a="left">←</button><button data-a="stay">•</button><button data-a="right">→</button>
+      <span class="blank"></span><button data-a="down">↓</button><span class="blank"></span>
+    </div>
+  </div>
+  <!-- END SCREEN -->
+  <div id="end" class="hidden">
+    <div id="outcome" class="outcome"></div>
+    <div id="review"></div>
+    <p style="text-align:center;margin-top:16px"><button class="primary" id="againBtn">Play again</button></p>
+    <p id="savedPath" style="color:var(--muted);text-align:center"></p>
+  </div>
+</div>
+<script>
+let COLORS = {};         // int -> hex (#RRGGBBAA)
+let SID = null;          // session id
+let PLAYING = false;     // accept input?
+const $ = (id) => document.getElementById(id);
+async function jget(url) { return (await fetch(url)).json(); }
+async function jpost(url, body) {
+  const r = await fetch(url, {method:"POST", headers:{"Content-Type":"application/json"},
+                             body: JSON.stringify(body || {})});
+  return {status:r.status, data: await r.json()};
+}
+function hex6(h) { return h.length >= 7 ? h.slice(0,7) : h; }  // drop alpha for CSS
+function drawGrid(grid) {
+  const g = $("grid");
+  const h = grid.length, w = grid[0].length;
+  g.style.gridTemplateColumns = `repeat(${w}, 30px)`;
+  g.innerHTML = "";
+  for (let y=0; y<h; y++) for (let x=0; x<w; x++) {
+    const c = document.createElement("div");
+    c.className = "cell";
+    c.style.background = hex6(COLORS[grid[y][x]] || "#000000");
+    g.appendChild(c);
+  }
+}
+async function animateCut(frames) {
+  for (const f of frames) { drawGrid(f); await new Promise(r => setTimeout(r, 280)); }
+}
+function showState(st) {
+  $("turnInfo").textContent = `Turn ${st.turn_idx} / ${st.play_turns}`;
+  drawGrid(st.grid);
+  if (st.outcome) { PLAYING = false; showEnd(st); }
+}
+function showEnd(st) {
+  $("play").classList.add("hidden");
+  $("end").classList.remove("hidden");
+  const o = $("outcome");
+  o.textContent = st.outcome === "survived" ? "SURVIVED" : "ELIMINATED";
+  o.className = "outcome " + (st.outcome === "survived" ? "win" : "lose");
+  const rv = st.review;
+  let rows = rv.turns.map(t =>
+    `<tr class="${t.is_diagnostic ? 'diag':''}"><td>${t.turn_idx}</td><td>${t.action}</td>`
+    + `<td>${t.motive_action}</td><td>${t.habit_action}</td><td>${t.reward.toFixed(1)}</td>`
+    + `<td>${t.was_congruent ? '✓':'✗'}</td></tr>`).join("");
+  let metrics = Object.entries(rv.metrics).map(([k,v]) =>
+    `<tr><td>${k}</td><td>${v.toFixed(2)}</td></tr>`).join("");
+  $("review").innerHTML =
+    `<table><tr><th>turn</th><th>you</th><th>optimal</th><th>habit</th><th>reward</th><th>=opt?</th></tr>${rows}</table>`
+    + `<table style="margin-top:14px"><tr><th>metric</th><th>value</th></tr>${metrics}</table>`;
+}
+async function act(action) {
+  if (!PLAYING) return;
+  PLAYING = false;
+  const {status, data} = await jpost(`/session/${SID}/act`, {action});
+  if (status !== 200) { PLAYING = true; return; }  // invalid action: ignore, keep playing
+  const st = data.state;
+  if (st.outcome) {
+    const fin = await jpost(`/session/${SID}/finish`, {});
+    if (fin.status === 200) $("savedPath").textContent = "trace saved: " + fin.data.trace_path;
+    showEnd(st);
+  } else {
+    PLAYING = true;
+    showState(st);
+  }
+}
+const KEYMAP = {ArrowUp:"up", ArrowDown:"down", ArrowLeft:"left", ArrowRight:"right",
+                w:"up", s:"down", a:"left", d:"right", " ":"stay"};
+window.addEventListener("keydown", (e) => {
+  const a = KEYMAP[e.key];
+  if (a) { e.preventDefault(); act(a); }
+});
+document.querySelectorAll(".pad button").forEach(b =>
+  b.addEventListener("click", () => act(b.dataset.a)));
+async function startGame() {
+  const body = {
+    scenario: $("scenario").value,
+    difficulty: $("difficulty").value,
+    seed: Number($("seed").value),
+    play_turns: Number($("turns").value),
+    probe: $("probe").checked,
+  };
+  const {status, data} = await jpost("/session", body);
+  if (status !== 200) { alert(data.error || "failed to start"); return; }
+  SID = data.session_id;
+  $("start").classList.add("hidden");
+  $("end").classList.add("hidden");
+  $("play").classList.remove("hidden");
+  $("meta").textContent = `${body.scenario} · ${body.difficulty} · seed ${body.seed}`;
+  const st = data.state;
+  if (st.cut_frames) await animateCut(st.cut_frames);
+  PLAYING = true;
+  showState(st);
+}
+async function init() {
+  const cfg = await jget("/config");
+  COLORS = cfg.color_map;
+  $("scenario").innerHTML = cfg.scenarios.map(s => `<option>${s}</option>`).join("");
+  $("difficulty").innerHTML = cfg.difficulties.map(d => `<option>${d}</option>`).join("");
+  $("seed").value = cfg.default_seed;
+  $("startBtn").addEventListener("click", startGame);
+  $("againBtn").addEventListener("click", () => {
+    $("end").classList.add("hidden");
+    $("start").classList.remove("hidden");
+  });
+}
+init();
+</script>
+</body>
+</html>