Update index.html

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
 
-    <title>Smolagents and tools gallery</title>
+    <title>Smolagent + ToolBox</title>
     <meta name="description" content="Discover all smolagents and tools created by the community." />
 
     <meta property="og:url" content="https://smolagents-tools-gallery.hf.space/" />
@@ -35,27 +35,23 @@
         width: 100%;
         height: 600px;
         pointer-events: none;
-        margin-top: 48px;
+        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;
@@ -65,7 +61,6 @@
         display: block;
         z-index: 1;
       }
-
       .grid-item-header {
         position: absolute;
         top: 0;
@@ -79,7 +74,6 @@
         align-items: center;
         width: 100%;
       }
-
       .grid-item-header h2 {
         width: 100%;
         overflow-wrap: break-word;
@@ -92,7 +86,7 @@
         -webkit-box-orient: vertical;
         line-height: 1.2;
       }
-
+      /* Modal styles */
       .modal-overlay {
         position: fixed;
         top: 0;
@@ -105,7 +99,6 @@
         justify-content: center;
         z-index: 1000;
       }
-
       .modal-content {
         background: white;
         padding: 2rem;
@@ -115,7 +108,6 @@
         max-height: 80vh;
         overflow-y: auto;
       }
-
       .space-item {
         display: flex;
         align-items: center;
@@ -123,7 +115,6 @@
         padding: 0.5rem;
         border-bottom: 1px solid #eee;
       }
-
       [x-cloak] { display: none !important; }
     </style>
 
@@ -131,15 +122,12 @@
       import Alpine from "https://cdn.skypack.dev/alpinejs@3.13.9";
       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);
           this.themes = data.themes;
           this.totalPages = data.totalPages;
         },
-        
-        // State management
         themes: [],
         filter: "tool",
         sort: "likes",
@@ -155,46 +143,124 @@
         selectedSpaces: [],
         spaceTypes: {},
         authError: '',
-
-        // UI Helpers
         buttonClass(attr, filter) {
-          return this[attr] === filter 
-            ? "text-orange-600 bg-gradient-to-br from-orange-300 to-orange-100 px-2 md:px-3 py-1 rounded-full"
-            : "text-gray-800 hover:to-orange-300/100 hover:text-orange-600 dark:hover:bg-white";
+          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";
+          }
+          return "text-gray-800 hover:to-orange-300/100 hover:text-orange-600 dark:hover:bg-white";
+        },
+        async switchData() {
+          this.page = 1;
+          this.useTestData = !this.useTestData;
+          const data = await this.getThemes(this.page, this.sort, this.useTestData);
+          this.themes = data.themes;
+          this.totalPages = data.totalPages;
+        },
+        async sortThemes(sort) {
+          this.sort = sort;
+          this.page = 1;
+          const data = await this.getThemes(this.page, this.sort, this.useTestData);
+          this.themes = data.themes;
+          this.totalPages = data.totalPages;
+        },
+        async filterType(filter) {
+          this.filter = filter;
+          this.page = 1;
+          if (this.searchQuery) {
+            await this.searchThemes();
+          } else {
+            const data = await this.getThemes(this.page, this.sort, this.useTestData);
+            this.themes = data.themes;
+            this.totalPages = data.totalPages;
+          }
+        },
+        async searchThemes() {
+          this.page = 1;
+          const data = await this.getThemes(this.page, this.sort, this.useTestData);
+          this.themes = data.themes;
+          this.totalPages = data.totalPages;
+        },
+        async switchSearchType(type) {
+          this.searchType = type;
+          if (this.searchQuery) {
+            await this.searchThemes();
+          }
+        },
+        async getThemes(page, sort, useTestData) {
+          let data;
+          if (useTestData) {
+            const res = await fetch(
+              `https://huggingface.co/datasets/freddyaboulton/gradio-theme-subdomains/resolve/main/test_data.json`
+            );
+            data = await res.json();
+          } else {
+            const searchFilters = this.filter === 'tool' ? 'tool' : 'smolagents';
+            let searchUrl;
+            if (this.searchQuery) {
+              if (this.searchType === 'semantic') {
+                searchUrl = `https://huggingface.co/api/spaces/semantic-search?limit=100&filter=${searchFilters}&q=${encodeURIComponent(this.searchQuery)}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`;
+              } else {
+                searchUrl = `https://huggingface.co/api/spaces?limit=100&filter=${searchFilters}&search=${encodeURIComponent(this.searchQuery)}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`;
+              }
+            } else {
+              searchUrl = `https://huggingface.co/api/spaces?limit=100&filter=${encodeURIComponent(searchFilters)}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`;
+            }
+            const res = await fetch(searchUrl);
+            data = await res.json();
+            console.log(data);
+            // Transform the API response to match the expected format
+            data = data.filter(item => item.runtime?.stage === "RUNNING").map(item => ({
+              id: item.id,
+              subdomain: `https://${item.subdomain}.hf.space`,
+              likes: item.likes,
+              lastModified: item.lastModified,
+              type: this.filter // Add type based on current filter
+            }));
+          }
+          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)
+          };
+        },
+        async nextPage() {
+          if (this.page < this.totalPages) {
+            this.page += 1;
+            const data = await this.getThemes(this.page, this.sort, this.useTestData);
+            this.themes = this.themes.concat(data.themes);
+            this.totalPages = data.totalPages;
+          }
         },
-
-        // Authentication Logic
         async authenticate() {
-          this.authError = '';
+          this.authError = ''; // Reset error message
           try {
             // Validate token format
             if (!this.hfToken || this.hfToken.length < 10) {
-              throw new Error('Invalid token format - must be at least 10 characters');
+              throw new Error('Invalid token format');
             }
-
-            // Verify token with HF API
-            const userRes = await fetch('https://huggingface.co/api/whoami', {
+            // Fetch user info to validate token
+            const response = await fetch('https://huggingface.co/api/whoami', {
               headers: { Authorization: `Bearer ${this.hfToken}` }
             });
-
-            if (!userRes.ok) {
-              const errorData = await userRes.json();
-              throw new Error(errorData.error || 'Invalid credentials');
+            if (!response.ok) {
+              throw new Error('Authentication failed. Please check your token.');
             }
-
-            const userData = await userRes.json();
+            const userData = await response.json();
             console.log('Authenticated as:', userData.name);
-
-            // Fetch user's spaces
+            // Fetch user spaces
             const spacesRes = await fetch(
-              `https://huggingface.co/api/spaces?user=${encodeURIComponent(userData.name)}`,
+              `https://huggingface.co/api/spaces?user=${userData.name}`,
               { headers: { Authorization: `Bearer ${this.hfToken}` } }
             );
-
             if (!spacesRes.ok) {
-              throw new Error('Failed to fetch spaces - check token permissions');
+              throw new Error('Failed to fetch spaces. Please try again.');
             }
-
             const spacesData = await spacesRes.json();
             this.userSpaces = spacesData
               .filter(space => space.runtime?.stage === "RUNNING")
@@ -204,21 +270,15 @@
                 likes: space.likes,
                 lastModified: space.lastModified
               }));
-
-            // Initialize default types
             this.spaceTypes = Object.fromEntries(
               this.userSpaces.map(space => [space.id, 'tool'])
             );
             this.authenticated = true;
-
           } catch (error) {
             console.error('Authentication error:', error);
             this.authError = error.message;
-            this.authenticated = false;
           }
         },
-
-        // Space Import Logic
         importSpaces() {
           const newThemes = this.selectedSpaces.map(id => {
             const space = this.userSpaces.find(s => s.id === id);
@@ -227,83 +287,26 @@
               type: this.spaceTypes[id]
             };
           });
-
           this.themes = [...this.themes, ...newThemes];
           this.showImport = false;
-          this.resetAuthState();
-        },
-
-        resetAuthState() {
           this.hfToken = '';
           this.authenticated = false;
           this.userSpaces = [];
           this.selectedSpaces = [];
         },
-
-        // Data Fetching
-        async getThemes(page, sort, useTestData) {
-          let data;
-          if (useTestData) {
-            const res = await fetch(
-              'https://huggingface.co/datasets/freddyaboulton/gradio-theme-subdomains/resolve/main/test_data.json'
-            );
-            data = await res.json();
-          } else {
-            const searchFilters = this.filter === 'tool' ? 'tool' : 'smolagents';
-            let searchUrl;
-            
-            if (this.searchQuery) {
-              searchUrl = this.searchType === 'semantic'
-                ? `https://huggingface.co/api/spaces/semantic-search?limit=100&filter=${searchFilters}&q=${encodeURIComponent(this.searchQuery)}`
-                : `https://huggingface.co/api/spaces?limit=100&filter=${searchFilters}&search=${encodeURIComponent(this.searchQuery)}`;
-            } else {
-              searchUrl = `https://huggingface.co/api/spaces?limit=100&filter=${encodeURIComponent(searchFilters)}`;
-            }
-
-            const res = await fetch(searchUrl);
-            data = await res.json();
-            data = data
-              .filter(item => item.runtime?.stage === "RUNNING")
-              .map(item => ({
-                id: item.id,
-                subdomain: `https://${item.subdomain}.hf.space`,
-                likes: item.likes,
-                lastModified: item.lastModified,
-                type: this.filter
-              }));
-          }
-
-          data.sort((a, b) => sort === 'likes' 
-            ? b.likes - a.likes 
-            : new Date(b.lastModified) - new Date(a.lastModified)
-          );
-
-          return {
-            themes: data.slice((page - 1) * 15, page * 15),
-            totalPages: Math.ceil(data.length / 15)
-          };
-        },
-
-        // Pagination
-        async nextPage() {
-          if (this.page < this.totalPages) {
-            this.page += 1;
-            const data = await this.getThemes(this.page, this.sort, this.useTestData);
-            this.themes = this.themes.concat(data.themes);
-            this.totalPages = data.totalPages;
-          }
-        }
       }));
-      
       Alpine.start();
     </script>
   </head>
 
   <body class="pb-10 pt-5 bg-white relative">
     <section x-data="themesData">
-      <!-- Import Button -->
+      <!-- Add Import Button -->
       <div class="container px-6 mx-auto mb-4">
-        <button @click="showImport = true" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+        <button 
+          @click="showImport = true"
+          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+        >
           Import Your Spaces
         </button>
       </div>
@@ -321,10 +324,16 @@
                 class="w-full p-2 border rounded"
               />
               <div class="flex gap-2">
-                <button @click="authenticate()" class="px-4 py-2 bg-green-600 text-white rounded">
+                <button 
+                  @click="authenticate()"
+                  class="px-4 py-2 bg-green-600 text-white rounded"
+                >
                   Authenticate
                 </button>
-                <button @click="showImport = false" class="px-4 py-2 bg-gray-600 text-white rounded">
+                <button 
+                  @click="showImport = false"
+                  class="px-4 py-2 bg-gray-600 text-white rounded"
+                >
                   Cancel
                 </button>
               </div>
@@ -338,9 +347,16 @@
               <div class="space-y-2">
                 <template x-for="space in userSpaces" :key="space.id">
                   <div class="space-item">
-                    <input type="checkbox" x-model="selectedSpaces" :value="space.id">
+                    <input 
+                      type="checkbox" 
+                      x-model="selectedSpaces" 
+                      :value="space.id"
+                    >
                     <span x-text="space.id"></span>
-                    <select x-model="spaceTypes[space.id]" class="ml-auto px-2 py-1 border rounded">
+                    <select 
+                      x-model="spaceTypes[space.id]"
+                      class="ml-auto px-2 py-1 border rounded"
+                    >
                       <option value="tool">Tool</option>
                       <option value="agent">Agent</option>
                     </select>
@@ -348,10 +364,16 @@
                 </template>
               </div>
               <div class="flex gap-2">
-                <button @click="importSpaces()" class="px-4 py-2 bg-blue-600 text-white rounded">
+                <button
+                  @click="importSpaces()"
+                  class="px-4 py-2 bg-blue-600 text-white rounded"
+                >
                   Import Selected
                 </button>
-                <button @click="showImport = false" class="px-4 py-2 bg-gray-600 text-white rounded">
+                <button
+                  @click="showImport = false"
+                  class="px-4 py-2 bg-gray-600 text-white rounded"
+                >
                   Cancel
                 </button>
               </div>
@@ -360,17 +382,14 @@
         </div>
       </div>
 
-      <!-- Main Content -->
+      <!-- Existing header and grid remain unchanged -->
       <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">
+            <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>
-        
         <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">
             <div class="flex items-center">
@@ -385,43 +404,47 @@
           </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')">
+            <button
+              :class="buttonClass('filter', 'tool')"
+              @click="filterType('tool')"
+            >
               Tools
             </button>
-            <button :class="buttonClass('filter', 'agent')" @click="filterType('agent')">
+            <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')">
+            <button
+              :class="buttonClass('sort', 'likes')"
+              @click="sortThemes('likes')"
+            >
               Most Likes
             </button>
-            <button :class="buttonClass('sort', 'recent')" @click="sortThemes('recent')">
+            <button
+              :class="buttonClass('sort', 'recent')"
+              @click="sortThemes('recent')"
+            >
               Recent
             </button>
           </div>
         </div>
       </section>
-
-      <!-- Grid Display -->
-      <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 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>
-        </template>
+          <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>
       </div>
-
-      <!-- Infinite Scroll Trigger -->
       <div class="h-12 relative" x-intersect="nextPage" data-iframe-height></div>
     </section>
   </body>