store generation + add loading

src/lib/components/generate/Response.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
-	import Button from "../Button.svelte";
+  import { get } from "svelte/store";
+  import { generationStore } from "$lib/stores/use-generation";
 
-  export let response: string | ArrayBuffer | null = '';
-  export let form: { model: any, inputs: string };
+	import Button from "$lib/components/Button.svelte";
+  import Loading from "$lib/components/Loading.svelte";
+
+  let generation = get(generationStore);
+  export let loading_generation: boolean = false;
 
   let loading: boolean = false;
   let already_saved: boolean = false;
 
   const saveImage = () => {
 		const link = document.createElement('a');
-		link.href = response as string;
-		link.download = `${form?.inputs?.slice(0, 20)}.png`;
+		link.href = generation?.image as string;
+		link.download = `${generation?.form?.inputs?.slice(0, 20)}.png`;
 		document.body.appendChild(link);
 		link.click();
 		document.body.removeChild(link);
@@ -24,70 +28,113 @@
       headers: {
         "Content-Type": "application/json"
       },
-      body: JSON.stringify({ image: response, generation: form })
+      body: JSON.stringify({ image: generation?.image, generation: generation?.form })
     }).then(() => {
       loading = false;
       already_saved = true;
     })
   }
 
+  generationStore.subscribe((value) => {
+    console.log(value);
+    generation = value;
+  })
+
+  // create a ms countup depending on the generation time, to show the user how long it took to generate the image
+  let ms = 0;
+  let interval: any;
+  const start = () => {
+    interval = setInterval(() => {
+      ms += 100;
+    }, 100)
+  }
+  const stop = () => {
+    clearInterval(interval);
+  }
+
+  $: if (!loading_generation) {
+    ms = 0;
+    stop();
+  } else {
+    start();
+  }
+
+  const format = (ms: number) => {
+    const date = new Date(ms);
+    const seconds = date.getSeconds();
+    const milliseconds = Math.round(date.getMilliseconds() / 100);
+    return `${seconds}.${milliseconds}s`;
+  }
+    
+
 </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={!response}>
-  {#if response}
-    {#if typeof response === "string"}
-      <img src={response} alt="Generation" class="w-full mx-auto object-contain" />
-      <div class="p-8 w-full">
-        <div class="w-full flex items-center justify-end gap-4">
-          <Button size="lg" theme="light" icon="material-symbols:save" iconPosition="right" onClick={saveImage}>Save</Button>
-          <Button
-            size="lg"
-            theme="blue"
-            icon="bxs:share"
-            iconPosition="right"
-            loading={loading}
-            disabled={loading || already_saved}
-            onClick={share}
-          >
-            {#if already_saved}
-              Shared!
-            {:else}
-              Share with community
-            {/if}
-          </Button>
-        </div>
-        <p class="text-neutral-500 text-sm text-right mt-2.5">
-          All images not shared with the community are deleted right after generation.
-          <br>
-          Your informations are not shared with anyone.
-        </p>
-        {#if form}
-          <div class="mt-6 grid grid-cols-1 gap-4">
-            <div>
-              <p class="text-neutral-400 font-semibold text-xs uppercase">
-                Model selected
-              </p>
-              <div 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">
-                <img src={form?.model.image} alt={form?.model.title} class="w-14 h-14 rounded-lg object-cover" />
-                <div>
-                  <p class="text-neutral-200 text-base font-medium">{form?.model.title}</p>
-                  <p class="text-neutral-400 text-sm">{form?.model.id}</p>
+<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={!generation?.image || loading_generation} class:animate-pulse={loading_generation}>
+  {#if loading_generation}
+    <div class="w-full h-full flex items-center justify-center flex-col gap-3 bg-neutral-950 relative">
+      <p class="text-neutral-100 text-xl font-semibold">
+        {format(ms)}
+      </p>
+      <p class="text-xs italic text-neutral-500">
+        Generating image...
+      </p>
+    </div>
+  {:else}
+    {#if generation?.image}
+      {#if typeof generation?.image === "string"}
+        <img src={generation?.image} alt="Generation" class="w-full mx-auto object-contain" />
+        <div class="p-8 w-full">
+          <div class="w-full flex items-center justify-end gap-4">
+            <Button size="lg" theme="light" icon="material-symbols:save" iconPosition="right" onClick={saveImage}>Save</Button>
+            <Button
+              size="lg"
+              theme="blue"
+              icon="bxs:share"
+              iconPosition="right"
+              loading={loading}
+              disabled={loading || already_saved}
+              onClick={share}
+            >
+              {#if already_saved}
+                Shared!
+              {:else}
+                Share with community
+              {/if}
+            </Button>
+          </div>
+          <p class="text-neutral-500 text-sm text-right mt-2.5">
+            All images not shared with the community are deleted right after generation.
+            <br>
+            Your informations are not shared with anyone.
+          </p>
+          {#if generation?.form}
+            <div class="mt-6 grid grid-cols-1 gap-4">
+              <div>
+                <p class="text-neutral-400 font-semibold text-xs uppercase">
+                  Model selected
+                </p>
+                <div 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">
+                  <img src={generation?.form?.model.image} alt={generation?.form?.model.title} class="w-14 h-14 rounded-lg object-cover" />
+                  <div>
+                    <p class="text-neutral-200 text-base font-medium">{generation?.form?.model.title}</p>
+                    <p class="text-neutral-400 text-sm">{generation?.form?.model.id}</p>
+                  </div>
                 </div>
               </div>
+              <div>
+                <p class="text-neutral-400 font-semibold text-xs uppercase">
+                  Prompt
+                </p>
+                <p class="text-neutral-200 text-base font-medium mt-2">"{generation?.form.inputs}"</p>
+              </div>
             </div>
-            <div>
-              <p class="text-neutral-400 font-semibold text-xs uppercase">
-                Prompt
-              </p>
-              <p class="text-neutral-200 text-base font-medium mt-2">"{form.inputs}"</p>
-            </div>
-          </div>
-        {/if}
-      </div>
-    {:else}
-      <div>
-        error displayed.
-      </div>
+          {/if}
+        </div>
+      {:else}
+        <div>
+          Something went wrong
+        </div>
+      {/if}
     {/if}
   {/if}
 </div>

src/lib/components/sidebar/Sidebar.svelte

@@ -69,8 +69,7 @@
       class="text-white text-center text-base pb-8 px-8 flex items-center justify-center gap-2 cursor-pointer"
       on:click={openWindowLogin}  
     >
-      <img src={HFLogo} alt="Hugging Face logo" class="w-8 h-8 inline-block" />
-      <u>Sign in with Hugging Face</u>
+      <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg.svg" alt="Hugging Face Sign In" class="w-auto inline-block" />
     </button>
   {/if}
 </aside>

src/lib/stores/use-generation.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { writable } from "svelte/store";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const generationStore = writable<{
+  form?: Record<string, any>,
+  image?: string | ArrayBuffer | null,
+}>(undefined);

src/routes/generate/+page.svelte

@@ -4,18 +4,21 @@
 </svelte:head>
 
 <script lang="ts">
+	import { get } from "svelte/store";
+
 	import Button from "$lib/components/Button.svelte";
 	import Textarea from "$lib/components/fields/Textarea.svelte";
 	import Banner from "$lib/components/generate/Banner.svelte";
 	import Response from "$lib/components/generate/Response.svelte";
 	import Autocomplete from "$lib/components/models/autocomplete/Autocomplete.svelte";
+	import { generationStore } from "$lib/stores/use-generation";
 
 	export let data
+	let generation = get(generationStore);
 
 	let loading: boolean = false;
-  let response: string | ArrayBuffer | null = '';
 
-	let form = {
+	let form = generation?.form ?? {
 		model: data?.model ?? null,
 		inputs: "",
 		parameters: {
@@ -41,15 +44,13 @@
       reader.readAsDataURL(blob)
       reader.onloadend = () => {
         const base64data = reader.result
-        response = base64data
+				generationStore.set({
+					image: base64data,
+					form: form
+				})
       }
     }
 
-    const res = await request.clone().json().catch(() => ({}))
-    if (res) {
-      response = res
-    }
-
     loading = false
 	}
 </script>
@@ -100,5 +101,5 @@
 			</div>
 		</div>
 	</div>
-	<Response response={response} form={form} />
+	<Response loading_generation={loading} />
 </main>