| | <!doctype html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="utf-8"/> |
| | <title>Brain UI – Test Panel</title> |
| | <meta name="viewport" content="width=device-width, initial-scale=1"/> |
| | <style> |
| | body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:#0b0f19;color:#e5e7eb} |
| | header{padding:16px 20px;background:#111827;position:sticky;top:0} |
| | h1{margin:0;font-size:18px} |
| | main{padding:20px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} |
| | section{background:#111827;border:1px solid #1f2937;border-radius:12px;padding:16px} |
| | h2{margin:0 0 12px 0;font-size:16px} |
| | label{display:block;margin:8px 0 4px 0} |
| | input[type="text"],textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #374151;background:#0b1220;color:#e5e7eb} |
| | input[type="file"]{margin:8px 0 12px 0} |
| | button{background:#2563eb;border:none;color:white;padding:10px 14px;border-radius:8px;cursor:pointer} |
| | button:disabled{opacity:0.6;cursor:not-allowed} |
| | .row{display:flex;gap:8px;flex-wrap:wrap} |
| | pre{white-space:pre-wrap;background:#0b1220;border:1px solid #1f2937;color:#cbd5e1;border-radius:8px;padding:10px;max-height:220px;overflow:auto} |
| | audio{width:100%;margin-top:8px} |
| | small{opacity:.7} |
| | </style> |
| | </head> |
| | <body> |
| | <header><h1>Brain UI · TTS · STT · Code Help · Memory</h1></header> |
| | <main> |
| |
|
| | <section id="warmup"> |
| | <h2>Warmup / Health</h2> |
| | <div class="row"> |
| | <button onclick="doHealth()">GET /health</button> |
| | <button onclick="doWarmup()">POST /warmup</button> |
| | </div> |
| | <pre id="healthOut"></pre> |
| | </section> |
| |
|
| | <section id="tts"> |
| | <h2>TTS</h2> |
| | <label>Text</label> |
| | <textarea id="ttsText" rows="3">Hello from Brain through ActualTTS.</textarea> |
| | <div class="row"><button id="ttsBtn" onclick="doTTS()">POST /speak</button></div> |
| | <audio id="ttsAudio" controls></audio> |
| | <pre id="ttsOut"></pre> |
| | </section> |
| |
|
| | <section id="stt"> |
| | <h2>STT</h2> |
| | <label>Audio file (.wav recommended)</label> |
| | <input type="file" id="sttFile" accept="audio/*"/> |
| | <div class="row"><button id="sttBtn" onclick="doSTT()">POST /transcribe</button></div> |
| | <pre id="sttOut"></pre> |
| | </section> |
| |
|
| | <section id="codehelp"> |
| | <h2>Code Help</h2> |
| | <label>Viewport text</label> |
| | <textarea id="vp" rows="4">def foo(): return 1 print(reslt)</textarea> |
| | <div class="row"><button id="codeBtn" onclick="doCodeHelp()">POST /code_help</button></div> |
| | <pre id="codeOut"></pre> |
| | </section> |
| |
|
| | <section id="memory"> |
| | <h2>Memory</h2> |
| | <label>Item</label> |
| | <input type="text" id="memItem" placeholder="Something to remember"/> |
| | <div class="row"> |
| | <button onclick="saveMem('short')">Save to short</button> |
| | <button onclick="saveMem('sess')">Save to sess</button> |
| | <button onclick="saveMem('proj')">Save to proj</button> |
| | <button onclick="clearMem('')">Clear ALL</button> |
| | </div> |
| | <div class="row"> |
| | <button onclick="clearMem('short')">Clear short</button> |
| | <button onclick="clearMem('sess')">Clear sess</button> |
| | <button onclick="clearMem('proj')">Clear proj</button> |
| | <button onclick="loadMem()">GET /memory</button> |
| | </div> |
| | <pre id="memOut"></pre> |
| | </section> |
| |
|
| | </main> |
| | <script> |
| | async function doHealth(){ |
| | const r = await fetch('/health'); const j = await r.json(); |
| | document.getElementById('healthOut').textContent = JSON.stringify(j,null,2); |
| | } |
| | async function doWarmup(){ |
| | const r = await fetch('/warmup',{method:'POST'}); const j = await r.json(); |
| | document.getElementById('healthOut').textContent = JSON.stringify(j,null,2); |
| | } |
| | async function doTTS(){ |
| | const btn = document.getElementById('ttsBtn'); btn.disabled=true; |
| | try{ |
| | const text = document.getElementById('ttsText').value; |
| | const r = await fetch('/speak',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({text})}); |
| | const j = await r.json(); |
| | document.getElementById('ttsOut').textContent = JSON.stringify(j,null,2); |
| | if(j.ok && j.audio_url){ |
| | const a = document.getElementById('ttsAudio'); a.src = j.audio_url; a.play().catch(()=>{}); |
| | } |
| | }finally{btn.disabled=false} |
| | } |
| | async function doSTT(){ |
| | const btn = document.getElementById('sttBtn'); btn.disabled=true; |
| | try{ |
| | const f = document.getElementById('sttFile').files[0]; |
| | if(!f){ alert('Pick an audio file'); return; } |
| | const fd = new FormData(); fd.append('file', f, f.name); |
| | const r = await fetch('/transcribe',{method:'POST', body: fd}); |
| | const j = await r.json(); |
| | document.getElementById('sttOut').textContent = JSON.stringify(j,null,2); |
| | }finally{btn.disabled=false} |
| | } |
| | async function doCodeHelp(){ |
| | const btn = document.getElementById('codeBtn'); btn.disabled=true; |
| | try{ |
| | const viewportText = document.getElementById('vp').value; |
| | const payload = { |
| | utterance: "please fix the error and make it run", |
| | telemetry: { |
| | file: "main.py", |
| | lang: "python", |
| | cursor: {l: 1, c: 1}, |
| | viewport: {start: 1, end: viewportText.split('\n').length, text: viewportText}, |
| | diag: [], |
| | term: "" |
| | }, |
| | memory: {short:[], sess:[], proj:[]}, |
| | response_mode: "patch" |
| | }; |
| | const r = await fetch('/code_help',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)}); |
| | const j = await r.json(); |
| | document.getElementById('codeOut').textContent = JSON.stringify(j,null,2); |
| | }finally{btn.disabled=false} |
| | } |
| | async function loadMem(){ |
| | const r = await fetch('/memory'); const j = await r.json(); |
| | document.getElementById('memOut').textContent = JSON.stringify(j,null,2); |
| | } |
| | async function saveMem(bucket){ |
| | const item = document.getElementById('memItem').value; |
| | const r = await fetch('/memory/save',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({bucket, item})}); |
| | const j = await r.json(); |
| | document.getElementById('memOut').textContent = JSON.stringify(j,null,2); |
| | } |
| | async function clearMem(bucket){ |
| | const r = await fetch('/memory/clear',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({bucket})}); |
| | const j = await r.json(); |
| | document.getElementById('memOut').textContent = JSON.stringify(j,null,2); |
| | } |
| | </script> |
| | </body> |
| | </html> |
