Update metadata and API filter for smolagents and tools gallery

index.html

@@ -4,24 +4,24 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
 
-    <title>Gradio theme gallery</title>
-    <meta name="description" content="Discover all gradio themes created by the community." />
+    <title>Smolagents and tools gallery</title>
+    <meta name="description" content="Discover all smolagents and tools created by the community." />
 
-    <meta property="og:url" content="https://freddyaboulton-gradio-themes-gallery.hf.space/" />
+    <meta property="og:url" content="https://smolagents-tools-gallery.hf.space/" />
     <meta property="og:type" content="website" />
-    <meta property="og:title" content="Gradio - Theme Gallery" />
-    <meta property="og:description" content="Discover all gradio themes created by the community." />
+    <meta property="og:title" content="smolagents and tools gallery" />
+    <meta property="og:description" content="Discover all smolagents and tools created by the community." />
     <meta property="og:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg" />
 
     <meta name="twitter:card" content="player" />
-    <meta property="twitter:url" content="https://freddyaboulton-gradio-themes-gallery.hf.space/" />
-    <meta name="twitter:description" content="Discover all gradio themes created by the community." />
+    <meta property="twitter:url" content="https://davidberenstein1957-smolagents-and-tools.static.hf.space" />
+    <meta name="twitter:description" content="Discover all smolagents and tools created by the community." />
 
     <meta name="twitter:site" content="@huggingface" />
-    <meta name="twitter:title" content="Gradio - Theme Gallery" />
+    <meta name="twitter:title" content="smolagents and tools gallery" />
 
     <meta name="twitter:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg" />
-    <meta name="twitter:player" content="https://freddyaboulton-gradio-themes-gallery.hf.space/index.html" />
+    <meta name="twitter:player" content="https://davidberenstein1957-smolagents-and-tools.static.hf.space" />
     <meta name="twitter:player:width" content="100%" />
     <meta name="twitter:player:height" content="600" />
 
@@ -29,13 +29,13 @@
     <script src="https://cdn.tailwindcss.com"></script>
 
     <style>
-
 		iframe {
 			display: block;
 			border: none;
 			width: 100%;
 			height: 600px;
 			pointer-events: none;
+      margin-top: 32px; /* Match header height */
 		}
 
 		.grid-container {
@@ -64,6 +64,19 @@
 			display: block;
 			z-index: 1;
 		}
+
+    .grid-item-header {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 32px;
+      background: rgba(0,0,0,0.5);
+      padding: 8px;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+    }
     </style>
 
     <script type="module">
@@ -78,7 +91,7 @@
           this.totalPages = data.totalPages;
         },
         themes: [],
-        filter: "all",
+        filter: "tool",
         sort: "likes",
         page: 1,
         totalPages: -1,
@@ -108,6 +121,13 @@
           this.themes = data.themes;
           this.totalPages = data.totalPages;
         },
+        async filterType(filter) {
+          this.filter = filter;
+          this.page = 1;
+          const data = await this.getThemes(this.page, this.sort, this.useTestData);
+          this.themes = data.themes;
+          this.totalPages = data.totalPages;
+        },
         async getThemes(page, sort, useTestData) {
           let data;
           if (useTestData) {
@@ -116,8 +136,9 @@
             );
             data = await res.json();
           } else {
+            const searchFilters = this.filter === 'tool' ? 'tool' : '(smolagent OR agent OR smolagents)';
             const res = await fetch(
-              'https://huggingface.co/api/spaces?limit=100&filter=tools&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime'
+              `https://huggingface.co/api/spaces?limit=100&filter=${searchFilters}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`
             );
             data = await res.json();
             console.log(data)
@@ -164,14 +185,29 @@
     >
       <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">
-          <h1 class="text-lg font-semibold text-gray-800 whitespace-nowrap">Gradio Themes Gallery</h1>
+          <h1 class="text-lg font-semibold text-gray-800 whitespace-nowrap">smolagents and tools gallery</h1>
         </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 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>
+          </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')"
+              :class="buttonClass('sort', 'likes')"
+              @click="sortThemes('likes')"
             >
               Most Likes
             </button>
@@ -183,23 +219,17 @@
             </button>
           </div>
           <div class="flex gap-0">
-            <!-- <input type="checkbox" @click="switchData()" class="rounded accent-orange-300">
-            <span class="md:px-3 py-1 text-gray-800 ml-0">Use Test Data</span> -->
             <input type="checkbox" @click="switchTheme()" class="rounded accent-orange-300">
             <span class="md:px-3 py-1 text-gray-800 ml-0">Show Dark Mode</span>
-            <!-- <button
-              :class="buttonClass('useTestData', false)"
-              class="px-2 md:px-3 py-1 rounded-full"
-              @click="switchData()"
-            >
-              Use Test Data
-            </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>
           <iframe :src="`${theme.subdomain}?_=${new Date().getTime()}&__theme=${mode}`" :alt="theme.id" scrolling="no" frameborder="0" loading="lazy"></iframe>
           <a :href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
         </div>