src/lib/components/generate/Response.svelte

<script lang="ts">
  import { get } from "svelte/store";
  import { generationStore } from "$lib/stores/use-generation";

	import Button from "$lib/components/Button.svelte";
	import { userStore } from "$lib/stores/use-user";

  let generation = get(generationStore);
  export let loading_generation: boolean = false;

  let loading: boolean = false;
  let user = get(userStore)

  const saveImage = () => {
		const link = document.createElement('a');
		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);
	}

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

  generationStore.subscribe((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={!generation?.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 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}>Download</Button>
            {#if user?.sub}
              <Button
                size="lg"
                theme="blue"
                icon="bxs:share"
                iconPosition="right"
                loading={loading}
                onClick={share}
                disabled={loading || generation?.already_saved}
              >
                {#if generation?.already_saved}
                  Shared!
                {:else}
                  Share with community
                {/if}
              </Button>
            {/if}
          </div>
          {#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 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>
          {/if}
        </div>
      {:else}
        <div>
          Something went wrong
        </div>
      {/if}
    {/if}
  {/if}
</div>