|
<!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 = /!\[.*\]\((.*)\)/; |
|
const match = text.match(imageRegex); |
|
return match ? match[1] : null; |
|
} |
|
</script> |
|
</head> |
|
<body> |
|
<div class="card"> |
|
<h1>Welcome to your static Space!</h1> |
|
<section |
|
class="container mx-auto grid grid-cols-3" |
|
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"> |
|
<a |
|
:href="`https://huggingface.co/${model.id}`" |
|
class="block mb-5 bg-gray-100 rounded-xl overflow-hidden relative grid-item group" |
|
> |
|
<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 group-hover:translate-x-0.5 transition"><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" |
|
x-data="{img: ''}" |
|
x-init="img = await fetchFirstImage(`https://huggingface.co/${model.id}/raw/main/README.md`)" |
|
> |
|
<img :src="img" alt="" class="w-full" /> |
|
</div> |
|
</a> |
|
</template> |
|
</section> |
|
</div> |
|
</body> |
|
</html> |
|
|
