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>Chatbot Interface</title> | |
| <!-- Include Bootstrap CSS for styling (optional) --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> | |
| <style> | |
| body { | |
| padding: 20px; | |
| } | |
| .chatbot-container { | |
| max-width: 800px; | |
| margin: auto; | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| .chatbot-container h1 { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chatbot-container"> | |
| <h1>Question answering chatbot</h1> | |
| <div id="chatbot-interface"> | |
| <!-- Chatbot UI will be dynamically added here --> | |
| </div> | |
| </div> | |
| <iframe src="http://127.0.0.1:7865/" width="1500" height="1000" frameborder="0"></iframe> | |
| <!-- Include Gradio JavaScript library --> | |
| <script src="https://cdn.jsdelivr.net/npm/@gradio/chatbot"></script> | |
| <script> | |
| // Define function to initialize Gradio chatbot | |
| function initializeChatbot() { | |
| gr.Chatbot({ | |
| container: document.getElementById('chatbot-interface'), | |
| steps: [ | |
| { | |
| type: 'text', | |
| name: 'input', | |
| message: 'Enter your question or instruction here...', | |
| }, | |
| { | |
| type: 'model', | |
| name: 'output', | |
| model: 'http://127.0.0.1:7865/', // Replace with your actual chatbot endpoint | |
| options: { | |
| headers: { | |
| 'Authorization': 'Bearer your_auth_token', // If authentication is required | |
| 'Content-Type': 'application/json', | |
| }, | |
| }, | |
| } | |
| ] | |
| }); | |
| } | |
| // Wait for DOM content to load before initializing chatbot | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initializeChatbot(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |