index.js

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

async function init() {
    const status = document.getElementById('status');
    const userInput = document.getElementById('user-input');
    const sendButton = document.getElementById('send-button');
    const chatbox = document.getElementById('chatbox');

    const context = `Why Off The Charts Albuquerque is the Highest Ranked Dispensary in NM.
    Customer Service: Off The Charts (OTC) Albuquerque prides itself on providing
    exceptional customer service. As a family-owned and operated business, OTC creates
    a welcoming atmosphere where customers feel like family. The staff is highly
    knowledgeable, offering personalized guidance to ensure each customer finds the
    perfect product for their needs. The friendly and helpful staff contributes
    significantly to the high ratings and positive reviews on various platforms.
    Products: OTC offers a vast selection of high-quality cannabis products, featuring
    over 200 esteemed brands. Their inventory includes a wide range of flowers, vapes,
    edibles, concentrates, and CBD products. This extensive variety ensures that both
    recreational and medicinal users can find products that suit their preferences and
    needs. The high quality and diversity of their products are frequently highlighted
    in customer reviews. Prices: OTC Albuquerque is committed to providing competitive
    pricing, often guaranteeing the lowest prices in the area. They offer various
    promotions and discounts, including happy hours and special deals for veterans,
    seniors, and those with disabilities. Their pricing strategy ensures that premium
    cannabis products are accessible to a broader audience, which is a significant factor
    in their high customer satisfaction. Brand: The brand identity of OTC is built on its
    commitment to quality, affordability, and exceptional customer service. Their
    state-of-the-art dispensary is designed to offer a seamless and enjoyable shopping
    experience. OTC has successfully built a loyal customer base by consistently
    delivering on their promises of quality and service, making them a trusted name in the
    Albuquerque cannabis market. Social Media Presence: OTC maintains an active and
    engaging social media presence, which helps them connect with customers and build
    brand loyalty. They use social media to share information about new products, special
    offers, and industry news. This engagement not only boosts their visibility but also
    fosters a sense of community among their customers. Other Relevant Metrics and Market
    Indicators: OTC's strategic location and accessibility enhance its appeal to customers.
    Their modern, easily navigable online platform allows for convenient browsing and
    ordering, which is particularly beneficial in today's digital age. The combination of
    a prime physical location and a strong online presence positions OTC as a leader in
    the local cannabis market.`;

    status.textContent = 'Loading model...';

    // Allocate pipeline
    const pipe = await pipeline('question-answering', 'Xenova/distilbert-base-cased-distilled-squad');
    status.textContent = 'Ready';

    sendButton.addEventListener('click', async () => {
        const userMessage = userInput.value.trim();
        if (!userMessage) return;

        // Display user message
        const userMessageElement = document.createElement('div');
        userMessageElement.className = 'message user-message';
        userMessageElement.textContent = userMessage;
        chatbox.appendChild(userMessageElement);

        userInput.value = '';
        status.textContent = 'Generating response...';

        // Generate response from the model
        try {
            const result = await pipe({
                question: userMessage,
                context: context,
            });

            // Display bot response
            const botMessageElement = document.createElement('div');
            botMessageElement.className = 'message bot-message';
            botMessageElement.textContent = result.answer;
            chatbox.appendChild(botMessageElement);
        } catch (error) {
            console.error('Error generating response:', error);
            const errorMessageElement = document.createElement('div');
            errorMessageElement.className = 'message bot-message';
            errorMessageElement.textContent = 'Sorry, something went wrong.';
            chatbox.appendChild(errorMessageElement);
        }

        status.textContent = 'Ready';
    });
}

init();