index.js

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
    }
  });