add filters to page

index.html

@@ -36,6 +36,7 @@
       },
       ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",
       models: [],
+      filter: "all",
       page: 1,
       totalPages: -1,
       isNSFW(model) {
@@ -50,9 +51,29 @@
         }
         return ""
       },
+      buttonClass(filter) {
+        if (this.filter === filter) {
+          return "bg-black shadow-lg text-white"
+        }
+        return "text-gray-600 hover:bg-gray-200 hover:text-gray-800"
+      },
+      filterModels() {
+        console.log(this.models)
+        switch(this.filter) {
+          case "all":
+            return this.models
+          case "anime":
+            return this.models.filter((model) => model.class.anime > 0.1)
+          case "3d":
+            return this.models.filter((model) => model.class["3d"] > 0.1)
+          case "realistic":
+            return this.models.filter((model) => model.class.real_life > 0.1)
+        }
+        return []
+      },
       getModels(page) {
         // return fetch(`http://localhost:8000/api/models?page=${page}`).then(
-          return fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}`).then(
+        return fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}`).then(
           (res) => res.json()
         );
       },
@@ -79,12 +100,12 @@
   <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto" x-data="modelsData">
     <div class="col-span-2 md:col-span-3 lg:col-span-4 flex items-center gap-2">
       <h1 class="mr-auto text-lg font-semibold">Diffusers Models Gallery</h1>
-      <button class="bg-black shadow-lg px-4 py-1 rounded-full text-white">All</button>
-      <!--       <button class="text-gray-600 px-4 py-1 rounded-full hover:bg-gray-200 hover:text-gray-800">Anime</button>
-      <button class="text-gray-600 px-4 py-1 rounded-full hover:bg-gray-200 hover:text-gray-800">3D</button>
-      <button class="text-gray-600 px-4 py-1 rounded-full hover:bg-gray-200 hover:text-gray-800">Realistic</button> -->
+      <button :class="buttonClass('all')" class="px-4 py-1 rounded-full" @click="filter='all'">All</button>
+      <button :class="buttonClass('anime')" class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-4 py-1 rounded-full" @click="filter='anime'">Anime</button>
+      <button :class="buttonClass('3d')" class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-4 py-1 rounded-full" @click="filter='3d'">3D</button>
+      <button :class="buttonClass('realistic')" class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-4 py-1 rounded-full" @click="filter='realistic'">Realistic</button>
     </div>
-    <template x-for="model in models" :key="model.id">
+    <template x-for="model in filterModels" :key="model.id">
       <template x-if="model.images.length > 0">
         <a :href="`https://huggingface.co/${model.id}`"
           class="block bg-gray-900 rounded-xl overflow-hidden relative group aspect-square text-white" target="_blank">