filter all nsfw

index.html

@@ -46,22 +46,7 @@
     Alpine.data("modelsData", () => ({
       async init() {
         const data = await this.getModels(this.page, this.sort);
-        this.models = data.models.map((model) => ({
-          id: model.id,
-          likes: model.likes,
-          class: model.class,
-          //"anime"
-          //"3d"
-          //"other"
-          //"real_life"
-          //"manga_like"
-          //"aesthetic"
-          //"not_aesthetic"
-          //"safe"
-          //"suggestive"
-          //"explicit"
-          images: model.images.filter((image) => image && image.endsWith(".jpg")),
-        }));
+        this.models = data.models
         this.totalPages = data.totalPages;
       },
       ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",
@@ -70,18 +55,6 @@
       sort: "trending",
       page: 1,
       totalPages: -1,
-      isNSFW(model) {
-        if ("class" in model) {
-          // check if class is empty object
-          if (Object.keys(model.class).length === 0) {
-            return ""
-          }
-          if (model.class.explicit > 0.1 || model.class.suggestive > 0.4) {
-            return "blur-md"
-          }
-        }
-        return ""
-      },
       buttonClass(attr, filter) {
         if (this[attr] === filter) {
           return "bg-black shadow-lg text-white"
@@ -91,48 +64,48 @@
       filterModels() {
         switch (this.filter) {
           case "all":
-            return this.models
+            return this.models.filter((model) => !model.isNSFW)
           case "anime":
-            return this.models.filter((model) => model.class.anime > 0.1)
+            return this.models.filter((model) => model.class.anime > 0.1 && !model.isNSFW)
           case "3d":
-            return this.models.filter((model) => model.class["3d"] > 0.1)
+            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)
+            return this.models.filter((model) => model.class.real_life > 0.1 && !model.isNSFW)
+          case "18+":
+            return this.models.filter((model) => model.isNSFW)
         }
         return []
       },
-      sortModels(sort) {
+      async sortModels(sort) {
         this.sort = sort
         this.page = 1
-        this.getModels(this.page, this.sort).then((data) => {
-          const models = data.models.map((model) => ({
-            id: model.id,
-            likes: model.likes,
-            class: model.class,
-            images: model.images.filter((image) => image && image.endsWith(".jpg")),
-          }));
-          this.models = models;
-        });
-
+        const data = await this.getModels(this.page, this.sort)
+        this.models = data.models;
+        this.totalPages = data.totalPages;
       },
-      getModels(page, sort) {
-        // return fetch(`http://localhost:8000/api/models?page=${page}&sort=${sort}`).then(
-          return fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}&sort=${sort}`).then(
-          (res) => res.json()
-        );
+      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(
+        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,
+          images: model.images.filter((image) => image && image.endsWith(".jpg")),
+        }));
+
+        return {
+          models,
+          totalPages: data.totalPages
+        }
       },
-      nextPage() {
+      async nextPage() {
         if (this.page < this.totalPages) {
           this.page += 1;
-          this.getModels(this.page, this.sort).then((data) => {
-            const models = data.models.map((model) => ({
-              id: model.id,
-              likes: model.likes,
-              class: model.class,
-              images: model.images.filter((image) => image && image.endsWith(".jpg")),
-            }));
-            this.models = this.models.concat(models);
-          });
+          const data = await this.getModels(this.page, this.sort);
+          this.models = this.models.concat(data.models);
+          this.totalPages = data.totalPages;
         }
       },
     }));
@@ -173,9 +146,9 @@
         <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', 'realistic')"
+        <button :class="buttonClass('filter', '18+')"
           class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
-          @click="filter='realistic'">18+</button>
+          @click="filter='18+'">18+</button>
       </div>
     </div>
 
@@ -198,7 +171,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="isNSFW(model)">
+          <div class="group-hover:brightness-90 h-full" :class="model.isNSFW ? '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" />