Spaces:
Running
Running
| <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> | |