File size: 4,462 Bytes
059f0de
 
 
 
 
53f8186
 
6b71b4b
059f0de
 
 
6b71b4b
059f0de
 
 
 
 
 
 
 
 
 
 
 
6b71b4b
 
 
059f0de
6b71b4b
53f8186
6b71b4b
 
 
 
 
 
059f0de
6b71b4b
 
 
 
 
 
53f8186
 
 
6b71b4b
 
 
 
 
 
 
 
 
 
 
 
 
53f8186
6b71b4b
 
 
 
 
 
 
059f0de
6b71b4b
 
 
 
 
 
 
059f0de
 
6b71b4b
 
059f0de
 
 
6b71b4b
059f0de
 
6b71b4b
 
 
 
 
53f8186
6b71b4b
53f8186
6b71b4b
 
 
53f8186
6b71b4b
 
 
 
 
 
 
 
 
 
 
 
 
 
059f0de
 
 
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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pi Web Agent</title>
    <script type="module" crossorigin src="/assets/index-CgfZNSZZ.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-4NYd9uAS.css">
  </head>
  <body>
    <main id="app">
      <section class="app-shell">
        <header class="topbar">
          <div>
            <h1>Pi Web Agent</h1>
            <p id="model-label"></p>
          </div>
          <div class="status-stack" aria-label="Runtime status">
            <span class="status" id="status">Idle</span>
            <span class="status" id="model-status">Model idle</span>
            <span class="status" id="sandbox-status">Sandbox idle</span>
          </div>
        </header>

        <section class="layout">
          <section class="chat-panel" aria-label="Conversation">
            <div class="chat-scroll" id="chat"></div>

            <form class="composer" id="composer">
              <textarea id="prompt" spellcheck="true" rows="2">Create hello.js containing JavaScript that computes 21 * 2 and prints result: 42, then run node hello.js.</textarea>
              <div class="composer-actions">
                <button id="demo-prompt" type="button">Demo</button>
                <button id="send" type="submit">Send</button>
              </div>
            </form>
          </section>

          <aside class="side-panel" aria-label="Agent controls and sandbox">
            <section class="control-group">
              <h2>Runtime</h2>
              <label>
                Model
                <select id="mode">
                  <option value="qwen25coder">Qwen2.5 Coder 0.5B planner</option>
                  <option value="qwen">Qwen3 0.6B planner</option>
                  <option value="minicpm">MiniCPM5 q4</option>
                  <option value="mock">Deterministic test</option>
                </select>
              </label>
              <label>
                Device
                <select id="device">
                  <option value="webgpu">WebGPU</option>
                  <option value="wasm">WASM</option>
                </select>
              </label>
              <div class="compact-grid">
                <label>
                  Max tokens
                  <input id="max-new-tokens" type="number" min="16" max="8192" step="1" value="256" />
                </label>
                <label>
                  Temperature
                  <input id="temperature" type="number" min="0" max="1.5" step="0.05" value="0" />
                </label>
              </div>
              <button id="load-model" type="button">Download Model</button>
            </section>

            <section class="control-group">
              <h2>Sandbox</h2>
              <div class="button-row">
                <button id="boot-sandbox" type="button">Boot</button>
                <button id="reset-sandbox" type="button">Reset</button>
              </div>
              <pre id="files"></pre>
            </section>

            <section class="control-group">
              <h2>Events</h2>
              <pre id="event-log"></pre>
            </section>
          </aside>
        </section>
      </section>

      <section class="model-gate" id="model-gate" aria-labelledby="model-gate-title" aria-modal="true" role="dialog">
        <div class="model-dialog">
          <div>
            <p class="eyebrow">Local model setup</p>
            <h2 id="model-gate-title">Download the selected model to this browser?</h2>
            <p class="dialog-copy">
              The agent can run fully locally with a q4 ONNX model in Transformers.js. The download is large and stays in the browser cache when possible.
            </p>
          </div>
          <div class="dialog-actions">
            <button id="confirm-load-model" type="button">Download Model</button>
            <button id="use-test-model" type="button">Use Test Model</button>
          </div>
          <div class="dialog-options">
            <label>
              Device
              <select id="gate-device">
                <option value="webgpu">WebGPU</option>
                <option value="wasm">WASM</option>
              </select>
            </label>
            <p id="gate-status">Ready.</p>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>