Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>QA GPT2 Interface</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; margin: 30px; background: #f9f9f9; } | |
| .container { max-width: 600px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } | |
| input, button { width: 100%; padding: 10px; margin-top: 10px; border-radius: 5px; border: 1px solid #ccc; font-size: 16px; } | |
| button { background-color: #007bff; color: white; border: none; cursor: pointer; } | |
| button:hover { background-color: #0056b3; } | |
| .card { background: #f4f4f4; padding: 15px; border-radius: 5px; margin-top: 15px; white-space: pre-wrap; } | |
| h2, h3 { text-align: center; } | |
| </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" placeholder="Max tokens" /> | |
| <button id="askBtn">Ask</button> | |
| <div id="responseContainer"> | |
| <h3>Response:</h3> | |
| <div id="response" class="card">No answer yet.</div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById("askBtn").addEventListener("click", async () => { | |
| const question = document.getElementById("question").value.trim(); | |
| const maxTokens = document.getElementById("tokens").value; | |
| const responseEl = document.getElementById("response"); | |
| if (!question) { | |
| responseEl.textContent = "Please enter a question."; | |
| return; | |
| } | |
| responseEl.textContent = "Loading..."; | |
| try { | |
| const resp = await fetch(`/answers?question=${encodeURIComponent(question)}&max_new_tokens=${maxTokens}`); | |
| const data = await resp.json(); | |
| // Structured display | |
| responseEl.innerHTML = ` | |
| <strong>Question:</strong> ${data.question}<br/><br/> | |
| <strong>Answer:</strong><br/>${data.answer.replace(/\n/g, "<br/>")} | |
| `; | |
| } catch (err) { | |
| responseEl.textContent = "Error: " + err; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |