Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Chatbot</title> | |
| <style> | |
| body { font-family: sans-serif; background: #f4f4f4; padding: 20px; } | |
| #chat-box { background: white; border-radius: 8px; padding: 15px; height: 400px; overflow-y: auto; border: 1px solid #ccc; } | |
| .msg { margin-bottom: 10px; } | |
| .user { color: blue; } | |
| .bot { color: green; } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>Chat with TinyLLaMA</h2> | |
| <div id="chat-box"></div> | |
| <input type="text" id="user-input" placeholder="Type a message..." style="width: 80%;"> | |
| <button onclick="sendMessage()">Send</button> | |
| <script> | |
| const sessionId = Math.random().toString(36).substring(2); | |
| const model = "TinyLLaMA (1.1B)"; | |
| async function sendMessage() { | |
| const input = document.getElementById("user-input"); | |
| const message = input.value; | |
| if (!message.trim()) return; | |
| appendMessage("You", message); | |
| input.value = ""; | |
| const response = await fetch("https://huggingface.co/spaces/tumwesigeibra/CHAT-BOT/api/predict/", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ | |
| data: [message, model, sessionId] | |
| }) | |
| }); | |
| const result = await response.json(); | |
| const botResponse = result.data[0]; | |
| appendMessage("Bot", botResponse); | |
| } | |
| function appendMessage(sender, text) { | |
| const chatBox = document.getElementById("chat-box"); | |
| const div = document.createElement("div"); | |
| div.className = "msg " + (sender === "You" ? "user" : "bot"); | |
| div.innerHTML = `<strong>${sender}:</strong> ${text}`; | |
| chatBox.appendChild(div); | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| } | |
| </script> | |
| </body> | |
| </html> | |