PythonInteractiveRobotics/docs/playground.html at f68a6b6e834fae0c64b866524868bb7e9fd96c61 · rsasaki0109/PythonInteractiveRobotics · GitHub

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Live Playground - PythonInteractiveRobotics</title>
    <meta
      name="description"
      content="Step through small robotics recovery loops directly in the browser."
    >
    <link rel="canonical" href="https://rsasaki0109.github.io/PythonInteractiveRobotics/playground.html">
    <meta name="theme-color" content="#17201f">
    <link rel="stylesheet" href="site.css">
    <link rel="stylesheet" href="playground.css">
  </head>
  <body class="playground-page">
    <nav class="site-nav" aria-label="Primary navigation">
      <a class="brand" href="index.html#top">PythonInteractiveRobotics</a>
      <div class="nav-links">
        <a href="index.html#run">Run</a>
        <a href="playground.html">Playground</a>
        <a href="index.html#colab">Colab</a>
        <a href="index.html#loops">Loops</a>
        <a href="https://github.com/rsasaki0109/PythonInteractiveRobotics">GitHub</a>
      </div>
    </nav>

    <main class="playground-main">
      <section class="playground-header" aria-labelledby="playground-title">
        <div>
          <p class="eyebrow">Live robotics trace</p>
          <h1 id="playground-title">Playground</h1>
        </div>
        <a class="source-link" id="sourceLink" href="https://github.com/rsasaki0109/PythonInteractiveRobotics/blob/main/examples/embodied_ai/35_clarifying_question.py">Open source</a>
      </section>

      <section class="playground-layout" aria-label="Interactive robotics playground">
        <div class="sim-panel">
          <div class="control-bar" aria-label="Simulation controls">
            <label>
              <span>Scenario</span>
              <select id="scenarioSelect">
                <option value="clarifying">Clarifying question</option>
                <option value="pickretry">Pick and retry (real Python)</option>
                <option value="household">Household task agent</option>
              </select>
            </label>
            <label>
              <span>Answer</span>
              <select id="answerSelect">
                <option value="red">red</option>
                <option value="blue">blue</option>
              </select>
            </label>
            <label>
              <span>Failure filter</span>
              <select id="failureFilter">
                <option value="all">all failures</option>
                <option value="ambiguous_goal">ambiguous_goal</option>
                <option value="unsafe_nominal_step">unsafe_nominal_step</option>
                <option value="grasp_miss">grasp_miss</option>
                <option value="human_correction">human_correction</option>
              </select>
            </label>
            <label class="toggle-label">
              <span>Compare</span>
              <input id="compareToggle" type="checkbox">
            </label>
            <label class="toggle-label">
              <span>Run real Python</span>
              <input id="realPythonToggle" type="checkbox">
            </label>
            <div class="button-row">
              <button id="resetButton" type="button">Reset</button>
              <button id="stepButton" type="button">Step</button>
              <button id="runButton" type="button">Run</button>
              <button id="copyLinkButton" type="button">Copy link</button>
              <button id="copyTraceButton" type="button">Copy trace</button>
            </div>
          </div>
          <div id="copyStatus" class="copy-status" aria-live="polite"></div>
          <div id="realStatus" class="real-status" aria-live="polite"></div>

          <div class="status-strip" aria-label="Current simulation state">
            <div>
              <span>Command</span>
              <strong id="commandValue">pick the block</strong>
            </div>
            <div>
              <span>Target</span>
              <strong id="targetValue">unresolved</strong>
            </div>
            <div>
              <span>Agent state</span>
              <strong id="agentStateValue">parse_command</strong>
            </div>
            <div>
              <span>Failure</span>
              <strong id="failureValue">none</strong>
            </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>
              <input id="replaySlider" type="range" min="0" max="0" value="0" step="1" disabled>
            </label>
            <strong id="replayValue">initial</strong>
          </div>

          <div id="comparePanel" class="compare-panel" aria-label="Policy comparison" hidden></div>

          <div id="scene" class="scene" role="img" aria-label="Current playground scene"></div>
        </div>

        <aside class="trace-panel" aria-labelledby="trace-title">
          <div class="trace-heading">
            <h2 id="trace-title">Trace</h2>
            <span id="stepCounter">0 / 3</span>
          </div>
          <div id="timeline" class="timeline" aria-label="Failure timeline"></div>
          <div class="trace-table" role="table" aria-label="Trace rows">
            <div class="trace-row trace-head" role="row">
              <span role="columnheader">#</span>
              <span role="columnheader">action</span>
              <span role="columnheader">reward</span>
              <span role="columnheader">failure</span>
              <span role="columnheader">agent_state</span>
            </div>
            <div id="traceRows"></div>
          </div>
        </aside>
      </section>
    </main>

    <script src="https://cdn.jsdelivr.net/pyodide/v0.27.2/full/pyodide.js"></script>
    <script src="playground.js"></script>
  </body>
</html>