Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>J AI Assist</title> | |
| <link rel="icon" type="image/png" href="../static/Jio-Logo.png" /> | |
| <link rel="apple-touch-icon" type="image/png" href="../static/Jio-Logo.png" /> | |
| <style> | |
| body { | |
| background-color: #ECE5DD; | |
| font-family: Arial, sans-serif; | |
| font-size: 14px; | |
| padding: 20px; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 700px; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| background-color: #fff; | |
| border-radius: 10px; | |
| box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| } | |
| .header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 60px; | |
| background-color: #0f3cc9; | |
| /* #075E54 */ | |
| color: #fff; | |
| font-weight: bold; | |
| font-size: 20px; | |
| } | |
| .chat-area { | |
| flex-grow: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| } | |
| .chat-area p { | |
| margin: 5px 0; | |
| } | |
| .message-box { | |
| display: flex; | |
| align-items: center; | |
| background-color: #F4F4F4; | |
| padding: 10px; | |
| border-top: 1px solid #ccc; | |
| } | |
| .message-box input { | |
| flex-grow: 1; | |
| border: none; | |
| padding: 10px; | |
| font-size: 14px; | |
| border-radius: 5px; | |
| background-color: #fff; | |
| margin-right: 10px; | |
| } | |
| .message-box button { | |
| background-color: #0f3cc9; | |
| /* #075E54 */ | |
| color: #fff; | |
| border: none; | |
| padding: 10px; | |
| font-size: 14px; | |
| font-weight: bold; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| .user-message { | |
| display: flex; | |
| flex-direction: row-reverse; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .bot-message { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .user-message p, | |
| .bot-message p { | |
| background-color: #ccd6f2; | |
| /* #DCF8C6; */ | |
| color: #000; | |
| padding: 10px; | |
| border-radius: 10px; | |
| max-width: 60%; | |
| word-wrap: break-word; | |
| } | |
| .user-message p { | |
| margin-right: 10px; | |
| } | |
| .bot-message p { | |
| margin-left: 10px; | |
| } | |
| .logoClass { | |
| width: 50px; | |
| height: 40px; | |
| align-self: center; | |
| margin-right: 10px; | |
| gap: 20px 20px; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| /* background-image: url({{url_for('static',filename='Jio-Logo.png')}}); */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <div> | |
| </div> | |
| <div>AI Assist Powered by JGPT</div> | |
| </div> | |
| <div class="chat-area"> | |
| <div class="bot-message"> | |
| <p>Hello! How can I assist you today?</p> | |
| </div> | |
| </div> | |
| <div class="message-box"> | |
| <input id="user-input" type="text" placeholder="Type your message..." onkeyup="return searchKeyPress(event)"> | |
| <button id="send-button" onclick="sendMessage()">Send</button> | |
| </div> | |
| </div> | |
| <script> | |
| function searchKeyPress(event) { | |
| event.preventDefault(); | |
| if (event.keyCode === 13) { | |
| document.getElementById("send-button").click(); | |
| } | |
| }; | |
| async function sendMessage() { | |
| var response = ""; | |
| // Get the user input | |
| var userInput = document.getElementById("user-input").value; | |
| // Create a new user message and add it to the chat area | |
| var userMessage = document.createElement("div"); | |
| userMessage.classList.add("user-message"); | |
| userMessage.innerHTML = '<p>' + userInput + '</p>'; | |
| document.querySelector(".chat-area").appendChild(userMessage); | |
| // Clear the input field | |
| document.getElementById("user-input").value = ""; | |
| // Generate a bot response | |
| var botResponse = await generateBotResponse(userInput); | |
| } | |
| async function generateBotResponse(userInput) { | |
| // Make a POST request to the chatbot API endpoint | |
| // response = await fetch('http://127.0.0.1:1111/post_json', { | |
| // method: 'POST', | |
| // headers: { | |
| // 'Content-Type': 'application/json' | |
| // }, | |
| // body: JSON.stringify({ | |
| // query: userInput | |
| // }) | |
| // }); | |
| var xhr = new XMLHttpRequest(); | |
| //xhr.open("POST", 'http://127.0.0.1:1111/post_json', true); | |
| //xhr.open("POST", '/post_json', true); | |
| xhr.open("POST", '/agent/chat/suggestion', true); | |
| xhr.setRequestHeader('Content-Type', 'application/json'); | |
| xhr.send(JSON.stringify({ | |
| message: [userInput], | |
| "custDetails": { | |
| "cName": "Mohit Srivastava", | |
| "cDistrict": "Lucknow" | |
| } | |
| })); | |
| xhr.onload = function() { | |
| console.log(this.responseText); | |
| var response = JSON.parse(this.responseText); | |
| console.log(response); | |
| // Create a new bot message and add it to the chat area | |
| var botMessage = document.createElement("div"); | |
| botMessage.classList.add("bot-message"); | |
| botMessage.innerHTML = '<p>' + response.suggestions[0]['message'] + '</p>'; | |
| document.querySelector(".chat-area").appendChild(botMessage); | |
| // Scroll to the bottom of the chat area | |
| document.querySelector('.chat-area').scrollTop = document.querySelector('.chat-area').scrollHeight; | |
| return response.suggestions[0]['message']; | |
| } | |
| // Parse the response JSON and return the bot message | |
| //console.log(data); | |
| //var data = await response.json(); | |
| //return response.botMessage; | |
| } | |
| </script> | |
| </body> | |
| </html> |