Spaces:

Percy3822
/

Brain

Paused

App Files Files Community

Percy3822 commited on Sep 2, 2025

Commit

426b3f8

verified ·

1 Parent(s): d52b394

Update static/ui.html

Browse files

Files changed (1) hide show

static/ui.html +25 -149

static/ui.html CHANGED Viewed

@@ -5,168 +5,44 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Brain Console</title>
 <style>
-  :root{--bg:#0b1020;--panel:#121a2e;--muted:#7280a7;--acc:#7aa2ff;--good:#2ecc71;--bad:#ff6b6b}
-  *{box-sizing:border-box} body{margin:0;background:var(--bg);color:#e9eefc;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
-  header{padding:16px 20px;background:linear-gradient(90deg,#0e1630,#0d1a3a)}
-  h1{margin:0;font-size:18px;letter-spacing:.3px}
   main{display:grid;gap:16px;padding:16px}
-  .grid{display:grid;gap:16px}
-  @media (min-width:900px){.grid{grid-template-columns:1.2fr .8fr}}
-  .card{background:var(--panel);border:1px solid #1b2544;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.2)}
-  .card h2{margin:0;padding:12px 14px;border-bottom:1px solid #1b2544;font-size:14px;color:#cbd7ff}
-  .card .body{padding:12px 14px}
-  .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
-  button{background:#1a2750;color:#dfe8ff;border:1px solid #27407d;border-radius:10px;padding:8px 12px;cursor:pointer}
-  button:hover{background:#213062}
-  .pill{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid #2b3e7a;color:#cdd8ff}
-  .pill.good{border-color:var(--good);color:#b8ffd3}
-  .pill.bad{border-color:var(--bad);color:#ffd6d6}
-  textarea{width:100%;background:#0d142a;color:#e9eefc;border:1px solid #22315e;border-radius:10px;padding:10px;min-height:180px;font-family:ui-monospace,monospace}
-  pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,monospace;font-size:12px;color:#d9e6ff}
-  .small{font-size:12px;color:var(--muted)}
-  .sep{height:1px;background:#1b2544;margin:10px 0}
-  audio{width:100%}
-  .right{display:flex;gap:8px;justify-content:flex-end}
 </style>
 </head>
 <body>
 <header><h1>🧠 Brain Console</h1></header>
-<main class="grid">
   <section class="card">
-    <h2>Quick Actions</h2>
-    <div class="body">
-      <div class="row">
-        <button id="btnHealth">GET /health</button>
-        <button id="btnWarmup">POST /warmup</button>
-        <button id="btnSend">POST /code_help</button>
-        <span id="depPy" class="pill">python_ai: —</span>
-        <span id="depTts" class="pill">tts: —</span>
-        <span id="depStt" class="pill">stt: —</span>
-        <span id="depVis" class="pill">vision: —</span>
-        <span id="depMem" class="pill">memory: —</span>
-      </div>
-      <div class="sep"></div>
-      <div class="row">
-        <button id="btnLoadSample">Load Sample Body</button>
-        <button id="btnMinify">Minify JSON</button>
-        <button id="btnPretty">Pretty JSON</button>
-      </div>
-    </div>
   </section>
   <section class="card">
-    <h2>Request Body (for POST /code_help)</h2>
-    <div class="body">
-      <textarea id="reqBody" spellcheck="false"></textarea>
-      <div class="row right">
-        <span class="small">Tip: update file/lang/viewport/diag. Fix any __ if WhatsApp changed them.</span>
-      </div>
-    </div>
   </section>
   <section class="card">
-    <h2>Response</h2>
-    <div class="body">
-      <pre id="resp">(responses will appear here)</pre>
-      <div class="sep"></div>
-      <div id="audioWrap" style="display:none">
-        <div class="small">TTS (if provided):</div>
-        <audio id="ttsAudio" controls></audio>
-      </div>
-    </div>
-  </section>
-  <section class="card">
-    <h2>Patch Preview</h2>
-    <div class="body">
-      <pre id="patchPre">(unified diff will appear here)</pre>
-    </div>
   </section>
 </main>
 <script>
-const $ = (id)=>document.getElementById(id);
-const originBase = window.location.origin;
-function setDeps(json){
-  const deps = (json && json.deps) || {};
-  const set = (el, ok) => {
-    el.textContent = el.textContent.split(':')[0] + ': ' + (ok ? 'true' : 'false');
-    el.classList.remove('good','bad');
-    el.classList.add(ok ? 'good' : 'bad');
-  };
-  set($('depPy'), !!deps.python_ai);
-  set($('depTts'), !!deps.tts);
-  set($('depStt'), !!deps.stt);
-  set($('depVis'), !!deps.vision);
-  set($('depMem'), !!deps.memory);
-}
-async function getHealth(){
-  const r = await fetch(originBase + '/health');
-  const j = await r.json();
-  $('resp').textContent = JSON.stringify(j,null,2);
-  setDeps(j);
-}
-async function postWarmup(){
-  const r = await fetch(originBase + '/warmup',{method:'POST'});
-  const j = await r.json();
-  $('resp').textContent = JSON.stringify(j,null,2);
-}
-function loadSample(){
-  const sample = {
-    utterance: "please fix the error and make it run",
-    telemetry: {
-      file: "main.py",
-      lang: "python",
-      cursor: { l: 88, c: 12 },
-      viewport: {
-        start: 72,
-        end: 110,
-        text: "def foo():\n    return bar\n\nresult = foo()\nprint(reslt)\n"
-      },
-      diag: [{ l: 90, sev: "error", msg: "NameError: reslt is not defined" }],
-      term: "Traceback... NameError: reslt"
-    },
-    memory: { short: [], sess: ["Prefer list comprehensions."], proj: [] },
-    response_mode: "patch"
-  };
-  $('reqBody').value = JSON.stringify(sample,null,2);
-}
-function minify(){
-  try{ const j=JSON.parse($('reqBody').value); $('reqBody').value=JSON.stringify(j); }
-  catch(e){ alert('Invalid JSON'); }
-}
-function pretty(){
-  try{ const j=JSON.parse($('reqBody').value); $('reqBody').value=JSON.stringify(j,null,2); }
-  catch(e){ alert('Invalid JSON'); }
-}
-async function sendCodeHelp(){
-  let body;
-  try{ body = JSON.parse($('reqBody').value); }
-  catch(e){ alert('Invalid JSON'); return; }
-  const r = await fetch(originBase + '/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);
-  const patch = (j.ai && j.ai.patch) ? j.ai.patch : '(no patch)';
-  $('patchPre').textContent = patch;
-  if (j.tts_audio_url){ $('audioWrap').style.display=''; $('ttsAudio').src=j.tts_audio_url; }
-  else { $('audioWrap').style.display='none'; $('ttsAudio').removeAttribute('src'); }
-}
-$('btnHealth').onclick=getHealth;
-$('btnWarmup').onclick=postWarmup;
-$('btnSend').onclick=sendCodeHelp;
-$('btnLoadSample').onclick=loadSample;
-$('btnMinify').onclick=minify;
-$('btnPretty').onclick=pretty;
-loadSample();
-getHealth();
 </script>
 </body>
 </html>

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