index.js

import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers";

// 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', 'danishmuhammad/ccat_2025_llama3.1_8B');
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 output = await answerer(question);
    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
    }
  });