File size: 3,212 Bytes
9626490 39963d4 0cff3cc 39963d4 c215deb a51f23c 39963d4 0cff3cc c215deb 39963d4 c215deb a51f23c c215deb 0cff3cc a51f23c c215deb a51f23c c215deb a51f23c 0cff3cc a51f23c 39963d4 a51f23c c215deb a51f23c 39963d4 c215deb a51f23c c215deb a51f23c 0cff3cc 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 |
<!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/@alpinejs/[email protected]/dist/cdn.min.js"></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[0] : null;
}
</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()"
x-effect="console.log(models)"
>
<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-900 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-intersect="models = [...models, ...await getModels(page+1)]; page++"></div>
</section>
</body>
</html>
|