Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hugging Face Chatbot</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f5f5f5; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| .chat-container { | |
| background-color: #ffffff; | |
| border-radius: 5px; | |
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); | |
| width: 80%; | |
| max-width: 500px; | |
| padding: 20px; | |
| } | |
| input[type="text"] { | |
| border: 1px solid #cccccc; | |
| border-radius: 3px; | |
| padding: 10px; | |
| width: 100%; | |
| box-sizing: border-box; | |
| margin-bottom: 10px; | |
| } | |
| button { | |
| background-color: #007bff; | |
| border: none; | |
| border-radius: 3px; | |
| color: #ffffff; | |
| cursor: pointer; | |
| padding: 10px; | |
| width: 100%; | |
| } | |
| .response { | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <input type="text" id="user-input" placeholder="Type your message" /> | |
| <button id="submit">Send</button> | |
| <div class="response" id="response"></div> | |
| </div> | |
| <script> | |
| async function query(data) { | |
| const response = await fetch( | |
| "https://api-inference.huggingface.co/models/decapoda-research/llama-7b-hf", | |
| { | |
| headers: { Authorization: "Bearer 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" }, | |
| method: "POST", | |
| body: JSON.stringify(data), | |
| } | |
| ); | |
| const result = await response.json(); | |
| return result; | |
| } | |
| document.getElementById("submit").addEventListener("click", async () => { | |
| const userInput = document.getElementById("user-input").value; | |
| const responseContainer = document.getElementById("response"); | |
| if (userInput) { | |
| const response = await query({ "inputs": userInput }); | |
| responseContainer.innerHTML = response.generated_text; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |