src/lib/components/generate/Response.svelte

<script lang="ts">
	import Button from "../Button.svelte";

  export let response: string | ArrayBuffer | null = '';
  export let form: { model: any, inputs: string };

  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`;
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	}

  const share = () => {
    if (loading) return;
    loading = true;
    fetch(`/api/generate/share`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ image: response, generation: form })
    }).then(() => {
      loading = false;
      already_saved = true;
    })
  }

</script>

<div class="w-full border-l border-neutral-800 h-full 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>
              </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}
  {/if}
</div>