Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hugging Face Chat UI</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: linear-gradient(to bottom, #111, #333); | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| .chat-container { | |
| background: #6B7280; | |
| color: #FFD21E; | |
| width: 400px; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .chat-container input { | |
| width: calc(100% - 70px); | |
| padding: 10px; | |
| border: 1px solid #FFD21E; | |
| border-radius: 20px 0 0 20px; | |
| } | |
| .chat-container button { | |
| width: 70px; | |
| padding: 10px; | |
| border: none; | |
| background: #FF9D00; | |
| color: #111; | |
| border-radius: 0 20px 20px 0; | |
| cursor: pointer; | |
| } | |
| .chat-message { | |
| margin: 10px 0; | |
| padding: 10px; | |
| border-radius: 8px; | |
| } | |
| .user-message { | |
| background: #FFD21E; | |
| color: #111; | |
| text-align: right; | |
| } | |
| .ai-message { | |
| background: #FF9D00; | |
| color: #111; | |
| text-align: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <div id="chat-box"></div> | |
| <input type="text" id="user-input" placeholder="Type your message..."> | |
| <button id="send-button">Send</button> | |
| </div> | |
| <script> | |
| const chatBox = document.getElementById('chat-box'); | |
| const userInput = document.getElementById('user-input'); | |
| const sendButton = document.getElementById('send-button'); | |
| sendButton.addEventListener('click', () => { | |
| // Handle sending user input to the server | |
| const message = userInput.value; | |
| // Make a POST request to the server to get the AI response | |
| fetch('/get_response', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/x-www-form-urlencoded' | |
| }, | |
| body: new URLSearchParams({ user_input: message }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| // Display the AI response in the chat box | |
| // You can customize the format as per your requirements | |
| chatBox.innerHTML += <div class="chat-message user-message">${message}</div>; | |
| chatBox.innerHTML += <div class="chat-message ai-message">${data}</div>; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |