| | <!doctype html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="utf-8" /> |
| | <title>QA GPT2 Interface</title> |
| | <style> |
| | body { font-family: Arial, sans-serif; margin: 30px; } |
| | .container { max-width: 600px; margin: auto; } |
| | input, button { width: 100%; padding: 10px; margin-top: 10px; } |
| | pre { background: #f4f4f4; padding: 10px; border-radius: 5px; } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <h2>Ask GPT2</h2> |
| | <input id="question" placeholder="Type your question..." /> |
| | <input id="tokens" type="number" value="50" min="1" max="200" /> |
| | <button id="askBtn">Ask</button> |
| |
|
| | <h3>Response:</h3> |
| | <pre id="response">No answer yet.</pre> |
| | </div> |
| |
|
| | <script> |
| | document.getElementById("askBtn").addEventListener("click", async () => { |
| | const q = document.getElementById("question").value; |
| | const max = document.getElementById("tokens").value; |
| | |
| | document.getElementById("response").textContent = "Loading..."; |
| | |
| | try { |
| | const resp = await fetch(`/answers?question=${encodeURIComponent(q)}&max_new_tokens=${max}`); |
| | const data = await resp.json(); |
| | document.getElementById("response").textContent = JSON.stringify(data, null, 2); |
| | } catch (err) { |
| | document.getElementById("response").textContent = "Error: " + err; |
| | } |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
