add trending page and models

index.html

@@ -91,6 +91,13 @@
           >
             <i data-lucide="arrow-right"></i> Find Similar
           </button>
+          <button
+            onclick="switchTab('trending')"
+            id="trendingTab"
+            class="tab-trigger px-4 sm:px-6 py-3 flex items-center gap-2 border-b-2 border-transparent hover:bg-gray-50 transition-colors flex-1 justify-center"
+          >
+            <i data-lucide="trending-up"></i> Trending
+          </button>
         </div>
 
         <div id="searchContent" class="tab-content space-y-4">
@@ -189,6 +196,51 @@
           </div>
         </div>
 
+        <!-- Start: New Trending Tab Content -->
+        <div id="trendingContent" class="hidden tab-content space-y-6">
+          <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
+            <div
+              class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between mb-6"
+            >
+              <h2
+                class="text-xl font-semibold text-gray-800 flex items-center gap-2"
+              >
+                <i data-lucide="trending-up" class="text-blue-500"></i>
+                Trending on Hugging Face Hub
+              </h2>
+              <div class="flex gap-2">
+                <select
+                  id="trendingTypeSelect"
+                  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="loadTrendingResources(this.value)"
+                >
+                  <option value="datasets">Datasets</option>
+                  <option value="models">Models</option>
+                </select>
+                <select
+                  id="trendingLimitSelect"
+                  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="loadTrendingResources(document.getElementById('trendingTypeSelect').value)"
+                >
+                  <option value="10">Show 10</option>
+                  <option value="20">Show 20</option>
+                  <option value="30">Show 30</option>
+                </select>
+              </div>
+            </div>
+
+            <div id="trendingLoader" class="flex justify-center py-6">
+              <i
+                data-lucide="loader-2"
+                class="animate-spin text-blue-500 w-8 h-8"
+              ></i>
+            </div>
+
+            <div id="trendingResults" class="space-y-4"></div>
+          </div>
+        </div>
+        <!-- End: New Trending Tab Content -->
+
         <div
           id="errorMessage"
           class="hidden mt-4 p-4 text-red-600 bg-red-50 rounded-md"
@@ -200,14 +252,38 @@
 
     <style>
       .tab-trigger.active {
-        borderfi-bottom-color: #3b82f6;
+        border-bottom-color: #3b82f6;
         color: #3b82f6;
       }
+
+      .btn-primary {
+        background-color: #3b82f6;
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: 0.5rem;
+        transition: background-color 0.2s;
+      }
+
+      .btn-primary:hover {
+        background-color: #2563eb;
+      }
+
+      /* Add card hover effect */
+      .resource-card {
+        transition: transform 0.2s, box-shadow 0.2s;
+      }
+
+      .resource-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
+          0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      }
     </style>
 
     <script>
       // Configuration
-      const API_URL = "http://localhost:8000";
+      const API_URL =
+        "https://davanstrien-huggingface-datasets-search-v2.hf.space";
       const MIN_SEARCH_LENGTH = 3;
       const DEBOUNCE_MS = 300;
       const RESULTS_PER_PAGE = 5;
@@ -219,6 +295,7 @@
       const INITIAL_SEARCH = URL_PARAMS.get("q");
       const INITIAL_SIMILAR = URL_PARAMS.get("similar");
       const INITIAL_TYPE = URL_PARAMS.get("type") || "datasets";
+      const INITIAL_TAB = URL_PARAMS.get("tab") || "search";
 
       // Add these variables with other configurations
       let currentSort = "similarity";
@@ -240,11 +317,21 @@
         document.getElementById(`${tabId}Content`).classList.remove("hidden");
         document.getElementById(`${tabId}Tab`).classList.add("active");
 
-        // Clear URL parameters when switching tabs
+        // Clear results container when switching to trending tab
+        if (tabId === "trending") {
+          document.getElementById("resultsContainer").innerHTML = "";
+          loadTrendingResources(
+            document.getElementById("trendingTypeSelect").value
+          );
+        }
+
+        // Update URL parameters when switching tabs
         if (tabId === "search") {
-          updateURL({ similar: null });
+          updateURL({ tab: "search", similar: null });
         } else if (tabId === "similar") {
-          updateURL({ q: null });
+          updateURL({ tab: "similar", q: null });
+        } else if (tabId === "trending") {
+          updateURL({ tab: "trending", q: null, similar: null });
         }
       }
 
@@ -256,72 +343,84 @@
         const resourceIcon = isDataset ? "database" : "box";
         const resourceUrl = `https://huggingface.co/${resourceType}/${resourceId}`;
 
+        // Check if we're in the trending tab
+        const isTrendingTab =
+          document
+            .getElementById("trendingContent")
+            .classList.contains("hidden") === false;
+
         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="${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">
-                              <span class="flex items-center gap-1">
-                                  <i data-lucide="heart" class="w-4 h-4"></i>
-                                  ${result.likes}
-                              </span>
-                              <span class="flex items-center gap-1">
-                                  <i data-lucide="download" class="w-4 h-4"></i>
-                                  ${result.downloads}
-                              </span>
-                          </div>
-                          <span class="bg-blue-50 px-2 py-1 rounded text-sm">
-                              ${(result.similarity * 100).toFixed(1)}% match
-                          </span>
-                          <button 
-                              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>
-                              Find Similar
-                          </button>
-                      </div>
-                  </div>
-                  <p class="text-sm text-gray-600">${result.summary}</p>
-                  
-                  ${
-                    isDataset
-                      ? `
-                  <!-- Add preview section that starts hidden -->
-                  <div id="preview-section-${resourceId}" class="mt-4 border-t pt-4 hidden">
-                      <button
-                          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-${resourceId}" class="transition-transform"></i>
-                          Preview Dataset
-                      </button>
-                      <div id="preview-content-${resourceId}" class="hidden mt-4">
-                          <iframe
-                              src="https://huggingface.co/datasets/${resourceId}/embed/viewer/default/train"
-                              frameborder="0"
-                              width="100%"
-                              height="560px"
-                          ></iframe>
-                      </div>
-                  </div>
-                  `
-                      : ""
-                  }
-
-                  <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>
-                      View on Hugging Face Hub
-                  </a>
-              </div>
-          </div>
+            <div class="card resource-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="${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">
+                                <span class="flex items-center gap-1">
+                                    <i data-lucide="heart" class="w-4 h-4"></i>
+                                    ${result.likes}
+                                </span>
+                                <span class="flex items-center gap-1">
+                                    <i data-lucide="download" class="w-4 h-4"></i>
+                                    ${result.downloads}
+                                </span>
+                            </div>
+                            ${
+                              !isTrendingTab && result.similarity
+                                ? `<span class="bg-blue-50 px-2 py-1 rounded text-sm">
+                                    ${(result.similarity * 100).toFixed(
+                                      1
+                                    )}% match
+                                </span>`
+                                : ""
+                            }
+                            <button 
+                                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>
+                                Find Similar
+                            </button>
+                        </div>
+                    </div>
+                    <p class="text-sm text-gray-600">${result.summary}</p>
+                    
+                    ${
+                      isDataset
+                        ? `
+                    <!-- Add preview section that starts hidden -->
+                    <div id="preview-section-${resourceId}" class="mt-4 border-t pt-4 hidden">
+                        <button
+                            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-${resourceId}" class="transition-transform"></i>
+                            Preview Dataset
+                        </button>
+                        <div id="preview-content-${resourceId}" class="hidden mt-4">
+                            <iframe
+                                src="https://huggingface.co/datasets/${resourceId}/embed/viewer/default/train"
+                                frameborder="0"
+                                width="100%"
+                                height="560px"
+                            ></iframe>
+                        </div>
+                    </div>
+                    `
+                        : ""
+                    }
+
+                    <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>
+                        View on Hugging Face Hub
+                    </a>
+                </div>
+            </div>
         `;
 
         // After rendering the card, check if preview is available for datasets
@@ -413,6 +512,62 @@
         }
       }
 
+      // New function to load trending resources from our API
+      async function loadTrendingResources(type) {
+        // Show loader and hide any errors
+        document.getElementById("trendingLoader").style.display = "flex";
+        document.getElementById("trendingResults").innerHTML = "";
+        document.getElementById("errorMessage").classList.add("hidden");
+
+        // Update selector to match current type
+        document.getElementById("trendingTypeSelect").value = type;
+
+        // Get filter values
+        const limit = document.getElementById("trendingLimitSelect").value;
+
+        try {
+          const endpoint = `${API_URL}/trending/${type}`;
+          const queryParams = new URLSearchParams({
+            limit: limit,
+          });
+
+          const response = await fetch(`${endpoint}?${queryParams}`);
+
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+
+          const data = await response.json();
+
+          // Display trending results
+          const resultsContainer = document.getElementById("trendingResults");
+
+          if (data.results && data.results.length > 0) {
+            resultsContainer.innerHTML = data.results
+              .map((result) => createResultCard(result))
+              .join("");
+
+            // Initialize icons for the new cards
+            lucide.createIcons();
+          } else {
+            resultsContainer.innerHTML = `
+              <div class="text-center p-8 bg-gray-50 rounded-lg">
+                <p class="text-gray-500">No trending ${type} found matching your criteria</p>
+              </div>
+            `;
+          }
+        } catch (error) {
+          console.error("Error loading trending resources:", error);
+          document.getElementById("trendingResults").innerHTML = `
+            <div class="text-center p-8 bg-gray-50 rounded-lg">
+              <p class="text-red-500">Failed to load trending ${type}. Please try again later.</p>
+            </div>
+          `;
+        } finally {
+          document.getElementById("trendingLoader").style.display = "none";
+        }
+      }
+
       function displaySuggestions(resources, suggestionsBox) {
         if (resources.length > 0) {
           const resourceIcon = currentType === "datasets" ? "database" : "box";
@@ -453,7 +608,12 @@
         if (!resourceId) return;
 
         // Update URL with similar resource ID and type
-        updateURL({ similar: resourceId, q: null, type: currentType });
+        updateURL({
+          similar: resourceId,
+          q: null,
+          type: currentType,
+          tab: "similar",
+        });
 
         const similarLoader = document.getElementById("similarLoader");
         if (similarLoader) {
@@ -595,6 +755,8 @@
         // Set the resource type
         currentType = resourceType;
         document.getElementById("similarTypeSelect").value = resourceType;
+        document.getElementById("searchTypeSelect").value = resourceType;
+        document.getElementById("trendingTypeSelect").value = resourceType;
 
         // Set the resource ID in the input without triggering the focus event
         const resourceInput = document.getElementById("resourceInput");
@@ -653,13 +815,21 @@
           const searchQuery = document.getElementById("searchInput").value;
           currentURL.searchParams.set("q", searchQuery);
           currentURL.searchParams.delete("similar");
-        } else {
+        } else if (activeTab === "similarTab") {
           const resourceId = document.getElementById("resourceInput").value;
           currentURL.searchParams.set("similar", resourceId);
           currentURL.searchParams.delete("q");
+        } else if (activeTab === "trendingTab") {
+          // For trending tab, save the selected options
+          const limit = document.getElementById("trendingLimitSelect").value;
+
+          currentURL.searchParams.set("limit", limit);
+          currentURL.searchParams.delete("q");
+          currentURL.searchParams.delete("similar");
         }
 
-        // Always include the current type
+        // Always include the current tab and type
+        currentURL.searchParams.set("tab", activeTab.replace("Tab", ""));
         currentURL.searchParams.set("type", currentType);
 
         try {
@@ -700,9 +870,10 @@
         // Update the current type
         currentType = type;
 
-        // Update both select elements to match
+        // Update all select elements to match
         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");
@@ -727,6 +898,9 @@
           if (resourceId) {
             findSimilarResources(1);
           }
+        } else if (activeTab === "trendingTab") {
+          // Reload trending tab with new type
+          loadTrendingResources(type);
         }
 
         // Update URL with the new type
@@ -745,7 +919,12 @@
         document.getElementById("errorMessage").classList.add("hidden");
 
         // Update URL with search query and type
-        updateURL({ q: query, similar: null, type: currentType });
+        updateURL({
+          q: query,
+          similar: null,
+          type: currentType,
+          tab: "search",
+        });
 
         try {
           const endpoint = `${API_URL}/search/${currentType}`;
@@ -775,6 +954,7 @@
         if (INITIAL_TYPE) {
           document.getElementById("searchTypeSelect").value = INITIAL_TYPE;
           document.getElementById("similarTypeSelect").value = INITIAL_TYPE;
+          document.getElementById("trendingTypeSelect").value = INITIAL_TYPE;
           currentType = INITIAL_TYPE;
         }
 
@@ -810,6 +990,10 @@
         });
 
         // Handle initial URL parameters
+        if (INITIAL_TAB) {
+          switchTab(INITIAL_TAB);
+        }
+
         if (INITIAL_SEARCH) {
           switchTab("search");
           document.getElementById("searchInput").value = INITIAL_SEARCH;
@@ -818,6 +1002,13 @@
           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;
+
+          document.getElementById("trendingLimitSelect").value = limit;
+
+          loadTrendingResources(currentType);
         }
       });