Update index.js

index.js

@@ -1,44 +1,41 @@
-// 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.
-
-const status = document.getElementById('status');
 const userInput = document.getElementById('message-input');
 const sendButton = document.getElementById('send-message');
 const chatBox = document.getElementById('conversation-history');
+const status = document.getElementById('status');
 
-// 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;
-  });
+// Funktion, um eine Abfrage an die Hugging Face API zu senden
+async function queryHuggingFace(data) {
+    const response = await fetch(
+        "https://api-inference.huggingface.co/models/mistralai/Mixtral-8x7B-v0.1",
+        {
+            headers: { Authorization: "Bearer IhrHuggingFaceAPIToken" },
+            method: "POST",
+            body: JSON.stringify(data),
+        }
+    );
+    const result = await response.json();
+    return result;
+}
 
-// Nachrichtensendefunktion
-async function sendMessage() {
+// Event-Listener für den Senden-Button
+sendButton.addEventListener('click', () => {
     const message = userInput.value.trim();
     if (!message) return;
 
     displayMessage('Du: ' + message, 'user');
     userInput.value = '';
 
-    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 = '';
-    }
-}
+    status.textContent = 'Der Bot antwortet...';
+    queryHuggingFace({"inputs": message})
+        .then(response => {
+            displayMessage('Bot: ' + response.generated_text, 'bot');
+            status.textContent = '';
+        })
+        .catch(error => {
+            displayMessage('Fehler beim Generieren der Antwort: ' + error, 'error');
+            status.textContent = '';
+        });
+});
 
 // Nachricht im Chat anzeigen
 function displayMessage(message, sender) {
@@ -49,12 +46,10 @@ function displayMessage(message, sender) {
     chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom
 }
 
-// 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();
+        sendButton.click();
     }
 });
+