add models

index.html

@@ -37,8 +37,8 @@
           class="bg-blue-100 text-blue-800 px-3 py-1.5 rounded-md mb-2 text-sm"
         >
           <p class="flex items-center gap-2">
-            <i data-lucide="info"></i> Currently supporting dataset search only.
-            Model search coming soon!
+            <i data-lucide="info"></i> Search for datasets and models using
+            semantic search!
           </p>
         </div>
 
@@ -101,18 +101,28 @@
               class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between mb-4"
             >
               <p class="text-gray-600">
-                Enter keywords to search through dataset descriptions. The
-                search will automatically update as you type.
+                Enter keywords to search through descriptions. The search will
+                automatically update as you type.
               </p>
-              <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')"
-              >
-                <option value="similarity">Sort by relevance</option>
-                <option value="likes">Sort by likes</option>
-                <option value="downloads">Sort by downloads</option>
-              </select>
+              <div class="flex gap-2">
+                <select
+                  id="searchTypeSelect"
+                  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="selectType(this.value)"
+                >
+                  <option value="datasets">Datasets</option>
+                  <option value="models">Models</option>
+                </select>
+                <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')"
+                >
+                  <option value="similarity">Sort by relevance</option>
+                  <option value="likes">Sort by likes</option>
+                  <option value="downloads">Sort by downloads</option>
+                </select>
+              </div>
             </div>
             <div class="relative">
               <input
@@ -136,33 +146,43 @@
               class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between mb-4"
             >
               <p class="text-gray-600">
-                Enter a dataset ID to find similar datasets. Popular datasets
-                will appear as you type.
+                Enter an ID to find similar resources. Popular items will appear
+                as you type.
               </p>
-              <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')"
-              >
-                <option value="similarity">Sort by relevance</option>
-                <option value="likes">Sort by likes</option>
-                <option value="downloads">Sort by downloads</option>
-              </select>
+              <div class="flex gap-2">
+                <select
+                  id="similarTypeSelect"
+                  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="selectType(this.value)"
+                >
+                  <option value="datasets">Datasets</option>
+                  <option value="models">Models</option>
+                </select>
+                <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')"
+                >
+                  <option value="similarity">Sort by relevance</option>
+                  <option value="likes">Sort by likes</option>
+                  <option value="downloads">Sort by downloads</option>
+                </select>
+              </div>
             </div>
             <div class="flex gap-3">
               <div class="relative w-full">
                 <input
                   type="text"
-                  id="datasetInput"
+                  id="resourceInput"
                   class="w-full p-3 border border-gray-200 rounded-lg"
-                  placeholder="e.g. openai/gsm8k"
+                  placeholder="e.g. openai/gsm8k or meta-llama/Llama-2-7b"
                 />
                 <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"
                 ></div>
               </div>
-              <button onclick="findSimilarDatasets()" class="btn-primary">
+              <button onclick="findSimilarResources()" class="btn-primary">
                 Find Similar
               </button>
             </div>
@@ -180,15 +200,14 @@
 
     <style>
       .tab-trigger.active {
-        border-bottom-color: #3b82f6;
+        borderfi-bottom-color: #3b82f6;
         color: #3b82f6;
       }
     </style>
 
     <script>
       // Configuration
-      const API_URL =
-        "https://davanstrien-huggingface-datasets-search-v2.hf.space";
+      const API_URL = "http://localhost:8000";
       const MIN_SEARCH_LENGTH = 3;
       const DEBOUNCE_MS = 300;
       const RESULTS_PER_PAGE = 5;
@@ -199,9 +218,11 @@
       const URL_PARAMS = new URLSearchParams(window.location.search);
       const INITIAL_SEARCH = URL_PARAMS.get("q");
       const INITIAL_SIMILAR = URL_PARAMS.get("similar");
+      const INITIAL_TYPE = URL_PARAMS.get("type") || "datasets";
 
-      // Add this variable with other configurations
+      // Add these variables with other configurations
       let currentSort = "similarity";
+      let currentType = INITIAL_TYPE;
 
       // Initialize Lucide icons
       lucide.createIcons();
@@ -229,15 +250,19 @@
 
       // Create result card
       function createResultCard(result) {
+        const isDataset = "dataset_id" in result;
+        const resourceId = isDataset ? result.dataset_id : result.model_id;
+        const resourceType = isDataset ? "datasets" : "models";
+        const resourceIcon = isDataset ? "database" : "box";
+        const resourceUrl = `https://huggingface.co/${resourceType}/${resourceId}`;
+
         const cardHtml = `
           <div class="card bg-white p-4 sm:p-6 rounded-lg shadow hover:shadow-md transition-shadow">
               <div class="space-y-2 w-full">
                   <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                       <div class="flex items-center gap-2">
-                          <i data-lucide="database" class="text-blue-500"></i>
-                          <h3 class="text-lg font-semibold">${
-                            result.dataset_id
-                          }</h3>
+                          <i data-lucide="${resourceIcon}" class="text-blue-500"></i>
+                          <h3 class="text-lg font-semibold">${resourceId}</h3>
                       </div>
                       <div class="flex flex-wrap items-center gap-2">
                           <div class="flex items-center gap-4 text-sm text-gray-500">
@@ -254,9 +279,7 @@
                               ${(result.similarity * 100).toFixed(1)}% match
                           </span>
                           <button 
-                              onclick="findSimilarFromResult('${
-                                result.dataset_id
-                              }')"
+                              onclick="findSimilarFromResult('${resourceId}', '${resourceType}')"
                               class="flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700"
                           >
                               <i data-lucide="arrow-right"></i>
@@ -266,36 +289,32 @@
                   </div>
                   <p class="text-sm text-gray-600">${result.summary}</p>
                   
+                  ${
+                    isDataset
+                      ? `
                   <!-- Add preview section that starts hidden -->
-                  <div id="preview-section-${
-                    result.dataset_id
-                  }" class="mt-4 border-t pt-4 hidden">
+                  <div id="preview-section-${resourceId}" class="mt-4 border-t pt-4 hidden">
                       <button
-                          onclick="togglePreview('${result.dataset_id}')"
+                          onclick="togglePreview('${resourceId}')"
                           class="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800"
                       >
-                          <i data-lucide="chevron-right" id="preview-icon-${
-                            result.dataset_id
-                          }" class="transition-transform"></i>
+                          <i data-lucide="chevron-right" id="preview-icon-${resourceId}" class="transition-transform"></i>
                           Preview Dataset
                       </button>
-                      <div id="preview-content-${
-                        result.dataset_id
-                      }" class="hidden mt-4">
+                      <div id="preview-content-${resourceId}" class="hidden mt-4">
                           <iframe
-                              src="https://huggingface.co/datasets/${
-                                result.dataset_id
-                              }/embed/viewer/default/train"
+                              src="https://huggingface.co/datasets/${resourceId}/embed/viewer/default/train"
                               frameborder="0"
                               width="100%"
                               height="560px"
                           ></iframe>
                       </div>
                   </div>
+                  `
+                      : ""
+                  }
 
-                  <a href="https://huggingface.co/datasets/${
-                    result.dataset_id
-                  }" 
+                  <a href="${resourceUrl}" 
                      target="_blank"
                      class="inline-flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700 mt-2">
                       <i data-lucide="external-link" class="w-4 h-4"></i>
@@ -305,8 +324,10 @@
           </div>
         `;
 
-        // After rendering the card, check if preview is available
-        checkDatasetValidity(result.dataset_id);
+        // After rendering the card, check if preview is available for datasets
+        if (isDataset) {
+          checkDatasetValidity(resourceId);
+        }
 
         return cardHtml;
       }
@@ -349,83 +370,62 @@
         window.history.pushState({}, "", newURL);
       }
 
-      // Modify the searchDatasets function
-      const searchDatasets = _.debounce(async (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
-        updateURL({ q: query, similar: null });
-
-        try {
-          const response = await fetch(
-            `${API_URL}/search/datasets?query=${encodeURIComponent(query)}&k=${
-              RESULTS_PER_PAGE * page
-            }`
-          );
-          if (!response.ok) throw new Error("Search failed");
-
-          const data = await response.json();
-          console.log("Search results:", data);
-          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");
-        }
+      // Modify the search function to handle both datasets and models
+      const searchResources = _.debounce(async (query, page = 1) => {
+        performSearch(query, page);
       }, DEBOUNCE_MS);
 
-      // Cache for trending datasets
-      let trendingDatasetsCache = null;
-      let cacheTimestamp = null;
+      // Cache for trending resources
+      let trendingResourcesCache = {
+        datasets: null,
+        models: null,
+      };
+      let cacheTimestamp = {
+        datasets: null,
+        models: null,
+      };
       const CACHE_DURATION = 1000 * 60 * 15; // 15 minutes
 
-      async function fetchTrendingDatasets() {
+      async function fetchTrendingResources(type) {
         if (
-          trendingDatasetsCache &&
-          cacheTimestamp &&
-          Date.now() - cacheTimestamp < CACHE_DURATION
+          trendingResourcesCache[type] &&
+          cacheTimestamp[type] &&
+          Date.now() - cacheTimestamp[type] < CACHE_DURATION
         ) {
-          return trendingDatasetsCache;
+          return trendingResourcesCache[type];
         }
 
         try {
-          const response = await fetch("https://huggingface.co/api/datasets");
+          const response = await fetch(`https://huggingface.co/api/${type}`);
           const data = await response.json();
 
-          // Just take the first 20 dataset IDs since they're already sorted
-          const trendingDatasets = data
+          // Just take the first 20 resource IDs since they're already sorted
+          const trendingResources = data
             .slice(0, 20)
-            .map((dataset) => dataset.id);
+            .map((resource) => resource.id);
 
-          trendingDatasetsCache = trendingDatasets;
-          cacheTimestamp = Date.now();
-          return trendingDatasets;
+          trendingResourcesCache[type] = trendingResources;
+          cacheTimestamp[type] = Date.now();
+          return trendingResources;
         } catch (error) {
-          console.error("Error fetching trending datasets:", error);
+          console.error(`Error fetching trending ${type}:`, error);
           return [];
         }
       }
 
-      function displaySuggestions(datasets, suggestionsBox) {
-        if (datasets.length > 0) {
-          suggestionsBox.innerHTML = datasets
+      function displaySuggestions(resources, suggestionsBox) {
+        if (resources.length > 0) {
+          const resourceIcon = currentType === "datasets" ? "database" : "box";
+          suggestionsBox.innerHTML = resources
             .map(
-              (datasetId) => `
+              (resourceId) => `
             <div 
               class="p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0"
-              onclick="selectSuggestion('${datasetId}')"
+              onclick="selectSuggestion('${resourceId}')"
             >
               <div class="flex items-center gap-2">
-                <i data-lucide="database" class="w-4 h-4 text-blue-500"></i>
-                <span>${datasetId}</span>
+                <i data-lucide="${resourceIcon}" class="w-4 h-4 text-blue-500"></i>
+                <span>${resourceId}</span>
               </div>
             </div>
           `
@@ -438,22 +438,22 @@
         }
       }
 
-      function selectSuggestion(dataset) {
-        const datasetInput = document.getElementById("datasetInput");
+      function selectSuggestion(resource) {
+        const resourceInput = document.getElementById("resourceInput");
         const suggestionsBox = document.getElementById("suggestionsBox");
 
-        datasetInput.value = dataset;
+        resourceInput.value = resource;
         suggestionsBox.classList.add("hidden");
-        findSimilarDatasets();
+        findSimilarResources();
       }
 
-      // Modify the findSimilarDatasets function
-      async function findSimilarDatasets(page = 1) {
-        const datasetId = document.getElementById("datasetInput").value;
-        if (!datasetId) return;
+      // Modify the findSimilarResources function to handle both datasets and models
+      async function findSimilarResources(page = 1) {
+        const resourceId = document.getElementById("resourceInput").value;
+        if (!resourceId) return;
 
-        // Update URL with similar dataset ID
-        updateURL({ similar: datasetId, q: null });
+        // Update URL with similar resource ID and type
+        updateURL({ similar: resourceId, q: null, type: currentType });
 
         const similarLoader = document.getElementById("similarLoader");
         if (similarLoader) {
@@ -462,17 +462,21 @@
         document.getElementById("errorMessage").classList.add("hidden");
 
         try {
+          const endpoint = `${API_URL}/similarity/${currentType}`;
+          const paramName =
+            currentType === "datasets" ? "dataset_id" : "model_id";
+
           const response = await fetch(
-            `${API_URL}/similarity/datasets?dataset_id=${encodeURIComponent(
-              datasetId
-            )}&k=${RESULTS_PER_PAGE * page}`
+            `${endpoint}?${paramName}=${encodeURIComponent(resourceId)}&k=${
+              RESULTS_PER_PAGE * page
+            }&sort_by=${currentSort}`
           );
           if (!response.ok) throw new Error("Similarity search failed");
 
           const data = await response.json();
           displayResults(data.results, page);
         } catch (error) {
-          showError("Failed to find similar datasets. Please try again.");
+          showError(`Failed to find similar ${currentType}. Please try again.`);
         } finally {
           if (similarLoader) {
             similarLoader.classList.add("hidden");
@@ -530,14 +534,18 @@
                 </div>`
                 : results.length >= MAX_RESULTS
                 ? `<div class="text-center mt-4 p-6 bg-blue-50 rounded-lg">
-                  <p class="text-gray-700 mb-3">You've reached the end of our dataset journey! (${MAX_RESULTS} results)</p>
-                  <p class="text-gray-600 mb-4">Can't find what you're looking for? Why not create and share your own dataset?</p>
+                  <p class="text-gray-700 mb-3">You've reached the end of our journey! (${MAX_RESULTS} results)</p>
+                  <p class="text-gray-600 mb-4">Can't find what you're looking for? Why not create and share your own?</p>
                   <div class="flex items-center justify-center gap-4">
-                    <a href="https://huggingface.co/docs/datasets/upload_dataset" 
+                    <a href="https://huggingface.co/docs/${
+                      currentType === "datasets"
+                        ? "datasets/upload_dataset"
+                        : "hub/upload"
+                    }" 
                        target="_blank" 
                        class="inline-flex items-center gap-2 text-blue-500 hover:text-blue-700">
                       <i data-lucide="external-link"></i>
-                      Learn how to share your dataset on Hugging Face
+                      Learn how to share on Hugging Face
                     </a>
                     <button 
                       onclick="shareResults()"
@@ -572,28 +580,32 @@
       // Event listeners
       document
         .getElementById("searchInput")
-        .addEventListener("input", (e) => searchDatasets(e.target.value));
+        .addEventListener("input", (e) => searchResources(e.target.value));
       document
-        .getElementById("datasetInput")
+        .getElementById("resourceInput")
         .addEventListener("keydown", (e) => {
-          if (e.key === "Enter") findSimilarDatasets();
+          if (e.key === "Enter") findSimilarResources();
         });
 
       // Update the findSimilarFromResult function
-      function findSimilarFromResult(datasetId) {
+      function findSimilarFromResult(resourceId, resourceType) {
         // Switch to the similar tab
         switchTab("similar");
 
-        // Set the dataset ID in the input without triggering the focus event
-        const datasetInput = document.getElementById("datasetInput");
-        datasetInput.value = datasetId;
+        // Set the resource type
+        currentType = resourceType;
+        document.getElementById("similarTypeSelect").value = resourceType;
+
+        // Set the resource ID in the input without triggering the focus event
+        const resourceInput = document.getElementById("resourceInput");
+        resourceInput.value = resourceId;
 
         // Hide suggestions box explicitly
         const suggestionsBox = document.getElementById("suggestionsBox");
         suggestionsBox.classList.add("hidden");
 
         // Trigger the search
-        findSimilarDatasets();
+        findSimilarResources();
       }
 
       // Add accordion functionality
@@ -614,9 +626,9 @@
 
         if (activeTab === "searchTab") {
           const searchQuery = document.getElementById("searchInput").value;
-          searchDatasets(searchQuery, currentPage);
+          searchResources(searchQuery, currentPage);
         } else {
-          findSimilarDatasets(currentPage);
+          findSimilarResources(currentPage);
         }
       }
 
@@ -642,11 +654,14 @@
           currentURL.searchParams.set("q", searchQuery);
           currentURL.searchParams.delete("similar");
         } else {
-          const datasetId = document.getElementById("datasetInput").value;
-          currentURL.searchParams.set("similar", datasetId);
+          const resourceId = document.getElementById("resourceInput").value;
+          currentURL.searchParams.set("similar", resourceId);
           currentURL.searchParams.delete("q");
         }
 
+        // Always include the current type
+        currentURL.searchParams.set("type", currentType);
+
         try {
           await navigator.clipboard.writeText(currentURL.toString());
 
@@ -680,37 +695,115 @@
         }
       }
 
+      // Modify the selectType function to be simpler
+      function selectType(type) {
+        // Update the current type
+        currentType = type;
+
+        // Update both select elements to match
+        document.getElementById("searchTypeSelect").value = type;
+        document.getElementById("similarTypeSelect").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";
+
+        // Clear results and reset page
+        currentPage = 1;
+        document.getElementById("resultsContainer").innerHTML = "";
+
+        // Re-run the current search with new type
+        const activeTab = document.querySelector(".tab-trigger.active").id;
+        if (activeTab === "searchTab") {
+          const searchQuery = document.getElementById("searchInput").value;
+          if (searchQuery.length >= MIN_SEARCH_LENGTH) {
+            performSearch(searchQuery, 1);
+          }
+        } else if (activeTab === "similarTab") {
+          const resourceId = document.getElementById("resourceInput").value;
+          if (resourceId) {
+            findSimilarResources(1);
+          }
+        }
+
+        // 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;
+        }
+
+        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 });
+
+        try {
+          const endpoint = `${API_URL}/search/${currentType}`;
+          const response = await fetch(
+            `${endpoint}?query=${encodeURIComponent(query)}&k=${
+              RESULTS_PER_PAGE * page
+            }&sort_by=${currentSort}`
+          );
+          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");
+        }
+      }
+
       // Update the event listeners section
       document.addEventListener("DOMContentLoaded", async () => {
-        const datasetInput = document.getElementById("datasetInput");
+        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;
+          currentType = INITIAL_TYPE;
+        }
+
         // Add input event listener for suggestions
-        datasetInput.addEventListener("input", async (e) => {
+        resourceInput.addEventListener("input", async (e) => {
           const suggestionsBox = document.getElementById("suggestionsBox");
           const value = e.target.value;
 
           if (!programmaticFocus) {
             if (!value) {
-              // Show trending datasets when input is empty
-              const trending = await fetchTrendingDatasets();
+              // Show trending resources when input is empty
+              const trending = await fetchTrendingResources(currentType);
               displaySuggestions(trending, suggestionsBox);
             } else {
-              // Filter trending datasets based on input
-              const trending = await fetchTrendingDatasets();
-              const filtered = trending.filter((dataset) =>
-                dataset.toLowerCase().includes(value.toLowerCase())
+              // Filter trending resources based on input
+              const trending = await fetchTrendingResources(currentType);
+              const filtered = trending.filter((resource) =>
+                resource.toLowerCase().includes(value.toLowerCase())
               );
               displaySuggestions(filtered, suggestionsBox);
             }
           }
         });
 
-        // Show trending datasets on focus only when not programmatically focused
-        datasetInput.addEventListener("focus", async () => {
+        // Show trending resources on focus only when not programmatically focused
+        resourceInput.addEventListener("focus", async () => {
           if (!programmaticFocus) {
             const suggestionsBox = document.getElementById("suggestionsBox");
-            const trending = await fetchTrendingDatasets();
+            const trending = await fetchTrendingResources(currentType);
             displaySuggestions(trending, suggestionsBox);
           }
           programmaticFocus = false;
@@ -720,11 +813,11 @@
         if (INITIAL_SEARCH) {
           switchTab("search");
           document.getElementById("searchInput").value = INITIAL_SEARCH;
-          await searchDatasets(INITIAL_SEARCH);
+          await searchResources(INITIAL_SEARCH);
         } else if (INITIAL_SIMILAR) {
           switchTab("similar");
-          document.getElementById("datasetInput").value = INITIAL_SIMILAR;
-          await findSimilarDatasets();
+          document.getElementById("resourceInput").value = INITIAL_SIMILAR;
+          await findSimilarResources();
         }
       });
 
@@ -738,12 +831,12 @@
         if (activeTab === "searchTab") {
           const searchQuery = document.getElementById("searchInput").value;
           if (searchQuery.length >= MIN_SEARCH_LENGTH) {
-            searchDatasets(searchQuery, 1);
+            searchResources(searchQuery, 1);
           }
         } else {
-          const datasetId = document.getElementById("datasetInput").value;
-          if (datasetId) {
-            findSimilarDatasets(1);
+          const resourceId = document.getElementById("resourceInput").value;
+          if (resourceId) {
+            findSimilarResources(1);
           }
         }
       }