use last generated image as a thumbnail

package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@aws-sdk/client-s3": "^3.490.0",
 				"@huggingface/hub": "^0.12.3",
+				"@huggingface/space-header": "^1.0.1",
 				"@iconify/svelte": "^3.1.4",
 				"@prisma/client": "^5.7.1",
 				"@svelte-put/clickoutside": "^3.0.1",
@@ -1379,6 +1380,11 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/@huggingface/space-header": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@huggingface/space-header/-/space-header-1.0.1.tgz",
+			"integrity": "sha512-sSHZgWoeCKydlWm/qqIzDwqSHUzr9MqFkS58LZPSnSZNMvhRgU8qQCn9TXHAicFuYyW9W3JkCkc2RpnkfAycyw=="
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.13",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",

package.json

@@ -43,6 +43,7 @@
 	"dependencies": {
 		"@aws-sdk/client-s3": "^3.490.0",
 		"@huggingface/hub": "^0.12.3",
+		"@huggingface/space-header": "^1.0.1",
 		"@iconify/svelte": "^3.1.4",
 		"@prisma/client": "^5.7.1",
 		"@svelte-put/clickoutside": "^3.0.1",

src/lib/components/community/drawer/Drawer.svelte

@@ -9,6 +9,7 @@
   import UserIsLogged from '$lib/components/UserIsLogged.svelte';
   import Comments from '$lib/components/community/drawer/Comments.svelte';
   import Reactions from '$lib/components/community/reactions/Reactions.svelte';
+  import Image from '$lib/components/models/image/Image.svelte';
   
   export let form: Record<string, string> | undefined = undefined;
   let { open, gallery, next, previous } = get(galleryStore);
@@ -91,7 +92,7 @@
                 class="flex items-center justify-start gap-4 cursor-pointer w-full text-left transition-all duration-200 hover:bg-neutral-900 p-3 group relative rounded-lg"
                 on:click={() => handleClickModel(gallery?.model?.id)}
               >
-                <img src={gallery?.model?.image} alt={gallery?.model?.id} class="w-14 h-14 rounded-lg object-cover" />
+                <Image src={gallery?.model?.image} generatedImage={gallery?.model?.gallery?.[0]?.image} className="w-14 h-14 rounded-lg object-cover" alt={gallery?.model?.id} />
                 <div>
                   <p class="text-neutral-200 text-base font-medium">{gallery?.model?.id}</p>
                   <p class="text-neutral-400 text-sm">{gallery?.model?.id}</p>

src/lib/components/generate/Response.svelte

@@ -4,6 +4,7 @@
 	import { userStore } from "$lib/stores/use-user";
 	import Icon from "@iconify/svelte";
 	import { goto } from "$app/navigation";
+  import Image from "../models/image/Image.svelte";
 
   export let loading_generation: boolean = false;
 
@@ -114,7 +115,8 @@
                 class="flex items-center justify-start gap-4 cursor-pointer w-full text-left transition-all duration-200 hover:bg-neutral-900 p-3 group relative rounded-lg"
                 on:click={() => handleClickModel($generationStore?.form?.model.id)}
               >
-                <img src={$generationStore?.form?.model.image} alt={$generationStore?.form?.model.title} class="w-14 h-14 rounded-lg object-cover" />
+                <!-- <img src={$generationStore?.form?.model.image} alt={$generationStore?.form?.model.title} class="w-14 h-14 rounded-lg object-cover" /> -->
+                <Image src={$generationStore?.form?.model?.image} generatedImage={$generationStore?.form?.model?.gallery?.[0]?.image} className="w-14 h-14 rounded-lg object-cover" alt={$generationStore?.form?.model?.id} />
                 <div>
                   <p class="text-neutral-200 text-base font-medium">{$generationStore?.form?.model.id}</p>
                   <p class="text-neutral-400 text-sm">{$generationStore?.form?.model.id}</p>

src/lib/components/models/Card.svelte

@@ -6,6 +6,7 @@
 	import Button from "$lib/components/Button.svelte";
 	import { success } from "$lib/utils/toaster";
 	import { userStore } from "$lib/stores/use-user";
+	import Image from "./image/Image.svelte";
 
   export let card: ModelCard;
 
@@ -35,6 +36,7 @@
       success("Model unpublished successfully!");
     }
   };
+  console.log(card)
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -44,7 +46,7 @@
   on:click={handleClick}
 >
   <div class="w-full h-[350px] relative z-[1] mb-3 overflow-hidden">
-    <img src="{card.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt="{card?.id}" />
+    <Image src={card.image} generatedImage={card?.gallery?.[0]?.image} className="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt={card?.id} />
     {#if $userStore?.is_admin}
       <div
         class="absolute flex items-center justify-between bottom-0 left-0 w-full p-5 bg-gradient-to-t from-black to-transparent"

src/lib/components/models/autocomplete/Autocomplete.svelte

@@ -3,6 +3,7 @@
 	import type { ModelCard } from "$lib/type";
 	import Icon from "@iconify/svelte";
 	import Item from "./Item.svelte";
+  import Image from '../image/Image.svelte';
 
   export let defaultModels: ModelCard[] = [];
   export let onChange: (model: ModelCard | null) => void;
@@ -51,7 +52,7 @@
   {#if value}
     <div class="flex items-center justify-between gap-4">
       <div class="flex items-center justify-start gap-3">
-        <img src={value.image} alt={value.id} class="w-6 h-6 rounded-lg object-cover" />
+        <Image src={value?.image} generatedImage={value?.gallery?.[0]?.image} className="w-6 h-6 rounded-lg object-cover" alt={value?.id} />
         <p class="text-neutral-200 text-base font-medium">{value.id}</p>
       </div>
       <button on:click={() => onChange(null)}>

src/lib/components/models/autocomplete/Item.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { ModelCard } from "$lib/type";
-	
+	import Image from "../image/Image.svelte";
+
   export let model: ModelCard;
   export let onClick: () => void;
 
@@ -10,7 +11,7 @@
   class="flex items-center justify-start gap-4 px-2 py-2.5 hover:bg-neutral-800/60 transition-all duration-200 rounded-lg cursor-pointer w-full text-left"
   on:click={onClick}
 >
-  <img src={model.image} alt={model.id} class="w-14 h-14 rounded-lg object-cover" />
+  <Image src={model?.image} generatedImage={model?.gallery?.[0]?.image} className="w-14 h-14 rounded-lg object-cover" alt={model?.id} />
   <div>
     <p class="text-neutral-200 text-base font-medium">{model.id}</p>
     <p class="text-neutral-400 text-sm">{model.id}</p>

src/lib/components/models/drawer/Drawer.svelte

@@ -8,6 +8,7 @@
   import { modelStore } from "$lib/stores/use-model";
   import UserIsLogged from '$lib/components/UserIsLogged.svelte';
   import Comments from '$lib/components/models/drawer/comments/Comments.svelte';
+  import Image from '../image/Image.svelte';
 
   let { open, model } = get(modelStore);
   export let onSearch: (search: string) => void;
@@ -65,7 +66,7 @@
       <div class="p-8 overflow-auto">
         <header class="flex w-full justify-between items-start mb-6 pr-6 gap-3">
           <div class="flex items-center justify-start gap-3 lg:gap-6 w-full">
-            <img src={model?.image} class="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-neutral-800 object-cover" alt={model?.id} />
+            <Image src={model?.image} generatedImage={model?.gallery?.[0]?.image} className="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-neutral-800 object-cover" alt={model?.id} />
             <div class="w-full truncate">
               <p class="text-neutral-300 font-semibold text-lg lg:text-2xl mb-1 truncate w-full">
                 <button class="underline text-white" on:click={handleClickAuthor}>{author}</button>/{repo}

src/lib/components/models/image/Image.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+
+  export let src: string | undefined;
+  export let className: string;
+  export let generatedImage: string | undefined;
+  export let alt: string | undefined;
+
+  let loaded = 0;
+</script>
+
+<!-- svelte-ignore a11y-img-redundant-alt -->
+ {#if loaded === 2}
+  <div class="{className} flex items-center flex-col justify-center text-white/50 text-xs">
+    <Icon icon="mingcute:sad-fill" class="text-lg" />
+    Not found
+  </div>
+  {:else}
+    <img
+      src={
+        loaded === 0 ? src : `/api/images/${generatedImage}`
+      }
+      alt={alt}
+      class="{className}"
+      on:error={() => {
+        loaded += 1;
+      }}
+    />
+{/if}

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import { get } from "svelte/store";
 	import Icon from "@iconify/svelte";
 	import { SvelteToast } from '@zerodevx/svelte-toast'
+	// import spaceHeader from "@huggingface/space-header"
 
 	import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
 	import "$lib/styles/tailwind.css"

src/routes/api/community/[id]/+server.ts

@@ -49,6 +49,18 @@ export async function GET({ params, url } : RequestEvent) {
         select: {
           image: true,
           id: true,
+          gallery: {
+            select: {
+              image: true,
+            },
+            where: {
+              isPublic: true
+            },
+            orderBy: {
+              createdAt: 'desc'
+            },
+            take: 1
+          }
         }
       },
       reactions: {

src/routes/api/models/+server.ts

@@ -58,6 +58,26 @@ export async function GET(request : RequestEvent) {
         { id: { contains: search } },
       ]
     },
+    select: {
+      id: true,
+      likes: true,
+      downloads: true,
+      likes7d: true,
+      image: true,
+      gallery: {
+        select: {
+          id: true,
+          image: true,
+        },
+        where: {
+          isPublic: true
+        },
+        orderBy: {
+          createdAt: 'desc'
+        },
+        take: 1
+      },
+    },
     orderBy: orderBy,
     skip: page * limit,
     take: limit,

src/routes/api/models/[id]/+server.ts

@@ -62,6 +62,18 @@ export async function GET({ url, params } : RequestEvent) {
       image: true,
       id: true,
       metadata: true,
+      gallery: {
+        select: {
+          image: true,
+        },
+        where: {
+          isPublic: true
+        },
+        orderBy: {
+          createdAt: 'desc'
+        },
+        take: 1
+      },
     }
   })
 

src/routes/api/scrap-models/+server.ts

@@ -49,12 +49,11 @@ export async function POST({ request }) {
         const imageRegex = /!\[.*\]\((.*)\)/
         let image = readme.match(imageRegex)?.[1]
     
-        if (!image) {
-          continue
+        if (image) {
+          image = image.replace(///g, "/")
+          if (image.startsWith("http")) model.image = image
+          else model.image = `https://huggingface.co/${model.id}/resolve/main/${image.replace("./", "")}`
         }
-        image = image.replace(///g, "/")
-        if (image.startsWith("http")) model.image = image
-        else model.image = `https://huggingface.co/${model.id}/resolve/main/${image.replace("./", "")}`
       }
     }