add snapshot button

frontend/src/lib/components/ImagePlayer.svelte

@@ -1,23 +1,36 @@
 <script lang="ts">
   import { lcmLiveStatus, LCMLiveStatus, streamId } from '$lib/lcmLive';
-  import { onFrameChangeStore } from '$lib/mediaStream';
-  import { PUBLIC_BASE_URL } from '$env/static/public';
+  import Button from '$lib/components/Button.svelte';
+  import { snapImage } from '$lib/utils';
 
   $: {
     console.log('streamId', $streamId);
   }
   $: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED;
   $: console.log('isLCMRunning', isLCMRunning);
+  let imageEl: HTMLImageElement;
+  async function takeSnapshot() {
+    if (isLCMRunning) {
+      await snapImage(imageEl);
+    }
+  }
 </script>
 
-<div class="relative overflow-hidden rounded-lg border border-slate-300">
-  <!-- svelte-ignore a11y-missing-attribute -->
-  {#if isLCMRunning}
-    <img class="aspect-square w-full rounded-lg" src={PUBLIC_BASE_URL + '/stream/' + $streamId} />
-  {:else}
-    <div class="aspect-square w-full rounded-lg" />
-  {/if}
-  <div class="absolute left-0 top-0 aspect-square w-1/4">
-    <slot />
+<div class="flex flex-col">
+  <div class="relative 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}
+      />
+    {:else}
+      <div class="aspect-square w-full rounded-lg" />
+    {/if}
+    <div class="absolute left-0 top-0 aspect-square w-1/4">
+      <slot />
+    </div>
   </div>
+  <Button on:click={takeSnapshot} disabled={!isLCMRunning} classList={'ml-auto'}>Snapshot</Button>
 </div>

frontend/src/lib/utils.ts

@@ -1,145 +1,31 @@
-export function LCMLive(webcamVideo, liveImage) {
-    let websocket: WebSocket;
-
-    async function start() {
-        return new Promise((resolve, reject) => {
-            const websocketURL = `${window.location.protocol === "https:" ? "wss" : "ws"
-                }:${window.location.host}/ws`;
-
-            const socket = new WebSocket(websocketURL);
-            socket.onopen = () => {
-                console.log("Connected to websocket");
-            };
-            socket.onclose = () => {
-                console.log("Disconnected from websocket");
-                stop();
-                resolve({ "status": "disconnected" });
-            };
-            socket.onerror = (err) => {
-                console.error(err);
-                reject(err);
-            };
-            socket.onmessage = (event) => {
-                const data = JSON.parse(event.data);
-                switch (data.status) {
-                    case "success":
-                        break;
-                    case "start":
-                        const userId = data.userId;
-                        initVideoStream(userId);
-                        break;
-                    case "timeout":
-                        stop();
-                        resolve({ "status": "timeout" });
-                    case "error":
-                        stop();
-                        reject(data.message);
-
-                }
-            };
-            websocket = socket;
-        })
-    }
-    function switchCamera() {
-        const constraints = {
-            audio: false,
-            video: { width: 1024, height: 1024, deviceId: mediaDevices[webcamsEl.value].deviceId }
-        };
-        navigator.mediaDevices
-            .getUserMedia(constraints)
-            .then((mediaStream) => {
-                webcamVideo.removeEventListener("timeupdate", videoTimeUpdateHandler);
-                webcamVideo.srcObject = mediaStream;
-                webcamVideo.onloadedmetadata = () => {
-                    webcamVideo.play();
-                    webcamVideo.addEventListener("timeupdate", videoTimeUpdateHandler);
-                };
-            })
-            .catch((err) => {
-                console.error(`${err.name}: ${err.message}`);
-            });
-    }
-
-    async function videoTimeUpdateHandler() {
-        const dimension = getValue("input[name=dimension]:checked");
-        const [WIDTH, HEIGHT] = JSON.parse(dimension);
-
-        const canvas = new OffscreenCanvas(WIDTH, HEIGHT);
-        const videoW = webcamVideo.videoWidth;
-        const videoH = webcamVideo.videoHeight;
-        const aspectRatio = WIDTH / HEIGHT;
-
-        const ctx = canvas.getContext("2d");
-        ctx.drawImage(webcamVideo, videoW / 2 - videoH * aspectRatio / 2, 0, videoH * aspectRatio, videoH, 0, 0, WIDTH, HEIGHT)
-        const blob = await canvas.convertToBlob({ type: "image/jpeg", quality: 1 });
-        websocket.send(blob);
-        websocket.send(JSON.stringify({
-            "seed": getValue("#seed"),
-            "prompt": getValue("#prompt"),
-            "guidance_scale": getValue("#guidance-scale"),
-            "strength": getValue("#strength"),
-            "steps": getValue("#steps"),
-            "lcm_steps": getValue("#lcm_steps"),
-            "width": WIDTH,
-            "height": HEIGHT,
-            "controlnet_scale": getValue("#controlnet_scale"),
-            "controlnet_start": getValue("#controlnet_start"),
-            "controlnet_end": getValue("#controlnet_end"),
-            "canny_low_threshold": getValue("#canny_low_threshold"),
-            "canny_high_threshold": getValue("#canny_high_threshold"),
-            "debug_canny": getValue("#debug_canny")
-        }));
-    }
-    let mediaDevices = [];
-    async function initVideoStream(userId) {
-        liveImage.src = `/stream/${userId}`;
-        await navigator.mediaDevices.enumerateDevices()
-            .then(devices => {
-                const cameras = devices.filter(device => device.kind === 'videoinput');
-                mediaDevices = cameras;
-                webcamsEl.innerHTML = "";
-                cameras.forEach((camera, index) => {
-                    const option = document.createElement("option");
-                    option.value = index;
-                    option.innerText = camera.label;
-                    webcamsEl.appendChild(option);
-                    option.selected = index === 0;
-                });
-                webcamsEl.addEventListener("change", switchCamera);
-            })
-            .catch(err => {
-                console.error(err);
-            });
-        const constraints = {
-            audio: false,
-            video: { width: 1024, height: 1024, deviceId: mediaDevices[0].deviceId }
-        };
-        navigator.mediaDevices
-            .getUserMedia(constraints)
-            .then((mediaStream) => {
-                webcamVideo.srcObject = mediaStream;
-                webcamVideo.onloadedmetadata = () => {
-                    webcamVideo.play();
-                    webcamVideo.addEventListener("timeupdate", videoTimeUpdateHandler);
-                };
-            })
-            .catch((err) => {
-                console.error(`${err.name}: ${err.message}`);
-            });
-    }
-
-
-    async function stop() {
-        websocket.close();
-        navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
-            mediaStream.getTracks().forEach((track) => track.stop());
-        });
-        webcamVideo.removeEventListener("timeupdate", videoTimeUpdateHandler);
-        webcamsEl.removeEventListener("change", switchCamera);
-        webcamVideo.srcObject = null;
-    }
-    return {
-        start,
-        stop
+import * as piexif from "piexifjs";
+
+export function snapImage(imageEl: HTMLImageElement) {
+    try {
+        const zeroth: { [key: string]: any } = {};
+        const exif: { [key: string]: any } = {};
+        const gps: { [key: string]: any } = {};
+        zeroth[piexif.ImageIFD.Make] = "LCM Image-to-Image ControNet";
+        // 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")}`;
+        zeroth[piexif.ImageIFD.Software] = "https://github.com/radames/Real-Time-Latent-Consistency-Model";
+        exif[piexif.ExifIFD.DateTimeOriginal] = new Date().toISOString();
+
+        const exifObj = { "0th": zeroth, "Exif": exif, "GPS": gps };
+        const exifBytes = piexif.dump(exifObj);
+
+        const canvas = document.createElement("canvas");
+        canvas.width = imageEl.naturalWidth;
+        canvas.height = imageEl.naturalHeight;
+        const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+        ctx.drawImage(imageEl, 0, 0);
+        const dataURL = canvas.toDataURL("image/jpeg");
+        const withExif = piexif.insert(exifBytes, dataURL);
+
+        const a = document.createElement("a");
+        a.href = withExif;
+        a.download = `lcm_txt_2_img${Date.now()}.png`;
+        a.click();
+    } catch (err) {
+        console.log(err);
     }
-}
+}