format

frontend/src/lib/lcmLive.ts

@@ -1,12 +1,11 @@
 import { writable } from 'svelte/store';
 
-
 export enum LCMLiveStatus {
-    CONNECTED = "connected",
-    DISCONNECTED = "disconnected",
-    WAIT = "wait",
-    SEND_FRAME = "send_frame",
-    TIMEOUT = "timeout",
+  CONNECTED = 'connected',
+  DISCONNECTED = 'disconnected',
+  WAIT = 'wait',
+  SEND_FRAME = 'send_frame',
+  TIMEOUT = 'timeout'
 }
 
 const initStatus: LCMLiveStatus = LCMLiveStatus.DISCONNECTED;
@@ -16,84 +15,83 @@ export const streamId = writable<string | null>(null);
 
 let websocket: WebSocket | null = null;
 export const lcmLiveActions = {
-    async start(getSreamdata: () => any[]) {
-        return new Promise((resolve, reject) => {
-
-            try {
-                const userId = crypto.randomUUID();
-                const websocketURL = `${window.location.protocol === "https:" ? "wss" : "ws"
-                    }:${window.location.host}/api/ws/${userId}`;
-
-                websocket = new WebSocket(websocketURL);
-                websocket.onopen = () => {
-                    console.log("Connected to websocket");
-                };
-                websocket.onclose = () => {
-                    lcmLiveStatus.set(LCMLiveStatus.DISCONNECTED);
-                    console.log("Disconnected from websocket");
-                };
-                websocket.onerror = (err) => {
-                    console.error(err);
-                };
-                websocket.onmessage = (event) => {
-                    const data = JSON.parse(event.data);
-                    switch (data.status) {
-                        case "connected":
-                            lcmLiveStatus.set(LCMLiveStatus.CONNECTED);
-                            streamId.set(userId);
-                            resolve({ status: "connected", userId });
-                            break;
-                        case "send_frame":
-                            lcmLiveStatus.set(LCMLiveStatus.SEND_FRAME);
-                            const streamData = getSreamdata();
-                            websocket?.send(JSON.stringify({ status: "next_frame" }));
-                            for (const d of streamData) {
-                                this.send(d);
-                            }
-                            break;
-                        case "wait":
-                            lcmLiveStatus.set(LCMLiveStatus.WAIT);
-                            break;
-                        case "timeout":
-                            console.log("timeout");
-                            lcmLiveStatus.set(LCMLiveStatus.TIMEOUT);
-                            streamId.set(null);
-                            reject(new Error("timeout"));
-                            break;
-                        case "error":
-                            console.log(data.message);
-                            lcmLiveStatus.set(LCMLiveStatus.DISCONNECTED);
-                            streamId.set(null);
-                            reject(new Error(data.message));
-                            break;
-                    }
-                };
+  async start(getSreamdata: () => any[]) {
+    return new Promise((resolve, reject) => {
+      try {
+        const userId = crypto.randomUUID();
+        const websocketURL = `${
+          window.location.protocol === 'https:' ? 'wss' : 'ws'
+        }:${window.location.host}/api/ws/${userId}`;
 
-            } catch (err) {
-                console.error(err);
-                lcmLiveStatus.set(LCMLiveStatus.DISCONNECTED);
-                streamId.set(null);
-                reject(err);
-            }
-        });
-    },
-    send(data: Blob | { [key: string]: any }) {
-        if (websocket && websocket.readyState === WebSocket.OPEN) {
-            if (data instanceof Blob) {
-                websocket.send(data);
-            } else {
-                websocket.send(JSON.stringify(data));
-            }
-        } else {
-            console.log("WebSocket not connected");
-        }
-    },
-    async stop() {
+        websocket = new WebSocket(websocketURL);
+        websocket.onopen = () => {
+          console.log('Connected to websocket');
+        };
+        websocket.onclose = () => {
+          lcmLiveStatus.set(LCMLiveStatus.DISCONNECTED);
+          console.log('Disconnected from websocket');
+        };
+        websocket.onerror = (err) => {
+          console.error(err);
+        };
+        websocket.onmessage = (event) => {
+          const data = JSON.parse(event.data);
+          switch (data.status) {
+            case 'connected':
+              lcmLiveStatus.set(LCMLiveStatus.CONNECTED);
+              streamId.set(userId);
+              resolve({ status: 'connected', userId });
+              break;
+            case 'send_frame':
+              lcmLiveStatus.set(LCMLiveStatus.SEND_FRAME);
+              const streamData = getSreamdata();
+              websocket?.send(JSON.stringify({ status: 'next_frame' }));
+              for (const d of streamData) {
+                this.send(d);
+              }
+              break;
+            case 'wait':
+              lcmLiveStatus.set(LCMLiveStatus.WAIT);
+              break;
+            case 'timeout':
+              console.log('timeout');
+              lcmLiveStatus.set(LCMLiveStatus.TIMEOUT);
+              streamId.set(null);
+              reject(new Error('timeout'));
+              break;
+            case 'error':
+              console.log(data.message);
+              lcmLiveStatus.set(LCMLiveStatus.DISCONNECTED);
+              streamId.set(null);
+              reject(new Error(data.message));
+              break;
+          }
+        };
+      } catch (err) {
+        console.error(err);
         lcmLiveStatus.set(LCMLiveStatus.DISCONNECTED);
-        if (websocket) {
-            websocket.close();
-        }
-        websocket = null;
         streamId.set(null);
-    },
-};
+        reject(err);
+      }
+    });
+  },
+  send(data: Blob | { [key: string]: any }) {
+    if (websocket && websocket.readyState === WebSocket.OPEN) {
+      if (data instanceof Blob) {
+        websocket.send(data);
+      } else {
+        websocket.send(JSON.stringify(data));
+      }
+    } else {
+      console.log('WebSocket not connected');
+    }
+  },
+  async stop() {
+    lcmLiveStatus.set(LCMLiveStatus.DISCONNECTED);
+    if (websocket) {
+      websocket.close();
+    }
+    websocket = null;
+    streamId.set(null);
+  }
+};

frontend/src/lib/mediaStream.ts

@@ -1,10 +1,10 @@
-import { writable, type Writable, type Readable, get, derived } from 'svelte/store';
+import { get, writable, type Writable } from 'svelte/store';
 
 const BASE_HEIGHT = 720;
 export enum MediaStreamStatusEnum {
-    INIT = "init",
-    CONNECTED = "connected",
-    DISCONNECTED = "disconnected",
+  INIT = 'init',
+  CONNECTED = 'connected',
+  DISCONNECTED = 'disconnected'
 }
 export const onFrameChangeStore: Writable<{ blob: Blob }> = writable({ blob: new Blob() });
 
@@ -13,108 +13,106 @@ export const mediaStreamStatus = writable(MediaStreamStatusEnum.INIT);
 export const mediaStream = writable<MediaStream | null>(null);
 
 export const mediaStreamActions = {
-    async enumerateDevices() {
-        // console.log("Enumerating devices");
-        await navigator.mediaDevices.enumerateDevices()
-            .then(devices => {
-                const cameras = devices.filter(device => device.kind === 'videoinput');
-                mediaDevices.set(cameras);
-            })
-            .catch(err => {
-                console.error(err);
-            });
-    },
-    async start(mediaDevicedID?: string, aspectRatio: number = 1) {
-        const constraints = {
-            audio: false,
-            video: {
-                width: {
-                    ideal: BASE_HEIGHT * aspectRatio,
-                },
-                height: {
-                    ideal: BASE_HEIGHT,
-                },
-                deviceId: mediaDevicedID
-            }
-        };
+  async enumerateDevices() {
+    // console.log("Enumerating devices");
+    await navigator.mediaDevices
+      .enumerateDevices()
+      .then((devices) => {
+        const cameras = devices.filter((device) => device.kind === 'videoinput');
+        mediaDevices.set(cameras);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  },
+  async start(mediaDevicedID?: string, aspectRatio: number = 1) {
+    const constraints = {
+      audio: false,
+      video: {
+        width: {
+          ideal: BASE_HEIGHT * aspectRatio
+        },
+        height: {
+          ideal: BASE_HEIGHT
+        },
+        deviceId: mediaDevicedID
+      }
+    };
 
-        await navigator.mediaDevices
-            .getUserMedia(constraints)
-            .then((stream) => {
-                mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
-                mediaStream.set(stream);
-
-            })
-            .catch((err) => {
-                console.error(`${err.name}: ${err.message}`);
-                mediaStreamStatus.set(MediaStreamStatusEnum.DISCONNECTED);
-                mediaStream.set(null);
-            });
-    },
-    async startScreenCapture() {
-        const displayMediaOptions = {
-            video: {
-                displaySurface: "window",
-            },
-            audio: false,
-            surfaceSwitching: "include"
-        };
-
-
-        let captureStream = null;
+    await navigator.mediaDevices
+      .getUserMedia(constraints)
+      .then((stream) => {
+        mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
+        mediaStream.set(stream);
+      })
+      .catch((err) => {
+        console.error(`${err.name}: ${err.message}`);
+        mediaStreamStatus.set(MediaStreamStatusEnum.DISCONNECTED);
+        mediaStream.set(null);
+      });
+  },
+  async startScreenCapture() {
+    const displayMediaOptions = {
+      video: {
+        displaySurface: 'window'
+      },
+      audio: false,
+      surfaceSwitching: 'include'
+    };
 
-        try {
-            captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
-            const videoTrack = captureStream.getVideoTracks()[0];
+    let captureStream = null;
 
-            console.log("Track settings:");
-            console.log(JSON.stringify(videoTrack.getSettings(), null, 2));
-            console.log("Track constraints:");
-            console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
-            mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
-            mediaStream.set(captureStream)
+    try {
+      captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+      const videoTrack = captureStream.getVideoTracks()[0];
 
-            const capabilities = videoTrack.getCapabilities();
-            const aspectRatio = capabilities.aspectRatio;
-            console.log('Aspect Ratio Constraints:', aspectRatio);
-        } catch (err) {
-            console.error(err);
-        }
+      console.log('Track settings:');
+      console.log(JSON.stringify(videoTrack.getSettings(), null, 2));
+      console.log('Track constraints:');
+      console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
+      mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
+      mediaStream.set(captureStream);
 
-    },
-    async switchCamera(mediaDevicedID: string, aspectRatio: number) {
-        console.log("Switching camera");
-        if (get(mediaStreamStatus) !== MediaStreamStatusEnum.CONNECTED) {
-            return;
-        }
-        const constraints = {
-            audio: false,
-            video: {
-                width: {
-                    ideal: BASE_HEIGHT * aspectRatio,
-                },
-                height: {
-                    ideal: BASE_HEIGHT,
-                },
-                deviceId: mediaDevicedID
-            }
-        };
-        console.log("Switching camera", constraints);
-        await navigator.mediaDevices
-            .getUserMedia(constraints)
-            .then((stream) => {
-                mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
-                mediaStream.set(stream)
-            })
-            .catch((err) => {
-                console.error(`${err.name}: ${err.message}`);
-            });
-    },
-    async stop() {
-        navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
-            stream.getTracks().forEach((track) => track.stop());
-        });
-        mediaStreamStatus.set(MediaStreamStatusEnum.DISCONNECTED);
-        mediaStream.set(null);
-    },
-};
+      const capabilities = videoTrack.getCapabilities();
+      const aspectRatio = capabilities.aspectRatio;
+      console.log('Aspect Ratio Constraints:', aspectRatio);
+    } catch (err) {
+      console.error(err);
+    }
+  },
+  async switchCamera(mediaDevicedID: string, aspectRatio: number) {
+    console.log('Switching camera');
+    if (get(mediaStreamStatus) !== MediaStreamStatusEnum.CONNECTED) {
+      return;
+    }
+    const constraints = {
+      audio: false,
+      video: {
+        width: {
+          ideal: BASE_HEIGHT * aspectRatio
+        },
+        height: {
+          ideal: BASE_HEIGHT
+        },
+        deviceId: mediaDevicedID
+      }
+    };
+    console.log('Switching camera', constraints);
+    await navigator.mediaDevices
+      .getUserMedia(constraints)
+      .then((stream) => {
+        mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
+        mediaStream.set(stream);
+      })
+      .catch((err) => {
+        console.error(`${err.name}: ${err.message}`);
+      });
+  },
+  async stop() {
+    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
+      stream.getTracks().forEach((track) => track.stop());
+    });
+    mediaStreamStatus.set(MediaStreamStatusEnum.DISCONNECTED);
+    mediaStream.set(null);
+  }
+};

frontend/src/lib/store.ts

@@ -1,15 +1,14 @@
-
-import { derived, writable, get, type Writable, type Readable } from 'svelte/store';
+import { derived, get, writable, type Readable, type Writable } from 'svelte/store';
 
 export const pipelineValues: Writable<Record<string, any>> = writable({});
-export const deboucedPipelineValues: Readable<Record<string, any>>
-    = derived(pipelineValues, ($pipelineValues, set) => {
-        const debounced = setTimeout(() => {
-            set($pipelineValues);
-        }, 100);
-        return () => clearTimeout(debounced);
-    });
-
-
-
-export const getPipelineValues = () => get(pipelineValues);
+export const deboucedPipelineValues: Readable<Record<string, any>> = derived(
+  pipelineValues,
+  ($pipelineValues, set) => {
+    const debounced = setTimeout(() => {
+      set($pipelineValues);
+    }, 100);
+    return () => clearTimeout(debounced);
+  }
+);
+
+export const getPipelineValues = () => get(pipelineValues);

frontend/src/lib/types.ts

@@ -1,40 +1,39 @@
 export const enum FieldType {
-    RANGE = "range",
-    SEED = "seed",
-    TEXTAREA = "textarea",
-    CHECKBOX = "checkbox",
-    SELECT = "select",
+  RANGE = 'range',
+  SEED = 'seed',
+  TEXTAREA = 'textarea',
+  CHECKBOX = 'checkbox',
+  SELECT = 'select'
 }
 export const enum PipelineMode {
-    IMAGE = "image",
-    VIDEO = "video",
-    TEXT = "text",
+  IMAGE = 'image',
+  VIDEO = 'video',
+  TEXT = 'text'
 }
 
-
 export interface Fields {
-    [key: string]: FieldProps;
+  [key: string]: FieldProps;
 }
 
 export interface FieldProps {
-    default: number | string;
-    max?: number;
-    min?: number;
-    title: string;
-    field: FieldType;
-    step?: number;
-    disabled?: boolean;
-    hide?: boolean;
-    id: string;
-    values?: string[];
+  default: number | string;
+  max?: number;
+  min?: number;
+  title: string;
+  field: FieldType;
+  step?: number;
+  disabled?: boolean;
+  hide?: boolean;
+  id: string;
+  values?: string[];
 }
 export interface PipelineInfo {
-    title: {
-        default: string;
-    }
-    name: string;
-    description: string;
-    input_mode: {
-        default: PipelineMode;
-    }
-}
+  title: {
+    default: string;
+  };
+  name: string;
+  description: string;
+  input_mode: {
+    default: PipelineMode;
+  };
+}

frontend/src/lib/utils.ts

@@ -1,44 +1,46 @@
-import * as piexif from "piexifjs";
+import * as piexif from 'piexifjs';
 
 interface IImageInfo {
-    prompt?: string;
-    negative_prompt?: string;
-    seed?: number;
-    guidance_scale?: number;
+  prompt?: string;
+  negative_prompt?: string;
+  seed?: number;
+  guidance_scale?: number;
 }
 
 export function snapImage(imageEl: HTMLImageElement, info: IImageInfo) {
-    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: ${info?.prompt} | negative_prompt: ${info?.negative_prompt} | seed: ${info?.seed} | guidance_scale: ${info?.guidance_scale}`;
-        zeroth[piexif.ImageIFD.Software] = "https://github.com/radames/Real-Time-Latent-Consistency-Model";
-        exif[piexif.ExifIFD.DateTimeOriginal] = new Date().toISOString();
+  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: ${info?.prompt} | negative_prompt: ${info?.negative_prompt} | seed: ${info?.seed} | guidance_scale: ${info?.guidance_scale}`;
+    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 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 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);
-    }
+    const a = document.createElement('a');
+    a.href = withExif;
+    a.download = `lcm_txt_2_img${Date.now()}.png`;
+    a.click();
+  } catch (err) {
+    console.log(err);
+  }
 }
 
-export function expandWindow(steramURL: string): Window {
-    const html = `
+export function expandWindow(streamURL: string): Window {
+  const html = `
     <html>
         <head>
             <title>Real-Time Latent Consistency Model</title>
@@ -71,11 +73,15 @@ export function expandWindow(steramURL: string): Window {
                 }
             </script>
 
-            <img src="${steramURL}" style="width: 100%; height: 100%; object-fit: contain;" />
+            <img src="${streamURL}" style="width: 100%; height: 100%; object-fit: contain;" />
         </body>
     </html>
     `;
-    const newWindow = window.open("", "_blank", "width=1024,height=1024,scrollbars=0,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=0") as Window;
-    newWindow.document.write(html);
-    return newWindow;
-}
+  const newWindow = window.open(
+    '',
+    '_blank',
+    'width=1024,height=1024,scrollbars=0,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=0'
+  ) as Window;
+  newWindow.document.write(html);
+  return newWindow;
+}

frontend/src/routes/+page.ts

@@ -1 +1 @@
-export const prerender = true
+export const prerender = true;

frontend/vite.config.ts

@@ -10,6 +10,6 @@ export default defineConfig({
         target: 'ws://localhost:7860',
         ws: true
       }
-    },
+    }
   }
-});
+});