Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>J Search</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: 950px; | |
| /* 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; | |
| } | |
| .flex-container { | |
| display: flex; | |
| align-items: stretch; | |
| height:90%; | |
| } | |
| /*.chat-area { | |
| flex-grow: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| }*/ | |
| .chat-area { | |
| flex: 1.5; | |
| padding: 20px; | |
| border: 2px solid black; | |
| } | |
| .llm-area { | |
| flex: 1; | |
| padding: 20px; | |
| border: 2px solid black; | |
| } | |
| .chat-area p { | |
| margin: 5px 0; | |
| } | |
| .llm-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: 90%; | |
| 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>Search Powered by J Embedding Engine</div> | |
| </div> | |
| <div class="message-box"> | |
| <label for="llmID"><b>Select LLM for Response Generation</b></label> | |
| <select name="llmID" id="llmID"> | |
| <option value="1">LLAMA 2 - 13B</option> | |
| <option value="0">Open AI</option> | |
| <option value="2">LLAMA 2 - 70B</option> | |
| <option value="3">LLAMA 2 - 7B</option> | |
| <option value="4">Mistral AI</option> | |
| </select> | |
| </div> | |
| <div class="message-box"> | |
| <input id="user-input" type="text" placeholder="Enter your Search Query..." onkeyup="return searchKeyPress(event)"> | |
| <button id="send-button" onclick="sendMessage()">Search</button> | |
| </div> | |
| <div class="flex-container"> | |
| <div class="chat-area"> | |
| <!-- <div class="bot-message"> | |
| <p>Hello! How can I assist you today?</p> | |
| </div> --> | |
| </div> | |
| <div class="llm-area"> | |
| <!-- <div class="bot-message"> | |
| <p>Hello! How can I assist you today?</p> | |
| </div> --> | |
| </div> | |
| </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 | |
| document.querySelector(".chat-area").innerHTML = "" | |
| document.querySelector(".llm-area").innerHTML = "" | |
| var userInput = document.getElementById("user-input").value; | |
| var selectedllmid = document.getElementById("llmID").value; | |
| console.log("Selected LLM ID:::"+selectedllmid) | |
| // Create a new user message and add it to the chat area | |
| var userMessage = document.createElement("div"); | |
| userMessage.classList.add("bot-message"); | |
| userMessage.innerHTML = '<p> Your Search Results for <b> “' + userInput + '” </b></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,selectedllmid); | |
| } | |
| async function generateBotResponse(userInput,selectedllmid) { | |
| // 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", '/agent/chat/suggestion', true); | |
| xhr.setRequestHeader('Content-Type', 'application/json'); | |
| xhr.send(JSON.stringify({ | |
| message: [userInput], | |
| llmID:selectedllmid, | |
| "custDetails": {"cName": "Mohit Srivastava","cDistrict": "Lucknow"} | |
| })); | |
| xhr.onload = function() { | |
| console.log(this.responseText); | |
| var searchResultArray = JSON.parse(this.responseText).searchResult; | |
| var llmResponse = JSON.parse(this.responseText).suggestions[0]['message']; | |
| console.log("Semantic Search Array::::"+searchResultArray); | |
| console.log("LLM Response::::"+llmResponse); | |
| var botMessage = document.createElement("div"); | |
| botMessage.classList.add("bot-message"); | |
| botMessage.innerHTML = '<p> <b> LLM Response::</b> '+llmResponse+'</p>'; | |
| document.querySelector(".llm-area").appendChild(botMessage); | |
| // Create a new bot message and add it to the chat area | |
| for(let i = 0; i < searchResultArray.length; i++) | |
| { | |
| response=searchResultArray[i] | |
| var botMessage = document.createElement("div"); | |
| botMessage.classList.add("bot-message"); | |
| botMessage.innerHTML = '<p> <b> Source :: </b><a>' + response.documentSource + '</a> <br> <br> <b> Semantically Matching Content::</b> '+response.pageContent+'</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.botMessage; | |
| } | |
| // Parse the response JSON and return the bot message | |
| //console.log(data); | |
| //var data = await response.json(); | |
| //return response.botMessage; | |
| } | |
| </script> | |
| </body> | |
| </html> |