Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Question-Answering Bot</title> | |
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> | |
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/qna"></script> | |
</head> | |
<body> | |
<h1>Question-Answering Bot</h1> | |
<p>Enter the context text and ask a question about it.</p> | |
<textarea id="context" rows="10" cols="50" placeholder="Enter context here"></textarea><br><br> | |
<input type="text" id="question" placeholder="Enter your question"><br><br> | |
<button onclick="getAnswer()">Get Answer</button> | |
<div id="result"></div> | |
<script> | |
let model; | |
// Load the QnA model | |
qna.load().then((loadedModel) => { | |
model = loadedModel; | |
console.log('Model loaded'); | |
}); | |
async function getAnswer() { | |
const context = document.getElementById('context').value; | |
const question = document.getElementById('question').value; | |
const resultDiv = document.getElementById('result'); | |
if (context && question) { | |
if (!model) { | |
resultDiv.innerHTML = "Model is still loading. Please wait and try again."; | |
return; | |
} | |
const answers = await model.findAnswers(question, context); | |
if (answers.length > 0) { | |
resultDiv.innerHTML = ` | |
<p><strong>Question:</strong> ${question}</p> | |
<p><strong>Answer:</strong> ${answers[0].text}</p> | |
`; | |
} else { | |
resultDiv.innerHTML = "No answer found."; | |
} | |
} else { | |
resultDiv.innerHTML = "Please enter both the context and the question."; | |
} | |
} | |
</script> | |
</body> | |
</html> |