File size: 2,048 Bytes
d7327c4 fce0fda 34b3c02 fce0fda |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0';
// Since we will download the model from the Hugging Face Hub, we can skip the local model check
env.allowLocalModels = false;
const answerer = await pipeline('question-answering', 'Xenova/distilbert-base-uncased-distilled-squad');
var chatBox = document.getElementById("chat-box");
const sendMessageButton = document.getElementById('send-btn');
sendMessageButton.addEventListener('click', function (e) {
sendMessage()
});
// Function to handle sending message
function sendMessage() {
var userInput = document.getElementById("user-input").value;
sendMessageAndUpdateChat(userInput);
}
// Detect objects in the image
async function getAnswer(question) {
const context = 'As of December 2022, MrBeast is the most-subscribed YouTuber, with 116 million subscribers. PewDiePie is the second most popular with 111 million subscribers. To celebrate reaching 100 million subscribers, MrBeast gave away a private island which is probably a part of the reason he took the top position from PewDiePie.';
const output = await answerer(question, context);
setTimeout(function() {
chatBox.innerHTML += "<p class='bot-message'><strong>Chatbot:</strong> " + output.answer + "</p>";
// Scroll to bottom of chat box
chatBox.scrollTop = chatBox.scrollHeight;
}, 500);
}
// Function to send message and update chat
function sendMessageAndUpdateChat(message) {
// Display user message
chatBox.innerHTML += "<p class='user-message'><strong>You:</strong> " + message + "</p>";
getAnswer(message)
}
// Event listener for Enter key press
document.getElementById("user-input").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
var userInput = document.getElementById("user-input").value;
sendMessageAndUpdateChat(userInput);
document.getElementById("user-input").value = ""; // Clear input field after sending message
}
});
|