File size: 2,716 Bytes
9626490 39963d4 a51f23c 39963d4 a51f23c 39963d4 a51f23c 39963d4 a51f23c 39963d4 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 |
<!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>
async function fetchFirstImage(url) {
const response = await fetch(url);
const text = await response.text();
const imageRegex = /(https?:\/\/.*\.(?:png|jpg))(\?.*)?/i;
const match = text.match(imageRegex);
return match ? match[1] : null;
}
</script>
</head>
<body class="py-10">
<section
class="container grid grid-cols-3 2xl:grid-cols-4 gap-4 mx-auto"
x-data="{models: [], fetchFirstImage, }"
x-init="{models} = await fetch('https://huggingface.co/models-json?pipeline_tag=text-to-image&sort=likes').then(data => data.json())"
>
<template x-for="model in models.reverse()">
<a
: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 text-red-500"
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-xl font-semibold group-hover:translate-x-0.5 transition"></div>
</div>
<div
class="group-hover:brightness-90 h-full"
x-data="{img: ''}"
x-init="img = await fetchFirstImage(`https://huggingface.co/${model.id}/raw/main/README.md`)"
>
<img :src="img" alt="" class="w-full h-full object-cover" />
</div>
</a>
</template>
</section>
</body>
</html>
|