Refactor dataset input and add trending dataset suggestions

index.html

@@ -112,27 +112,25 @@
             class="card bg-white p-8 rounded-xl shadow-sm border border-gray-100"
           >
             <p class="text-gray-600 mb-4">
-              Enter a dataset ID to find similar datasets. You can also click
-              "Find Similar" on any search result to quickly find related
-              datasets.
+              Enter a dataset ID to find similar datasets. Popular datasets will
+              appear as you type.
             </p>
             <div class="flex gap-3">
-              <input
-                type="text"
-                id="datasetInput"
-                placeholder="Enter dataset ID..."
-                class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
-              />
-              <button
-                onclick="findSimilarDatasets()"
-                class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors flex items-center gap-2"
-              >
-                <i data-lucide="search"></i>
-                Search
-              </button>
-              <div id="similarLoader" class="hidden">
-                <i data-lucide="loader-2" class="animate-spin"></i>
+              <div class="relative w-full">
+                <input
+                  type="text"
+                  id="datasetInput"
+                  class="w-full p-3 border border-gray-200 rounded-lg"
+                  placeholder="e.g. openai/gsm8k"
+                />
+                <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">
+                Find Similar
+              </button>
             </div>
           </div>
         </div>
@@ -322,12 +320,80 @@
         }
       }, DEBOUNCE_MS);
 
+      // Cache for trending datasets
+      let trendingDatasetsCache = null;
+      let cacheTimestamp = null;
+      const CACHE_DURATION = 1000 * 60 * 15; // 15 minutes
+
+      async function fetchTrendingDatasets() {
+        if (
+          trendingDatasetsCache &&
+          cacheTimestamp &&
+          Date.now() - cacheTimestamp < CACHE_DURATION
+        ) {
+          return trendingDatasetsCache;
+        }
+
+        try {
+          const response = await fetch("https://huggingface.co/api/datasets");
+          const data = await response.json();
+
+          // Just take the first 20 dataset IDs since they're already sorted
+          const trendingDatasets = data
+            .slice(0, 20)
+            .map((dataset) => dataset.id);
+
+          trendingDatasetsCache = trendingDatasets;
+          cacheTimestamp = Date.now();
+          return trendingDatasets;
+        } catch (error) {
+          console.error("Error fetching trending datasets:", error);
+          return [];
+        }
+      }
+
+      function displaySuggestions(datasets, suggestionsBox) {
+        if (datasets.length > 0) {
+          suggestionsBox.innerHTML = datasets
+            .map(
+              (datasetId) => `
+            <div 
+              class="p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0"
+              onclick="selectSuggestion('${datasetId}')"
+            >
+              <div class="flex items-center gap-2">
+                <i data-lucide="database" class="w-4 h-4 text-blue-500"></i>
+                <span>${datasetId}</span>
+              </div>
+            </div>
+          `
+            )
+            .join("");
+          suggestionsBox.classList.remove("hidden");
+          lucide.createIcons();
+        } else {
+          suggestionsBox.classList.add("hidden");
+        }
+      }
+
+      function selectSuggestion(dataset) {
+        const datasetInput = document.getElementById("datasetInput");
+        const suggestionsBox = document.getElementById("suggestionsBox");
+
+        datasetInput.value = dataset;
+        suggestionsBox.classList.add("hidden");
+        findSimilarDatasets();
+      }
+
       // Find similar datasets
       async function findSimilarDatasets(page = 1) {
         const datasetId = document.getElementById("datasetInput").value;
         if (!datasetId) return;
 
-        document.getElementById("similarLoader").classList.remove("hidden");
+        const similarLoader = document.getElementById("similarLoader");
+        if (similarLoader) {
+          similarLoader.classList.remove("hidden");
+        }
         document.getElementById("errorMessage").classList.add("hidden");
 
         try {
@@ -343,7 +409,9 @@
         } catch (error) {
           showError("Failed to find similar datasets. Please try again.");
         } finally {
-          document.getElementById("similarLoader").classList.add("hidden");
+          if (similarLoader) {
+            similarLoader.classList.add("hidden");
+          }
         }
       }
 
@@ -372,7 +440,7 @@
                   </button>`
                 : 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-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>
                       <a href="https://huggingface.co/docs/datasets/upload_dataset" 
                          target="_blank" 
@@ -458,6 +526,39 @@
           ? "rotate(0deg)"
           : "rotate(90deg)";
       }
+
+      // Update the event listeners section
+      document.addEventListener("DOMContentLoaded", () => {
+        // ... existing event listeners ...
+
+        const datasetInput = document.getElementById("datasetInput");
+
+        // Add input event listener for suggestions
+        datasetInput.addEventListener("input", async (e) => {
+          const suggestionsBox = document.getElementById("suggestionsBox");
+          const value = e.target.value;
+
+          if (!value) {
+            // Show trending datasets when input is empty
+            const trending = await fetchTrendingDatasets();
+            displaySuggestions(trending, suggestionsBox);
+          } else {
+            // Filter trending datasets based on input
+            const trending = await fetchTrendingDatasets();
+            const filtered = trending.filter((dataset) =>
+              dataset.toLowerCase().includes(value.toLowerCase())
+            );
+            displaySuggestions(filtered, suggestionsBox);
+          }
+        });
+
+        // Show trending datasets on focus
+        datasetInput.addEventListener("focus", async () => {
+          const suggestionsBox = document.getElementById("suggestionsBox");
+          const trending = await fetchTrendingDatasets();
+          displaySuggestions(trending, suggestionsBox);
+        });
+      });
     </script>
   </body>
 </html>