add param filter

index.html

@@ -123,7 +123,7 @@
                 <select
                   id="searchSortSelect"
                   class="text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
-                  onchange="handleSortChange('search')"
+                  onchange="handleFilterChange('search')"
                 >
                   <option value="similarity">Sort by relevance</option>
                   <option value="likes">Sort by likes</option>
@@ -175,6 +175,24 @@
                           onchange="handleFilterChange('search')"
                         />
                       </div>
+                      <div id="searchParamRange" class="hidden">
+                        <label
+                          class="block text-sm font-medium text-gray-700 mb-1"
+                          >Parameter Range</label
+                        >
+                        <select
+                          id="searchParamRangeSelect"
+                          class="w-full text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
+                          onchange="handleFilterChange('search')"
+                        >
+                          <option value="any">Any</option>
+                          <option value="0-1">0-1B</option>
+                          <option value="1-7">1-7B</option>
+                          <option value="7-20">7-20B</option>
+                          <option value="20-70">20-70B</option>
+                          <option value="70+">70B+</option>
+                        </select>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -217,7 +235,7 @@
                 <select
                   id="similarSortSelect"
                   class="text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
-                  onchange="handleSortChange('similar')"
+                  onchange="handleFilterChange('similar')"
                 >
                   <option value="similarity">Sort by relevance</option>
                   <option value="likes">Sort by likes</option>
@@ -269,6 +287,24 @@
                           onchange="handleFilterChange('similar')"
                         />
                       </div>
+                      <div id="similarParamRange" class="hidden">
+                        <label
+                          class="block text-sm font-medium text-gray-700 mb-1"
+                          >Parameter Range</label
+                        >
+                        <select
+                          id="similarParamRangeSelect"
+                          class="w-full text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
+                          onchange="handleFilterChange('similar')"
+                        >
+                          <option value="any">Any</option>
+                          <option value="0-1">0-1B</option>
+                          <option value="1-7">1-7B</option>
+                          <option value="7-20">7-20B</option>
+                          <option value="20-70">20-70B</option>
+                          <option value="70+">70B+</option>
+                        </select>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -282,6 +318,9 @@
                   class="w-full p-3 border border-gray-200 rounded-lg"
                   placeholder="e.g. openai/gsm8k or meta-llama/Llama-2-7b"
                 />
+                <div id="similarLoader" class="hidden absolute right-3 top-3">
+                  <i data-lucide="loader-2" class="animate-spin"></i>
+                </div>
                 <div
                   id="suggestionsBox"
                   class="hidden absolute w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto"
@@ -400,6 +439,7 @@
       let currentType = INITIAL_TYPE;
       let currentMinLikes = 0;
       let currentMinDownloads = 0;
+      let currentParamFilter = "any";
 
       // Initialize Lucide icons
       lucide.createIcons();
@@ -417,6 +457,10 @@
         document.getElementById(`${tabId}Content`).classList.remove("hidden");
         document.getElementById(`${tabId}Tab`).classList.add("active");
 
+        // Remove reference to non-existent elements
+        // Display parameter filter UI if needed
+        updateParamFilterUI();
+
         // Clear results container when switching to trending tab
         if (tabId === "trending") {
           document.getElementById("resultsContainer").innerHTML = "";
@@ -433,6 +477,9 @@
         } else if (tabId === "trending") {
           updateURL({ tab: "trending", q: null, similar: null });
         }
+
+        // Update parameter filter UI after tab switch
+        updateParamFilterUI();
       }
 
       // Create result card
@@ -571,6 +618,97 @@
         window.history.pushState({}, "", newURL);
       }
 
+      // Add this function before the searchResources definition
+      // This function needs to be defined before searchResources uses it
+      async function performSearch(query, page = 1) {
+        if (query.length < MIN_SEARCH_LENGTH) {
+          document.getElementById("resultsContainer").innerHTML = "";
+          updateURL({ q: null, similar: null }); // Clear URL params
+          return;
+        }
+
+        document.getElementById("searchLoader").classList.remove("hidden");
+        document.getElementById("errorMessage").classList.add("hidden");
+
+        // Update URL with search query and type
+        updateURL({
+          q: query,
+          similar: null,
+          type: currentType,
+          tab: "search",
+        });
+
+        try {
+          const endpoint = `${API_URL}/search/${currentType}`;
+          const params = new URLSearchParams({
+            query: query,
+            k: RESULTS_PER_PAGE * page,
+            sort_by: currentSort,
+            min_likes: currentMinLikes,
+            min_downloads: currentMinDownloads,
+          });
+
+          // Add parameter filters for models
+          if (currentType === "models" && currentParamFilter !== "any") {
+            if (currentParamFilter.includes("-")) {
+              const [min, max] = currentParamFilter.split("-");
+              params.append("min_param_count", parseInt(min) * 1e9);
+              params.append("max_param_count", parseInt(max) * 1e9);
+            } else if (currentParamFilter.endsWith("+")) {
+              params.append(
+                "min_param_count",
+                parseInt(currentParamFilter.replace("+", "")) * 1e9
+              );
+            }
+          }
+
+          const response = await fetch(`${endpoint}?${params}`);
+          if (!response.ok) throw new Error("Search failed");
+
+          const data = await response.json();
+          displayResults(data.results, page);
+        } catch (error) {
+          console.error("Search error:", error);
+          showError("Failed to perform search. Please try again.");
+        } finally {
+          document.getElementById("searchLoader").classList.add("hidden");
+        }
+      }
+
+      // Add this function to handle toggling filters
+      // This needs to be defined before it's referenced in the HTML
+      function toggleFilters(tab) {
+        const popover = document.getElementById(`${tab}FiltersPopover`);
+        popover.classList.toggle("hidden");
+
+        // Close other popovers
+        const otherTab = tab === "search" ? "similar" : "search";
+        document
+          .getElementById(`${otherTab}FiltersPopover`)
+          .classList.add("hidden");
+      }
+
+      // Helper function for syncing param values between tabs
+      function syncParamFilterValues() {
+        const searchParamSelect = document.getElementById(
+          "searchParamRangeSelect"
+        );
+        const similarParamSelect = document.getElementById(
+          "similarParamRangeSelect"
+        );
+
+        // When updating one, update both and the global variable
+        if (searchParamSelect && similarParamSelect) {
+          if (searchParamSelect.value !== currentParamFilter) {
+            currentParamFilter = searchParamSelect.value;
+            similarParamSelect.value = currentParamFilter;
+          } else if (similarParamSelect.value !== currentParamFilter) {
+            currentParamFilter = similarParamSelect.value;
+            searchParamSelect.value = currentParamFilter;
+          }
+        }
+      }
+
       // Modify the search function to handle both datasets and models
       const searchResources = _.debounce(async (query, page = 1) => {
         performSearch(query, page);
@@ -633,6 +771,20 @@
             limit: limit,
           });
 
+          // Add parameter filters for models
+          if (type === "models" && currentParamFilter !== "any") {
+            if (currentParamFilter.includes("-")) {
+              const [min, max] = currentParamFilter.split("-");
+              queryParams.append("min_param_count", parseInt(min) * 1e9);
+              queryParams.append("max_param_count", parseInt(max) * 1e9);
+            } else if (currentParamFilter.endsWith("+")) {
+              queryParams.append(
+                "min_param_count",
+                parseInt(currentParamFilter.replace("+", "")) * 1e9
+              );
+            }
+          }
+
           const response = await fetch(`${endpoint}?${queryParams}`);
 
           if (!response.ok) {
@@ -717,10 +869,8 @@
           tab: "similar",
         });
 
-        const similarLoader = document.getElementById("similarLoader");
-        if (similarLoader) {
-          similarLoader.classList.remove("hidden");
-        }
+        // Show loader and hide error message
+        document.getElementById("similarLoader").classList.remove("hidden");
         document.getElementById("errorMessage").classList.add("hidden");
 
         try {
@@ -728,11 +878,29 @@
           const paramName =
             currentType === "datasets" ? "dataset_id" : "model_id";
 
-          const response = await fetch(
-            `${endpoint}?${paramName}=${encodeURIComponent(resourceId)}&k=${
-              RESULTS_PER_PAGE * page
-            }&sort_by=${currentSort}&min_likes=${currentMinLikes}&min_downloads=${currentMinDownloads}`
-          );
+          const params = new URLSearchParams({
+            [paramName]: resourceId,
+            k: RESULTS_PER_PAGE * page,
+            sort_by: currentSort,
+            min_likes: currentMinLikes,
+            min_downloads: currentMinDownloads,
+          });
+
+          // Add parameter filters for models
+          if (currentType === "models" && currentParamFilter !== "any") {
+            if (currentParamFilter.includes("-")) {
+              const [min, max] = currentParamFilter.split("-");
+              params.append("min_param_count", parseInt(min) * 1e9);
+              params.append("max_param_count", parseInt(max) * 1e9);
+            } else if (currentParamFilter.endsWith("+")) {
+              params.append(
+                "min_param_count",
+                parseInt(currentParamFilter.replace("+", "")) * 1e9
+              );
+            }
+          }
+
+          const response = await fetch(`${endpoint}?${params}`);
           if (!response.ok) throw new Error("Similarity search failed");
 
           const data = await response.json();
@@ -740,9 +908,8 @@
         } catch (error) {
           showError(`Failed to find similar ${currentType}. Please try again.`);
         } finally {
-          if (similarLoader) {
-            similarLoader.classList.add("hidden");
-          }
+          // Hide the loader when done
+          document.getElementById("similarLoader").classList.add("hidden");
         }
       }
 
@@ -967,28 +1134,34 @@
         }
       }
 
-      // Modify the selectType function to be simpler
+      // Update selectType to preserve parameter filter selection
       function selectType(type) {
+        // Store current filter value before changing type
+        const currentParamValue = currentParamFilter;
+
         // Update the current type
         currentType = type;
 
-        // Update all select elements to match
+        // Update the type selectors to maintain consistency
         document.getElementById("searchTypeSelect").value = type;
         document.getElementById("similarTypeSelect").value = type;
-        document.getElementById("trendingTypeSelect").value = type;
 
-        // Update placeholder text for similar tab
-        const resourceInput = document.getElementById("resourceInput");
-        resourceInput.placeholder =
-          type === "datasets"
-            ? "e.g. openai/gsm8k"
-            : "e.g. meta-llama/Llama-2-7b";
+        // We no longer need to show/hide parameter filter sections
+        // since we've removed them from the popovers
 
-        // Clear results and reset page
-        currentPage = 1;
-        document.getElementById("resultsContainer").innerHTML = "";
+        if (type !== "models") {
+          // Reset parameter filters when switching away from models
+          currentParamFilter = "any";
+        }
 
-        // Re-run the current search with new type
+        // Update filter indicators
+        updateFilterIndicators("search");
+        updateFilterIndicators("similar");
+
+        // Update the parameter filter UI - this will show/hide based on type
+        updateParamFilterUI();
+
+        // Re-run search if needed
         const activeTab = document.querySelector(".tab-trigger.active").id;
         if (activeTab === "searchTab") {
           const searchQuery = document.getElementById("searchInput").value;
@@ -1001,206 +1174,295 @@
             findSimilarResources(1);
           }
         } else if (activeTab === "trendingTab") {
-          // Reload trending tab with new type
           loadTrendingResources(type);
         }
-
-        // Update URL with the new type
-        updateURL({ type: currentType });
       }
 
-      // Add a non-debounced version of the search function
-      async function performSearch(query, page = 1) {
-        if (query.length < MIN_SEARCH_LENGTH) {
-          document.getElementById("resultsContainer").innerHTML = "";
-          updateURL({ q: null, similar: null }); // Clear URL params
-          return;
-        }
+      // Add this helper function to update filter indicators consistently
+      function updateFilterIndicators(tab) {
+        const activeFiltersSpan = document.getElementById(
+          `${tab}ActiveFilters`
+        );
 
-        document.getElementById("searchLoader").classList.remove("hidden");
-        document.getElementById("errorMessage").classList.add("hidden");
+        // Count active filters
+        let activeCount =
+          (currentMinLikes > 0 ? 1 : 0) +
+          (currentMinDownloads > 0 ? 1 : 0) +
+          (currentType === "models" && currentParamFilter !== "any" ? 1 : 0);
 
-        // Update URL with search query and type
-        updateURL({
-          q: query,
-          similar: null,
-          type: currentType,
-          tab: "search",
-        });
+        if (activeCount > 0) {
+          activeFiltersSpan.textContent = activeCount;
+          activeFiltersSpan.classList.remove("hidden");
+        } else {
+          activeFiltersSpan.classList.add("hidden");
+        }
+      }
 
-        try {
-          const endpoint = `${API_URL}/search/${currentType}`;
-          const params = new URLSearchParams({
-            query: query,
-            k: RESULTS_PER_PAGE * page,
-            sort_by: currentSort,
-            min_likes: currentMinLikes,
-            min_downloads: currentMinDownloads,
-          });
+      // Improved handleFilterChange function
+      function handleFilterChange(tab) {
+        const minLikesInput = document.getElementById(`${tab}MinLikes`);
+        const minDownloadsInput = document.getElementById(`${tab}MinDownloads`);
+        const paramRangeSelect = document.getElementById(
+          `${tab}ParamRangeSelect`
+        );
+        const sortSelect = document.getElementById(`${tab}SortSelect`);
+        const activeFiltersSpan = document.getElementById(
+          `${tab}ActiveFilters`
+        );
 
-          const response = await fetch(`${endpoint}?${params}`);
-          if (!response.ok) throw new Error("Search failed");
+        // Update the global filter values
+        currentMinLikes = parseInt(minLikesInput.value) || 0;
+        currentMinDownloads = parseInt(minDownloadsInput.value) || 0;
 
-          const data = await response.json();
-          displayResults(data.results, page);
-        } catch (error) {
-          console.error("Search error:", error);
-          showError("Failed to perform search. Please try again.");
-        } finally {
-          document.getElementById("searchLoader").classList.add("hidden");
+        // Update sort value from the select element
+        if (sortSelect) {
+          currentSort = sortSelect.value;
         }
-      }
 
-      // Update the event listeners section
-      document.addEventListener("DOMContentLoaded", async () => {
-        const resourceInput = document.getElementById("resourceInput");
-        let programmaticFocus = false;
-
-        // Set initial type from URL
-        if (INITIAL_TYPE) {
-          document.getElementById("searchTypeSelect").value = INITIAL_TYPE;
-          document.getElementById("similarTypeSelect").value = INITIAL_TYPE;
-          document.getElementById("trendingTypeSelect").value = INITIAL_TYPE;
-          currentType = INITIAL_TYPE;
+        // Update parameter filter if we're on models and sync between tabs
+        if (currentType === "models" && paramRangeSelect) {
+          currentParamFilter = paramRangeSelect.value;
+          syncParamFilterValues();
         }
 
-        // Add input event listener for suggestions
-        resourceInput.addEventListener("input", async (e) => {
-          const suggestionsBox = document.getElementById("suggestionsBox");
-          const value = e.target.value;
+        // Update active filters indicator
+        let activeCount =
+          (currentMinLikes > 0 ? 1 : 0) +
+          (currentMinDownloads > 0 ? 1 : 0) +
+          (currentType === "models" && currentParamFilter !== "any" ? 1 : 0);
 
-          if (!programmaticFocus) {
-            if (!value) {
-              // Show trending resources when input is empty
-              const trending = await fetchTrendingResources(currentType);
-              displaySuggestions(trending, suggestionsBox);
-            } else {
-              // Filter trending resources based on input
-              const trending = await fetchTrendingResources(currentType);
-              const filtered = trending.filter((resource) =>
-                resource.toLowerCase().includes(value.toLowerCase())
-              );
-              displaySuggestions(filtered, suggestionsBox);
-            }
-          }
-        });
+        if (activeCount > 0) {
+          activeFiltersSpan.textContent = activeCount;
+          activeFiltersSpan.classList.remove("hidden");
+        } else {
+          activeFiltersSpan.classList.add("hidden");
+        }
 
-        // Show trending resources on focus only when not programmatically focused
-        resourceInput.addEventListener("focus", async () => {
-          if (!programmaticFocus) {
-            const suggestionsBox = document.getElementById("suggestionsBox");
-            const trending = await fetchTrendingResources(currentType);
-            displaySuggestions(trending, suggestionsBox);
+        // Re-run the current search with new filters
+        if (tab === "search") {
+          const searchQuery = document.getElementById("searchInput").value;
+          if (searchQuery.length >= MIN_SEARCH_LENGTH) {
+            currentPage = 1;
+            performSearch(searchQuery, 1);
           }
-          programmaticFocus = false;
-        });
+        } else {
+          const resourceId = document.getElementById("resourceInput").value;
+          if (resourceId) {
+            currentPage = 1;
+            findSimilarResources(1);
+          }
+        }
+      }
 
-        // Handle initial URL parameters
-        if (INITIAL_TAB) {
-          switchTab(INITIAL_TAB);
+      // Add this function to create a parameter filter UI above the results
+      function updateParamFilterUI() {
+        // Check if we should show the filter (only for models)
+        if (currentType !== "models") {
+          // Remove the filter UI if it exists
+          const existingFilter = document.getElementById("paramFilterBar");
+          if (existingFilter) {
+            existingFilter.remove();
+          }
+          return;
         }
 
-        if (INITIAL_SEARCH) {
-          switchTab("search");
-          document.getElementById("searchInput").value = INITIAL_SEARCH;
-          await searchResources(INITIAL_SEARCH);
-        } else if (INITIAL_SIMILAR) {
-          switchTab("similar");
-          document.getElementById("resourceInput").value = INITIAL_SIMILAR;
-          await findSimilarResources();
-        } else if (INITIAL_TAB === "trending") {
-          // Load trending data with any URL parameters
-          const limit = URL_PARAMS.get("limit") || 10;
+        // Check if we already have the filter UI
+        let paramFilterBar = document.getElementById("paramFilterBar");
+
+        // If not, create it
+        if (!paramFilterBar) {
+          paramFilterBar = document.createElement("div");
+          paramFilterBar.id = "paramFilterBar";
+          paramFilterBar.className =
+            "bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4";
+
+          // Create the filter content
+          paramFilterBar.innerHTML = `
+            <div class="flex flex-col gap-2">
+              <div class="flex items-center justify-between">
+                <h3 class="text-sm font-medium text-gray-700">Filter by Parameter Size</h3>
+                <button onclick="clearParamFilter()" class="text-xs text-blue-500 hover:text-blue-700">Clear</button>
+              </div>
+              <div class="flex flex-wrap gap-2 mt-1" id="paramFilterButtons">
+                <button onclick="applyParamFilter('any')" class="filter-btn ${
+                  currentParamFilter === "any" ? "active" : ""
+                }">
+                  Any size
+                </button>
+                <button onclick="applyParamFilter('0-1')" class="filter-btn ${
+                  currentParamFilter === "0-1" ? "active" : ""
+                }">
+                  Small (0-1B)
+                </button>
+                <button onclick="applyParamFilter('1-7')" class="filter-btn ${
+                  currentParamFilter === "1-7" ? "active" : ""
+                }">
+                  Medium (1-7B)
+                </button>
+                <button onclick="applyParamFilter('7-20')" class="filter-btn ${
+                  currentParamFilter === "7-20" ? "active" : ""
+                }">
+                  Large (7-20B)
+                </button>
+                <button onclick="applyParamFilter('20-70')" class="filter-btn ${
+                  currentParamFilter === "20-70" ? "active" : ""
+                }">
+                  XL (20-70B)
+                </button>
+                <button onclick="applyParamFilter('70+')" class="filter-btn ${
+                  currentParamFilter === "70+" ? "active" : ""
+                }">
+                  XXL (70B+)
+                </button>
+              </div>
+            </div>
+          `;
 
-          document.getElementById("trendingLimitSelect").value = limit;
+          // Insert it before the results container
+          const resultsContainer = document.getElementById("resultsContainer");
+          resultsContainer.parentNode.insertBefore(
+            paramFilterBar,
+            resultsContainer
+          );
 
-          loadTrendingResources(currentType);
+          // Add CSS for the filter buttons
+          const style = document.createElement("style");
+          style.textContent = `
+            .filter-btn {
+              padding: 6px 12px;
+              border-radius: 4px;
+              font-size: 0.875rem;
+              background-color: #f3f4f6;
+              color: #4b5563;
+              transition: all 0.2s;
+            }
+            .filter-btn:hover {
+              background-color: #e5e7eb;
+            }
+            .filter-btn.active {
+              background-color: #3b82f6;
+              color: white;
+            }
+          `;
+          document.head.appendChild(style);
+        } else {
+          // Just update the active state on existing buttons
+          const buttons = paramFilterBar.querySelectorAll(".filter-btn");
+          buttons.forEach((btn) => {
+            btn.classList.remove("active");
+            const filterValue = btn.getAttribute("onclick").match(/'(.*?)'/)[1];
+            if (filterValue === currentParamFilter) {
+              btn.classList.add("active");
+            }
+          });
         }
-      });
+      }
 
-      // Modify the handleSortChange function
-      function handleSortChange(tab) {
-        const sortSelect = document.getElementById(`${tab}SortSelect`);
-        currentSort = sortSelect.value;
+      // Function to apply parameter filter
+      function applyParamFilter(value) {
+        // Update the filter value
+        currentParamFilter = value;
 
-        // Re-run the current search with new sort
+        // Update the filter UI
+        updateParamFilterUI();
+
+        // Update filter indicators
+        updateFilterIndicators("search");
+        updateFilterIndicators("similar");
+
+        // Re-run the current search
         const activeTab = document.querySelector(".tab-trigger.active").id;
+
         if (activeTab === "searchTab") {
           const searchQuery = document.getElementById("searchInput").value;
           if (searchQuery.length >= MIN_SEARCH_LENGTH) {
-            searchResources(searchQuery, 1);
+            currentPage = 1;
+            performSearch(searchQuery, 1);
           }
-        } else {
+        } else if (activeTab === "similarTab") {
           const resourceId = document.getElementById("resourceInput").value;
           if (resourceId) {
+            currentPage = 1;
             findSimilarResources(1);
           }
+        } else if (activeTab === "trendingTab") {
+          loadTrendingResources(currentType);
         }
       }
 
-      // Add these new functions to handle the filters UI
-      function toggleFilters(tab) {
-        const popover = document.getElementById(`${tab}FiltersPopover`);
-        popover.classList.toggle("hidden");
-
-        // Close other popovers
-        const otherTab = tab === "search" ? "similar" : "search";
-        document
-          .getElementById(`${otherTab}FiltersPopover`)
-          .classList.add("hidden");
+      // Function to clear parameter filter
+      function clearParamFilter() {
+        applyParamFilter("any");
       }
 
-      // Close filters when clicking outside
-      document.addEventListener("click", (event) => {
-        const searchPopover = document.getElementById("searchFiltersPopover");
-        const similarPopover = document.getElementById("similarFiltersPopover");
-        const searchButton = event.target.closest(
-          "button[onclick=\"toggleFilters('search')\"]"
-        );
-        const similarButton = event.target.closest(
-          "button[onclick=\"toggleFilters('similar')\"]"
-        );
+      // Add this to initialize the UI when the page loads
+      document.addEventListener("DOMContentLoaded", function () {
+        // Set initial type selection
+        selectType(INITIAL_TYPE);
 
-        if (!searchButton && !event.target.closest("#searchFiltersPopover")) {
-          searchPopover.classList.add("hidden");
-        }
-        if (!similarButton && !event.target.closest("#similarFiltersPopover")) {
-          similarPopover.classList.add("hidden");
-        }
-      });
+        // Initialize parameter filter UI
+        updateParamFilterUI();
 
-      // Modify handleFilterChange to update the active filters indicator
-      function handleFilterChange(tab) {
-        const minLikesInput = document.getElementById(`${tab}MinLikes`);
-        const minDownloadsInput = document.getElementById(`${tab}MinDownloads`);
-        const activeFiltersSpan = document.getElementById(
-          `${tab}ActiveFilters`
-        );
+        // Switch to the initial tab from URL
+        switchTab(INITIAL_TAB);
 
-        currentMinLikes = parseInt(minLikesInput.value) || 0;
-        currentMinDownloads = parseInt(minDownloadsInput.value) || 0;
+        // Initialize with search query if present in URL
+        if (INITIAL_SEARCH && INITIAL_SEARCH.length >= MIN_SEARCH_LENGTH) {
+          document.getElementById("searchInput").value = INITIAL_SEARCH;
+          performSearch(INITIAL_SEARCH, 1);
+        }
 
-        // Update active filters indicator
-        const activeCount =
-          (currentMinLikes > 0 ? 1 : 0) + (currentMinDownloads > 0 ? 1 : 0);
-        if (activeCount > 0) {
-          activeFiltersSpan.textContent = activeCount;
-          activeFiltersSpan.classList.remove("hidden");
-        } else {
-          activeFiltersSpan.classList.add("hidden");
+        // Initialize with similar resource if present in URL
+        if (INITIAL_SIMILAR) {
+          document.getElementById("resourceInput").value = INITIAL_SIMILAR;
+          findSimilarResources(1);
         }
 
-        // Re-run the current search with new filters
-        if (tab === "search") {
-          const searchQuery = document.getElementById("searchInput").value;
-          if (searchQuery.length >= MIN_SEARCH_LENGTH) {
-            searchResources(searchQuery, 1);
+        // Add input event listener for resource suggestions
+        document
+          .getElementById("resourceInput")
+          .addEventListener("input", function (e) {
+            const query = e.target.value.trim();
+            if (query.length >= 2) {
+              fetchResourceSuggestions(query);
+            } else {
+              document.getElementById("suggestionsBox").classList.add("hidden");
+            }
+          });
+
+        // Close suggestions when clicking outside
+        document.addEventListener("click", function (e) {
+          if (
+            !e.target.closest("#resourceInput") &&
+            !e.target.closest("#suggestionsBox")
+          ) {
+            document.getElementById("suggestionsBox").classList.add("hidden");
           }
-        } else {
-          const resourceId = document.getElementById("resourceInput").value;
-          if (resourceId) {
-            findSimilarResources(1);
+        });
+      });
+
+      // Add function to fetch resource suggestions
+      async function fetchResourceSuggestions(query) {
+        if (query.length < 2) return;
+
+        try {
+          const response = await fetch(
+            `${API_URL}/suggest/${currentType}?q=${encodeURIComponent(query)}`
+          );
+          if (!response.ok) throw new Error("Failed to fetch suggestions");
+
+          const data = await response.json();
+          if (data && data.suggestions && data.suggestions.length > 0) {
+            displaySuggestions(
+              data.suggestions,
+              document.getElementById("suggestionsBox")
+            );
+          } else {
+            document.getElementById("suggestionsBox").classList.add("hidden");
           }
+        } catch (error) {
+          console.error("Error fetching suggestions:", error);
+          document.getElementById("suggestionsBox").classList.add("hidden");
         }
       }
     </script>