index.js

import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';

// 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 = 'Titration is the slow addition of one solution of a known concentration (called a titrant) to a known volume of another solution of unknown concentration until the reaction reaches neutralization, which is often indicated by a color change. The solution called the titrant must satisfy the necessary requirements to be a primary or secondary standard. In a broad sense, titration is a technique to determine the concentration of an unknown solution.';
    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
    }
  });