| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>HubRAG</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| max-width: 800px; | |
| margin: 40px auto; | |
| } | |
| textarea { | |
| width: 100%; | |
| padding: 10px; | |
| } | |
| button { | |
| margin-top: 10px; | |
| padding: 8px 16px; | |
| } | |
| pre { | |
| background: #f5f5f5; | |
| padding: 10px; | |
| white-space: pre-wrap; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>📄 HubRAG (HF Space)</h2> | |
| <textarea id="q" rows="4" placeholder="Ask a question about the documents..."></textarea> | |
| <br/> | |
| <button onclick="ask()">Ask</button> | |
| <h3>Status</h3> | |
| <ul id="status"></ul> | |
| <h3>Answer</h3> | |
| <pre id="answer"></pre> | |
| <script> | |
| async function ask() { | |
| const q = document.getElementById("q").value; | |
| document.getElementById("answer").textContent = "Thinking..."; | |
| document.getElementById("status").innerHTML = ""; | |
| const res = await fetch("/chat", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ question: q }) | |
| }); | |
| const data = await res.json(); | |
| document.getElementById("answer").textContent = | |
| data.answer || "No answer"; | |
| (data.status || []).forEach(s => { | |
| const li = document.createElement("li"); | |
| li.textContent = s; | |
| document.getElementById("status").appendChild(li); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |