Spaces:

Percy3822
/

Brain

Paused

App Files Files Community

Percy3822 commited on Sep 2, 2025

Commit

d1d7385

verified ·

1 Parent(s): dd69c3f

Update static/ui.html

Browse files

Files changed (1) hide show

static/ui.html +141 -35

static/ui.html CHANGED Viewed

@@ -1,48 +1,154 @@
 <!doctype html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Brain Console</title>
-<style>
-  body{margin:0;background:#0b1020;color:#e9eefc;font-family:sans-serif}
-  header{padding:16px;background:#121a2e}
-  h1{margin:0;font-size:18px}
-  main{display:grid;gap:16px;padding:16px}
-  .card{background:#121a2e;border:1px solid #1b2544;border-radius:10px;padding:12px}
-  button{background:#1a2750;color:#fff;border:none;border-radius:6px;padding:8px 12px;cursor:pointer}
-  textarea{width:100%;height:120px;background:#0d142a;color:#fff;border-radius:6px;padding:8px}
-  pre{white-space:pre-wrap;background:#0d142a;padding:8px;border-radius:6px}
-</style>
 </head>
 <body>
-<header><h1>🧠 Brain Console</h1></header>
 <main>
-  <section class="card">
     <button onclick="doHealth()">GET /health</button>
     <button onclick="doWarmup()">POST /warmup</button>
-    <button onclick="doCodeHelp()">POST /code_help</button>
-    <button onclick="doTTS()">POST /tts_speak</button>
-    <button onclick="doSTT()">POST /stt_transcribe</button>
-  </section>
-  <section class="card">
-    <h3>Request Body</h3>
-    <textarea id="req"></textarea>
-    <button onclick="loadSample()">Load Sample JSON</button>
-  </section>
-  <section class="card">
-    <h3>Response</h3>
-    <pre id="resp"></pre>
-    <audio id="aud" controls style="display:none"></audio>
-  </section>
 </main>
 <script>
-async function doHealth(){const r=await fetch("/health");resp.textContent=JSON.stringify(await r.json(),null,2);}
-async function doWarmup(){const r=await fetch("/warmup",{method:"POST"});resp.textContent=JSON.stringify(await r.json(),null,2);}
-async function doCodeHelp(){try{const body=JSON.parse(req.value);const r=await fetch("/code_help",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(body)});const j=await r.json();resp.textContent=JSON.stringify(j,null,2);if(j.tts_audio_url){aud.src=j.tts_audio_url;aud.style.display="";}}catch(e){alert("Bad JSON");}}
-async function doTTS(){const body={text:"Hello from Brain"};const r=await fetch("/tts_speak",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(body)});const j=await r.json();resp.textContent=JSON.stringify(j,null,2);if(j.tts_audio_url){aud.src=j.tts_audio_url;aud.style.display="";}}
-async function doSTT(){alert("Use curl: curl -X POST -F file=@sample.wav "+window.location.origin+"/stt_transcribe");}
-function loadSample(){req.value=JSON.stringify({utterance:"please fix",telemetry:{file:"main.py",lang:"python",cursor:{l:1,c:1},viewport:{start:1,end:3,text:"print(reslt)"},diag:[{l:1,sev:"error",msg:"NameError"}],term:"Traceback"},memory:{short:[],sess:[],proj:[]},response_mode:"patch"},null,2);}
 </script>
 </body>
 </html>

 <!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():&#10;    return 1&#10;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>