| |
| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <title>Minimal Chat Tester</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <style> |
| body { font-family: system-ui, Arial, sans-serif; margin: 24px; } |
| .row { display:flex; gap:8px; align-items:center; margin-bottom:8px; } |
| input[type=text]{ width:420px; padding:8px; } |
| textarea{ width:100%; height:240px; padding:8px; } |
| button{ padding:8px 12px; } |
| .ok{ color:#1a7f37; } |
| .warn{ color:#b54708; } |
| .err{ color:#b42318; } |
| </style> |
| </head> |
| <body> |
| <h2>Minimal Chat Tester → FastAPI /chatbot/message</h2> |
|
|
| <div class="row"> |
| <label>Backend URL:</label> |
| <input id="base" type="text" value="http://127.0.0.1:8000" /> |
| <button id="btnHealth">Health</button> |
| <button id="btnCaps">Capabilities</button> |
| </div> |
|
|
| <div class="row"> |
| <input id="msg" type="text" placeholder="Type a message…" /> |
| <button id="btnSend">Send</button> |
| </div> |
|
|
| <p id="status"></p> |
| <textarea id="log" readonly></textarea> |
|
|
| <script> |
| const $ = id => document.getElementById(id); |
| const log = (o, cls="") => { |
| const line = (typeof o === "string") ? o : JSON.stringify(o, null, 2); |
| $("log").value += line + "\n"; |
| $("log").scrollTop = $("log").scrollHeight; |
| if(cls) { $("status").className = cls; $("status").textContent = line; } |
| }; |
| |
| function urlJoin(base, path) { |
| return base.replace(/\/+$/,"") + path; |
| } |
| |
| async function health() { |
| try { |
| const r = await fetch(urlJoin($("base").value, "/health")); |
| const j = await r.json(); |
| log(j, "ok"); |
| } catch (e) { log("Health error: " + e, "err"); } |
| } |
| |
| async function caps() { |
| try { |
| |
| const r = await fetch(urlJoin($("base").value, "/openapi.json")); |
| const j = await r.json(); |
| log({paths: Object.keys(j.paths).slice(0,20)}, "ok"); |
| } catch (e) { log("Caps error: " + e, "err"); } |
| } |
| |
| async function sendMsg() { |
| const text = $("msg").value.trim(); |
| if(!text) { log("Please type a message.", "warn"); return; } |
| try { |
| const r = await fetch(urlJoin($("base").value, "/chatbot/message"), { |
| method:"POST", |
| headers:{ "Content-Type":"application/json" }, |
| body: JSON.stringify({ message: text }) |
| }); |
| if(!r.ok) throw new Error(`${r.status} ${r.statusText}`); |
| const j = await r.json(); |
| log(j, "ok"); |
| } catch (e) { log("Send error: " + e, "err"); } |
| } |
| |
| $("btnHealth").onclick = health; |
| $("btnCaps").onclick = caps; |
| $("btnSend").onclick = sendMsg; |
| |
| |
| health(); |
| </script> |
| </body> |
| </html> |
|
|
