radames commited on
Commit
0835cd8
1 Parent(s): 918ded4

add snapshot button

Browse files
frontend/src/lib/components/ImagePlayer.svelte CHANGED
@@ -1,23 +1,36 @@
1
  <script lang="ts">
2
  import { lcmLiveStatus, LCMLiveStatus, streamId } from '$lib/lcmLive';
3
- import { onFrameChangeStore } from '$lib/mediaStream';
4
- import { PUBLIC_BASE_URL } from '$env/static/public';
5
 
6
  $: {
7
  console.log('streamId', $streamId);
8
  }
9
  $: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED;
10
  $: console.log('isLCMRunning', isLCMRunning);
 
 
 
 
 
 
11
  </script>
12
 
13
- <div class="relative overflow-hidden rounded-lg border border-slate-300">
14
- <!-- svelte-ignore a11y-missing-attribute -->
15
- {#if isLCMRunning}
16
- <img class="aspect-square w-full rounded-lg" src={PUBLIC_BASE_URL + '/stream/' + $streamId} />
17
- {:else}
18
- <div class="aspect-square w-full rounded-lg" />
19
- {/if}
20
- <div class="absolute left-0 top-0 aspect-square w-1/4">
21
- <slot />
 
 
 
 
 
 
22
  </div>
 
23
  </div>
 
1
  <script lang="ts">
2
  import { lcmLiveStatus, LCMLiveStatus, streamId } from '$lib/lcmLive';
3
+ import Button from '$lib/components/Button.svelte';
4
+ import { snapImage } from '$lib/utils';
5
 
6
  $: {
7
  console.log('streamId', $streamId);
8
  }
9
  $: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED;
10
  $: console.log('isLCMRunning', isLCMRunning);
11
+ let imageEl: HTMLImageElement;
12
+ async function takeSnapshot() {
13
+ if (isLCMRunning) {
14
+ await snapImage(imageEl);
15
+ }
16
+ }
17
  </script>
18
 
19
+ <div class="flex flex-col">
20
+ <div class="relative overflow-hidden rounded-lg border border-slate-300">
21
+ <!-- svelte-ignore a11y-missing-attribute -->
22
+ {#if isLCMRunning}
23
+ <img
24
+ bind:this={imageEl}
25
+ class="aspect-square w-full rounded-lg"
26
+ src={'/stream/' + $streamId}
27
+ />
28
+ {:else}
29
+ <div class="aspect-square w-full rounded-lg" />
30
+ {/if}
31
+ <div class="absolute left-0 top-0 aspect-square w-1/4">
32
+ <slot />
33
+ </div>
34
  </div>
35
+ <Button on:click={takeSnapshot} disabled={!isLCMRunning} classList={'ml-auto'}>Snapshot</Button>
36
  </div>
frontend/src/lib/utils.ts CHANGED
@@ -1,145 +1,31 @@
1
- export function LCMLive(webcamVideo, liveImage) {
2
- let websocket: WebSocket;
3
-
4
- async function start() {
5
- return new Promise((resolve, reject) => {
6
- const websocketURL = `${window.location.protocol === "https:" ? "wss" : "ws"
7
- }:${window.location.host}/ws`;
8
-
9
- const socket = new WebSocket(websocketURL);
10
- socket.onopen = () => {
11
- console.log("Connected to websocket");
12
- };
13
- socket.onclose = () => {
14
- console.log("Disconnected from websocket");
15
- stop();
16
- resolve({ "status": "disconnected" });
17
- };
18
- socket.onerror = (err) => {
19
- console.error(err);
20
- reject(err);
21
- };
22
- socket.onmessage = (event) => {
23
- const data = JSON.parse(event.data);
24
- switch (data.status) {
25
- case "success":
26
- break;
27
- case "start":
28
- const userId = data.userId;
29
- initVideoStream(userId);
30
- break;
31
- case "timeout":
32
- stop();
33
- resolve({ "status": "timeout" });
34
- case "error":
35
- stop();
36
- reject(data.message);
37
-
38
- }
39
- };
40
- websocket = socket;
41
- })
42
- }
43
- function switchCamera() {
44
- const constraints = {
45
- audio: false,
46
- video: { width: 1024, height: 1024, deviceId: mediaDevices[webcamsEl.value].deviceId }
47
- };
48
- navigator.mediaDevices
49
- .getUserMedia(constraints)
50
- .then((mediaStream) => {
51
- webcamVideo.removeEventListener("timeupdate", videoTimeUpdateHandler);
52
- webcamVideo.srcObject = mediaStream;
53
- webcamVideo.onloadedmetadata = () => {
54
- webcamVideo.play();
55
- webcamVideo.addEventListener("timeupdate", videoTimeUpdateHandler);
56
- };
57
- })
58
- .catch((err) => {
59
- console.error(`${err.name}: ${err.message}`);
60
- });
61
- }
62
-
63
- async function videoTimeUpdateHandler() {
64
- const dimension = getValue("input[name=dimension]:checked");
65
- const [WIDTH, HEIGHT] = JSON.parse(dimension);
66
-
67
- const canvas = new OffscreenCanvas(WIDTH, HEIGHT);
68
- const videoW = webcamVideo.videoWidth;
69
- const videoH = webcamVideo.videoHeight;
70
- const aspectRatio = WIDTH / HEIGHT;
71
-
72
- const ctx = canvas.getContext("2d");
73
- ctx.drawImage(webcamVideo, videoW / 2 - videoH * aspectRatio / 2, 0, videoH * aspectRatio, videoH, 0, 0, WIDTH, HEIGHT)
74
- const blob = await canvas.convertToBlob({ type: "image/jpeg", quality: 1 });
75
- websocket.send(blob);
76
- websocket.send(JSON.stringify({
77
- "seed": getValue("#seed"),
78
- "prompt": getValue("#prompt"),
79
- "guidance_scale": getValue("#guidance-scale"),
80
- "strength": getValue("#strength"),
81
- "steps": getValue("#steps"),
82
- "lcm_steps": getValue("#lcm_steps"),
83
- "width": WIDTH,
84
- "height": HEIGHT,
85
- "controlnet_scale": getValue("#controlnet_scale"),
86
- "controlnet_start": getValue("#controlnet_start"),
87
- "controlnet_end": getValue("#controlnet_end"),
88
- "canny_low_threshold": getValue("#canny_low_threshold"),
89
- "canny_high_threshold": getValue("#canny_high_threshold"),
90
- "debug_canny": getValue("#debug_canny")
91
- }));
92
- }
93
- let mediaDevices = [];
94
- async function initVideoStream(userId) {
95
- liveImage.src = `/stream/${userId}`;
96
- await navigator.mediaDevices.enumerateDevices()
97
- .then(devices => {
98
- const cameras = devices.filter(device => device.kind === 'videoinput');
99
- mediaDevices = cameras;
100
- webcamsEl.innerHTML = "";
101
- cameras.forEach((camera, index) => {
102
- const option = document.createElement("option");
103
- option.value = index;
104
- option.innerText = camera.label;
105
- webcamsEl.appendChild(option);
106
- option.selected = index === 0;
107
- });
108
- webcamsEl.addEventListener("change", switchCamera);
109
- })
110
- .catch(err => {
111
- console.error(err);
112
- });
113
- const constraints = {
114
- audio: false,
115
- video: { width: 1024, height: 1024, deviceId: mediaDevices[0].deviceId }
116
- };
117
- navigator.mediaDevices
118
- .getUserMedia(constraints)
119
- .then((mediaStream) => {
120
- webcamVideo.srcObject = mediaStream;
121
- webcamVideo.onloadedmetadata = () => {
122
- webcamVideo.play();
123
- webcamVideo.addEventListener("timeupdate", videoTimeUpdateHandler);
124
- };
125
- })
126
- .catch((err) => {
127
- console.error(`${err.name}: ${err.message}`);
128
- });
129
- }
130
-
131
-
132
- async function stop() {
133
- websocket.close();
134
- navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
135
- mediaStream.getTracks().forEach((track) => track.stop());
136
- });
137
- webcamVideo.removeEventListener("timeupdate", videoTimeUpdateHandler);
138
- webcamsEl.removeEventListener("change", switchCamera);
139
- webcamVideo.srcObject = null;
140
- }
141
- return {
142
- start,
143
- stop
144
  }
145
- }
 
1
+ import * as piexif from "piexifjs";
2
+
3
+ export function snapImage(imageEl: HTMLImageElement) {
4
+ try {
5
+ const zeroth: { [key: string]: any } = {};
6
+ const exif: { [key: string]: any } = {};
7
+ const gps: { [key: string]: any } = {};
8
+ zeroth[piexif.ImageIFD.Make] = "LCM Image-to-Image ControNet";
9
+ // zeroth[piexif.ImageIFD.ImageDescription] = `prompt: ${getValue("#prompt")} | seed: ${getValue("#seed")} | guidance_scale: ${getValue("#guidance-scale")} | strength: ${getValue("#strength")} | controlnet_start: ${getValue("#controlnet_start")} | controlnet_end: ${getValue("#controlnet_end")} | steps: ${getValue("#steps")}`;
10
+ zeroth[piexif.ImageIFD.Software] = "https://github.com/radames/Real-Time-Latent-Consistency-Model";
11
+ exif[piexif.ExifIFD.DateTimeOriginal] = new Date().toISOString();
12
+
13
+ const exifObj = { "0th": zeroth, "Exif": exif, "GPS": gps };
14
+ const exifBytes = piexif.dump(exifObj);
15
+
16
+ const canvas = document.createElement("canvas");
17
+ canvas.width = imageEl.naturalWidth;
18
+ canvas.height = imageEl.naturalHeight;
19
+ const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
20
+ ctx.drawImage(imageEl, 0, 0);
21
+ const dataURL = canvas.toDataURL("image/jpeg");
22
+ const withExif = piexif.insert(exifBytes, dataURL);
23
+
24
+ const a = document.createElement("a");
25
+ a.href = withExif;
26
+ a.download = `lcm_txt_2_img${Date.now()}.png`;
27
+ a.click();
28
+ } catch (err) {
29
+ console.log(err);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
+ }