| | <!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( |
| | `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 mx-auto w-full px-6 mb-8 mt-2"> |
| | <div |
| | class="w-full px-8 py-8 lg:py-12 rounded-3xl bg-neutral-950 flex-col lg:flex-row items-start justify-between lg:items-center flex gap-5 ring-4 ring-neutral-500/20" |
| | > |
| | <div> |
| | <p class="text-2xl font-extrabold text-white drop-shadow"> |
| | LoRA Studio is here! |
| | </p> |
| | <p class="text-base font-medium drop-shadow mt-1 lg:mt-3 text-white"> |
| | Discover all the diffusion models on the LoRA Studio hub. |
| | <br /> |
| | <span |
| | class="bg-gradient-to-r from-cyan-500 to-pink-500 italic text-sm bg-clip-text text-transparent" |
| | > |
| | Try, share and like your favorite models! |
| | </span> |
| | </p> |
| | </div> |
| | <a |
| | href="https://huggingface.co/spaces/enzostvs/lora-studio" |
| | target="_blank" |
| | class="bg-neutral-950 rounded-full px-6 py-3 inline-block relative overflow-hidden text-white font-bold z-[1] ring-[4px] ring-cyan-500/20 group" |
| | > |
| | <span |
| | class="absolute top-0 left-0 w-full h-full bg-cover z-[-1] opacity-70 group-hover:opacity-100 transition-all duration-200" |
| | style="background-image: url('./banner.webp')" |
| | ></span> |
| | Discover LoRA Studio |
| | </a> |
| | </div> |
| | </section> |
| | <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> |
| | <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> |
| |
|
| | <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> |
| |
|
