Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 4,406 Bytes
eb29a95 3b4bd9f eb29a95 3b4bd9f 7398577 3b4bd9f eb29a95 7398577 eb29a95 3b4bd9f eb29a95 7398577 eb29a95 3d344de eb29a95 3b4bd9f eb29a95 7b25d55 3b4bd9f d6da254 7398577 8009faa 3d344de 7398577 3d344de 8009faa 7398577 3b4bd9f f05d33c 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 |
<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>
|