Spaces:

huggingface-projects
/

diffusers-gallery

Running

App Files Files Community

radames commited on Feb 17, 2023

Commit

d77412f

•

1 Parent(s): b239782

add classification data

Browse files

Files changed (1) hide show

index.html +108 -103

index.html CHANGED Viewed

@@ -1,114 +1,119 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Diffusers gallery</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
-    <script type="module">
-      import Alpine from "https://cdn.skypack.dev/alpinejs";
-      import Intersect from "https://cdn.skypack.dev/@alpinejs/intersect";
-      Alpine.plugin(Intersect);
-      Alpine.data("modelsData", () => ({
-        async init() {
-          const data = await this.getModels(this.page);
-          this.models = data.models.map((model) => ({
-            id: model.id,
-            likes: model.likes,
-            images: model.images.filter((image) => image && image.endsWith(".jpg")),
-          }));
-          this.totalPages = data.totalPages;
-        },
-        ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",
-        models: [],
-        page: 1,
-        totalPages: -1,
-        getModels(page) {
-          // return fetch(`http://localhost:8000/api/models?page=${page}`)
-          return fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}`).then(
-            (res) => res.json()
-          );
-        },
-        nextPage() {
-          if (this.page < this.totalPages) {
-            this.page += 1;
-            this.getModels(this.page).then((data) => {
-              const models = data.models.map((model) => ({
-                id: model.id,
-                likes: model.likes,
-                images: model.images.filter((image) => image && image.endsWith(".jpg")),
-              }));
-              this.models = this.models.concat(models);
-            });
           }
-        },
-      }));
-      Alpine.start();
-    </script>
-  </head>
-  <body class="pb-10 pt-5 bg-gray-100">
-    <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> -->
-      </div>
-      <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"
-          >
-            <div
-              class="absolute bottom-0 p-4 bg-gradient-to-t text-white pt-10 from-black/90 via-black/70 to-transparent w-full z-10"
-            >
-              <div class="text-sm flex items-center group-hover:translate-x-0.5 transition">
-                <svg
-                  class="mr-1.5 text-white/70"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
-                  aria-hidden="true"
-                  focusable="false"
-                  role="img"
-                  width="1em"
-                  height="1em"
-                  preserveAspectRatio="xMidYMid meet"
-                  viewBox="0 0 32 32"
-                  fill="currentColor"
-                >
-                  <path
-                    d="M22.5,4c-2,0-3.9,0.8-5.3,2.2L16,7.4l-1.1-1.1C12,3.3,7.2,3.3,4.3,6.2c0,0-0.1,0.1-0.1,0.1c-3,3-3,7.8,0,10.8L16,29l11.8-11.9c3-3,3-7.8,0-10.8C26.4,4.8,24.5,4,22.5,4z"
-                  ></path>
-                </svg>
-                <span x-text="model.likes"></span>
-              </div>
-              <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">
-              <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"
-                />
-              </template>
-            </div>
-          </a>
-        </template>
       </template>
-      <div class="h-12" x-intersect="nextPage"></div>
-    </section>
-  </body>
-</html>

 <!DOCTYPE html>
 <html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Diffusers gallery</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
+  <script type="module">
+    import Alpine from "https://cdn.skypack.dev/alpinejs";
+    import Intersect from "https://cdn.skypack.dev/@alpinejs/intersect";
+    Alpine.plugin(Intersect);
+    Alpine.data("modelsData", () => ({
+      async init() {
+        const data = await this.getModels(this.page);
+        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.totalPages = data.totalPages;
+      },
+      ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",
+      models: [],
+      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 ""
+      },
+      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(
+          (res) => res.json()
+        );
+      },
+      nextPage() {
+        if (this.page < this.totalPages) {
+          this.page += 1;
+          this.getModels(this.page).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);
+          });
+        }
+      },
+    }));
+    Alpine.start();
+  </script>
+</head>
+<body class="pb-10 pt-5 bg-gray-100">
+  <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> -->
+    </div>
+    <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">
+          <div
+            class="absolute bottom-0 p-4 bg-gradient-to-t text-white pt-10 from-black/90 via-black/70 to-transparent w-full z-10">
+            <div class="text-sm flex items-center group-hover:translate-x-0.5 transition">
+              <svg class="mr-1.5 text-white/70" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em"
+                height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" fill="currentColor">
+                <path
+                  d="M22.5,4c-2,0-3.9,0.8-5.3,2.2L16,7.4l-1.1-1.1C12,3.3,7.2,3.3,4.3,6.2c0,0-0.1,0.1-0.1,0.1c-3,3-3,7.8,0,10.8L16,29l11.8-11.9c3-3,3-7.8,0-10.8C26.4,4.8,24.5,4,22.5,4z">
+                </path>
+              </svg>
+              <span x-text="model.likes"></span>
             </div>
+            <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)">
+            <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" />
+            </template>
+          </div>
+        </a>
       </template>
+    </template>
+    <div class="h-12" x-intersect="nextPage"></div>
+  </section>
+</body>
+</html>