Spaces:
Sleeping
Sleeping
File size: 4,931 Bytes
51669fc |
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 141 142 143 144 145 146 147 148 149 150 151 152 153 |
<script lang="ts">
import { onMount } from 'svelte';
import type { Fields, PipelineInfo } from '$lib/types';
import { PipelineMode } from '$lib/types';
import ImagePlayer from '$lib/components/ImagePlayer.svelte';
import VideoInput from '$lib/components/VideoInput.svelte';
import Button from '$lib/components/Button.svelte';
import PipelineOptions from '$lib/components/PipelineOptions.svelte';
import Spinner from '$lib/icons/spinner.svelte';
import Warning from '$lib/components/Warning.svelte';
import { lcmLiveStatus, lcmLiveActions, LCMLiveStatus } from '$lib/lcmLive';
import { mediaStreamActions, onFrameChangeStore } from '$lib/mediaStream';
import { getPipelineValues, deboucedPipelineValues } from '$lib/store';
let pipelineParams: Fields;
let pipelineInfo: PipelineInfo;
let pageContent: string;
let isImageMode: boolean = false;
let maxQueueSize: number = 0;
let currentQueueSize: number = 0;
let queueCheckerRunning: boolean = false;
let warningMessage: string = '';
onMount(() => {
getSettings();
});
async function getSettings() {
const settings = await fetch('/api/settings').then((r) => r.json());
pipelineParams = settings.input_params.properties;
pipelineInfo = settings.info.properties;
isImageMode = pipelineInfo.input_mode.default === PipelineMode.IMAGE;
maxQueueSize = settings.max_queue_size;
pageContent = settings.page_content;
console.log(pipelineParams);
toggleQueueChecker(true);
}
function toggleQueueChecker(start: boolean) {
queueCheckerRunning = start && maxQueueSize > 0;
if (start) {
getQueueSize();
}
}
async function getQueueSize() {
if (!queueCheckerRunning) {
return;
}
const data = await fetch('/api/queue').then((r) => r.json());
currentQueueSize = data.queue_size;
setTimeout(getQueueSize, 10000);
}
function getSreamdata() {
if (isImageMode) {
return [getPipelineValues(), $onFrameChangeStore?.blob];
} else {
return [$deboucedPipelineValues];
}
}
$: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED;
$: if ($lcmLiveStatus === LCMLiveStatus.TIMEOUT) {
warningMessage = 'Session timed out. Please try again.';
}
let disabled = false;
async function toggleLcmLive() {
try {
if (!isLCMRunning) {
if (isImageMode) {
await mediaStreamActions.enumerateDevices();
await mediaStreamActions.start();
}
disabled = true;
await lcmLiveActions.start(getSreamdata);
disabled = false;
toggleQueueChecker(false);
} else {
if (isImageMode) {
mediaStreamActions.stop();
}
lcmLiveActions.stop();
toggleQueueChecker(true);
}
} catch (e) {
warningMessage = e instanceof Error ? e.message : '';
disabled = false;
toggleQueueChecker(true);
}
}
</script>
<svelte:head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.contentWindow.min.js"
></script>
</svelte:head>
<main class="container mx-auto flex max-w-5xl flex-col gap-3 px-4 py-4">
<Warning bind:message={warningMessage}></Warning>
<article class="text-center">
{#if pageContent}
{@html pageContent}
{/if}
{#if maxQueueSize > 0}
<p class="text-sm">
There are <span id="queue_size" class="font-bold">{currentQueueSize}</span>
user(s) sharing the same GPU, affecting real-time performance. Maximum queue size is {maxQueueSize}.
<a
href="https://huggingface.co/spaces/radames/Real-Time-Latent-Consistency-Model?duplicate=true"
target="_blank"
class="text-blue-500 underline hover:no-underline">Duplicate</a
> and run it on your own GPU.
</p>
{/if}
</article>
{#if pipelineParams}
<article class="my-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
{#if isImageMode}
<div class="sm:col-start-1">
<VideoInput
width={Number(pipelineParams.width.default)}
height={Number(pipelineParams.height.default)}
></VideoInput>
</div>
{/if}
<div class={isImageMode ? 'sm:col-start-2' : 'col-span-2'}>
<ImagePlayer />
</div>
<div class="sm:col-span-2">
<Button on:click={toggleLcmLive} {disabled} classList={'text-lg my-1 p-2'}>
{#if isLCMRunning}
Stop
{:else}
Start
{/if}
</Button>
<PipelineOptions {pipelineParams}></PipelineOptions>
</div>
</article>
{:else}
<!-- loading -->
<div class="flex items-center justify-center gap-3 py-48 text-2xl">
<Spinner classList={'animate-spin opacity-50'}></Spinner>
<p>Loading...</p>
</div>
{/if}
</main>
<style lang="postcss">
:global(html) {
@apply text-black dark:bg-gray-900 dark:text-white;
}
</style>
|