| | <!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> |
