Private-Google

Sleeping

App Files Files Community

KingNish commited on Jun 24, 2024

Commit

4183433

verified ·

1 Parent(s): 5f3d908

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +334 -251

templates/index.html CHANGED Viewed

@@ -1,279 +1,362 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HelpingAI Search</title>
   <style>
-    body, html { margin: 0; padding: 0; font-family: 'Arial', sans-serif; height: 100%; background: #f2f2f2; }
-    .container { display: flex; flex-direction: column; min-height: 100%; }
-    header { padding: 30px; display: flex; justify-content: space-between; align-items: center; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
-    .main-content { flex-grow: 1; display: flex; flex-direction: column; align-items: center; padding: 40px 20px;  transition: margin-left 0.3s; }
-    .logo { font-size: 40px; font-weight: bold; margin-bottom: 20px; color: #4285f4; position: absolute; left: 43vw; top: 6px; }
-    .logo span:nth-child(2) { color: #ea4335; }
-    .logo span:nth-child(3) { color: #fbbc05; }
-    .logo span:nth-child(4) { color: #34a853; }
-    .logo span:nth-child(5) { color: #ea4335; }
-    .search-container { width: 100%; max-width: 700px; margin-bottom: 20px; position: relative; }
-    .search-box { display: flex; border: 1px solid #dfe1e5; border-radius: 24px; padding: 5px 8px; transition: box-shadow 0.3s; background: #fff; }
-    .search-box:hover, .search-box:focus-within { box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); border-color: rgba(223, 225, 229, 0); }
-    #search-query { flex-grow: 1; border: none; outline: none; font-size: 16px; padding: 10px 15px; }
-    button { background: none; border: none; cursor: pointer; padding: 0 15px; }
-    #search-form button svg { width: 20px; height: 20px; }
-    #suggestions { width: 100%; max-width: 700px; border: 1px solid #dfe1e5; border-top: none; border-radius: 0 0 24px 24px; box-shadow: 0 4px 6px rgba(32, 33, 36, 0.28); display: none; position: absolute; background: white; z-index: 1000; }
-    #suggestions ul { list-style-type: none; padding: 0; margin: 0; }
-    #suggestions li { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #eee; }
-    #suggestions li:hover { background-color: #f1f3f4; }
-    #results { width: 100%; max-width: 700px; padding: 20px 0; }
-    .result { margin-bottom: 20px; padding: 15px; border-radius: 8px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
-    .result h3 { margin: 0; font-weight: normal; }
-    .result h3 a { color: #1a0dab; text-decoration: none; font-size: 18px; }
-    .result h3 a:hover { text-decoration: underline; }
-    .result .url { color: #006621; font-size: 14px; margin-bottom: 3px; }
-    .result p { color: #545454; font-size: 14px; line-height: 1.58; margin: 0; }
-    .settings-icon { background: none; border: none; cursor: pointer; padding: 0; position: absolute; right: 5vw; }
-    .settings-icon svg { width: 24px; height: 24px; fill: #333; }
-    .settings-menu { display: none; position: fixed; top: 60px; right: 20px; background: #fff; border: 1px solid #dfe1e5; border-radius: 4px; box-shadow: 0 4px 6px rgba(32, 33, 36, 0.28); padding: 15px; z-index: 1001; width: 300px; }
-    .settings-menu select { display: block; margin-bottom: 10px; padding: 8px 12px; border-radius: 4px; border: 1.6px solid #2b14fa; appearance: none; background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4 7l6 6 6-6z'></path></svg>") no-repeat right 10px center; font-size: 14px; }
-    .settings-menu select:focus { outline: none; box-shadow: 0 0 0 5px #4285f4; }
-    .settings-menu h4 { margin-top: 0; font-weight: bold; color: #333; }
-    /* Sidebar Styling */
-    .sidebar { width: 300px; padding: 20px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: fixed; top: 60px; right: 20px; height: calc(100vh - 60px); overflow-y: auto; display: none; }
-    .sidebar h2, .sidebar h3 { color: #333; margin-bottom: 10px; }
-    .sidebar p { color: #545454; font-size: 14px; line-height: 1.58; margin: 0; }
-    .sidebar ul { list-style: none; padding: 0; margin: 0; }
-    .sidebar li { padding: 5px 0; cursor: pointer; color: #545454; font-size: 14px; }
-    .sidebar li a { text-decoration: none; color: #1a0dab; }
-    .sidebar li a:hover { text-decoration: underline; }
-    /* Responsive Adjustments - You can add more as needed */
-    @media (max-width: 768px) {
-      .main-content { margin-right: 0; /* Hide sidebar on smaller screens */ }
-      .sidebar { display: none !important; /* Ensure sidebar is hidden */ }
-    }
   </style>
-</head>
-<body>
-  <div class="container">
-    <header>
-      <div class="logo">
-        <span>H</span><span>e</span><span>l</span><span>p</span><span>i</span
-        ><span>ng</span><span>AI</span>
-      </div>
-      <button class="settings-icon" onclick="toggleSettings()">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings">
-          <circle cx="12" cy="12" r="3"></circle>
-          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-        </svg>
-      </button>
-      <div class="settings-menu" id="settings-menu">
-        <h4>Time Limit</h4>
-        <select id="timelimit">
-          <option value="none">All Time</option>
-          <option value="d">Day</option>
-          <option value="w">Week</option>
-          <option value="m">Month</option>
-          <option value="y">Year</option>
-        </select>
-        <h4>Safe Search</h4>
-        <select id="safesearch">
-          <option value="off">Off</option>
-          <option value="moderate">Moderate</option>
-          <option value="on">On</option>
-        </select>
-      </div>
-    </header>
-    <div class="sidebar" id="sidebar">
-      <div id="about-section" style="display: none">
-        <h2>About</h2>
-        <p id="about-description"></p>
-      </div>
-      <div id="people-also-search-section" style="display: none">
-        <h3>People Also Search For</h3>
-        <ul id="people-also-search-list"></ul>
-      </div>
-    </div>
-    <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">
-              <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px">
-                <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
-              </svg>
-            </button>
-          </div>
-        </form>
-        <div id="suggestions"></div>
-      </div>
-      <div id="results"></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 timelimitSelect = document.getElementById("timelimit");
-    const safesearchSelect = document.getElementById("safesearch");
-    const resultsContainer = document.getElementById("results");
-    const suggestionsContainer = document.getElementById("suggestions");
-    const peopleAlsoSearchList = document.getElementById("people-also-search-list");
-    const peopleAlsoSearchSection = document.getElementById("people-also-search-section");
-    const aboutSection = document.getElementById("about-section");
-    const sidebar = document.getElementById("sidebar");
-    // Function to fetch search suggestions
-    async function fetchSuggestions(query) {
-      const response = await fetch(`${BASE_URL}/api/suggestions?q=${encodeURIComponent(query)}`);
-      return response.ok ? response.json() : [];
     }
-    // Function to display search suggestions
-    function displaySuggestions(suggestions) {
-      suggestionsContainer.innerHTML = "";
-      if (suggestions.length === 0) {
-        suggestionsContainer.style.display = "none";
-        return;
-      }
-      const suggestionList = document.createElement("ul");
-      suggestions.forEach((suggestion) => {
-        const listItem = document.createElement("li");
-        listItem.textContent = suggestion.phrase;
-        listItem.addEventListener("click", () => {
-          searchQueryInput.value = suggestion.phrase;
-          suggestionsContainer.style.display = "none";
-          performSearch(suggestion.phrase);
-        });
-        suggestionList.appendChild(listItem);
-      });
-      suggestionsContainer.appendChild(suggestionList);
-      suggestionsContainer.style.display = "block";
     }
-    // Function to handle search form submission
-    async function performSearch(query, timelimit, safesearch) {
-      const timelimitValue = timelimitSelect.value;
-      const safesearchValue = safesearchSelect.value;
-      const response = await fetch(`${BASE_URL}/api/search?q=${encodeURIComponent(query)}&max_results=100&timelimit=${timelimitValue}&safesearch=${safesearchValue}`);
-      const searchResults = await response.json();
-      displayResults(searchResults);
       suggestionsContainer.style.display = "none";
-      // Fetch and display "People Also Search For" and "About"
-      const peopleAlsoSearchData = await getPeopleAlsoSearch(query);
-      displayPeopleAlsoSearch(peopleAlsoSearchData.filter(item => item.topic === "See also").slice(0, 6));
-      const aboutDescription = peopleAlsoSearchData.find(item => item.topic === null);
-      if (aboutDescription) {
-        document.getElementById("about-description").textContent = aboutDescription.text;
-        aboutSection.style.display = "block";
-      } else {
-        aboutSection.style.display = "none";
-      }
-      // Show/hide sidebar based on content
-      sidebar.style.display = aboutSection.style.display === "block" || peopleAlsoSearchList.children.length > 0 ? "block" : "none";
-      document.querySelector(".main-content").style.marginLeft = sidebar.style.display === "block" ? "320px" : "0px";
-    }
-    // Function to fetch "People Also Search For" data
-    async function getPeopleAlsoSearch(query) {
-      const response = await fetch(`${BASE_URL}/api/answers?q=${encodeURIComponent(query)}`);
-      return response.ok ? response.json() : [];
     }
-    // Function to display "People Also Search For" results
-    function displayPeopleAlsoSearch(data) {
-      peopleAlsoSearchList.innerHTML = "";
-      data.forEach((item) => {
-        const listItem = document.createElement("li");
-        const link = document.createElement("a");
-        link.href = item.url;
-        link.textContent = item.text;
-        link.target = "_blank";
-        link.rel = "noopener noreferrer";
-        listItem.appendChild(link);
-        peopleAlsoSearchList.appendChild(listItem);
-      });
-      peopleAlsoSearchSection.style.display = data.length > 0 ? "block" : "none";
-    }
-    // Function to display search results
-    function displayResults(results) {
-      resultsContainer.innerHTML = "";
-      if (results.length === 0) {
-        displayError("No results found.");
-        return;
-      }
-      results.forEach((result) => {
-        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");
-        urlElement.textContent = result.href;
-        const descriptionElement = document.createElement("p");
-        descriptionElement.textContent = result.body;
-        resultElement.appendChild(titleElement);
-        resultElement.appendChild(urlElement);
-        resultElement.appendChild(descriptionElement);
-        resultsContainer.appendChild(resultElement);
-      });
     }
-    // Function to display an error message
-    function displayError(message) {
-      resultsContainer.innerHTML = "";
-      const errorElement = document.createElement("p");
-      errorElement.textContent = message;
-      errorElement.style.color = "red";
-      resultsContainer.appendChild(errorElement);
     }
-    // Function to toggle the settings menu
-    function toggleSettings() {
-      const settingsMenu = document.getElementById("settings-menu");
-      settingsMenu.style.display = settingsMenu.style.display === "block" ? "none" : "block";
     }
-    // Event listeners for search input and form submission
-    searchQueryInput.addEventListener("input", async () => {
-      const searchQuery = searchQueryInput.value;
-      if (searchQuery.trim() === "") {
-        suggestionsContainer.style.display = "none";
-        return;
-      }
-      const suggestions = await fetchSuggestions(searchQuery);
-      displaySuggestions(suggestions);
-    });
-    searchQueryInput.addEventListener("focus", () => {
-      if (searchQueryInput.value.trim() !== "") {
-        suggestionsContainer.style.display = "block";
-      }
     });
-    document.addEventListener("click", (event) => {
-      if (!searchForm.contains(event.target)) {
-        suggestionsContainer.style.display = "none";
-      }
-    });
-    searchForm.addEventListener("submit", async (event) => {
-      event.preventDefault();
-      const searchQuery = searchQueryInput.value;
-      performSearch(searchQuery);
-    });
   </script>
-</body>
 </html>

 <!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%}
+.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";font-family:"Font Awesome 5 Free";font-weight:900;font-size:1.2em;color:#9aa0a6;transition:color .2s ease,transform .2s ease}
+#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{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}
+@keyframes fadeInUp {
+from{opacity:0;transform:translateY(20px)}
+to{opacity:1;transform:translateY(0)}
+}
+.result.show{opacity:1;transform:translateY(0)}
+.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}
+#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}
   </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="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>
   <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 INITIAL_RESULTS = 5;
+   const CACHED_RESULTS = 50;
+   const RESULTS_PER_PAGE = 10;
+   let allResultsFetched = false;
+   const seenUrls = new Set();
+   let selectedSuggestionIndex = -1;
+   let suggestionRequestTimeout;
+   let cachedSearchResults = [];
+   const suggestionCache = {};
+   let prefetchTimeout;
+   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';
+   }
+   let startTime;
+   async function performSearch(query) {
+    showLoading();
+    seenUrls.clear();
+    allResultsFetched = false;
+    resultsContainer.innerHTML = '';
+    noResultsMessage.style.display = 'none';
+    loadingMoreIndicator.classList.remove('active');
+    suggestionsContainer.style.display = 'none';
+	startTime = performance.now();
+    const initialResults = await fetchResults(query, INITIAL_RESULTS);
+    updateURLWithQuery(query);
+    displayResults(initialResults);
+    hideLoading();
+    if (initialResults.length > 0) {
+     cachedSearchResults = await fetchResults(query, CACHED_RESULTS);
+     cachedSearchResults = removeDuplicateResults(cachedSearchResults);
+    } else {
+     cachedSearchResults = [];
     }
+   }
+   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;
+   }
+   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);
+     resultsContainer.appendChild(resultElement);
+     setTimeout(() => {
+      resultElement.classList.add("show");
+     }, 100 * index);
     });
+    noResultsMessage.style.display = resultsContainer.children.length === 0 ? 'block' : 'none';
+    if (!append) {
+     const endTime = performance.now();
+     const timeTaken = (endTime - startTime).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 || cachedSearchResults.length === 0) return;
+    const {
+     scrollTop,
+     scrollHeight,
+     clientHeight
+    } = document.documentElement;
+    if (scrollTop + clientHeight >= scrollHeight - 100 && !loadingMoreIndicator.classList.contains("active")) {
+     loadingMoreIndicator.classList.add("active");
+     const resultsToDisplay = cachedSearchResults.splice(0, RESULTS_PER_PAGE);
+     if (resultsToDisplay.length > 0) {
+      displayResults(resultsToDisplay, true);
+     }
+     if (cachedSearchResults.length === 0) {
+      allResultsFetched = true;
+     }
+     loadingMoreIndicator.classList.remove("active");
+    }
+   });
+   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);
+    }
+   });
   </script>
+ </body>
 </html>