File size: 1,581 Bytes
1123781 3207814 d1f4c77 0835cd8 d1f4c77 0835cd8 ff9325e 3207814 0835cd8 d1f4c77 0835cd8 1123781 d1f4c77 0835cd8 d1f4c77 1123781 |
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 |
<script lang="ts">
import { lcmLiveStatus, LCMLiveStatus, streamId } from '$lib/lcmLive';
import { getPipelineValues } from '$lib/store';
import Button from '$lib/components/Button.svelte';
import Floppy from '$lib/icons/floppy.svelte';
import { snapImage } from '$lib/utils';
$: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED;
$: console.log('isLCMRunning', isLCMRunning);
let imageEl: HTMLImageElement;
async function takeSnapshot() {
if (isLCMRunning) {
await snapImage(imageEl, {
prompt: getPipelineValues()?.prompt,
negative_prompt: getPipelineValues()?.negative_prompt,
seed: getPipelineValues()?.seed,
guidance_scale: getPipelineValues()?.guidance_scale
});
}
}
</script>
<div
class="relative mx-auto aspect-square max-w-lg self-center overflow-hidden rounded-lg border border-slate-300"
>
<!-- svelte-ignore a11y-missing-attribute -->
{#if isLCMRunning}
<img bind:this={imageEl} class="aspect-square w-full rounded-lg" src={'/stream/' + $streamId} />
<div class="absolute bottom-1 right-1">
<Button
on:click={takeSnapshot}
disabled={!isLCMRunning}
title={'Take Snapshot'}
classList={'text-sm ml-auto text-white p-1 shadow-lg rounded-lg opacity-50'}
>
<Floppy classList={''} />
</Button>
</div>
{:else}
<img
class="aspect-square w-full rounded-lg"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
/>
{/if}
</div>
|