Spaces:
Running
on
A100
Running
on
A100
File size: 2,344 Bytes
1123781 3207814 d1f4c77 0835cd8 d1f4c77 cb60b56 ff9325e 3207814 0835cd8 cb60b56 0835cd8 d1f4c77 0835cd8 cb60b56 1123781 d1f4c77 cb60b56 d1f4c77 cb60b56 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 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 |
<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 Expand from '$lib/icons/expand.svelte';
import { snapImage, expandWindow } from '$lib/utils';
$: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED;
$: console.log('isLCMRunning', isLCMRunning);
let imageEl: HTMLImageElement;
let expandedWindow: Window;
let isExpanded = false;
async function takeSnapshot() {
if (isLCMRunning) {
await snapImage(imageEl, {
prompt: getPipelineValues()?.prompt,
negative_prompt: getPipelineValues()?.negative_prompt,
seed: getPipelineValues()?.seed,
guidance_scale: getPipelineValues()?.guidance_scale
});
}
}
async function toggleFullscreen() {
if (isLCMRunning && !isExpanded) {
expandedWindow = expandWindow('/api/stream/' + $streamId);
expandedWindow.addEventListener('beforeunload', () => {
isExpanded = false;
});
isExpanded = true;
} else {
expandedWindow?.close();
isExpanded = false;
}
}
</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}
{#if !isExpanded}
<img
bind:this={imageEl}
class="aspect-square w-full rounded-lg"
src={'/api/stream/' + $streamId}
/>
{/if}
<div class="absolute bottom-1 right-1">
<Button
on:click={toggleFullscreen}
title={'Expand Fullscreen'}
classList={'text-sm ml-auto text-white p-1 shadow-lg rounded-lg opacity-50'}
>
<Expand classList={''} />
</Button>
<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>
|