File size: 4,794 Bytes
9626490 7520956 39963d4 7520956 3208a90 7520956 c215deb 7520956 4040b5d 7520956 2ef123a 17b6909 7520956 2ef123a 7520956 97b79b0 7520956 3208a90 7520956 a51f23c 7520956 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<!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[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>
|