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 type="module"> | |
| import Alpine from 'https://cdn.skypack.dev/alpinejs' | |
| import Intersect from 'https://cdn.skypack.dev/@alpinejs/intersect' | |
| Alpine.plugin(Intersect) | |
| Alpine.data('modelsData', () => ({ | |
| async init() { | |
| const data = await this.getModels(this.page) | |
| this.models = data.models.map(model => ({ | |
| id: model.id, | |
| likes: model.likes, | |
| images: model.images.filter(image => image && image.endsWith('.jpg')) | |
| })) | |
| this.totalPages = data.totalPages | |
| }, | |
| ASSETS_URL: 'https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/', | |
| models: [], | |
| page: 1, | |
| totalPages: -1, | |
| getModels(page) { | |
| // return fetch(`http://localhost:8000/api/models?page=${page}`) | |
| return fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}`) | |
| .then((res) => res.json()) | |
| }, | |
| nextPage() { | |
| if (this.page < this.totalPages) { | |
| this.page += 1 | |
| this.getModels(this.page).then((data) => { | |
| const models = data.models.map(model => ({ | |
| id: model.id, | |
| likes: model.likes, | |
| images: model.images.filter(image => image && image.endsWith('.jpg')) | |
| })) | |
| this.models = this.models.concat(models) | |
| }) | |
| } | |
| }, | |
| })) | |
| Alpine.start() | |
| </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="modelsData"> | |
| <div class="col-span-2 md:col-span-3 lg:col-span-4 flex items-center gap-2"> | |
| <h1 class="mr-auto text-lg font-semibold">Diffusers Models Gallery</h1> | |
| <button class="bg-black shadow-lg px-4 py-1 rounded-full text-white">All</button> | |
| <button class="text-gray-600 px-4 py-1 rounded-full hover:bg-gray-200 hover:text-gray-800">Anime</button> | |
| <button class="text-gray-600 px-4 py-1 rounded-full hover:bg-gray-200 hover:text-gray-800">3D</button> | |
| <button class="text-gray-600 px-4 py-1 rounded-full hover:bg-gray-200 hover:text-gray-800">Realistic</button> | |
| </div> | |
| <template x-for="model in models" :key="model.id"> | |
| <template x-if="model.images.length > 0"> | |
| <a :href="`https://huggingface.co/${model.id}`" | |
| class="block bg-gray-900 rounded-xl overflow-hidden relative group aspect-square text-white" 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"> | |
| <template x-if="model.images[0]"> | |
| <img :src="()=> ASSETS_URL + model.images[model.images.length * Math.random() | 0]" :alt="model.id" alt="" | |
| loading="lazy" class="w-full h-full object-cover group-hover:scale-[1.01] transition" /> | |
| </template> | |
| </div> | |
| </a> | |
| </template> | |
| </template> | |
| <div class="h-12" x-intersect="nextPage"></div> | |
| </section> | |
| </body> | |
| </html> |