Add playground belief entropy panel

Author: rsasaki0109

README.md

@@ -52,7 +52,7 @@ python3 examples/runtime/01_sense_act_loop.py
 | Failure recovery | `python3 examples/manipulation/01_pick_and_retry.py` | grasp miss -> belief update -> retry |
 | Runtime safety | `python3 examples/navigation/29_safety_filter_cbf.py` | nominal controller -> CBF projection -> safe motion |
 | Active perception | `python3 examples/navigation/07_active_slam_toy.py` | map and pose uncertainty -> information-seeking action |
-| Shareable live trace | [Try live](https://rsasaki0109.github.io/PythonInteractiveRobotics/playground.html?scenario=household&answer=red&compare=1&autoplay=1) | compare, scrub, and jump through failure timelines |
+| Shareable live trace | [Try live](https://rsasaki0109.github.io/PythonInteractiveRobotics/playground.html?scenario=household&answer=red&compare=1&autoplay=1) | belief entropy, compare mode, and failure timeline |
 | Human correction | [Open in Colab](https://colab.research.google.com/github/rsasaki0109/PythonInteractiveRobotics/blob/main/notebooks/human_correction_replanning.ipynb) | shortcut -> human correction -> cost update -> replan |
 | Language ambiguity | [Open in Colab](https://colab.research.google.com/github/rsasaki0109/PythonInteractiveRobotics/blob/main/notebooks/clarifying_question.ipynb) | ambiguous command -> ask question -> answer -> act |
 | Integrated household task | [Open in Colab](https://colab.research.google.com/github/rsasaki0109/PythonInteractiveRobotics/blob/main/notebooks/household_task_agent.ipynb) | clarify -> plan -> safety check -> retry -> human replan |

docs/playground.css

@@ -57,7 +57,7 @@
 .sim-panel {
   display: grid;
   gap: 14px;
-  grid-template-rows: auto auto auto auto auto minmax(420px, 1fr);
+  grid-template-rows: auto auto auto auto auto auto minmax(420px, 1fr);
   padding: 16px;
 }
 
@@ -169,6 +169,81 @@ button:disabled {
   overflow-wrap: anywhere;
 }
 
+.belief-panel {
+  background: #fffdf7;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr);
+  padding: 12px;
+}
+
+.belief-bars {
+  display: grid;
+  gap: 9px;
+  min-width: 0;
+}
+
+.belief-row {
+  align-items: center;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: 42px minmax(0, 1fr) 52px;
+  min-width: 0;
+}
+
+.belief-row span,
+.belief-metrics span {
+  color: var(--muted);
+  font-size: 0.76rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.belief-track {
+  background: #eef3ef;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  height: 12px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.belief-fill {
+  height: 100%;
+}
+
+.belief-red {
+  background: #d94b3d;
+}
+
+.belief-blue {
+  background: #2b6cb0;
+}
+
+.belief-value {
+  color: var(--ink);
+  font-size: 0.82rem;
+  font-weight: 900;
+  text-align: right;
+}
+
+.belief-metrics {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.belief-metrics strong {
+  color: var(--ink);
+  display: block;
+  font-size: 0.95rem;
+  margin-top: 3px;
+  overflow-wrap: anywhere;
+  text-transform: none;
+}
+
 .replay-strip {
   align-items: center;
   background: #eef3ef;
@@ -684,6 +759,11 @@ button:disabled {
     grid-template-columns: 1fr 1fr;
   }
 
+  .belief-panel,
+  .belief-metrics {
+    grid-template-columns: 1fr;
+  }
+
   .compare-panel {
     grid-template-columns: 1fr;
   }

docs/playground.html

@@ -94,6 +94,8 @@ <h1 id="playground-title">Playground</h1>
             </div>
           </div>
 
+          <div id="beliefPanel" class="belief-panel" aria-label="Belief state"></div>
+
           <div class="replay-strip" aria-label="Trace replay">
             <label for="replaySlider">
               <span>Replay</span>

docs/playground.js

@@ -51,6 +51,7 @@
     copyLink: document.getElementById("copyLinkButton"),
     copyTrace: document.getElementById("copyTraceButton"),
     copyStatus: document.getElementById("copyStatus"),
+    beliefPanel: document.getElementById("beliefPanel"),
     replay: document.getElementById("replaySlider"),
     replayValue: document.getElementById("replayValue"),
     comparePanel: document.getElementById("comparePanel"),
@@ -186,6 +187,7 @@
       agentState: "parse_command",
       target: "unresolved",
       failure: "none",
+      belief: ambiguousBelief(),
       picked: null,
       pickAt: null,
       focus: null,
@@ -205,6 +207,7 @@
             target: answer,
             agentState: "update_goal_from_answer",
             failure: "ambiguous_goal",
+            belief: resolvedBelief(answer),
             question: "Which block?",
             answer,
             focus: answer,
@@ -219,6 +222,7 @@
             ...initial,
             target: answer,
             agentState: "target_confirmed",
+            belief: resolvedBelief(answer),
             focus: answer,
           },
         },
@@ -231,6 +235,7 @@
             ...initial,
             target: answer,
             agentState: "done",
+            belief: resolvedBelief(answer),
             picked: answer,
             pickAt: [targetX, 56],
             focus: answer,
@@ -310,6 +315,7 @@
       command: "put the block away",
       robot: [7, 1],
       target: "unresolved",
+      belief: ambiguousBelief(),
       held: null,
       stored: null,
       blocked: [],
@@ -325,6 +331,7 @@
       command: "put the block away",
       robot: [7, 1],
       target: "unresolved",
+      belief: ambiguousBelief(),
       held: null,
       stored: null,
       blocked: [],
@@ -343,6 +350,7 @@
       failure: "ambiguous_goal",
       agentState: "update_goal_from_answer",
       target: answer,
+      belief: resolvedBelief(answer),
       path: answer === "blue" ? blueRoute : redRoute,
     });
 
@@ -513,11 +521,46 @@
     });
   }
 
+  function ambiguousBelief() {
+    const distribution = { red: 0.5, blue: 0.5 };
+    return {
+      red: distribution.red,
+      blue: distribution.blue,
+      entropy: beliefEntropy(distribution),
+      askGain: beliefEntropy(distribution),
+      policy: "ask",
+    };
+  }
+
+  function resolvedBelief(answer) {
+    const distribution = {
+      red: answer === "red" ? 1 : 0,
+      blue: answer === "blue" ? 1 : 0,
+    };
+    return {
+      red: distribution.red,
+      blue: distribution.blue,
+      entropy: beliefEntropy(distribution),
+      askGain: 0,
+      policy: "act",
+    };
+  }
+
+  function beliefEntropy(distribution) {
+    return Object.values(distribution).reduce((total, probability) => {
+      if (probability <= 0) {
+        return total;
+      }
+      return total - probability * Math.log2(probability);
+    }, 0);
+  }
+
   function snapshotFromContext(context) {
     return {
       command: context.command,
       robot: context.robot.slice(),
       target: context.target,
+      belief: copyBelief(context.belief),
       held: context.held,
       stored: context.stored,
       blocked: context.blocked.map((cell) => cell.slice()),
@@ -530,6 +573,16 @@
     };
   }
 
+  function copyBelief(belief) {
+    return {
+      red: belief.red,
+      blue: belief.blue,
+      entropy: belief.entropy,
+      askGain: belief.askGain,
+      policy: belief.policy,
+    };
+  }
+
   function trimPath(path, robot) {
     if (!path || !path.length) {
       return [robot];
@@ -577,6 +630,7 @@
     renderReplay(replayIndex);
     renderCompare();
     renderTimeline(replayIndex);
+    renderBelief(current);
     renderScene(current);
     renderTrace(replayIndex);
   }
@@ -652,6 +706,67 @@
     });
   }
 
+  function renderBelief(snapshot) {
+    const belief = snapshot.belief;
+    elements.beliefPanel.textContent = "";
+    if (!belief) {
+      elements.beliefPanel.hidden = true;
+      return;
+    }
+    elements.beliefPanel.hidden = false;
+
+    const bars = document.createElement("div");
+    bars.className = "belief-bars";
+    [
+      ["red", belief.red],
+      ["blue", belief.blue],
+    ].forEach(([label, probability]) => {
+      bars.appendChild(renderBeliefRow(label, probability));
+    });
+
+    const metrics = document.createElement("div");
+    metrics.className = "belief-metrics";
+    [
+      ["entropy", formatBits(belief.entropy)],
+      ["ask gain", "+" + formatBits(belief.askGain)],
+      ["policy", belief.policy],
+    ].forEach(([label, value]) => {
+      const metric = document.createElement("span");
+      metric.textContent = label;
+      const strong = document.createElement("strong");
+      strong.textContent = value;
+      metric.appendChild(strong);
+      metrics.appendChild(metric);
+    });
+
+    elements.beliefPanel.appendChild(bars);
+    elements.beliefPanel.appendChild(metrics);
+  }
+
+  function renderBeliefRow(label, probability) {
+    const row = document.createElement("div");
+    row.className = "belief-row";
+
+    const name = document.createElement("span");
+    name.textContent = label;
+    row.appendChild(name);
+
+    const track = document.createElement("div");
+    track.className = "belief-track";
+    const fill = document.createElement("div");
+    fill.className = "belief-fill belief-" + label;
+    fill.style.width = Math.round(probability * 100) + "%";
+    track.appendChild(fill);
+    row.appendChild(track);
+
+    const value = document.createElement("strong");
+    value.className = "belief-value";
+    value.textContent = Math.round(probability * 100) + "%";
+    row.appendChild(value);
+
+    return row;
+  }
+
   function timelineClass(event) {
     if (event.failure === "ambiguous_goal") return "timeline-ambiguous";
     if (event.failure === "unsafe_nominal_step") return "timeline-unsafe";
@@ -1106,4 +1221,8 @@
   function formatReward(value) {
     return Number(value).toFixed(2);
   }
+
+  function formatBits(value) {
+    return Number(value).toFixed(2) + " bit";
+  }
 })();

tests/test_playground_assets.py

@@ -22,6 +22,7 @@ def test_playground_assets_support_shareable_scenarios() -> None:
         "copyLinkButton",
         "copyTraceButton",
         "copyStatus",
+        "beliefPanel",
         "replaySlider",
         "replayValue",
         "comparePanel",
@@ -45,6 +46,10 @@ def test_playground_assets_support_shareable_scenarios() -> None:
         "renderMiniMap",
         "renderTimeline",
         "timelineClass",
+        "ambiguousBelief",
+        "resolvedBelief",
+        "beliefEntropy",
+        "renderBelief",
         "clampReplayIndex",
         "snapshotForReplayIndex",
         "trace-active",
@@ -59,6 +64,7 @@ def test_playground_assets_support_shareable_scenarios() -> None:
     assert ".replay-strip" in css
     assert ".compare-panel" in css
     assert ".timeline" in css
+    assert ".belief-panel" in css
 
 
 def test_readme_links_to_shareable_live_trace() -> None: