Spaces:

huggingface-projects
/

diffusers-gallery

Running

App Files Files Community

victor HF staff commited on Feb 14, 2023

Commit

7520956

•

1 Parent(s): 17b6909

prettier + remove lazy on img

Browse files

Files changed (1) hide show

index.html +103 -85

index.html CHANGED Viewed

@@ -1,96 +1,114 @@
 <!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="py-10 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[model.images.length * Math.random() | 0]" :alt="model.id" alt=""
-                loading="lazy" 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,
+            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[model.images.length * Math.random() | 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>