Spaces:
Configuration error
Configuration error
File size: 4,363 Bytes
d1d7f2c 059f0de 53f8186 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 d1d7f2c | 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 | <!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>
</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>
<script type="module" src="/src/main.js"></script>
</body>
</html>
|