| <!DOCTYPE html> |
| <html> |
|
|
| <head> |
| <title>Summary and Search Example</title> |
| <script> |
| |
| function search() { |
| const resultsElement = document.getElementById("results"); |
| const query = document.getElementById("query").value; |
| const url = `/search?q=${encodeURIComponent(query)}`; |
| const eventSource = new EventSource(url); |
| console.log(eventSource); |
| |
| eventSource.onerror = function (e) { |
| if (e.readyState == EventSource.CLOSED) { |
| |
| } |
| eventSource.close(); |
| }; |
| |
| eventSource.onmessage = function (event) { |
| console.log(event); |
| if (!event.data || event.data == "[DONE]") { |
| eventSource.close(); |
| return; |
| } |
| const result = JSON.parse(event.data); |
| const item = document.createElement("div"); |
| item.classList.add("search-result"); |
| |
| const title = document.createElement("b"); |
| title.textContent = result._source.title; |
| item.appendChild(title); |
| |
| const authors = document.createElement("p"); |
| authors.textContent = `Authors: ${result._source.author}`; |
| item.appendChild(authors); |
| |
| const abs = document.createElement("p"); |
| abs.classList.add("abstract"); |
| abs.textContent = `${result._source.abstract.substring(0, 500)}...`; |
| item.appendChild(abs); |
| |
| resultsElement.appendChild(item); |
| }; |
| } |
| |
| function summarize() { |
| const summaryElement = document.getElementById("summary"); |
| const query = document.getElementById("query").value; |
| const url = `summary?q=${encodeURIComponent(query)}`; |
| const eventSource = new EventSource(url); |
| eventSource.onmessage = function (event) { |
| if (!event.data || event.data == "[DONE]") { |
| eventSource.close(); |
| return; |
| } |
| const result = JSON.parse(event.data); |
| summaryElement.innerHTML += result['choices'][0]['text']; |
| }; |
| } |
| |
| function clearResults() { |
| const resultsElement = document.getElementById("results"); |
| const summaryElement = document.getElementById("summary"); |
| if (summaryElement) { |
| summaryElement.innerHTML = ""; |
| } |
| if (resultsElement) { |
| resultsElement.innerHTML = ""; |
| } |
| } |
| |
| function searchAndSummarize() { |
| clearResults(); |
| search(); |
| summarize(); |
| } |
| </script> |
| <style> |
| body { |
| display: flex; |
| flex-wrap: wrap; |
| } |
| |
| #search-container { |
| flex: 0 0 100%; |
| padding: 20px; |
| box-sizing: border-box; |
| } |
| |
| #results-container { |
| flex: 0 0 70%; |
| padding: 20px; |
| box-sizing: border-box; |
| } |
| |
| #summary-container { |
| flex: 0 0 30%; |
| padding: 20px; |
| box-sizing: border-box; |
| background-color: #f2f2f2; |
| } |
| |
| .search-input-container { |
| display: flex; |
| margin-bottom: 20px; |
| } |
| |
| #query { |
| flex: 1; |
| margin-right: 10px; |
| } |
| |
| #results { |
| max-height: 80vh; |
| overflow-y: scroll; |
| } |
| |
| .search-result { |
| margin-bottom: 10px; |
| padding-bottom: 10px; |
| border-bottom: 1px solid #ddd; |
| } |
| |
| .search-result a { |
| font-size: 18px; |
| font-weight: bold; |
| color: #1a0dab; |
| text-decoration: none; |
| } |
| |
| .search-result a:hover { |
| text-decoration: underline; |
| } |
| |
| .search-result p { |
| margin: 10px 0; |
| font-size: 14px; |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <div id="search-container"> |
| <h2>Elasticsearch with GPT Summary</h2> |
| <div class="search-input-container"> |
| <input type="text" id="query" placeholder="Enter a query (e.g., bug, gan)" onkeydown="if (event.key === 'Enter') searchAndSummarize()"> |
| <button onclick="searchAndSummarize()">Search</button> |
| </div> |
| </div> |
| <div id="results-container"> |
| <h3>Search Results</h3> |
| <div id="results"></div> |
| </div> |
| <div id="summary-container"> |
| <h3>GPT Summary</h3> |
| <div id="summary"></div> |
| </div> |
| </body> |
|
|
|
|
| </html> |
