Add search functionality with semantic and keyword options

index.html

@@ -95,8 +95,9 @@
         sort: "likes",
         page: 1,
         totalPages: -1,
-        mode: "light",
         useTestData: false,
+        searchQuery: "",
+        searchType: "semantic",
         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";
@@ -110,10 +111,6 @@
           this.themes = data.themes;
           this.totalPages = data.totalPages;
         },
-        async switchTheme() {
-          this.mode = this.mode === "light" ? "dark": "light";
-          console.log(this.mode);
-        },
         async sortThemes(sort) {
           this.sort = sort;
           this.page = 1;
@@ -128,6 +125,12 @@
           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 getThemes(page, sort, useTestData) {
           let data;
           if (useTestData) {
@@ -137,8 +140,11 @@
             data = await res.json();
           } else {
             const searchFilters = this.filter === 'tool' ? 'tool' : '(smolagent OR agent OR smolagents)';
+            const searchParam = this.searchQuery ?
+              (this.searchType === 'semantic' ? `&q=${encodeURIComponent(this.searchQuery)}` : `&search=${encodeURIComponent(this.searchQuery)}`)
+              : '';
             const res = await fetch(
-              `https://huggingface.co/api/spaces?limit=100&filter=${searchFilters}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`
+              `https://huggingface.co/api/spaces?limit=100&filter=${searchFilters}${searchParam}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`
             );
             data = await res.json();
             console.log(data)
@@ -185,9 +191,39 @@
     >
       <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">smolagents and tools gallery</h1>
+          <div class="flex items-center gap-2">
+            <img src="https://camo.githubusercontent.com/a8c1f1d12aa3114010c6e74b29d47fee91d8da10a915f065c38e6d0ea7f16568/68747470733a2f2f68756767696e67666163652e636f2f64617461736574732f68756767696e67666163652f646f63756d656e746174696f6e2d696d616765732f7265736f6c76652f6d61696e2f736d6f6c6167656e74732f6d6173636f742e706e67" alt="Smolagents mascot" class="w-14 h-14">
+            <h1 class="text-xl font-semibold text-gray-800 whitespace-nowrap">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">
+              <input
+                type="text"
+                x-model="searchQuery"
+                @input="searchThemes()"
+                placeholder="Search..."
+                class="px-3 py-1 border rounded-l-lg"
+              >
+              <div class="flex border border-l-0 rounded-r-lg overflow-hidden">
+                <button
+                  @click="searchType = 'semantic'; searchThemes()"
+                  :class="searchType === 'semantic' ? 'bg-orange-300 text-white' : 'bg-white text-gray-800'"
+                  class="px-3 py-1"
+                >
+                  Semantic
+                </button>
+                <button
+                  @click="searchType = 'keyword'; searchThemes()"
+                  :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
@@ -218,10 +254,6 @@
               Recent
             </button>
           </div>
-          <div class="flex gap-0">
-            <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>
-          </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">
@@ -230,7 +262,7 @@
           <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>
+          <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>