|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>HelpingAI Search</title> |
|
<link rel="icon" href="https://www.gstatic.com/favicon/favicon.ico" type="image/x-icon"> |
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
|
<style> |
|
*{box-sizing:border-box} |
|
body{margin:0;padding:0;font-family:"Poppins",sans-serif;background-color:#f8f9fa} |
|
a{text-decoration:none;color:#1a0dab} |
|
a:hover{text-decoration:underline} |
|
.main-content{display:flex;flex-direction:column;align-items:center;padding:50px 20px} |
|
.search-container{width:100%;max-width:700px;position:relative;width:60%;margin-bottom:20px} |
|
.search-box{width:100%;padding:12px 16px;border:2px solid #4285f4;border-radius:24px;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:box-shadow .2s ease-in-out,width .3s ease,border-color .3s ease;display:flex;align-items:center} |
|
.search-box:focus-within{box-shadow:0 4px 8px rgba(32,33,36,0.35);border-color:#ea4335} |
|
#search-query{width:calc(100% - 40px);border:none;outline:0;font-size:16px;padding:4px 0;transition:font-size .2s ease} |
|
#search-query::placeholder{color:#9aa0a6;transition:color .2s ease} |
|
#search-query:focus{font-size:18px} |
|
#search-query:focus::placeholder{color:transparent} |
|
#search-form button{background:0 0;border:none;cursor:pointer;padding:8px;margin-left:10px;transition:transform .2s ease} |
|
#search-form button:hover{transform:scale(1.1)} |
|
#search-form button svg{display:none} |
|
#search-form button::after{content:"\f002";color:#9aa0a6;transition:color .2s ease,transform .2s ease;font:900 1.2em "Font Awesome 5 Free"} |
|
#search-form button:hover::after{color:#4285f4;transform:scale(1.1)} |
|
#suggestions{width:calc(80% - 32px);background-color:#fff;border:none;border-radius:8px;box-shadow:0 4px 6px rgba(32,33,36,0.28);display:none;position:absolute;top:100%;left:0;z-index:10;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;padding:10px 0} |
|
@keyframes spin { |
|
0%{transform:rotate(0)} |
|
100%{transform:rotate(360deg)} |
|
} |
|
#suggestions ul{list-style-type:none;padding:0;margin:0} |
|
#suggestions li{padding:8px 12px;cursor:pointer;border-bottom:1px solid #eee;transition:background-color .2s ease} |
|
#suggestions li:hover{background-color:#e9e9e9} |
|
#suggestions li.selected{background-color:#f0f0f0} |
|
.search-box:focus-within+#suggestions,.search-box:hover+#suggestions{display:block;opacity:1;transform:translateY(0)} |
|
#results{width:100%;max-width:700px;margin-top:20px} |
|
.result,.ai-result{margin-bottom:20px;padding:15px;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;animation:fadeInUp .5s ease forwards} |
|
.ai-result{background-color:#f0f0f5;width:100%;max-width:800px} |
|
@keyframes fadeInUp { |
|
from{opacity:0;transform:translateY(20px)} |
|
to{opacity:1;transform:translateY(0)} |
|
} |
|
.result.show,.ai-result.show{opacity:1;transform:translateY(0)} |
|
.result:hover,.ai-result:hover{box-shadow:0 4px 8px rgba(0,0,0,0.2)} |
|
.result h3{margin:0 0 5px;font-size:1.2rem;color:#222} |
|
.result .url{color:#202124;font-size:.9rem;margin-bottom:8px;display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} |
|
.result p{color:#555;font-size:.9rem;line-height:1.6em;margin:0} |
|
.loading-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0);z-index:1000} |
|
.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;border:5px solid #f3f3f3;border-top:5px solid #3498db;animation:spin 1.2s linear infinite} |
|
@keyframes spin { |
|
0%{transform:rotate(0deg)} |
|
100%{transform:rotate(360deg)} |
|
} |
|
.loading-spinner{width:40px;height:40px;border-radius:50%;border:5px solid #f3f3f3;border-top:5px solid #3498db;animation:spin 1.2s linear infinite} |
|
.loading-text{margin-left:10px;font-size:1rem;color:#333} |
|
#no-results{display:none;text-align:center;padding:20px;font-size:1.1em;color:#555} |
|
.result .actions button{background-color:#f2f2f2;color:#000;border:1px solid #ddd;padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:700;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease;margin-right:10px} |
|
.result .actions button:hover{background-color:#e0e0e0;box-shadow:0 2px 4px rgba(0,0,0,0.1)} |
|
.summary-popup,.answer-popup{border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.25);background-color:#f8f9fa;color:#333;font-family:'Poppins',sans-serif;padding:20px;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);max-width:80%;max-height:80%;overflow-y:auto;z-index:1001} |
|
.summary-popup .close,.answer-popup .close{position:absolute;top:15px;right:15px;cursor:pointer;font-size:1.5em;color:#666;transition:color .2s ease} |
|
.summary-popup .close:hover,.answer-popup .close:hover{color:#333} |
|
.summary-popup .loading,.answer-popup .loading{display:flex;justify-content:center;align-items:center;height:100px;display:none} |
|
.summary-popup .loading-spinner,.answer-popup .loading-spinner{width:60px;height:60px;border-radius:50%;border:5px solid #f3f3f3;border-top:5px solid #3498db;animation:spin 1.2s linear infinite} |
|
.summary-popup .content,.answer-popup .content{padding:20px;font-size:1rem;line-height:1.5} |
|
.summary-popup #summaryContent,.answer-popup #answerContent{font-family:'Poppins',sans-serif;margin-bottom:20px} |
|
#no-results{display:none;text-align:center;padding:20px;font-size:1.1em;color:#555} |
|
#loading-more{display:none;text-align:center;padding:10px} |
|
#loading-more.active{display:block} |
|
.ai-result h2{margin:0 0 10px;font-size:1.5rem;font-weight:700;color:#333} |
|
.ai-result p{color:#444;font-size:.9rem;line-height:1.5em;margin:0;display:flex;flex-direction:column} |
|
.ai-result .actions { |
|
display: flex; |
|
justify-content: flex-end; |
|
margin-top: 10px; |
|
} |
|
|
|
.ai-result .actions button { |
|
background-color: #f2f2f2; |
|
color: #000; |
|
border: 1px solid #ddd; |
|
padding: 8px 12px; |
|
border-radius: 20px; |
|
font-size: .9rem; |
|
font-weight: 700; |
|
cursor: pointer; |
|
transition: background-color .2s ease, box-shadow .2s ease; |
|
margin-left: 10px; |
|
} |
|
|
|
.ai-result .actions button:hover { |
|
background-color: #e0e0e0; |
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.ai-result .actions button i { |
|
font-size: 1.2rem; |
|
color: #333; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="main-content"> |
|
<div class="search-container"> |
|
<form id="search-form"> |
|
<div class="search-box"> |
|
<input type="text" id="search-query" placeholder="Search the web" autocomplete="off"> |
|
<button type="submit"></button> |
|
</div> |
|
<div id="suggestions"></div> |
|
</form> |
|
</div> |
|
<div id="ai-response"></div> |
|
<div id="results-info" style="text-align: center;"></div> |
|
<div id="results"></div> |
|
<div id="no-results"> |
|
<p>No results found. Try refining your search.</p> |
|
</div> |
|
<div id="loading-more">Loading more results...</div> |
|
<div class="loading-overlay"> |
|
<div class="loading-spinner"></div> |
|
</div> |
|
</div> |
|
<div id="summaryPopup" class="summary-popup" style="display: none;"> |
|
<span class="close">×</span> |
|
<div class="content"> |
|
<div class="loading"> |
|
<div class="loading-spinner"></div> |
|
<p class="loading-text">Loading...</p> |
|
</div> |
|
<div id="summaryContent"></div> |
|
</div> |
|
</div> |
|
<div id="answerPopup" class="answer-popup" style="display: none;"> |
|
<span class="close">×</span> |
|
<div class="content"> |
|
<div class="loading"> |
|
<div class="loading-spinner"></div> |
|
<p class="loading-text">Loading...</p> |
|
</div> |
|
<div id="answerContent"></div> |
|
</div> |
|
</div> |
|
<script> |
|
const BASE_URL = "https://oevortex-webscout-api.hf.space"; |
|
const searchForm = document.getElementById("search-form"); |
|
const searchQueryInput = document.getElementById("search-query"); |
|
const resultsContainer = document.getElementById("results"); |
|
const suggestionsContainer = document.getElementById("suggestions"); |
|
const loadingOverlay = document.querySelector('.loading-overlay'); |
|
const noResultsMessage = document.getElementById('no-results'); |
|
const loadingMoreIndicator = document.getElementById('loading-more'); |
|
const aiResponseContainer = document.getElementById('ai-response'); |
|
const INITIAL_RESULTS = 5; |
|
const CACHED_RESULTS = 50; |
|
const RESULTS_PER_PAGE = 5; |
|
let allResultsFetched = false; |
|
const seenUrls = new Set(); |
|
let selectedSuggestionIndex = -1; |
|
let suggestionRequestTimeout; |
|
let cachedSearchResults = []; |
|
const suggestionCache = {}; |
|
let prefetchTimeout; |
|
let allResults = []; |
|
let startTime; |
|
|
|
function debounce(func, delay) { |
|
return function() { |
|
clearTimeout(suggestionRequestTimeout); |
|
suggestionRequestTimeout = setTimeout(() => { |
|
func.apply(this, arguments); |
|
}, delay); |
|
}; |
|
} |
|
async function fetchSuggestions(query) { |
|
if (suggestionCache[query]) { |
|
return suggestionCache[query]; |
|
} |
|
try { |
|
const response = await fetch(`${BASE_URL}/api/suggestions?q=${encodeURIComponent(query)}`); |
|
if (response.ok) { |
|
const suggestions = await response.json(); |
|
suggestionCache[query] = suggestions; |
|
return suggestions; |
|
} else { |
|
console.error("Error fetching suggestions:", response.status); |
|
return []; |
|
} |
|
} catch (error) { |
|
console.error("Error fetching suggestions:", error); |
|
return []; |
|
} |
|
} |
|
searchQueryInput.addEventListener("input", () => { |
|
clearTimeout(prefetchTimeout); |
|
const searchQuery = searchQueryInput.value.trim(); |
|
if (searchQuery === "") { |
|
suggestionsContainer.style.display = "none"; |
|
return; |
|
} |
|
prefetchTimeout = setTimeout(async () => { |
|
const suggestions = await fetchSuggestions(searchQuery); |
|
displaySuggestions(suggestions); |
|
}, 100); |
|
}); |
|
|
|
function displaySuggestions(suggestions) { |
|
suggestionsContainer.innerHTML = ""; |
|
if (suggestions.length === 0 || searchQueryInput.value.trim() === "") { |
|
suggestionsContainer.style.display = "none"; |
|
return; |
|
} |
|
const suggestionList = document.createElement("ul"); |
|
suggestions.forEach((suggestion, index) => { |
|
const listItem = document.createElement("li"); |
|
listItem.textContent = suggestion.phrase; |
|
listItem.addEventListener("click", () => { |
|
searchQueryInput.value = suggestion.phrase; |
|
suggestionsContainer.style.display = "none"; |
|
performSearch(suggestion.phrase); |
|
}); |
|
listItem.addEventListener("focus", () => { |
|
selectedSuggestionIndex = index; |
|
updateSuggestionSelection(); |
|
}); |
|
suggestionList.appendChild(listItem); |
|
}); |
|
suggestionsContainer.appendChild(suggestionList); |
|
suggestionsContainer.style.display = "block"; |
|
} |
|
|
|
function updateSuggestionSelection() { |
|
const suggestionItems = suggestionsContainer.querySelectorAll("li"); |
|
suggestionItems.forEach((item, index) => { |
|
item.classList.toggle("selected", index === selectedSuggestionIndex); |
|
}); |
|
} |
|
|
|
function showLoading() { |
|
loadingOverlay.style.display = 'block'; |
|
} |
|
|
|
function hideLoading() { |
|
loadingOverlay.style.display = 'none'; |
|
} |
|
async function performSearch(query) { |
|
showLoading(); |
|
aiResponseContainer.style.display = 'none'; |
|
suggestionsContainer.style.display = "none"; |
|
startTime = performance.now(); |
|
seenUrls.clear(); |
|
allResultsFetched = false; |
|
resultsContainer.innerHTML = ''; |
|
noResultsMessage.style.display = 'none'; |
|
loadingMoreIndicator.classList.remove('active'); |
|
speechSynthesis.cancel(); |
|
const initialResults = await fetchResults(query, INITIAL_RESULTS); |
|
displayResults(initialResults); |
|
hideLoading(); |
|
fetchResults(query, CACHED_RESULTS).then(cachedResults => { |
|
cachedSearchResults = removeDuplicateResults(cachedResults); |
|
allResults = allResults.concat(cachedSearchResults); |
|
displayResults(cachedSearchResults.slice(INITIAL_RESULTS, RESULTS_PER_PAGE), true); |
|
if (cachedSearchResults.length > RESULTS_PER_PAGE) { |
|
allResultsFetched = false; |
|
loadingMoreIndicator.classList.add('active'); |
|
} |
|
}); |
|
fetchAIResponse(query).then(aiResponse => { |
|
displayAIResponse(aiResponse); |
|
aiResponseContainer.style.display = 'block'; |
|
}).catch(error => { |
|
console.error("Error fetching AI response:", error); |
|
}); |
|
updateURLWithQuery(query); |
|
} |
|
async function fetchAIResponse(query) { |
|
try { |
|
const encodedQuery = encodeURIComponent(query); |
|
const websiteURL = 'https://google.com/search?q=${encodedQuery}' |
|
const response = await fetch(`${BASE_URL}/api/ask_website?url=https://google.com/search?q=${encodedQuery}&question=Answer this question from google search result ${encodedQuery}&model=gpt-3.5`); |
|
if (response.ok) { |
|
const aiResponse = await response.json(); |
|
return aiResponse; |
|
} else { |
|
console.error("Error fetching AI response from website:", response.status); |
|
return null; |
|
} |
|
} catch (error) { |
|
console.error("Error fetching AI response from website:", error); |
|
return null; |
|
} |
|
} |
|
|
|
function displayAIResponse(response) { |
|
aiResponseContainer.innerHTML = ''; |
|
if (response) { |
|
const aiResultElement = document.createElement('div'); |
|
aiResultElement.classList.add('ai-result'); |
|
const aiHeading = document.createElement('h2'); |
|
aiHeading.textContent = "AI Response"; |
|
aiResultElement.appendChild(aiHeading); |
|
const aiText = document.createElement('p'); |
|
const decodedResponse = decodeHtml(response); |
|
const msg = new SpeechSynthesisUtterance(decodedResponse); |
|
speechSynthesis.speak(msg); |
|
aiText.textContent = decodedResponse; |
|
const pauseButton = document.createElement('button'); |
|
pauseButton.id = 'pause'; |
|
pauseButton.innerHTML = '<i class="fas fa-pause"></i>'; |
|
const stopButton = document.createElement('button'); |
|
stopButton.id = 'stop'; |
|
stopButton.innerHTML = '<i class="fas fa-stop"></i>'; |
|
let isPaused = false; |
|
let isStoped = false; |
|
pauseButton.addEventListener('click', () => { |
|
if ('speechSynthesis' in window) { |
|
if (isPaused) { |
|
window.speechSynthesis.resume(); |
|
isPaused = false; |
|
stopButton.style.display = 'inline-block'; |
|
pauseButton.innerHTML = '<i class="fas fa-pause"></i>'; |
|
} else { |
|
window.speechSynthesis.pause(); |
|
isPaused = true; |
|
stopButton.style.display = 'none'; |
|
pauseButton.innerHTML = '<i class="fas fa-play"></i>'; |
|
} |
|
} |
|
}); |
|
|
|
stopButton.addEventListener('click', () => { |
|
if ('speechSynthesis' in window) { |
|
if (isStoped){ |
|
speechSynthesis.speak(msg); |
|
isPaused = false; |
|
isStoped = false; |
|
pauseButton.innerHTML = '<i class="fas fa-pause"></i>'; |
|
pauseButton.style.display = 'inline-block'; |
|
stopButton.innerHTML = '<i class="fas fa-stop"></i>'; |
|
}else{ |
|
window.speechSynthesis.cancel(); |
|
isPaused = false; |
|
isStoped = true; |
|
pauseButton.style.display = 'none'; |
|
stopButton.innerHTML = '<i class="fas fa-play"></i>'; } |
|
} |
|
}); |
|
|
|
|
|
aiResultElement.appendChild(pauseButton); |
|
aiResultElement.appendChild(stopButton); |
|
|
|
|
|
aiText.setAttribute('style', 'font-size: 1rem; line-height: 1.5rem;'); |
|
aiResultElement.appendChild(aiText); |
|
aiResponseContainer.appendChild(aiResultElement); |
|
} |
|
} |
|
|
|
function updateURLWithQuery(query) { |
|
const newURL = `${window.location.pathname}?query=${encodeURIComponent(query)}`; |
|
window.history.pushState({ |
|
path: newURL |
|
}, '', newURL); |
|
} |
|
|
|
function removeDuplicateResults(results) { |
|
const uniqueResults = []; |
|
const seen = new Set(); |
|
for (const result of results) { |
|
if (!seen.has(result.href)) { |
|
seen.add(result.href); |
|
uniqueResults.push(result); |
|
} |
|
} |
|
return uniqueResults; |
|
} |
|
|
|
async function fetchResults(query, resultsPerPage) { |
|
const response = await fetch(`${BASE_URL}/api/search?q=${encodeURIComponent(query)}&max_results=${resultsPerPage}`); |
|
if (!response.ok) { |
|
displayError("An error occurred while fetching results."); |
|
hideLoading(); |
|
return []; |
|
} |
|
const searchResults = await response.json(); |
|
return searchResults; |
|
} |
|
|
|
const summaryPopup = document.getElementById('summaryPopup'); |
|
const summaryContent = document.getElementById('summaryContent'); |
|
const answerPopup = document.getElementById('answerPopup'); |
|
const answerContent = document.getElementById('answerContent'); |
|
const summaryCache = {}; |
|
const answerCache = {}; |
|
|
|
function displayResults(results, append = false) { |
|
if (!append) { |
|
resultsContainer.innerHTML = ''; |
|
} |
|
const newResults = results.filter(result => !seenUrls.has(result.href)); |
|
newResults.forEach((result, index) => { |
|
seenUrls.add(result.href); |
|
const resultElement = document.createElement("div"); |
|
resultElement.classList.add("result"); |
|
const titleElement = document.createElement("h3"); |
|
const titleLink = document.createElement("a"); |
|
titleLink.href = result.href; |
|
titleLink.textContent = result.title; |
|
titleLink.target = "_blank"; |
|
titleLink.rel = "noopener noreferrer"; |
|
titleElement.appendChild(titleLink); |
|
const urlElement = document.createElement("div"); |
|
urlElement.classList.add("url"); |
|
const urlLink = document.createElement("a"); |
|
urlLink.href = result.href; |
|
urlLink.textContent = result.href; |
|
urlLink.target = "_blank"; |
|
urlLink.rel = "noopener noreferrer"; |
|
urlElement.appendChild(urlLink); |
|
const descriptionElement = document.createElement("p"); |
|
descriptionElement.textContent = result.body; |
|
resultElement.appendChild(titleElement); |
|
resultElement.appendChild(urlElement); |
|
resultElement.appendChild(descriptionElement); |
|
const actionsContainer = document.createElement('div'); |
|
actionsContainer.classList.add('actions'); |
|
const summarizeButton = document.createElement('button'); |
|
summarizeButton.textContent = 'Summarize this site'; |
|
summarizeButton.addEventListener('click', () => { |
|
showSummaryPopup(result.href); |
|
}); |
|
actionsContainer.appendChild(summarizeButton); |
|
const answerButton = document.createElement('button'); |
|
answerButton.textContent = 'Answer from this site'; |
|
answerButton.addEventListener('click', () => { |
|
showAnswerPopup(result.href); |
|
}); |
|
actionsContainer.appendChild(answerButton); |
|
resultElement.appendChild(actionsContainer); |
|
resultsContainer.appendChild(resultElement); |
|
setTimeout(() => { |
|
resultElement.classList.add("show"); |
|
}, 1 * index); |
|
}); |
|
if (resultsContainer.children.length === 0) { |
|
noResultsMessage.style.display = 'block'; |
|
} else { |
|
noResultsMessage.style.display = 'none'; |
|
} |
|
if (!append) { |
|
const endTime = performance.now(); |
|
const timeTaken = (endTime/2 - startTime/2).toFixed(2); |
|
document.getElementById('results-info').textContent = `About ${timeTaken} milliseconds`; |
|
} |
|
} |
|
|
|
function displayError(message) { |
|
resultsContainer.innerHTML = ''; |
|
const errorElement = document.createElement("p"); |
|
errorElement.textContent = message; |
|
errorElement.style.color = "red"; |
|
resultsContainer.appendChild(errorElement); |
|
} |
|
|
|
searchQueryInput.addEventListener("input", debounce(async () => { |
|
selectedSuggestionIndex = -1; |
|
const searchQuery = searchQueryInput.value; |
|
if (searchQuery.trim() === "") { |
|
suggestionsContainer.style.display = "none"; |
|
return; |
|
} |
|
const suggestions = await fetchSuggestions(searchQuery); |
|
displaySuggestions(suggestions); |
|
}, 500)); |
|
|
|
searchQueryInput.addEventListener("focus", () => { |
|
if (searchQueryInput.value.trim() !== "") { |
|
suggestionsContainer.style.display = "block"; |
|
} |
|
}); |
|
|
|
document.addEventListener("click", (event) => { |
|
if (!searchForm.contains(event.target)) { |
|
suggestionsContainer.style.display = "none"; |
|
} |
|
}); |
|
|
|
searchQueryInput.addEventListener("keydown", async (event) => { |
|
if (event.key === "ArrowUp" || event.key === "ArrowDown") { |
|
event.preventDefault(); |
|
const suggestionItems = suggestionsContainer.querySelectorAll("li"); |
|
const numSuggestions = suggestionItems.length; |
|
if (event.key === "ArrowUp") { |
|
selectedSuggestionIndex = (selectedSuggestionIndex - 1 + numSuggestions) % numSuggestions; |
|
} else { |
|
selectedSuggestionIndex = (selectedSuggestionIndex + 1) % numSuggestions; |
|
} |
|
updateSuggestionSelection(); |
|
if (selectedSuggestionIndex !== -1 && suggestionItems[selectedSuggestionIndex]) { |
|
searchQueryInput.value = suggestionItems[selectedSuggestionIndex].textContent; |
|
suggestionItems[selectedSuggestionIndex].focus(); |
|
} |
|
} else if (event.key === "Enter" && selectedSuggestionIndex !== -1) { |
|
event.preventDefault(); |
|
const selectedSuggestion = suggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex]; |
|
if (selectedSuggestion) { |
|
searchQueryInput.value = selectedSuggestion.textContent; |
|
suggestionsContainer.style.display = "none"; |
|
performSearch(searchQueryInput.value); |
|
} |
|
} |
|
}); |
|
|
|
searchForm.addEventListener("submit", async (event) => { |
|
event.preventDefault(); |
|
selectedSuggestionIndex = -1; |
|
const searchQuery = searchQueryInput.value; |
|
performSearch(searchQuery); |
|
}); |
|
|
|
window.addEventListener('scroll', () => { |
|
if (allResultsFetched) return; |
|
const { |
|
scrollTop, |
|
scrollHeight, |
|
clientHeight |
|
} = document.documentElement; |
|
const isNearBottom = scrollTop + clientHeight >= scrollHeight - 100; |
|
if (isNearBottom && allResults.length > seenUrls.size) { |
|
loadingMoreIndicator.classList.add('active'); |
|
const resultsToDisplay = allResults.slice(seenUrls.size, seenUrls.size + RESULTS_PER_PAGE); |
|
setTimeout(() => { |
|
displayResults(resultsToDisplay, true); |
|
for (const result of resultsToDisplay) { |
|
seenUrls.add(result.href); |
|
} |
|
if (allResults.length === seenUrls.size) { |
|
allResultsFetched = true; |
|
loadingMoreIndicator.classList.remove('active'); |
|
} |
|
}, 300); |
|
} |
|
}); |
|
|
|
function getQueryParameter(name) { |
|
const urlParams = new URLSearchParams(window.location.search); |
|
return urlParams.get(name); |
|
} |
|
|
|
window.addEventListener('load', () => { |
|
const initialQuery = getQueryParameter('query'); |
|
if (initialQuery) { |
|
searchQueryInput.value = initialQuery; |
|
performSearch(initialQuery); |
|
} |
|
}); |
|
|
|
function decodeHtml(html) { |
|
var txt = document.createElement("textarea"); |
|
txt.innerHTML = html; |
|
return txt.value; |
|
} |
|
|
|
function showSummaryPopup(url) { |
|
summaryContent.innerHTML = ''; |
|
summaryPopup.querySelector('.loading').style.display = 'block'; |
|
summaryPopup.style.display = 'block'; |
|
if (summaryCache[url]) { |
|
displaySummary(summaryCache[url]); |
|
} else { |
|
fetchWebsiteSummary(url).then(summary => { |
|
summaryCache[url] = summary; |
|
displaySummary(summary); |
|
}).catch(error => { |
|
console.error('Error fetching summary:', error); |
|
displaySummary('Error fetching summary.'); |
|
}); |
|
} |
|
} |
|
|
|
function displaySummary(summary) { |
|
summaryPopup.querySelector('.loading').style.display = 'none'; |
|
summaryContent.textContent = summary; |
|
} |
|
|
|
async function fetchWebsiteSummary(url) { |
|
const response = await fetch(`${BASE_URL}/api/ask_website?url=${url}&question=${encodeURIComponent("Summarize this site in Detail, Do not start with any intro, Just start summarizing. Summarize in this manner which is very important to human user.")}&model=mixtral-8x7b`); |
|
if (!response.ok) { |
|
throw new Error('Error fetching website summary.'); |
|
} |
|
const data = await response.json(); |
|
return data[0] || 'No summary available'; |
|
} |
|
|
|
function showAnswerPopup(url) { |
|
answerContent.innerHTML = ''; |
|
answerPopup.querySelector('.loading').style.display = 'block'; |
|
answerPopup.style.display = 'block'; |
|
if (answerCache[url]) { |
|
displayAnswer(answerCache[url]); |
|
} else { |
|
const question = searchQueryInput.value; |
|
fetchWebsiteAnswer(url, question).then(answer => { |
|
answerCache[url] = answer; |
|
displayAnswer(answer); |
|
}).catch(error => { |
|
console.error('Error fetching answer:', error); |
|
displayAnswer('Error fetching answer.'); |
|
}); |
|
} |
|
} |
|
|
|
function displayAnswer(answer) { |
|
answerPopup.querySelector('.loading').style.display = 'none'; |
|
answerContent.textContent = answer; |
|
} |
|
|
|
async function fetchWebsiteAnswer(url, question) { |
|
const response = await fetch(`${BASE_URL}/api/ask_website?url=${url}&question=${encodeURIComponent(question)}(encodeURIComponent("Answer in concise way, First tell answer then Other thing"))&model=llama-3-70b`); |
|
if (!response.ok) { |
|
throw new Error('Error fetching answer from website.'); |
|
} |
|
const data = await response.json(); |
|
return data[0] || 'No answer found.'; |
|
} |
|
|
|
summaryPopup.querySelector('.close').addEventListener('click', () => { |
|
summaryPopup.style.display = 'none'; |
|
}); |
|
|
|
answerPopup.querySelector('.close').addEventListener('click', () => { |
|
answerPopup.style.display = 'none'; |
|
}); |
|
</script> |
|
</body> |
|
</html> |
