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