|
<!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> |
|
|
