File size: 4,322 Bytes
9626490 39963d4 2ef123a 17b75b3 3208a90 2ef123a c215deb 2ef123a 4040b5d 2ef123a 4040b5d 2ef123a 4040b5d 2ef123a 4040b5d 2ef123a c215deb 2ef123a 17b6909 2ef123a 17b6909 2ef123a 4040b5d 2ef123a 3208a90 2ef123a 4040b5d 2ef123a a51f23c 2ef123a |
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!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 src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></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> |