index.js

import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.10.1';

// Status- und Input-Elemente
const status = document.getElementById('status');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
const chatBox = document.getElementById('chat-box');

// Chatbot-Pipeline initialisieren
status.textContent = 'Lade Modell...';
const chatbot = await pipeline('text-generation', 'IhrModellName'); // Ersetzen Sie 'IhrModellName' mit dem Namen des Hugging Face Modells
status.textContent = 'Bereit';

// Nachrichtensendefunktion
async function sendMessage() {
    const message = userInput.value;
    if (!message) return;

    displayMessage('Du: ' + message);
    userInput.value = '';

    const response = await chatbot(message);
    displayMessage('Bot: ' + response[0].generated_text);
}

// Nachricht im Chat anzeigen
function displayMessage(message) {
    const messageElement = document.createElement('div');
    messageElement.textContent = message;
    chatBox.appendChild(messageElement);
}

// Event-Listener für den Senden-Button
sendButton.addEventListener('click', sendMessage);

// Enter-Taste als Alternative zum Senden
userInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        sendMessage();
    }
});