File size: 4,967 Bytes
cb92d2b 43148fd 1123781 43148fd ff9325e 1123781 43148fd 1123781 cb92d2b 1123781 cb92d2b 43148fd 1123781 ff9325e 43148fd 1123781 ff9325e cb92d2b 1123781 cb92d2b 43148fd ff9325e 43148fd ff9325e 43148fd 1123781 43148fd cb92d2b |
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 154 |
<script lang="ts">
import { onMount } from 'svelte';
import { PUBLIC_BASE_URL } from '$env/static/public';
import type { FieldProps, PipelineInfo } 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 { isLCMRunning, lcmLiveState, lcmLiveActions, LCMLiveStatus } from '$lib/lcmLive';
import {
mediaStreamState,
mediaStreamActions,
isMediaStreaming,
onFrameChangeStore
} from '$lib/mediaStream';
let pipelineParams: FieldProps[];
let pipelineInfo: PipelineInfo;
let pipelineValues = {};
onMount(() => {
getSettings();
});
async function getSettings() {
const settings = await fetch(`${PUBLIC_BASE_URL}/settings`).then((r) => r.json());
pipelineParams = Object.values(settings.input_params.properties);
pipelineInfo = settings.info.properties;
pipelineParams = pipelineParams.filter((e) => e?.disabled !== true);
console.log('PARAMS', pipelineParams);
console.log('SETTINGS', pipelineInfo);
}
// $: {
// console.log('isLCMRunning', $isLCMRunning);
// }
// $: {
// console.log('lcmLiveState', $lcmLiveState);
// }
// $: {
// console.log('mediaStreamState', $mediaStreamState);
// }
// $: if ($lcmLiveState.status === LCMLiveStatus.CONNECTED) {
// lcmLiveActions.send(pipelineValues);
// }
onFrameChangeStore.subscribe(async (frame) => {
if ($lcmLiveState.status === LCMLiveStatus.CONNECTED) {
lcmLiveActions.send(pipelineValues);
lcmLiveActions.send(frame.blob);
}
});
let startBt: Button;
let stopBt: Button;
let snapShotBt: Button;
async function toggleLcmLive() {
if (!$isLCMRunning) {
await mediaStreamActions.enumerateDevices();
await mediaStreamActions.start();
lcmLiveActions.start();
} else {
mediaStreamActions.stop();
lcmLiveActions.stop();
}
}
async function startLcmLive() {
try {
$isLCMRunning = true;
// const res = await lcmLive.start();
$isLCMRunning = false;
// if (res.status === "timeout")
// toggleMessage("success")
} catch (err) {
console.log(err);
// toggleMessage("error")
$isLCMRunning = false;
}
}
async function stopLcmLive() {
// await lcmLive.stop();
$isLCMRunning = false;
}
</script>
<div class="fixed right-2 top-2 max-w-xs rounded-lg p-4 text-center text-sm font-bold" id="error" />
<main class="container mx-auto flex max-w-4xl flex-col gap-3 px-4 py-4">
<article class="flex- mx-auto max-w-xl text-center">
<h1 class="text-3xl font-bold">Real-Time Latent Consistency Model</h1>
<p class="text-sm">
This demo showcases
<a
href="https://huggingface.co/SimianLuo/LCM_Dreamshaper_v7"
target="_blank"
class="text-blue-500 underline hover:no-underline">LCM</a
>
Image to Image pipeline using
<a
href="https://github.com/huggingface/diffusers/tree/main/examples/community#latent-consistency-pipeline"
target="_blank"
class="text-blue-500 underline hover:no-underline">Diffusers</a
> with a MJPEG stream server.
</p>
<p class="text-sm">
There are <span id="queue_size" class="font-bold">0</span> user(s) sharing the same GPU,
affecting real-time performance. Maximum queue size is 4.
<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>
</article>
{#if pipelineParams}
<header>
<h2 class="font-medium">Prompt</h2>
<p class="text-sm text-gray-500">
Change the prompt to generate different images, accepts <a
href="https://github.com/damian0815/compel/blob/main/doc/syntax.md"
target="_blank"
class="text-blue-500 underline hover:no-underline">Compel</a
> syntax.
</p>
</header>
<PipelineOptions {pipelineParams} bind:pipelineValues></PipelineOptions>
<div class="flex gap-3">
<Button on:click={toggleLcmLive}>
{#if $isLCMRunning}
Stop
{:else}
Start
{/if}
</Button>
<Button disabled={$isLCMRunning} classList={'ml-auto'}>Snapshot</Button>
</div>
<ImagePlayer>
<VideoInput></VideoInput>
</ImagePlayer>
{: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>
|