move filter to backend

index.html

@@ -45,7 +45,7 @@
 
     Alpine.data("modelsData", () => ({
       async init() {
-        const data = await this.getModels(this.page, this.sort);
+        const data = await this.getModels(this.page, this.sort, this.filter);
         this.models = data.models
         this.totalPages = data.totalPages;
       },
@@ -61,37 +61,29 @@
         }
         return "text-gray-600 hover:bg-gray-200 hover:text-gray-800"
       },
-      filterModels() {
-        switch (this.filter) {
-          case "all":
-            return this.models.filter((model) => !model.isNSFW)
-          case "anime":
-            return this.models.filter((model) => model.class.anime > 0.1 && !model.isNSFW)
-          case "3d":
-            return this.models.filter((model) => model.class["3d"] > 0.1 && !model.isNSFW)
-          case "realistic":
-            return this.models.filter((model) => model.class.real_life > 0.1 && !model.isNSFW)
-          case "18+":
-            return this.models.filter((model) => model.isNSFW)
-        }
-        return []
+      async filterModels(style) {
+        this.filter = style
+        this.page = 1
+        const data = await this.getModels(this.page, this.sort, this.filter)
+        this.models = data.models
+        this.totalPages = data.totalPages
       },
       async sortModels(sort) {
         this.sort = sort
         this.page = 1
-        const data = await this.getModels(this.page, this.sort)
+        const data = await this.getModels(this.page, this.sort, this.filter);
         this.models = data.models;
         this.totalPages = data.totalPages;
       },
-      async getModels(page, sort) {
-        const res = await fetch(`http://localhost:8000/api/models?page=${page}&sort=${sort}`)
-        // return fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}&sort=${sort}`).then(
+      async getModels(page, sort, style) {
+        // const res = await fetch(`http://localhost:8000/api/models?page=${page}&sort=${sort}&style=${style}`)
+        const res = await fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}&sort=${sort}&style=${style}`);
         const data = await res.json();
         const models = data.models.map((model) => ({
           id: model.id,
           likes: model.likes,
           class: model.class,
-          isNSFW: model.class.explicit > 0.3 || model.class.suggestive > 0.3,
+          isNFSW: model.isNFSW,
           images: model.images.filter((image) => image && image.endsWith(".jpg")),
         }));
 
@@ -103,7 +95,7 @@
       async nextPage() {
         if (this.page < this.totalPages) {
           this.page += 1;
-          const data = await this.getModels(this.page, this.sort);
+          const data = await this.getModels(this.page, this.sort, this.filter);
           this.models = this.models.concat(data.models);
           this.totalPages = data.totalPages;
         }
@@ -136,23 +128,23 @@
       <div class="flex text-xs gap-2">
         <span class="px-2 md:px-3 py-1 font-thin"> style</span>
         <button :class="buttonClass('filter', 'all')" class="px-2 md:px-3 py-1 rounded-full"
-          @click="filter='all'">All</button>
+          @click="filterModels('all')">All</button>
         <button :class="buttonClass('filter', 'anime')"
           class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
-          @click="filter='anime'">Anime</button>
+          @click="filterModels('anime')">Anime</button>
         <button :class="buttonClass('filter', '3d')"
           class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
-          @click="filter='3d'">3D</button>
+          @click="filterModels('3d')">3D</button>
         <button :class="buttonClass('filter', 'realistic')"
           class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
-          @click="filter='realistic'">Realistic</button>
-        <button :class="buttonClass('filter', '18+')"
+          @click="filterModels('realistic')">Realistic</button>
+        <button :class="buttonClass('filter', 'nsfw')"
           class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
-          @click="filter='18+'">18+</button>
+          @click="filterModels('nsfw')">18+</button>
       </div>
     </div>
 
-    <template x-for="model in filterModels" :key="model.id">
+    <template x-for="model in models" :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">
@@ -171,7 +163,7 @@
             <div x-text="model.id"
               class="text-base md:text-lg lg:text-xl font-semibold group-hover:translate-x-0.5 transition"></div>
           </div>
-          <div class="group-hover:brightness-90 h-full" :class="model.isNSFW ? 'blur-md' : ''">
+          <div class="group-hover:brightness-90 h-full" :class="model.isNFSW ? 'blur-md' : ''">
             <template x-if="model.images[0]">
               <img :src="()=> ASSETS_URL + model.images[0]" :alt="model.id" alt=""
                 class="w-full h-full object-cover group-hover:scale-[1.01] transition" />