| <!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://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script> |
| <style> |
| body, html { |
| height: 100%; |
| overflow-y: scroll; |
| } |
| </style> |
|
|
| |
| <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, |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| images: model.images.filter((image) => image && image.endsWith(".jpg")), |
| })); |
| this.totalPages = data.totalPages; |
| }, |
| ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/", |
| models: [], |
| filter: "all", |
| page: 1, |
| totalPages: -1, |
| isNSFW(model) { |
| if ("class" in model) { |
| |
| if (Object.keys(model.class).length === 0) { |
| return "" |
| } |
| if (model.class.explicit > 0.1 || model.class.suggestive > 0.4) { |
| return "blur-md" |
| } |
| } |
| return "" |
| }, |
| buttonClass(filter) { |
| if (this.filter === filter) { |
| return "bg-black shadow-lg text-white" |
| } |
| return "text-gray-600 hover:bg-gray-200 hover:text-gray-800" |
| }, |
| filterModels() { |
| console.log(this.models) |
| switch(this.filter) { |
| case "all": |
| return this.models |
| case "anime": |
| return this.models.filter((model) => model.class.anime > 0.1) |
| case "3d": |
| return this.models.filter((model) => model.class["3d"] > 0.1) |
| case "realistic": |
| return this.models.filter((model) => model.class.real_life > 0.1) |
| } |
| return [] |
| }, |
| getModels(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, |
| 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="buttonClass('all')" class="px-4 py-1 rounded-full" @click="filter='all'">All</button> |
| <button :class="buttonClass('anime')" class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-4 py-1 rounded-full" @click="filter='anime'">Anime</button> |
| <button :class="buttonClass('3d')" class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-4 py-1 rounded-full" @click="filter='3d'">3D</button> |
| <button :class="buttonClass('realistic')" class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-4 py-1 rounded-full" @click="filter='realistic'">Realistic</button> |
| </div> |
| <template x-for="model in filterModels" :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> |
