Mike0021's picture
Use Qwen2.5 Coder planner and verified token caps
53f8186 verified
<!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>