| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>SimpleTool Pong - Real-time AI Demo</title> |
| | <style> |
| | *{margin:0;padding:0;box-sizing:border-box} |
| | body{font-family:'Segoe UI',system-ui,sans-serif;background:linear-gradient(135deg,#0a0a0a,#1a1a2e);min-height:100vh;color:#fff;display:flex;flex-direction:column;align-items:center;padding:20px} |
| | h1{font-size:2rem;margin-bottom:5px;background:linear-gradient(90deg,#00d4ff,#7b2cbf);-webkit-background-clip:text;-webkit-text-fill-color:transparent} |
| | .subtitle{color:#666;font-size:.85rem;margin-bottom:20px} |
| | .game-wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:center} |
| | #canvas{background:#000;border-radius:8px;box-shadow:0 0 60px rgba(0,212,255,.3);border:2px solid #333} |
| | .panel{background:rgba(255,255,255,.03);border-radius:12px;padding:16px;width:320px;border:1px solid #222} |
| | .panel h3{font-size:.85rem;color:#00d4ff;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px} |
| | .score-board{display:flex;justify-content:space-around;margin-bottom:20px;background:#000;border-radius:8px;padding:15px} |
| | .score-item{text-align:center} |
| | .score-label{font-size:.7rem;color:#666;margin-bottom:5px} |
| | .score-value{font-size:2.5rem;font-weight:bold} |
| | .ai-score{color:#00d4ff} |
| | .human-score{color:#ff6b6b} |
| | .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:15px} |
| | .stat{background:#000;padding:12px;border-radius:6px;text-align:center} |
| | .stat-val{font-size:1.3rem;font-weight:bold;color:#0f0} |
| | .stat-label{font-size:.65rem;color:#555;margin-top:2px} |
| | .info-box{font-family:Consolas,monospace;font-size:.7rem;background:#000;padding:10px;border-radius:6px;max-height:100px;overflow-y:auto;margin-bottom:12px;border:1px solid #222;color:#0f0;word-break:break-all} |
| | .controls{margin-top:15px;display:flex;gap:10px} |
| | .btn{flex:1;padding:12px;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s} |
| | .btn-start{background:linear-gradient(90deg,#00d4ff,#7b2cbf);color:#fff} |
| | .btn-reset{background:#222;color:#888;border:1px solid #444} |
| | .btn:hover{transform:translateY(-2px)} |
| | .status{text-align:center;padding:8px;border-radius:4px;font-size:.8rem;margin-bottom:10px} |
| | .status.ok{background:rgba(0,255,0,.1);color:#0f0} |
| | .status.err{background:rgba(255,0,0,.1);color:#f44} |
| | .status.wait{background:rgba(255,255,0,.1);color:#ff0} |
| | .server-input{display:flex;gap:8px;margin-bottom:15px} |
| | .server-input input{flex:1;padding:8px;background:#111;border:1px solid #333;color:#fff;border-radius:4px;font-size:.75rem} |
| | .legend{font-size:.7rem;color:#444;text-align:center;margin-top:10px} |
| | .decision{background:#111;padding:8px;border-radius:4px;margin-bottom:10px;font-size:.8rem;border-left:3px solid #00d4ff} |
| | </style> |
| | </head> |
| | <body> |
| | <h1>🏓 SimpleTool Pong</h1> |
| | <p class="subtitle">Real-time AI vs Human • Multi-Head Parallel Decoding</p> |
| | <div class="game-wrap"> |
| | <div> |
| | <canvas id="canvas" width="600" height="400"></canvas> |
| | <p class="legend">⬆⬇ Arrow Keys or W/S to move your paddle (right side)</p> |
| | </div> |
| | <div class="panel"> |
| | <div class="score-board"> |
| | <div class="score-item"><div class="score-label">🤖 SimpleTool AI</div><div class="score-value ai-score" id="ai-score">0</div></div> |
| | <div class="score-item"><div class="score-label">👤 Human</div><div class="score-value human-score" id="human-score">0</div></div> |
| | </div> |
| | <div class="server-input"> |
| | <input id="server-url" value="http://localhost:8899" placeholder="SimpleTool Server URL"> |
| | <button class="btn btn-reset" onclick="checkServer()" style="flex:0;padding:8px 12px">Test</button> |
| | </div> |
| | <div class="status wait" id="status">⏳ Click START to begin</div> |
| | <div class="stats"> |
| | <div class="stat"><div class="stat-val" id="latency">--</div><div class="stat-label">Latency (ms)</div></div> |
| | <div class="stat"><div class="stat-val" id="fps">60</div><div class="stat-label">Game FPS</div></div> |
| | <div class="stat"><div class="stat-val" id="calls">0</div><div class="stat-label">API Calls</div></div> |
| | <div class="stat"><div class="stat-val" id="avg-lat">--</div><div class="stat-label">Avg Latency</div></div> |
| | </div> |
| | <h3>🎯 AI Decision</h3> |
| | <div class="decision" id="decision-box">Waiting...</div> |
| | <h3>📡 Environment</h3> |
| | <div class="info-box" id="env-box">Waiting...</div> |
| | <h3>📜 History (last 6)</h3> |
| | <div class="info-box" id="hist-box">[]</div> |
| | <h3>📤 Raw Response</h3> |
| | <div class="info-box" id="heads-box" style="max-height:120px">Waiting...</div> |
| | <div class="controls"> |
| | <button class="btn btn-start" id="start-btn">▶ START</button> |
| | <button class="btn btn-reset" id="reset-btn">↺ RESET</button> |
| | </div> |
| | </div> |
| | </div> |
| | <script> |
| | const $ = id => document.getElementById(id); |
| | const canvas = $('canvas'), ctx = canvas.getContext('2d'); |
| | const W = 600, H = 400; |
| | const log = (msg, type='info') => console.log(`[Pong][${type}] ${msg}`); |
| | |
| | let running = false, aiScore = 0, humanScore = 0; |
| | let ball = {x: W/2, y: H/2, vx: 5, vy: 3, r: 8}; |
| | let aiPaddle = {x: 20, y: H/2, w: 10, h: 70, speed: 6}; |
| | let humanPaddle = {x: W-30, y: H/2, w: 10, h: 70, speed: 8}; |
| | let keys = {up: false, down: false}; |
| | let history = [], apiCalls = 0, totalLatency = 0, latencies = []; |
| | let lastAiMove = 'stay', aiPending = false, aiInterval = null; |
| | |
| | const TOOLS = [{ |
| | type: "function", |
| | function: { |
| | name: "move", |
| | description: "Move paddle vertically to intercept ball", |
| | parameters: { |
| | type: "object", |
| | properties: { |
| | direction: {type: "string", enum: ["up", "down", "stay"], description: "up=decrease Y, down=increase Y, stay=hold position"} |
| | }, |
| | required: ["direction"] |
| | } |
| | } |
| | }]; |
| | |
| | document.addEventListener('keydown', e => { |
| | if (e.key === 'ArrowUp' || e.key === 'w' || e.key === 'W') keys.up = true; |
| | if (e.key === 'ArrowDown' || e.key === 's' || e.key === 'S') keys.down = true; |
| | }); |
| | document.addEventListener('keyup', e => { |
| | if (e.key === 'ArrowUp' || e.key === 'w' || e.key === 'W') keys.up = false; |
| | if (e.key === 'ArrowDown' || e.key === 's' || e.key === 'S') keys.down = false; |
| | }); |
| | |
| | function buildEnv() { |
| | const ballY = Math.round(ball.y), paddleY = Math.round(aiPaddle.y); |
| | const diff = ballY - paddleY; |
| | return [ |
| | `ball_y=${ballY}`, |
| | `paddle_y=${paddleY}`, |
| | `diff=${diff}`, |
| | `ball_moving_${ball.vx < 0 ? 'towards' : 'away'}`, |
| | `ball_vy=${ball.vy > 0 ? 'down' : 'up'}` |
| | ]; |
| | } |
| | |
| | function buildQuery() { |
| | const ballY = Math.round(ball.y), paddleY = Math.round(aiPaddle.y); |
| | const diff = ballY - paddleY; |
| | const approaching = ball.vx < 0; |
| | let instruction; |
| | if (!approaching) { |
| | instruction = 'Ball moving away. Stay or prepare.'; |
| | } else if (diff > 20) { |
| | instruction = `Ball is ${diff}px BELOW paddle. Move DOWN.`; |
| | } else if (diff < -20) { |
| | instruction = `Ball is ${-diff}px ABOVE paddle. Move UP.`; |
| | } else { |
| | instruction = 'Ball aligned. STAY.'; |
| | } |
| | return `Pong AI. ${instruction} Choose: up/down/stay`; |
| | } |
| | |
| | function updateUI() { |
| | $('env-box').textContent = buildEnv().join(' | '); |
| | $('hist-box').textContent = `[${history.slice(-6).join(', ')}]`; |
| | } |
| | |
| | async function checkServer() { |
| | const url = $('server-url').value.replace(/\/$/, ''); |
| | try { |
| | const r = await fetch(`${url}/health`, {signal: AbortSignal.timeout(3000)}); |
| | const d = await r.json(); |
| | if (d.loaded || d.status === 'ok') { |
| | $('status').className = 'status ok'; |
| | $('status').textContent = '🟢 Connected'; |
| | log('Server connected', 'success'); |
| | return true; |
| | } |
| | } catch(e) { log(`Connection failed: ${e.message}`, 'error'); } |
| | $('status').className = 'status err'; |
| | $('status').textContent = '🔴 Connection failed'; |
| | return false; |
| | } |
| | |
| | async function callAI() { |
| | if (aiPending || !running) return; |
| | aiPending = true; |
| | const url = $('server-url').value.replace(/\/$/, ''); |
| | const env = buildEnv(), query = buildQuery(); |
| | log(`Query: ${query}`); |
| | try { |
| | const t0 = performance.now(); |
| | const r = await fetch(`${url}/v1/function_call`, { |
| | method: 'POST', |
| | headers: {'Content-Type': 'application/json'}, |
| | body: JSON.stringify({ |
| | messages: [{role: 'user', content: query}], |
| | tools: TOOLS, |
| | environment: env, |
| | history: history.slice(-6) |
| | }) |
| | }); |
| | const d = await r.json(); |
| | const lat = performance.now() - t0; |
| | apiCalls++; totalLatency += lat; latencies.push(lat); |
| | if (latencies.length > 50) latencies.shift(); |
| | $('latency').textContent = lat.toFixed(0); |
| | $('calls').textContent = apiCalls; |
| | $('avg-lat').textContent = (totalLatency/apiCalls).toFixed(0); |
| | $('status').className = 'status ok'; |
| | $('status').textContent = '🟢 Active'; |
| | |
| | |
| | $('heads-box').innerHTML = `function: ${d.function || '-'}<br>args: ${JSON.stringify(d.args)}<br>heads: ${JSON.stringify(d.heads)}`; |
| | |
| | |
| | let direction = 'stay'; |
| | if (d.success && d.args && d.args.direction !== undefined) { |
| | direction = String(d.args.direction).toLowerCase().trim(); |
| | } else if (d.heads && d.heads.arg1) { |
| | direction = String(d.heads.arg1).toLowerCase().trim(); |
| | } |
| | if (!['up', 'down', 'stay'].includes(direction)) { |
| | log(`Invalid direction "${direction}", fallback to stay`, 'warn'); |
| | direction = 'stay'; |
| | } |
| | lastAiMove = direction; |
| | history.push(direction); |
| | if (history.length > 20) history.shift(); |
| | const emoji = direction === 'up' ? '⬆️' : direction === 'down' ? '⬇️' : '⏸️'; |
| | $('decision-box').innerHTML = `${emoji} <strong>${direction.toUpperCase()}</strong> (${lat.toFixed(0)}ms)`; |
| | log(`Decision: ${direction} in ${lat.toFixed(0)}ms`, 'success'); |
| | } catch(e) { |
| | log(`API Error: ${e.message}`, 'error'); |
| | $('status').className = 'status err'; |
| | $('status').textContent = '🔴 Error - Fallback'; |
| | |
| | if (ball.vx < 0) { |
| | const diff = ball.y - aiPaddle.y; |
| | lastAiMove = diff > 15 ? 'down' : diff < -15 ? 'up' : 'stay'; |
| | } else lastAiMove = 'stay'; |
| | history.push(`fb:${lastAiMove}`); |
| | } |
| | aiPending = false; |
| | } |
| | |
| | function applyAI() { |
| | if (lastAiMove === 'up') aiPaddle.y -= aiPaddle.speed; |
| | else if (lastAiMove === 'down') aiPaddle.y += aiPaddle.speed; |
| | aiPaddle.y = Math.max(aiPaddle.h/2, Math.min(H - aiPaddle.h/2, aiPaddle.y)); |
| | } |
| | |
| | function update() { |
| | if (keys.up) humanPaddle.y -= humanPaddle.speed; |
| | if (keys.down) humanPaddle.y += humanPaddle.speed; |
| | humanPaddle.y = Math.max(humanPaddle.h/2, Math.min(H - humanPaddle.h/2, humanPaddle.y)); |
| | applyAI(); |
| | ball.x += ball.vx; ball.y += ball.vy; |
| | if (ball.y - ball.r < 0 || ball.y + ball.r > H) { |
| | ball.vy *= -1; |
| | ball.y = ball.y < ball.r ? ball.r : H - ball.r; |
| | } |
| | if (ball.x - ball.r < aiPaddle.x + aiPaddle.w && ball.y > aiPaddle.y - aiPaddle.h/2 && ball.y < aiPaddle.y + aiPaddle.h/2 && ball.vx < 0) { |
| | ball.vx = Math.abs(ball.vx) * 1.05; |
| | ball.vy += (ball.y - aiPaddle.y) * 0.1; |
| | ball.x = aiPaddle.x + aiPaddle.w + ball.r; |
| | } |
| | if (ball.x + ball.r > humanPaddle.x && ball.y > humanPaddle.y - humanPaddle.h/2 && ball.y < humanPaddle.y + humanPaddle.h/2 && ball.vx > 0) { |
| | ball.vx = -Math.abs(ball.vx) * 1.05; |
| | ball.vy += (ball.y - humanPaddle.y) * 0.1; |
| | ball.x = humanPaddle.x - ball.r; |
| | } |
| | ball.vx = Math.max(-12, Math.min(12, ball.vx)); |
| | ball.vy = Math.max(-8, Math.min(8, ball.vy)); |
| | if (ball.x < 0) { humanScore++; $('human-score').textContent = humanScore; resetBall(1); } |
| | if (ball.x > W) { aiScore++; $('ai-score').textContent = aiScore; resetBall(-1); } |
| | updateUI(); |
| | } |
| | |
| | function resetBall(dir) { |
| | ball.x = W/2; ball.y = H/2; |
| | ball.vx = 5 * dir; |
| | ball.vy = (Math.random() - 0.5) * 6; |
| | } |
| | |
| | function draw() { |
| | ctx.fillStyle = '#000'; ctx.fillRect(0, 0, W, H); |
| | ctx.setLineDash([10, 10]); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; |
| | ctx.beginPath(); ctx.moveTo(W/2, 0); ctx.lineTo(W/2, H); ctx.stroke(); ctx.setLineDash([]); |
| | ctx.fillStyle = '#00d4ff'; ctx.shadowColor = '#00d4ff'; ctx.shadowBlur = 20; |
| | ctx.fillRect(aiPaddle.x, aiPaddle.y - aiPaddle.h/2, aiPaddle.w, aiPaddle.h); |
| | ctx.fillStyle = '#ff6b6b'; ctx.shadowColor = '#ff6b6b'; |
| | ctx.fillRect(humanPaddle.x, humanPaddle.y - humanPaddle.h/2, humanPaddle.w, humanPaddle.h); |
| | ctx.fillStyle = '#fff'; ctx.shadowColor = '#fff'; ctx.shadowBlur = 15; |
| | ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2); ctx.fill(); |
| | ctx.shadowBlur = 0; |
| | ctx.font = '14px monospace'; ctx.fillStyle = '#00d4ff'; ctx.fillText('AI', 50, 30); |
| | ctx.fillStyle = '#ff6b6b'; ctx.fillText('YOU', W - 70, 30); |
| | const arrow = lastAiMove === 'up' ? '↑' : lastAiMove === 'down' ? '↓' : '•'; |
| | ctx.fillStyle = '#00d4ff'; ctx.font = '12px monospace'; ctx.fillText(arrow, aiPaddle.x + 25, aiPaddle.y + 4); |
| | } |
| | |
| | function gameLoop() { |
| | if (!running) return; |
| | update(); draw(); |
| | requestAnimationFrame(gameLoop); |
| | } |
| | |
| | $('start-btn').onclick = async () => { |
| | if (!running) { |
| | await checkServer(); |
| | running = true; |
| | $('start-btn').textContent = '⏸ PAUSE'; |
| | log('Game started'); |
| | gameLoop(); |
| | aiInterval = setInterval(callAI, 100); |
| | } else { |
| | running = false; |
| | $('start-btn').textContent = '▶ START'; |
| | clearInterval(aiInterval); |
| | log('Game paused'); |
| | } |
| | }; |
| | |
| | $('reset-btn').onclick = () => { |
| | running = false; clearInterval(aiInterval); |
| | aiScore = humanScore = apiCalls = totalLatency = 0; |
| | history = []; latencies = []; lastAiMove = 'stay'; |
| | $('ai-score').textContent = '0'; $('human-score').textContent = '0'; |
| | $('latency').textContent = '--'; $('calls').textContent = '0'; $('avg-lat').textContent = '--'; |
| | $('decision-box').textContent = 'Waiting...'; $('start-btn').textContent = '▶ START'; |
| | resetBall(Math.random() > 0.5 ? 1 : -1); |
| | aiPaddle.y = humanPaddle.y = H/2; |
| | draw(); log('Game reset'); |
| | }; |
| | |
| | draw(); checkServer(); |
| | </script> |
| | </body> |
| | </html> |
