Spaces:
Runtime error
Runtime error
| # jinja2 html page with chatbot functionality using adminlte3 theme | |
| <html> | |
| <body> | |
| <form id="myform"> | |
| <div class="content-wrapper"> | |
| <section class="content-header"> | |
| <div class="container-fluid"> | |
| <div class="row mb-2"> | |
| <div class="col-sm-6"> | |
| <h1>Chatbot</h1> | |
| </div> | |
| <div class="col-sm-6"> | |
| <ol class="breadcrumb float-sm-right"> | |
| <li class="breadcrumb-item"><a href="#">Home</a></li> | |
| <li class="breadcrumb-item active">Chatbot</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="content"> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-md-8 offset-md-2"> | |
| <div class="card card-primary"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Chat with our AI</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div id="chat-container"> | |
| <div class="chat-messages"> | |
| <!-- Chat messages will be dynamically added here --> | |
| </div> | |
| <div class="chat-input"> | |
| <input type="text" id="user_question" placeholder="Type your message..."> | |
| <button id="send-button" onclick="clickform()">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </form> | |
| <script> | |
| const chatContainer = document.getElementById('chat-container'); | |
| const userInput = document.getElementById('user_question'); | |
| const sendButton = document.getElementById('send-button'); | |
| function clickform() { | |
| alert('Please enter'); | |
| var formElement = document.getElementById('myForm'); | |
| var user_question = document.getElementById('user_question').value; | |
| alert(user_question); | |
| //var data = new FormData(formElement); | |
| //alert(data); | |
| fetch('/chat_with_agent', { | |
| method: 'POST', | |
| //body: data, | |
| }) | |
| .then(resp => resp.text()) // or, resp.json(), etc. | |
| .then(data => { | |
| //document.getElementById("responseArea").innerHTML = data; | |
| alert(data); | |
| const chatMessage = document.createElement('div'); | |
| chatMessage.classList.add('chat-message'); | |
| chatMessage.innerHTML = '<strong>You:</strong> ${user_question}<br><strong>AI:</strong> ${data}'; | |
| chatContainer.appendChild(chatMessage); | |
| userInput.value = ''; | |
| userInput.focus(); | |
| }) | |
| .catch(error => { | |
| console.error(error); | |
| }); | |
| } | |
| </script> | |
| </body></html> |