some ui improvement

src/lib/components/Button.svelte

@@ -26,7 +26,7 @@
 </script>
 
 <button
-  class="button {theme} {size} relative whitespace-nowrap {disabled ? 'disabled' : ''}"
+  class="button {theme} {size} relative whitespace-nowrap {disabled ? 'disabled' : ''} focus:ring-[4px] focus:ring-white focus:ring-opacity-20 focus:brightness-125"
   class:!bg-neutral-400={loading}
   class:!border-neutral-400={loading}
   class:!grayscale={disabled}

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

@@ -83,7 +83,9 @@
             <div class="w-full col-span-2">
               <Reactions reactions={gallery?.reactions} gallery_id={gallery.id} />
             </div>
-            <img src="/api/images/{gallery?.image}" class="max-w-[450px] w-full h-[450px] bg-neutral-800 object-cover rounded-xl col-span-2" alt={gallery?.prompt} />
+            <a href="/api/images/{gallery?.image}" target="_blank" class="w-full max-w-[450px] col-span-2">
+              <img src="/api/images/{gallery?.image}" class="w-full h-[450px] bg-neutral-800 object-cover rounded-xl" alt={gallery?.prompt} />
+            </a>
             <div class="col-span-2">
               <button
                 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"

src/lib/components/generate/Response.svelte

@@ -2,6 +2,8 @@
   import { generationStore } from "$lib/stores/use-generation";
 	import Button from "$lib/components/Button.svelte";
 	import { userStore } from "$lib/stores/use-user";
+	import Icon from "@iconify/svelte";
+	import { goto } from "$app/navigation";
 
   export let loading_generation: boolean = false;
 
@@ -60,6 +62,11 @@
     const milliseconds = Math.round(date.getMilliseconds() / 100);
     return `${seconds}.${milliseconds}s`;
   }
+
+  const handleClickModel = (id?: string) => {
+    if (!id) return;
+    goto(`/models/${id}`);
+  };
 </script>
 
 <div class=" w-full border-t xl:border-t-0 xl:border-l border-neutral-800 h-full col-span-5 xl:col-span-2" class:!border-black={!$generationStore?.image || loading_generation}>
@@ -100,16 +107,22 @@
           {#if $generationStore?.form}
             <div class="mt-6 grid grid-cols-1 gap-4">
               <div>
-                <p class="text-neutral-400 font-semibold text-xs uppercase">
+                <p class="text-neutral-400 font-semibold text-xs uppercase mb-3">
                   Model selected
                 </p>
-                <div class="flex items-center justify-start gap-4 px-2 py-2.5 rounded-lg cursor-pointer w-full text-left">
-                  <img src={$generationStore?.form?.model.image} alt={$generationStore?.form?.model.title} class="w-14 h-14 rounded-lg object-cover" />
-                  <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>
-                  </div>
+                <button
+                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" />
+                <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>
+                </div>
+                <div class="rounded-full absolute top-1/2 -translate-y-1/2 text-neutral-100 w-8 h-8 right-4 bg-pink-500 flex items-center justify-center transition-all duration-200 group-hover:opacity-100 opacity-0">
+                  <Icon icon="tabler:arrow-up" class="w-5 h-5 transform rotate-45 font-bold" />
                 </div>
+              </button>
               </div>
               <div>
                 <p class="text-neutral-400 font-semibold text-xs uppercase">

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

@@ -109,9 +109,9 @@
               </p>
               <div id="gallery_examples" class="w-full h-[300px] mt-2 flex flex-nowrap overflow-auto gap-5 relative">
                 {#each model?.gallery as example}
-                  <div class="w-[300px] min-w-[300px] h-full relative">
+                  <a href="/api/images/{example.image}" class="w-[300px] min-w-[300px] h-full relative" target="_blank">
                     <img src="/api/images/{example.image}"  class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt={example.prompt} />
-                  </div>
+                  </a>
                 {/each}
               </div>
               <div class="w-[100px] h-full absolute right-0 top-0 bg-gradient-to-r from-transparent to-neutral-950 flex items-center justify-end pr-4">
@@ -133,6 +133,10 @@
           {/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-4 py-3">
+                <p class="text-neutral-400 uppercase text-[10px]">Instance Prompt</p>
+                <p class="text-neutral-100 font-medium text-base mt-0.5">{model?.instance_prompt ?? 'N/A'}</p>
+              </div>
               <div class="border-b border-neutral-800/80 px-4 py-3">
                 <p class="text-neutral-400 uppercase text-[10px]">license</p>
                 <p class="text-neutral-100 font-medium text-base mt-0.5">{model?.infos?.license ?? 'N/A'}</p>

src/lib/components/sidebar/Sidebar.svelte

@@ -81,13 +81,15 @@
       <div class="flex items-center justify-start gap-4">
         <img src={$userStore?.picture?.startsWith('http') ? $userStore?.picture : `https://huggingface.co${$userStore?.picture}`} alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white inline-block" />
         <div class="w-full text-left">
-          <p class="text-lg font-semibold">
+          <p class="text-lg font-semibold truncate">
             {$userStore.name}
-            {#if $userStore?.is_admin}
-              <span class="text-yellow-400 bg-yellow-500 bg-opacity-20 rounded-lg px-2 py-1 text-xs font-semibold ml-1">HF Staff</span>
+            </p>
+            <div class="flex items-center justify-start gap-1">
+              <p class="text-sm leading-none text-neutral-400">{$userStore.preferred_username}</p>
+              {#if $userStore?.is_admin}
+              <span class="text-yellow-400 bg-yellow-500 bg-opacity-20 rounded-lg px-2 py-0 text-[10px] font-medium inline-block whitespace-nowrap">HF Staff</span>
             {/if}
-          </p>
-          <p class="text-sm leading-none text-neutral-400">{$userStore.preferred_username}</p>
+            </div>
         </div>
       </div>
       <button on:click={logout}>

src/lib/components/spaceheader/SpaceMiniHeader.svelte

@@ -15,13 +15,13 @@
 
 </script>
 {#if space.id && isVisible}
-  <div class="from-gray-50 to-white text-md shadow-alternate fixed right-6 top-5 z-20 flex h-[40px] items-stretch gap-3 overflow-hidden rounded-xl border border-gray-200 bg-gradient-to-t px-4 py-2 text-gray-500 dark:border-gray-800 max-sm:hidden font-other">
+  <div class="from-gray-50 to-white text-md shadow-alternate fixed right-6 top-5 z-20 flex h-[40px] items-stretch gap-3 overflow-hidden rounded-xl bg-gradient-to-t px-4 py-2 text-gray-500 max-sm:hidden font-other">
     <div class="flex items-center justify-start gap-2">
       <img src={`https://huggingface.co/api/users/${space.author}/avatar`} class="w-3.5 h-3.5 rounded-full flex-none" alt={space.author} />
       <div class="flex items-center justify-center gap-1">
-        <a href="https://huggingface.co/{space.author}" class="text-gray-500 hover:text-blue-600" target="_blank">{space.author}</a>
-        <span class="text-gray-300 text-lg">/</span>
-        <a href="https://huggingface.co/spaces/{space.id}" target="_blank" class="font-mono font-semibold text-gray-800 hover:text-blue-600 font-namespace">{space.id?.split('/').pop()}</a>
+        <a href="https://huggingface.co/{space.author}" class="text-gray-500 hover:text-blue-600 font-other text-base" target="_blank">{space.author}</a>
+        <span class="text-gray-300 text-lg font-other">/</span>
+        <a href="https://huggingface.co/spaces/{space.id}" target="_blank" class="font-mono font-bold text-gray-800 hover:text-blue-600 font-namespace">{space.id?.split('/').pop()}</a>
       </div>
     </div>
     <div class="inline-flex items-center overflow-hidden whitespace-nowrap rounded-md border bg-white text-sm leading-none text-gray-500  flex-none self-center "><button class="relative flex items-center overflow-hidden from-red-50 to-transparent dark:from-red-900 p-1 focus:outline-none" title="Unlike"><svg class="" 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.45,6a5.47,5.47,0,0,1,3.91,1.64,5.7,5.7,0,0,1,0,8L16,26.13,5.64,15.64a5.7,5.7,0,0,1,0-8,5.48,5.48,0,0,1,7.82,0L16,10.24l2.53-2.58A5.44,5.44,0,0,1,22.45,6m0-2a7.47,7.47,0,0,0-5.34,2.24L16,7.36,14.89,6.24a7.49,7.49,0,0,0-10.68,0,7.72,7.72,0,0,0,0,10.82L16,29,27.79,17.06a7.72,7.72,0,0,0,0-10.82A7.49,7.49,0,0,0,22.45,4Z"></path></svg> <svg class="absolute text-red-500 origin-center transform transition-transform ease-in
@@ -35,6 +35,6 @@
     font-family: "IBM Plex Mono", sans-serif;
   }
   .font-other {
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: "Prout", sans-serif !important;
   }
 </style>

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

@@ -81,6 +81,9 @@ export async function PATCH({ request } : RequestEvent) {
     const hugging_face_request = await fetch(`https://huggingface.co/api/models?id=${model.id}&sort=likes7d`)
     const hugging_face_model = await hugging_face_request.json()?.catch(() => {})
 
+    const hugging_face_request2 = await fetch(`https://huggingface.co/api/models/${model.id}`)
+    const hugging_face_model2 = await hugging_face_request2.json()?.catch(() => {})
+
     if (!hugging_face_model?.[0]) {
       continue;
     }
@@ -93,6 +96,7 @@ export async function PATCH({ request } : RequestEvent) {
         downloads: hugging_face_model?.[0]?.downloads,
         likes7d: hugging_face_model?.[0]?.trendingScore,
         id: hugging_face_model?.[0]?.id,
+        instance_prompt: hugging_face_model2?.cardData?.instance_prompt,
       }
     })
     .then(() => {

src/routes/generate/+page.svelte

@@ -21,7 +21,7 @@
 
 	let form = ((data?.model?.id && generation?.form?.model?.id && data?.model?.id !== generation?.form?.model?.id) || !generation?.form) ? {
 		model: data?.model ?? null,
-		inputs: "",
+		inputs: `${data?.model?.instance_prompt ?? ""}`,
 		parameters: {
 			negative_prompt: ""
 		}