|
|
<!doctype html> |
|
|
<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(); |
|
|
|
|
|
|
|
|
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> |
|
|
|
