Update index.html

index.html

@@ -29,75 +29,70 @@
     <script src="https://cdn.tailwindcss.com"></script>
 
     <style>
-		iframe {
-			display: block;
-			border: none;
-			width: 100%;
-			height: 600px;
-			pointer-events: none;
-      margin-top: 48px; /* Match header height */
-		}
-
-		.grid-container {
-			display: grid;
-			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-			grid-gap: 10px;
-      margin-top: 3.5rem;
-		}
-
-		.grid-item {
-			position: relative;
-      overflow-y: hidden;
-      border-radius: 10px;
-      border: 1px solid rgb(55 65 81);
-		}
-    .grid-item:hover {
-      filter: brightness(75%);
-    }
-
-		.grid-item a {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			display: block;
-			z-index: 1;
-		}
-
-    .grid-item-header {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 48px;
-      background: rgba(0,0,0,0.75);
-      padding: 8px 16px;
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      width: 100%;
-    }
-
-    .grid-item-header h2 {
-      width: 100%;
-      overflow-wrap: break-word;
-      word-wrap: break-word;
-      hyphens: auto;
-      max-height: 32px;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      line-height: 1.2;
-    }
+      /* Existing styles remain unchanged */
+      iframe {
+        display: block;
+        border: none;
+        width: 100%;
+        height: 600px;
+        pointer-events: none;
+        margin-top: 48px; /* Match header height */
+      }
+      .grid-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-gap: 10px;
+        margin-top: 3.5rem;
+      }
+      .grid-item {
+        position: relative;
+        overflow-y: hidden;
+        border-radius: 10px;
+        border: 1px solid rgb(55 65 81);
+      }
+      .grid-item:hover {
+        filter: brightness(75%);
+      }
+      .grid-item a {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+        z-index: 1;
+      }
+      .grid-item-header {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 48px;
+        background: rgba(0,0,0,0.75);
+        padding: 8px 16px;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .grid-item-header h2 {
+        width: 100%;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+        max-height: 32px;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 1.2;
+      }
     </style>
 
     <script type="module">
       import Alpine from "https://cdn.skypack.dev/[email protected]";
       import Intersect from "https://cdn.skypack.dev/@alpinejs/intersect";
       Alpine.plugin(Intersect);
-
       Alpine.data("themesData", () => ({
         async init() {
           const data = await this.getThemes(this.page, this.sort, this.useTestData);
@@ -112,6 +107,8 @@
         useTestData: false,
         searchQuery: "",
         searchType: "keyword",
+        hfToken: "", // New property for Hugging Face token
+        userSpaces: [], // New property to store user spaces
         buttonClass(attr, filter) {
           if (this[attr] === filter) {
             return "text-orange-600 bg-gradient-to-br from-orange-300 to-orange-100 px-2 md:px-3 py-1 rounded-full";
@@ -155,6 +152,12 @@
             await this.searchThemes();
           }
         },
+        async getUser Spaces() {
+          if (!this.hfToken) return;
+          const res = await fetch(`https://huggingface.co/api/spaces?token=${this.hfToken}`);
+          const data = await res.json();
+          this.userSpaces = data; // Store user spaces
+        },
         async getThemes(page, sort, useTestData) {
           let data;
           if (useTestData) {
@@ -176,8 +179,7 @@
             }
             const res = await fetch(searchUrl);
             data = await res.json();
-            console.log(data)
-            // Transform the API response to match the expected format
+            console.log(data);
             data = data.filter(item => item.runtime?.stage === "RUNNING").map(item => ({
               id: item.id,
               subdomain: `https://${item.subdomain}.hf.space`,
@@ -185,20 +187,16 @@
               lastModified: item.lastModified
             }));
           }
-
           if (sort === 'likes') {
             data.sort((a, b) => (b.likes - a.likes));
           } else {
             data.sort((a, b) => (new Date(b.lastModified) - new Date(a.lastModified)));
           }
-
           const pageThemes = data.slice((page - 1) * 15, page * 15);
-
           console.log(pageThemes);
-
           return {
             themes: pageThemes,
-            totalPages: Math.ceil(data.length / 15)
+            totalPages: Math.ceil(data.length /  15)
           };
         },
         async nextPage() {
@@ -209,21 +207,33 @@
             this.totalPages = data.totalPages;
           }
         },
+        publishSelected() {
+          // Logic to publish selected spaces
+          const selectedSpaces = this.userSpaces.filter(space => space.selected);
+          // Implement the publish functionality here
+        },
       }));
       Alpine.start();
     </script>
   </head>
 
   <body class="pb-10 pt-5 bg-white relative">
-    <section
-      x-data="themesData"
-    >
+    <section x-data="themesData">
       <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-14 mx-auto relative">
         <div class="col-span-2 lg:col-span-1 flex flex-col gap-14 row-start">
           <div class="flex items-center gap-2">
             <img src="https://camo.githubusercontent.com/a8c1f1d12aa3114010c6e74b29d47fee91d8da10a915f065c38e6d0ea7f16568/68747470733a2f2f68756767696e67666163652e636f2f64617461736574732f68756767696e67666163652f646f63756d656e746174696f6e2d696d616765732f7265736f6c76652f6d61696e2f736d6f6c6167656e74732f6d6173636f742e706e67" alt="Smolagents mascot" class="w-14 h-14 flex-shrink-0">
             <h1 class="text-xl font-semibold text-gray-800 break-words">smolagents and tools gallery</h1>
           </div>
+          <div class="flex items-center gap-2">
+            <input
+              type="text"
+              x-model="hfToken"
+              placeholder="Enter your Hugging Face Token"
+              class="px-3 py-1 border rounded-lg"
+            >
+            <button @click="getUser Spaces()" class="px-3 py-1 bg-blue-500 text-white rounded-lg">Import Spaces</button>
+          </div>
         </div>
         <div class="col-span-2 md:col-span-3 flex items-center gap-14 flex flex-wrap lg-auto lg:ml-auto text-sm">
           <div class="flex flex-col gap-2">
@@ -235,68 +245,33 @@
                 placeholder="Search..."
                 class="px-3 py-1 border rounded-lg"
               >
-              <!-- <div class="flex border border-l-0 rounded-r-lg overflow-hidden">
-                <button
-                  @click="switchSearchType('semantic')"
-                  :class="searchType === 'semantic' ? 'bg-orange-300 text-white' : 'bg-white text-gray-800'"
-                  class="px-3 py-1"
-                >
-                  Semantic
-                </button>
-                <button
-                  @click="switchSearchType('keyword')"
-                  :class="searchType === 'keyword' ? 'bg-orange-300 text-white' : 'bg-white text-gray-800'"
-                  class="px-3 py-1 border-l"
-                >
-                  Keyword
-                </button>
-              </div> -->
             </div>
           </div>
           <div class="flex gap-2">
             <span class="md:px-3 py-1 text-gray-800">type</span>
-            <button
-              :class="buttonClass('filter', 'tool')"
-              @click="filterType('tool')"
-            >
-              Tools
-            </button>
-            <button
-              :class="buttonClass('filter', 'agent')"
-              @click="filterType('agent')"
-            >
-              Agents
-            </button>
+            <button :class="buttonClass('filter', 'tool')" @click="filterType('tool')">Tools</button>
+            <button :class="buttonClass('filter', 'agent')" @click="filterType('agent')">Agents</button>
           </div>
           <div class="flex gap-2">
             <span class="md:px-3 py-1 text-gray-800">sort by</span>
-            <button
-              :class="buttonClass('sort', 'likes')"
-              @click="sortThemes('likes')"
-            >
-              Most Likes
-            </button>
-            <button
-              :class="buttonClass('sort', 'recent')"
-              @click="sortThemes('recent')"
-            >
-              Recent
-            </button>
+            <button :class="buttonClass('sort', 'likes')" @click="sortThemes('likes')">Most Likes</button>
+            <button :class="buttonClass('sort', 'recent')" @click="sortThemes('recent')">Recent</button>
           </div>
         </div>
       </section>
-      <div class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 mx-auto my-8  relative">
-      <template x-for="theme in themes" :key="theme.id">
-        <div class="grid-item">
-          <div class="grid-item-header">
-            <h2 class="text-sm font-medium text-white" x-text="theme.id"></h2>
+      <div class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 mx-auto my-8 relative">
+        <template x-for="theme in themes" :key="theme.id">
+          <div class="grid-item">
+            <div class="grid-item-header">
+              <h2 class="text-sm font-medium text-white" x-text="theme.id"></h2>
+            </div>
+            <iframe :src="`${theme.subdomain}?_=${new Date().getTime()}`" :alt="theme.id" scrolling="no" frameborder="0" loading="lazy"></iframe>
+            <a :href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
           </div>
-          <iframe :src="`${theme.subdomain}?_=${new Date().getTime()}`" :alt="theme.id" scrolling="no" frameborder="0" loading="lazy"></iframe>
-          <a :href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
-        </div>
-      </template>
+        </template>
       </div>
       <div class="h-12 relative" x-intersect="nextPage" data-iframe-height></div>
+      <button @click="publishSelected()" class="px-4 py -2 bg-green-500 text-white rounded-lg">Publish Selected Spaces</button>
     </section>
   </body>
 </html>