Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,115 Bytes
eb29a95 c16a39b eb29a95 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<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-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>
</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>
|