diffusers-gallery

Running

App Files Files Community

Alfasign

victor HF Staff commited on Jul 15, 2023

Commit

d66c979

0 Parent(s):

Duplicate from huggingface-projects/diffusers-gallery

Browse files

Co-authored-by: Victor Mustar <victor@users.noreply.huggingface.co>

Files changed (5) hide show

.gitattributes +34 -0
Dockerfile +2 -0
Fo6vR6JX0AEjbw1.jpeg +0 -0
README.md +14 -0
index.html +218 -0

.gitattributes ADDED Viewed

	@@ -0,0 +1,34 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ FROM nginxinc/nginx-unprivileged:alpine
2	+ COPY . /usr/share/nginx/html

Fo6vR6JX0AEjbw1.jpeg ADDED Viewed

README.md ADDED Viewed

	@@ -0,0 +1,14 @@

+---
+title: Diffusers Gallery
+emoji: 🖼️
+colorFrom: red
+colorTo: green
+sdk: static
+app_port: 8080
+fullWidth: true
+pinned: false
+license: mit
+duplicated_from: huggingface-projects/diffusers-gallery
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html ADDED Viewed

	@@ -0,0 +1,218 @@

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Diffusers gallery</title>
+    <meta name="description" content="Discover all difussion models on the Hugging Face hub." />
+    <meta property="og:url" content="https://huggingface-projects-diffusers-gallery.hf.space/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Hugging Face - Diffusers Models Gallery" />
+    <meta property="og:description" content="Discover all difussion models on the Hugging Face hub." />
+    <meta property="og:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg" />
+    <meta name="twitter:card" content="player" />
+    <meta property="twitter:url" content="https://huggingface-projects-diffusers-gallery.hf.space/" />
+    <meta name="twitter:description" content="Discover all difussion models on the Hugging Face hub." />
+    <meta name="twitter:site" content="@huggingface" />
+    <meta name="twitter:title" content="Hugging Face - Diffusers Models Gallery" />
+    <meta name="twitter:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg" />
+    <meta name="twitter:player" content="https://huggingface-projects-diffusers-gallery.hf.space/index.html" />
+    <meta name="twitter:player:width" content="100%" />
+    <meta name="twitter:player:height" content="600" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></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.sort, this.filter);
+          this.models = data.models;
+          this.totalPages = data.totalPages;
+        },
+        ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",
+        models: [],
+        filter: "all",
+        sort: "trending",
+        page: 1,
+        totalPages: -1,
+        buttonClass(attr, filter) {
+          if (this[attr] === filter) {
+            return "bg-black dark:bg-white shadow-lg text-white dark:text-black hover:bg-black hover:text-white";
+          }
+          return "text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800";
+        },
+        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, this.filter);
+          this.models = data.models;
+          this.totalPages = data.totalPages;
+        },
+        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,
+            isNFSW: model.isNFSW,
+            images: model.images.filter((image) => image && image.endsWith(".jpg")),
+          }));
+          return {
+            models,
+            totalPages: data.totalPages,
+          };
+        },
+        async nextPage() {
+          if (this.page < this.totalPages) {
+            this.page += 1;
+            const data = await this.getModels(this.page, this.sort, this.filter);
+            this.models = this.models.concat(data.models);
+            this.totalPages = data.totalPages;
+          }
+        },
+      }));
+      Alpine.start();
+    </script>
+  </head>
+  <body class="pb-10 pt-5 bg-gray-100 dark:bg-gray-900 relative">
+    <section
+      class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto relative"
+      x-data="modelsData"
+    >
+      <div class="col-span-2 lg:col-span-1 flex flex-col gap-2 row-start">
+        <h1 class="text-lg font-semibold dark:text-white whitespace-nowrap">Diffusers Models Gallery</h1>
+      </div>
+      <div class="col-span-2 md:col-span-3 flex items-center gap-4 flex flex-wrap lg-auto lg:ml-auto text-sm">
+        <div class="flex gap-2">
+          <span class="md:px-3 py-1 dark:text-white text-gray-400">sort by</span>
+          <button
+            :class="buttonClass('sort', 'trending')"
+            class="px-2 md:px-3 py-1 rounded-full text"
+            @click="sortModels('trending')"
+          >
+            Trending
+          </button>
+          <button
+            :class="buttonClass('sort', 'recent')"
+            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+            @click="sortModels('recent')"
+          >
+            Recent
+          </button>
+          <button
+            :class="buttonClass('sort', 'likes')"
+            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+            @click="sortModels('likes')"
+          >
+            Most Likes
+          </button>
+        </div>
+        <div class="flex gap-2">
+          <span class="md:px-3 py-1 dark:text-white text-gray-400"> style</span>
+          <button
+            :class="buttonClass('filter', 'all')"
+            class="px-2 md:px-3 py-1 rounded-full"
+            @click="filterModels('all')"
+          >
+            All
+          </button>
+          <button
+            :class="buttonClass('filter', 'anime')"
+            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+            @click="filterModels('anime')"
+          >
+            Anime
+          </button>
+          <button
+            :class="buttonClass('filter', '3d')"
+            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+            @click="filterModels('3d')"
+          >
+            3D
+          </button>
+          <button
+            :class="buttonClass('filter', 'realistic')"
+            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+            @click="filterModels('realistic')"
+          >
+            Realistic
+          </button>
+        </div>
+      </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-sm 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.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"
+                />
+              </template>
+            </div>
+          </a>
+        </template>
+      </template>
+      <div class="h-12 relative" x-intersect="nextPage" data-iframe-height></div>
+    </section>
+  </body>
+</html>