| <!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> |
