|
<!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 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> |
|
<details> |
|
<summary class="font-thin cursor-pointer focus:outline-none focus:shadow-outline-gray dark:text-white"> |
|
About |
|
</summary> |
|
<p class="font-thin dark:text-white"> |
|
The gallery only displays models with valid images in the model card, and the classifiers use the first |
|
image in the card. |
|
|
|
<a href="https://huggingface.co./cafeai/cafe_style" class="text-blue-500 hover:underline" target="_blank" |
|
>cafeai/cafe_style</a |
|
> |
|
generates style tags, while |
|
<a |
|
href="https://huggingface.co./carbon225/vit-base-patch16-224-hentai" |
|
class="text-blue-500 hover:underline" |
|
target="_blank" |
|
>carbon225/vit-base-patch16-224-hentai</a |
|
> |
|
generates NSFW tags. Test both models at |
|
<a |
|
href="https://huggingface.co./spaces/radames/aesthetic-style-nsfw-classifier" |
|
class="text-blue-500 hover:underline" |
|
target="_blank" |
|
>radames/aesthetic-style-nsfw-classifier</a |
|
>. The models are not perfect and may make mistakes. Sorry. |
|
</p> |
|
</details> |
|
</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-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="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> |
|
|
