File size: 3,445 Bytes
9626490 39963d4 a51f23c 39963d4 c215deb a51f23c 39963d4 c215deb 39963d4 c215deb a51f23c c215deb a51f23c c215deb a51f23c c215deb a51f23c 39963d4 a51f23c c215deb a51f23c 39963d4 c215deb a51f23c c215deb a51f23c c215deb a51f23c 39963d4 9626490 |
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 |
<!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 defer="" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
function getModels(page) {
return fetch(`https://huggingface.co/models-json?pipeline_tag=text-to-image&p=${page}&sort=likes`).then(
(data) => data.json().then((res) => res.models)
);
}
function getModelCard(modelId) {
return fetch(`https://huggingface.co/${modelId}/raw/main/README.md`).then((data) => data.text());
}
function findImage(text) {
const imageRegex = /(https?:\/\/.*\.(?:png|jpg))(\?.*)?/i;
const match = text.match(imageRegex);
return match ? match[1] : null;
}
function onIntersection(targetEl, callback) {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
callback();
}
});
observer.observe(targetEl);
}
</script>
</head>
<body class="py-10 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="{models: [], page: 0}"
x-init="models = await getModels();
onIntersection($refs.scrollSentinel, async () => {
models = [...models, ...await getModels(page+1)]
page++;
})"
>
<template x-for="model in models" :key="model.id">
<a
x-data="{img: null}"
x-init="img = await getModelCard(model.id).then(findImage)"
:href="`https://huggingface.co/${model.id}`"
class="block bg-gray-100 rounded-xl overflow-hidden relative group aspect-square"
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">
<img :src="img" alt="" class="w-full h-full object-cover group-hover:scale-[1.01] transition" />
</div>
</a>
</template>
<div class="h-12" x-ref="scrollSentinel"></div>
</section>
</body>
</html>
|