lora

index.html

@@ -5,23 +5,53 @@
     <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
+      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: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
+      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
+      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: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: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" />
 
@@ -66,17 +96,21 @@
           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}`
+            `http://localhost:7860/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")),
+            images: model.images.filter(
+              (image) => image && image.endsWith(".jpg")
+            ),
           }));
 
           return {
@@ -87,7 +121,11 @@
         async nextPage() {
           if (this.page < this.totalPages) {
             this.page += 1;
-            const data = await this.getModels(this.page, this.sort, this.filter);
+            const data = await this.getModels(
+              this.page,
+              this.sort,
+              this.filter
+            );
             this.models = this.models.concat(data.models);
             this.totalPages = data.totalPages;
           }
@@ -103,12 +141,18 @@
       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>
+        <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="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>
+          <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"
@@ -161,6 +205,13 @@
           >
             Realistic
           </button>
+          <button
+            :class="buttonClass('filter', 'lora')"
+            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('lora')"
+          >
+            Lora
+          </button>
         </div>
       </div>
 
@@ -174,7 +225,9 @@
             <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">
+              <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"
@@ -199,7 +252,10 @@
                 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' : ''">
+            <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]"
@@ -212,7 +268,11 @@
           </a>
         </template>
       </template>
-      <div class="h-12 relative" x-intersect="nextPage" data-iframe-height></div>
+      <div
+        class="h-12 relative"
+        x-intersect="nextPage"
+        data-iframe-height
+      ></div>
     </section>
   </body>
 </html>