drawer add more informations about model

src/lib/components/models/Card.svelte

@@ -8,12 +8,12 @@
   export let card: ModelCard;
 
   const handleClick = async () => {
-    const request = await fetch(`/api/models/${card?.id?.replace("/", "@")}?full=true`);
-    const { model } = await request.json();
-    modelStore.set({
-      model,
-      open: true
-    });
+    // const request = await fetch(`/api/models/${card?.id?.replace("/", "@")}?full=true`);
+    // const { model } = await request.json();
+    // modelStore.set({
+    //   model,
+    //   open: true
+    // });
     $page.url.searchParams.set('model', card?.id);
     goto(`?${$page.url.searchParams.toString()}`);
   };

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

@@ -9,7 +9,6 @@
   import UserIsLogged from '$lib/components/UserIsLogged.svelte';
   import Comments from '$lib/components/models/drawer/comments/Comments.svelte';
 	import { env } from '$env/dynamic/public';
-	import Button from '$lib/components/Button.svelte';
 
   let { open, model } = get(modelStore);
 
@@ -29,6 +28,8 @@
     $page.url.searchParams.delete('model');
     goto(`?${$page.url.searchParams.toString()}`);
   };
+
+  $: console.log(model);
 </script>
 
 <div
@@ -50,7 +51,7 @@
               <p class="text-white font-semibold text-lg lg:text-2xl mb-1 truncate">
                 {model?.title ?? model?.id}
               </p>
-              <a href="https://huggingface.co/{model?.id}" class="text-neutral-400 underline hover:text-blue-00 flex items-center justify-start gap-1">
+              <a href="https://huggingface.co/{model?.id}" target="_blank" class="text-neutral-400 underline hover:text-blue-00 flex items-center justify-start gap-1">
                 <Icon icon="iconamoon:link-external-fill" class="w-4 h-4" /> 
                 View on HuggingFace
               </a>
@@ -60,24 +61,24 @@
             <Icon icon="carbon:close" class="w-6 h-6 text-white cursor-pointer" />
           </button>
         </header>
-        <main>
-          <div class="justify-start items-center gap-4 flex mb-6">
-            <div class="bg-red-500 bg-opacity-20 border border-red-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm">
-              <Icon icon="solar:heart-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-red-500" />
+        <main class="grid grid-cols-1 gap-6">
+          <div class="justify-start items-center gap-4 flex">
+            <div class="bg-red-500 bg-opacity-20 border border-red-500 md:px-4 md:py-2 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 md:gap-2 font-medium text-sm md:text-base">
+              <Icon icon="solar:heart-bold" class="lg:w-5 lg:h-5 w-4 h-4 text-red-500" />
               {model?.likes ?? 0}
             </div>
             <a
               href="/"
-              class="bg-blue-500 bg-opacity-20 border border-blue-500 hover:bg-opacity-60 transition-all duration-200 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm"
+              class="bg-blue-500 bg-opacity-20 border border-blue-500 hover:bg-opacity-60 transition-all duration-200 md:px-4 md:py-2 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 md:gap-2 font-medium text-sm md:text-base"
             >
-              <Icon icon="solar:download-square-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-blue-500" />
+              <Icon icon="solar:download-square-bold" class="lg:w-5 lg:h-5 w-4 h-4 text-blue-500" />
               View files
             </a>
             <a
               href="/generate?model={model?.id}"
-              class="bg-pink-500 bg-opacity-20 hover:bg-opacity-60 transition-all duration-200 border border-pink-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm"
+              class="bg-pink-500 bg-opacity-20 hover:bg-opacity-60 transition-all duration-200 border border-pink-500 md:px-4 md:py-2 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 md:gap-2 font-medium text-sm md:text-base"
             >
-              <Icon icon="fluent:glance-horizontal-sparkles-16-filled" class="lg:w-4 lg:h-4 w-3 h-3 text-pink-500" />
+              <Icon icon="fluent:glance-horizontal-sparkles-16-filled" class="lg:w-5 lg:h-5 w-4 h-4 text-pink-500" />
               Generate
             </a>
           </div>
@@ -100,11 +101,27 @@
               </a>
             </div>
           {/if}
+          {#if model?.infos}
+            <div class="bg-neutral-900/70 rounded-lg border border-neutral-800/20">
+              <div class="border-b border-neutral-800/80 px-5 py-4">
+                <p class="text-neutral-400 uppercase text-[10px]">license</p>
+                <p class="text-neutral-100 font-medium text-sm mt-0.5">{model?.infos?.license ?? 'N/A'}</p>
+              </div>
+              <div class="border-b border-neutral-800/80 px-5 py-4">
+                <p class="text-neutral-400 uppercase text-[10px]">tags</p>
+                <p class="text-neutral-100 font-medium text-sm mt-0.5">{model?.infos?.tags?.join(', ')}</p>
+              </div>
+              <div class="px-5 py-4">
+                <p class="text-neutral-400 uppercase text-[10px]">base_model</p>
+                <p class="text-neutral-100 font-medium text-sm mt-0.5">{model?.infos?.base_model ?? 'N/A'}</p>
+              </div>
+            </div>
+          {/if}
         </main>
       </div>
       <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30">
         <p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
-          Commentaires ({model?.comments?.length ?? 0})
+          Commentaire{(model?.comments?.length ?? 0) > 1 ? 's' : ''} ({model?.comments?.length ?? 0})
         </p>
         {#if model?.id}
           <UserIsLogged>

src/lib/type.ts

@@ -21,8 +21,13 @@ export interface ModelCard {
   likes: number,
   downloads: number,
   image: string,
-  gallery?: CommunityCard[]
-  comments?: CommentType[]
+  gallery?: CommunityCard[],
+  comments?: CommentType[],
+  infos?: {
+    license?: string,
+    tags?: string[],
+    base_model?: string,
+  },
 }
 
 export interface ReactionType {

src/routes/+page.svelte

@@ -2,7 +2,6 @@
 	import { browser } from "$app/environment";
 	import InfiniteScroll from "svelte-infinite-scroll";
 
-	import { modelStore } from "$lib/stores/use-model.js";
 	import Button from "$lib/components/Button.svelte";
 	import Card from "$lib/components/models/Card.svelte";
 	import Input from "$lib/components/fields/Input.svelte";
@@ -25,13 +24,6 @@
 
 	$: elementScroll = browser ? document?.getElementById('app') : undefined;
 
-	if (data?.model?.id) {
-		modelStore.set({
-			model: data.model,
-			open: true
-		});
-	}
-
 	const handleFetchMore = async () => {
 		form = {...form, page: (Number(form.page) + 1).toString()};
 		refetch(true);

src/routes/+page.ts

@@ -1,7 +1,8 @@
+import { modelStore } from "$lib/stores/use-model";
+
 export async function load({ fetch, url }) {
   const model_param = url.searchParams.get("model")
 
-  let model;
 
   if (model_param) {
     const model_request = await fetch(`/api/models/${model_param?.replace("/", "@")}?full=true`, {
@@ -10,8 +11,11 @@ export async function load({ fetch, url }) {
         "Content-Type": "application/json"
       }
     })
-    const model_response = await model_request?.clone().json().catch(() => null);
-    model = model_response
+    const data = await model_request?.clone().json().catch(() => null);
+    modelStore.set({
+      model: data?.model ?? null,
+      open: true
+    });
   }
 
   const response = await fetch("/api/models?page=0&filter=hotest", {
@@ -24,6 +28,6 @@ export async function load({ fetch, url }) {
   return {
     models: models?.cards ?? [],
     total_items: models?.total_items ?? 0,
-    model: model?.model ?? null
+    // model: model?.model ?? null
   }
 }

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

@@ -1,4 +1,5 @@
 import { json, type RequestEvent } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private'
 import prisma from '$lib/prisma';
 
 /** @type {import('./$types').RequestHandler} */
@@ -58,18 +59,26 @@ export async function GET({ url, params } : RequestEvent) {
     }, { status: 401 })
   }
 
-  // const gallery = await prisma.gallery.findMany({
-  //   where: {
-  //     modelId: model.id
-  //   },
-  //   orderBy: {
-  //     createdAt: "desc"
-  //   },
-  //   take: 5
-  // })
+  let infos: Record<string, string | string[]> = {};
+
+  if (full) {
+    const hf_model_request = await fetch(`https://huggingface.co/api/models/${id}`, {
+      headers: {
+        "Authorization": `Bearer ${env.SECRET_HF_TOKEN}`
+      }
+    })
+    const hf_model_response = await hf_model_request.json();
+    infos = {
+      base_model: hf_model_response?.cardData?.base_model,
+      license: hf_model_response?.cardData?.license,
+      tags: hf_model_response?.cardData?.tags,
+    }
+  }
 
   return json({
-    model,
-    // gallery
+    model: {
+      ...model,
+      infos
+    }
   })
 }