Update index.html

index.html

@@ -39,7 +39,7 @@ a:hover{text-decoration:underline}
 .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}
+.ai-result{background-color:#f0f0f5;width:100%;max-width:800px}
 @keyframes fadeInUp {
 from{opacity:0;transform:translateY(20px)}
 to{opacity:1;transform:translateY(0)}
@@ -55,6 +55,8 @@ to{opacity:1;transform:translateY(0)}
 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)}
@@ -70,10 +72,33 @@ to{opacity:1;transform:translateY(0)}
 #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)}
+.ai-result .actions {
+  display: flex;
+  justify-content: flex-end; /* Align buttons to the right */
+  margin-top: 10px;
+}
+
+.ai-result .actions button {
+  background-color: #f2f2f2;
+  color: #000;
+  border: 1px solid #ddd;
+  padding: 8px 12px; /* Adjust padding if needed */
+  border-radius: 20px;
+  font-size: .9rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color .2s ease, box-shadow .2s ease;
+  margin-left: 10px; /* Add space between buttons */
+}
+
+.ai-result .actions button:hover {
+  background-color: #e0e0e0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.ai-result .actions button i { /* Style Font Awesome icons */
+  font-size: 1.2rem; /* Adjust icon size as needed */
+  color: #333;
 }
   </style>
  </head>
@@ -102,23 +127,515 @@ to{opacity:1;transform:translateY(0)}
   <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 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>
-    </div>
+<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",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"}));
+   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>'; }
+			}
+      });
+
+      // Add the buttons to the actions container
+      aiResultElement.appendChild(pauseButton);
+      aiResultElement.appendChild(stopButton);
+
+      // Style the AI response text
+      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>