Spaces:
Running
Running
const userInput = document.getElementById('message-input'); | |
const sendButton = document.getElementById('send-message'); | |
const chatBox = document.getElementById('conversation-history'); | |
const status = document.getElementById('status'); | |
// 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; | |
} | |
// Event-Listener für den Senden-Button | |
sendButton.addEventListener('click', () => { | |
const message = userInput.value.trim(); | |
if (!message) return; | |
displayMessage('Du: ' + message, 'user'); | |
userInput.value = ''; | |
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) { | |
const messageElement = document.createElement('div'); | |
messageElement.className = 'message ' + sender; | |
messageElement.textContent = message; | |
chatBox.appendChild(messageElement); | |
chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom | |
} | |
// Enter-Taste als Alternative zum Senden | |
userInput.addEventListener('keypress', function(e) { | |
if (e.key === 'Enter') { | |
sendButton.click(); | |
} | |
}); | |