src/lib/components/generate/Response.svelte

<script lang="ts">
  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";
  import Image from "../models/image/Image.svelte";

  export let loading_generation: boolean = false;

  let loading: boolean = false;

  const saveImage = () => {
		const link = document.createElement('a');
		link.href = $generationStore?.image as string;
		link.download = `${$generationStore?.form?.inputs?.slice(0, 20)}.png`;
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	}

  const share = () => {
    if (loading) return;
    loading = true;
    fetch(`/api/community/${$generationStore?.gallery?.id}/publish`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
    }).then(() => {
      loading = false;
      generationStore.update((value) => {
        return {
          ...value,
          already_saved: true
        }
      })
    })
  }

  // 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`;
  }

  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}>
  {#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 $generationStore?.image}
      {#if typeof $generationStore?.image === "string"}
        <img src={$generationStore?.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}>Download</Button>
            {#if $userStore?.sub}
              <Button
                size="lg"
                theme="blue"
                icon="bxs:share"
                iconPosition="right"
                loading={loading}
                onClick={share}
                disabled={loading || $generationStore?.already_saved}
              >
                {#if $generationStore?.already_saved}
                  Shared!
                {:else}
                  Share with community
                {/if}
              </Button>
            {/if}
          </div>
          {#if $generationStore?.form}
            <div class="mt-6 grid grid-cols-1 gap-4">
              <div>
                <p class="text-neutral-400 font-semibold text-xs uppercase mb-3">
                  Model selected
                </p>
                <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" /> -->
                <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>
                </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">
                  Prompt
                </p>
                <p class="text-neutral-200 text-base font-medium mt-2">"{$generationStore?.form.inputs}"</p>
              </div>
            </div>
          {/if}
        </div>
      {:else}
        <div>
          Something went wrong
        </div>
      {/if}
    {/if}
  {/if}
</div>