clean up

index.html

@@ -15,21 +15,33 @@
     Alpine.data('modelsData', () => ({
       async init() {
         const data = await this.getModels(this.page)
-        this.models = data.models
+        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(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${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) => {
-            this.models = this.models.concat(data.models)
+            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)
           })
         }
       },
@@ -48,7 +60,7 @@
       <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">
+      <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
@@ -68,8 +80,10 @@
             </div>
           </div>
           <div class="group-hover:brightness-90 h-full">
-            <img :src="()=> model.images[0]" alt="" loading="lazy"
-              class="w-full h-full object-cover group-hover:scale-[1.01] transition" />
+            <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>