Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 4,697 Bytes
eb29a95 3b4bd9f 8009faa eb29a95 3b4bd9f eb29a95 3b4bd9f eb29a95 3b4bd9f eb29a95 3b4bd9f eb29a95 7b25d55 3b4bd9f d6da254 8009faa d6da254 8009faa d6da254 3b4bd9f eb29a95 3b4bd9f eb29a95 3b4bd9f 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 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<script lang="ts">
import { get } from "svelte/store";
import { generationStore } from "$lib/stores/use-generation";
import UserIsLogged from '$lib/components/UserIsLogged.svelte';
import Button from "$lib/components/Button.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 = 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/generate/share`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ image: generation?.image, generation: generation?.form })
}).then(() => {
loading = false;
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>
<!-- <UserIsLogged> -->
<Button
size="lg"
theme="blue"
icon="bxs:share"
iconPosition="right"
loading={loading}
onClick={share}
>
<!-- disabled={loading || already_saved} -->
{#if already_saved}
Shared!
{:else}
Share with community
{/if}
</Button>
<!-- </UserIsLogged> -->
</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>
{/if}
</div>
{:else}
<div>
Something went wrong
</div>
{/if}
{/if}
{/if}
</div>
|