Update index.js

index.js

@@ -1,33 +1,52 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.10.1';
+// Sie sollten prüfen, ob Sie die Transformers.js-Bibliothek korrekt eingebunden haben.
+// Der folgende Code ist ein Beispiel und muss möglicherweise für Ihre spezifische Implementierung angepasst werden.
 
-// 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';
+const userInput = document.getElementById('message-input');
+const sendButton = document.getElementById('send-message');
+const chatBox = document.getElementById('conversation-history');
+
+// Verwenden Sie die richtige URL zur Einbindung von Transformers.js, wenn sie nicht lokal verfügbar ist.
+// Hier als Beispiel:
+// <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@latest"></script>
+
+// Pipeline für das gewählte Modell initialisieren
+let chatbot;
+pipeline('text-generation', 'Mistral7b', { apiToken: 'Ihr API-Token hier' })
+  .then(model => {
+    chatbot = model;
+    status.textContent = 'Chatbot bereit!';
+  })
+  .catch(error => {
+    status.textContent = 'Fehler beim Laden des Modells: ' + error.message;
+  });
 
 // Nachrichtensendefunktion
 async function sendMessage() {
-    const message = userInput.value;
+    const message = userInput.value.trim();
     if (!message) return;
 
-    displayMessage('Du: ' + message);
+    displayMessage('Du: ' + message, 'user');
     userInput.value = '';
 
-    const response = await chatbot(message);
-    displayMessage('Bot: ' + response[0].generated_text);
+    try {
+        status.textContent = 'Der Bot antwortet...';
+        const responses = await chatbot(message);
+        displayMessage('Bot: ' + responses[0].generated_text, 'bot');
+    } catch (error) {
+        displayMessage('Fehler beim Generieren der Antwort.', 'error');
+    } finally {
+        status.textContent = '';
+    }
 }
 
 // Nachricht im Chat anzeigen
-function displayMessage(message) {
+function displayMessage(message, sender) {
     const messageElement = document.createElement('div');
+    messageElement.className = 'message ' + sender;
     messageElement.textContent = message;
     chatBox.appendChild(messageElement);
+    chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom
 }
 
 // Event-Listener für den Senden-Button