|
<!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} |
|
@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)} |
|
} |
|
#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 p span{opacity:0;animation:slideUp .5s forwards;counter-increment:word-count;animation-delay:calc(0.1s * var(--word-count))} |
|
@keyframes slideUp { |
|
0%{opacity:0;transform:translateY(10px)} |
|
100%{opacity:1;transform:translateY(0)} |
|
} |
|
</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> |
|
</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> |
|
</div> |
|
<div id="answerContent"></div> |
|
</div> |
|
</div> |
|
<script> |
|
const BASE_URL="https://oevortex-webscout-api.hf.space",searchForm=document.getElementById("search-form"),searchQueryInput=document.getElementById("search-query"),resultsContainer=document.getElementById("results"),suggestionsContainer=document.getElementById("suggestions"),loadingOverlay=document.querySelector(".loading-overlay"),noResultsMessage=document.getElementById("no-results"),loadingMoreIndicator=document.getElementById("loading-more"),aiResponseContainer=document.getElementById("ai-response"),INITIAL_RESULTS=5,CACHED_RESULTS=50,RESULTS_PER_PAGE=10;let allResultsFetched=!1;const seenUrls=new Set;let suggestionRequestTimeout,selectedSuggestionIndex=-1,cachedSearchResults=[];const suggestionCache={};let prefetchTimeout,startTime,allResults=[];function debounce(e,t){return function(){clearTimeout(suggestionRequestTimeout),suggestionRequestTimeout=setTimeout((()=>{e.apply(this,arguments)}),t)}}async function fetchSuggestions(e){if(suggestionCache[e])return suggestionCache[e];try{const t=await fetch(`${BASE_URL}/api/suggestions?q=${encodeURIComponent(e)}`);if(t.ok){const n=await t.json();return suggestionCache[e]=n,n}return console.error("Error fetching suggestions:",t.status),[]}catch(e){return console.error("Error fetching suggestions:",e),[]}}function displaySuggestions(e){if(suggestionsContainer.innerHTML="",0===e.length||""===searchQueryInput.value.trim())return void(suggestionsContainer.style.display="none");const t=document.createElement("ul");e.forEach(((e,n)=>{const s=document.createElement("li");s.textContent=e.phrase,s.addEventListener("click",(()=>{searchQueryInput.value=e.phrase,suggestionsContainer.style.display="none",performSearch(e.phrase)})),s.addEventListener("focus",(()=>{selectedSuggestionIndex=n,updateSuggestionSelection()})),t.appendChild(s)})),suggestionsContainer.appendChild(t),suggestionsContainer.style.display="block"}function updateSuggestionSelection(){suggestionsContainer.querySelectorAll("li").forEach(((e,t)=>{e.classList.toggle("selected",t===selectedSuggestionIndex)}))}function showLoading(){loadingOverlay.style.display="block"}function hideLoading(){loadingOverlay.style.display="none"}async function performSearch(e){showLoading(),aiResponseContainer.style.display="none",suggestionsContainer.style.display="none",startTime=performance.now(),seenUrls.clear(),allResultsFetched=!1,resultsContainer.innerHTML="",noResultsMessage.style.display="none",loadingMoreIndicator.classList.remove("active");displayResults(await fetchResults(e,INITIAL_RESULTS)),hideLoading(),fetchResults(e,CACHED_RESULTS).then((e=>{cachedSearchResults=removeDuplicateResults(e),allResults=allResults.concat(cachedSearchResults),displayResults(cachedSearchResults.slice(INITIAL_RESULTS,RESULTS_PER_PAGE),!0),cachedSearchResults.length>RESULTS_PER_PAGE&&(allResultsFetched=!1,loadingMoreIndicator.classList.add("active"))})),fetchAIResponse(e).then((e=>{displayAIResponse(e),aiResponseContainer.style.display="block"})).catch((e=>{console.error("Error fetching AI response:",e)})),updateURLWithQuery(e)}async function fetchAIResponse(e){try{const t=encodeURIComponent(e),n=await fetch(`${BASE_URL}/api/ask_website?url=https://google.com/search?q=${t}&question=${t}`);if(n.ok){return await n.json()}return console.error("Error fetching AI response from website:",n.status),null}catch(e){return console.error("Error fetching AI response from website:",e),null}}function displayAIResponse(e){if(aiResponseContainer.innerHTML="",e){const t=document.createElement("div");t.classList.add("ai-result");const n=document.createElement("h2");n.textContent="AI Response",t.appendChild(n);const s=document.createElement("p"),o=decodeHtml(e).split(" ");let r="",a=0,i=10;!function e(){if(a<o.length){const t=o[a];if(r.length+t.length+1>100){const e=document.createElement("span");e.textContent=r.trim(),s.appendChild(e),r=t+" "}else r+=t+" ";a++,setTimeout(e,i)}else{const e=document.createElement("span");e.textContent=r.trim(),s.appendChild(e)}}(),s.setAttribute("style","font-size: 1rem; line-height: 1.5rem;"),t.appendChild(s),aiResponseContainer.appendChild(t),setTimeout((()=>{t.classList.add("show"),aiResponseContainer.style.display="block",hideLoading()}),100)}}function updateURLWithQuery(e){const t=`${window.location.pathname}?query=${encodeURIComponent(e)}`;window.history.pushState({path:t},"",t)}function removeDuplicateResults(e){const t=[],n=new Set;for(const s of e)n.has(s.href)||(n.add(s.href),t.push(s));return t}async function fetchResults(e,t){const n=await fetch(`${BASE_URL}/api/search?q=${encodeURIComponent(e)}&max_results=${t}`);if(!n.ok)return displayError("An error occurred while fetching results."),hideLoading(),[];return await n.json()}searchQueryInput.addEventListener("input",(()=>{clearTimeout(prefetchTimeout);const e=searchQueryInput.value.trim();""!==e?prefetchTimeout=setTimeout((async()=>{displaySuggestions(await fetchSuggestions(e))}),100):suggestionsContainer.style.display="none"}));const summaryPopup=document.getElementById("summaryPopup"),summaryContent=document.getElementById("summaryContent"),answerPopup=document.getElementById("answerPopup"),answerContent=document.getElementById("answerContent"),summaryCache={},answerCache={};function displayResults(e,t=!1){t||(resultsContainer.innerHTML="");if(e.filter((e=>!seenUrls.has(e.href))).forEach(((e,t)=>{seenUrls.add(e.href);const n=document.createElement("div");n.classList.add("result");const s=document.createElement("h3"),o=document.createElement("a");o.href=e.href,o.textContent=e.title,o.target="_blank",o.rel="noopener noreferrer",s.appendChild(o);const r=document.createElement("div");r.classList.add("url");const a=document.createElement("a");a.href=e.href,a.textContent=e.href,a.target="_blank",a.rel="noopener noreferrer",r.appendChild(a);const i=document.createElement("p");i.textContent=e.body,n.appendChild(s),n.appendChild(r),n.appendChild(i);const l=document.createElement("div");l.classList.add("actions");const c=document.createElement("button");c.textContent="Summarize this site",c.addEventListener("click",(()=>{showSummaryPopup(e.href)})),l.appendChild(c);const u=document.createElement("button");u.textContent="Answer from this site",u.addEventListener("click",(()=>{showAnswerPopup(e.href)})),l.appendChild(u),n.appendChild(l),resultsContainer.appendChild(n),setTimeout((()=>{n.classList.add("show")}),100*t)})),0===resultsContainer.children.length?noResultsMessage.style.display="block":noResultsMessage.style.display="none",!t){const e=(performance.now()/2-startTime/2).toFixed(2);document.getElementById("results-info").textContent=`About ${e} milliseconds`}}function displayError(e){resultsContainer.innerHTML="";const t=document.createElement("p");t.textContent=e,t.style.color="red",resultsContainer.appendChild(t)}function getQueryParameter(e){return new URLSearchParams(window.location.search).get(e)}function decodeHtml(e){var t=document.createElement("textarea");return t.innerHTML=e,t.value}function showSummaryPopup(e){summaryContent.innerHTML="",summaryPopup.querySelector(".loading").style.display="block",summaryPopup.style.display="block",summaryCache[e]?displaySummary(summaryCache[e]):fetchWebsiteSummary(e).then((t=>{summaryCache[e]=t,displaySummary(t)})).catch((e=>{console.error("Error fetching summary:",e),displaySummary("Error fetching summary.")}))}function displaySummary(e){summaryPopup.querySelector(".loading").style.display="none",summaryContent.textContent=e}async function fetchWebsiteSummary(e){const t=await fetch(`${BASE_URL}/api/website_summarizer?url=${e}`);if(!t.ok)throw new Error("Error fetching website summary.");return(await t.json())[0]||"No summary available"}function showAnswerPopup(e){if(answerContent.innerHTML="",answerPopup.querySelector(".loading").style.display="block",answerPopup.style.display="block",answerCache[e])displayAnswer(answerCache[e]);else{const t=searchQueryInput.value;fetchWebsiteAnswer(e,t).then((t=>{answerCache[e]=t,displayAnswer(t)})).catch((e=>{console.error("Error fetching answer:",e),displayAnswer("Error fetching answer.")}))}}function displayAnswer(e){answerPopup.querySelector(".loading").style.display="none",answerContent.textContent=e}async function fetchWebsiteAnswer(e,t){const n=await fetch(`${BASE_URL}/api/ask_website?url=${e}&question=${encodeURIComponent(t)}`);if(!n.ok)throw new Error("Error fetching answer from website.");return(await n.json())[0]||"No answer found."}searchQueryInput.addEventListener("input",debounce((async()=>{selectedSuggestionIndex=-1;const e=searchQueryInput.value;if(""===e.trim())return void(suggestionsContainer.style.display="none");displaySuggestions(await fetchSuggestions(e))}),500)),searchQueryInput.addEventListener("focus",(()=>{""!==searchQueryInput.value.trim()&&(suggestionsContainer.style.display="block")})),document.addEventListener("click",(e=>{searchForm.contains(e.target)||(suggestionsContainer.style.display="none")})),searchQueryInput.addEventListener("keydown",(async e=>{if("ArrowUp"===e.key||"ArrowDown"===e.key){e.preventDefault();const t=suggestionsContainer.querySelectorAll("li"),n=t.length;selectedSuggestionIndex="ArrowUp"===e.key?(selectedSuggestionIndex-1+n)%n:(selectedSuggestionIndex+1)%n,updateSuggestionSelection(),-1!==selectedSuggestionIndex&&t[selectedSuggestionIndex]&&(searchQueryInput.value=t[selectedSuggestionIndex].textContent,t[selectedSuggestionIndex].focus())}else if("Enter"===e.key&&-1!==selectedSuggestionIndex){e.preventDefault();const t=suggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex];t&&(searchQueryInput.value=t.textContent,suggestionsContainer.style.display="none",performSearch(searchQueryInput.value))}})),searchForm.addEventListener("submit",(async e=>{e.preventDefault(),selectedSuggestionIndex=-1;performSearch(searchQueryInput.value)})),window.addEventListener("scroll",(()=>{if(allResultsFetched)return;const{scrollTop:e,scrollHeight:t,clientHeight:n}=document.documentElement;if(e+n>=t-100&&allResults.length>seenUrls.size){loadingMoreIndicator.classList.add("active");const e=allResults.slice(seenUrls.size,seenUrls.size+RESULTS_PER_PAGE);setTimeout((()=>{displayResults(e,!0);for(const t of e)seenUrls.add(t.href);allResults.length===seenUrls.size&&(allResultsFetched=!0,loadingMoreIndicator.classList.remove("active"))}),300)}})),window.addEventListener("load",(()=>{const e=getQueryParameter("query");e&&(searchQueryInput.value=e,performSearch(e))})),summaryPopup.querySelector(".close").addEventListener("click",(()=>{summaryPopup.style.display="none"})),answerPopup.querySelector(".close").addEventListener("click",(()=>{answerPopup.style.display="none"})); |
|
</script> |
|
</body> |
|
</html> |
