bump sveltkit and svelte

frontend/.eslintignore

@@ -1,13 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock

frontend/.eslintrc.cjs

@@ -1,30 +0,0 @@
-module.exports = {
-  root: true,
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:svelte/recommended',
-    'prettier'
-  ],
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
-  parserOptions: {
-    sourceType: 'module',
-    ecmaVersion: 2020,
-    extraFileExtensions: ['.svelte']
-  },
-  env: {
-    browser: true,
-    es2017: true,
-    node: true
-  },
-  overrides: [
-    {
-      files: ['*.svelte'],
-      parser: 'svelte-eslint-parser',
-      parserOptions: {
-        parser: '@typescript-eslint/parser'
-      }
-    }
-  ]
-};

frontend/.gitignore

@@ -1,11 +1,24 @@
-.DS_Store
 node_modules
-/build
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
 /.svelte-kit
-/package
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
 .env
 .env.*
 !.env.example
+!.env.test
+
+# Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-public
+public/

frontend/.prettierignore

@@ -1,13 +1,6 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
+# Package Managers
 package-lock.json
+pnpm-lock.yaml
 yarn.lock
+bun.lock
+bun.lockb

frontend/.prettierrc

@@ -1,13 +1,5 @@
 {
-  "useTabs": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "printWidth": 100,
-  "plugins": [
-    "prettier-plugin-svelte",
-    "prettier-plugin-organize-imports",
-    "prettier-plugin-tailwindcss"
-  ],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "overrides": [
     {
       "files": "*.svelte",

frontend/README.md

@@ -1,6 +1,6 @@
-# create-svelte
+# sv
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
 
 ## Creating a project
 
@@ -8,10 +8,10 @@ If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npm create svelte@latest
+npx sv create
 
 # create a new project in my-app
-npm create svelte@latest my-app
+npx sv create my-app
 ```
 
 ## Developing
@@ -35,4 +35,4 @@ npm run build
 
 You can preview the production build with `npm run preview`.
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

frontend/package.json

@@ -1,41 +1,40 @@
 {
   "name": "frontend",
-  "version": "0.0.1",
   "private": true,
+  "version": "0.0.1",
+  "type": "module",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
+    "lint": "eslint . && prettier --check .",
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.3.1",
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.26.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@types/eslint": "^8.56.12",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.46.1",
-    "postcss": "^8.5.3",
-    "prettier": "^3.5.3",
-    "prettier-plugin-organize-imports": "^3.2.4",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.1.5",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "svelte": "^5.0.0-next.65",
-    "svelte-check": "^3.8.6",
-    "tailwindcss": "^3.4.17",
-    "tslib": "^2.8.1",
-    "typescript": "^5.8.2",
-    "vite": "^5.4.14"
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.1.5",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.2.6"
   },
-  "type": "module",
   "dependencies": {
     "piexifjs": "^1.0.6",
     "rvfc-polyfill": "^1.0.7"

frontend/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
-};

frontend/src/app.css

@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin '@tailwindcss/typography';

frontend/src/app.d.ts

@@ -1,12 +1,13 @@
-// See https://kit.svelte.dev/docs/types#app
+// See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
-  namespace App {
-    // interface Error {}
-    // interface Locals {}
-    // interface PageData {}
-    // interface Platform {}
-  }
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
 }
 
 export {};

frontend/src/app.html

@@ -1,12 +1,12 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    %sveltekit.head%
-  </head>
-  <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
-  </body>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
 </html>

frontend/src/lib/components/AspectRatioSelect.svelte

@@ -1,26 +1,27 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  let {
+    change,
+    aspectRatio = $bindable(),
+  }: { change: (aspectRatio: number) => void; aspectRatio: number } = $props();
 
-  let options: string[] = ['1:1', '16:9', '4:3', '3:2', '3:4', '9:16'];
-  export let aspectRatio: number = 1;
-  const dispatchEvent = createEventDispatcher();
+  let options: string[] = ["1:1", "16:9", "4:3", "3:2", "3:4", "9:16"];
 
   function onChange(e: Event) {
     const target = e.target as HTMLSelectElement;
     const value = target.value;
-    const [width, height] = value.split(':').map((v) => parseInt(v));
+    const [width, height] = value.split(":").map((v) => parseInt(v));
     aspectRatio = width / height;
-    dispatchEvent('change', aspectRatio);
+    change(aspectRatio);
   }
 </script>
 
 <div class="relative">
   <select
-    on:change={onChange}
+    onchange={onChange}
     title="Aspect Ratio"
-    class="border-1 block cursor-pointer rounded-md border-gray-800 border-opacity-50 bg-slate-100 bg-opacity-30 p-1 font-medium text-white"
+    class="block cursor-pointer rounded-md border border-gray-800/50 bg-slate-100/30 p-1 font-medium text-white"
   >
-    {#each options as option, i}
+    {#each options as option (option)}
       <option value={option}>{option}</option>
     {/each}
   </select>

frontend/src/lib/components/Button.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
-  export let classList: string = 'p-2';
-  export let disabled: boolean = false;
-  export let title: string = '';
+  let props = $props();
 </script>
 
-<button class="button {classList}" on:click {disabled} {title}>
-  <slot />
+<button {...props}>
+  {@render props.children()}
 </button>
 
-<style lang="postcss" scoped>
-  .button {
-    @apply rounded bg-gray-700 font-normal text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700 dark:disabled:text-black;
+<style lang="postcss">
+  @reference "tailwindcss";
+  button {
+    @apply cursor-pointer rounded bg-gray-700 font-normal text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700 dark:disabled:text-black;
   }
 </style>

frontend/src/lib/components/Checkbox.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
-  import type { FieldProps } from '$lib/types';
-  import { onMount } from 'svelte';
-  export let value = false;
-  export let params: FieldProps;
+  import type { FieldProps } from "$lib/types";
+  import { onMount } from "svelte";
+  let { value = $bindable(), params }: { value: boolean; params: FieldProps } =
+    $props();
+
   onMount(() => {
-    value = Boolean(params?.default) ?? 8.0;
+    value = params?.default ? true : false;
   });
 </script>
 
 <div class="grid max-w-md grid-cols-4 items-center justify-items-start gap-3">
   <label class="text-sm font-medium" for={params.id}>{params?.title}</label>
-  <input bind:checked={value} type="checkbox" id={params.id} class="cursor-pointer" />
+  <input
+    bind:checked={value}
+    type="checkbox"
+    id={params.id}
+    class="cursor-pointer"
+  />
 </div>

frontend/src/lib/components/ImagePlayer.svelte

@@ -1,31 +1,35 @@
 <script lang="ts">
-  import { lcmLiveStatus, LCMLiveStatus, streamId } from '$lib/lcmLive';
-  import { getPipelineValues } from '$lib/store';
+  import { lcmLiveStatus, LCMLiveStatus, streamId } from "$lib/lcmLive";
+  import { getPipelineValues } from "$lib/store";
 
-  import Button from '$lib/components/Button.svelte';
-  import Floppy from '$lib/icons/floppy.svelte';
-  import Expand from '$lib/icons/expand.svelte';
-  import { snapImage, expandWindow } from '$lib/utils';
+  import Button from "$lib/components/Button.svelte";
+  import Floppy from "$lib/icons/floppy.svelte";
+  import Expand from "$lib/icons/expand.svelte";
+  import { snapImage, expandWindow } from "$lib/utils";
+
+  let isLCMRunning = $derived(
+    $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED &&
+      $lcmLiveStatus !== LCMLiveStatus.ERROR,
+  );
+
+  let imageEl: HTMLImageElement | undefined = $state();
+  let expandedWindow: Window | undefined = $state();
+  let isExpanded = $state(false);
 
-  $: isLCMRunning =
-    $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED && $lcmLiveStatus !== LCMLiveStatus.ERROR;
-  let imageEl: HTMLImageElement;
-  let expandedWindow: Window;
-  let isExpanded = false;
   async function takeSnapshot() {
-    if (isLCMRunning) {
+    if (isLCMRunning && imageEl) {
       await snapImage(imageEl, {
-        prompt: getPipelineValues()?.prompt,
-        negative_prompt: getPipelineValues()?.negative_prompt,
-        seed: getPipelineValues()?.seed,
-        guidance_scale: getPipelineValues()?.guidance_scale
+        prompt: getPipelineValues()?.prompt as string,
+        negative_prompt: getPipelineValues()?.negative_prompt as string,
+        seed: getPipelineValues()?.seed as number,
+        guidance_scale: getPipelineValues()?.guidance_scale as number,
       });
     }
   }
   async function toggleFullscreen() {
     if (isLCMRunning && !isExpanded) {
-      expandedWindow = expandWindow('/api/stream/' + $streamId);
-      expandedWindow.addEventListener('beforeunload', () => {
+      expandedWindow = expandWindow("/api/stream/" + $streamId);
+      expandedWindow.addEventListener("beforeunload", () => {
         isExpanded = false;
       });
       isExpanded = true;
@@ -39,22 +43,24 @@
 <div
   class="relative mx-auto aspect-square max-w-lg self-center overflow-hidden rounded-lg border border-slate-300"
 >
-  <!-- svelte-ignore a11y-missing-attribute -->
   {#if $lcmLiveStatus === LCMLiveStatus.CONNECTING}
     <!-- Show connecting spinner -->
     <div class="flex h-full w-full items-center justify-center">
-      <div class="h-16 w-16 animate-spin rounded-full border-b-2 border-white"></div>
+      <div
+        class="h-16 w-16 animate-spin rounded-full border-b-2 border-white"
+      ></div>
       <p class="ml-2 text-white">Connecting...</p>
     </div>
   {:else if isLCMRunning}
     {#if !isExpanded}
       <!-- Handle image error by adding onerror event -->
+      <!-- svelte-ignore a11y_missing_attribute -->
       <img
         bind:this={imageEl}
         class="aspect-square w-full rounded-lg"
-        src={'/api/stream/' + $streamId}
-        on:error={(e) => {
-          console.error('Image stream error:', e);
+        src={"/api/stream/" + $streamId}
+        onerror={(e) => {
+          console.error("Image stream error:", e);
           // If stream fails to load, set status to error
           if ($lcmLiveStatus !== LCMLiveStatus.ERROR) {
             lcmLiveStatus.set(LCMLiveStatus.ERROR);
@@ -64,19 +70,19 @@
     {/if}
     <div class="absolute bottom-1 right-1">
       <Button
-        on:click={toggleFullscreen}
-        title={'Expand Fullscreen'}
-        classList={'text-sm ml-auto text-white p-1 shadow-lg rounded-lg opacity-50'}
+        onclick={toggleFullscreen}
+        title="Expand Fullscreen"
+        class="ml-auto rounded-lg p-1 text-sm text-white opacity-50 shadow-lg"
       >
-        <Expand classList={''} />
+        <Expand />
       </Button>
       <Button
-        on:click={takeSnapshot}
+        onclick={takeSnapshot}
         disabled={!isLCMRunning}
-        title={'Take Snapshot'}
-        classList={'text-sm ml-auto text-white p-1 shadow-lg rounded-lg opacity-50'}
+        title="Take Snapshot"
+        class="ml-auto rounded-lg p-1 text-sm text-white opacity-50 shadow-lg"
       >
-        <Floppy classList={''} />
+        <Floppy />
       </Button>
     </div>
   {:else if $lcmLiveStatus === LCMLiveStatus.ERROR}
@@ -87,6 +93,7 @@
       <p class="p-4 text-center text-white">Connection error</p>
     </div>
   {:else}
+    <!-- svelte-ignore a11y_missing_attribute -->
     <img
       class="aspect-square w-full rounded-lg"
       src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="

frontend/src/lib/components/InputRange.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import type { FieldProps } from '$lib/types';
-  import { onMount } from 'svelte';
-  export let value = 8.0;
-  export let params: FieldProps;
+  import type { FieldProps } from "$lib/types";
+  import { onMount } from "svelte";
+  let { value = $bindable(), params }: { value: number; params: FieldProps } =
+    $props();
+
   onMount(() => {
-    value = Number(params?.default) ?? 8.0;
+    value = Number(params?.default ?? "");
   });
 </script>
 

frontend/src/lib/components/MediaListSwitcher.svelte

@@ -1,45 +1,41 @@
 <script lang="ts">
-  import { mediaDevices, mediaStreamActions } from '$lib/mediaStream';
-  import Screen from '$lib/icons/screen.svelte';
-  import AspectRatioSelect from './AspectRatioSelect.svelte';
-  import { onMount } from 'svelte';
+  import { mediaDevices, mediaStreamActions } from "$lib/mediaStream";
+  import Screen from "$lib/icons/screen.svelte";
+  import AspectRatioSelect from "./AspectRatioSelect.svelte";
+  import { onMount } from "svelte";
 
-  let deviceId: string = '';
+  let deviceId: string = "";
   let aspectRatio: number = 1;
 
   onMount(() => {
     deviceId = $mediaDevices[0].deviceId;
   });
-  $: {
-    console.log(deviceId);
-  }
-  $: {
-    console.log(aspectRatio);
-  }
 </script>
 
-<div class="flex items-center justify-center text-xs backdrop-blur-sm backdrop-grayscale">
+<div
+  class="flex items-center justify-center text-xs backdrop-blur-sm backdrop-grayscale"
+>
   <AspectRatioSelect
     bind:aspectRatio
-    on:change={() => mediaStreamActions.switchCamera(deviceId, aspectRatio)}
+    change={(value) => mediaStreamActions.switchCamera(deviceId, value)}
   />
   <button
     title="Share your screen"
-    class="border-1 my-1 flex cursor-pointer gap-1 rounded-md border-gray-500 border-opacity-50 bg-slate-100 bg-opacity-30 p-1 font-medium text-white"
-    on:click={() => mediaStreamActions.startScreenCapture()}
+    class="my-1 flex cursor-pointer gap-1 rounded-md border border-gray-500/50 bg-slate-100/30 p-1 font-medium text-white"
+    onclick={() => mediaStreamActions.startScreenCapture()}
   >
     <span>Share</span>
 
-    <Screen classList={''} />
+    <Screen />
   </button>
   {#if $mediaDevices}
     <select
       bind:value={deviceId}
-      on:change={() => mediaStreamActions.switchCamera(deviceId, aspectRatio)}
+      onchange={() => mediaStreamActions.switchCamera(deviceId, aspectRatio)}
       id="devices-list"
-      class="border-1 block cursor-pointer rounded-md border-gray-800 border-opacity-50 bg-slate-100 bg-opacity-30 p-1 font-medium text-white"
+      class="block cursor-pointer rounded-md border border-gray-800/50 bg-slate-100/30 p-1 font-medium text-white"
     >
-      {#each $mediaDevices as device, i}
+      {#each $mediaDevices as device (device.deviceId)}
         <option value={device.deviceId}>{device.label}</option>
       {/each}
     </select>

frontend/src/lib/components/PipelineOptions.svelte

@@ -1,33 +1,42 @@
 <script lang="ts">
-  import type { Fields } from '$lib/types';
-  import { FieldType } from '$lib/types';
-  import InputRange from './InputRange.svelte';
-  import SeedInput from './SeedInput.svelte';
-  import TextArea from './TextArea.svelte';
-  import Checkbox from './Checkbox.svelte';
-  import Selectlist from './Selectlist.svelte';
-  import { pipelineValues } from '$lib/store';
+  import type { Fields } from "$lib/types";
+  import { FieldType } from "$lib/types";
+  import InputRange from "./InputRange.svelte";
+  import SeedInput from "./SeedInput.svelte";
+  import TextArea from "./TextArea.svelte";
+  import Checkbox from "./Checkbox.svelte";
+  import Selectlist from "./Selectlist.svelte";
+  import { pipelineValues } from "$lib/store";
 
-  export let pipelineParams: Fields;
+  let { pipelineParams = $bindable() }: { pipelineParams: Fields } = $props();
 
-  $: advanceOptions = Object.values(pipelineParams)?.filter((e) => e?.hide == true);
-  $: featuredOptions = Object.values(pipelineParams)?.filter((e) => e?.hide !== true);
+  let advanceOptions = $derived(
+    Object.values(pipelineParams)?.filter((e) => e?.hide == true),
+  );
+  let featuredOptions = $derived(
+    Object.values(pipelineParams)?.filter((e) => e?.hide !== true),
+  );
 </script>
 
 <div class="flex flex-col gap-3">
   <div class="grid grid-cols-1 items-center gap-3">
     {#if featuredOptions}
-      {#each featuredOptions as params}
+      {#each featuredOptions as params (params.id)}
         {#if params.field === FieldType.RANGE}
-          <InputRange {params} bind:value={$pipelineValues[params.id]}></InputRange>
+          <InputRange {params} bind:value={$pipelineValues[params.id] as number}
+          ></InputRange>
         {:else if params.field === FieldType.SEED}
-          <SeedInput {params} bind:value={$pipelineValues[params.id]}></SeedInput>
+          <SeedInput {params} bind:value={$pipelineValues[params.id] as number}
+          ></SeedInput>
         {:else if params.field === FieldType.TEXTAREA}
-          <TextArea {params} bind:value={$pipelineValues[params.id]}></TextArea>
+          <TextArea {params} bind:value={$pipelineValues[params.id] as string}
+          ></TextArea>
         {:else if params.field === FieldType.CHECKBOX}
-          <Checkbox {params} bind:value={$pipelineValues[params.id]}></Checkbox>
+          <Checkbox {params} bind:value={$pipelineValues[params.id] as boolean}
+          ></Checkbox>
         {:else if params.field === FieldType.SELECT}
-          <Selectlist {params} bind:value={$pipelineValues[params.id]}></Selectlist>
+          <Selectlist {params} bind:value={$pipelineValues[params.id] as string}
+          ></Selectlist>
         {/if}
       {/each}
     {/if}
@@ -36,22 +45,28 @@
   <details>
     <summary class="cursor-pointer font-medium">Advanced Options</summary>
     <div
-      class="grid grid-cols-1 items-center gap-3 {Object.values(pipelineParams).length > 5
+      class="grid grid-cols-1 items-center gap-3 {Object.values(pipelineParams)
+        .length > 5
         ? 'sm:grid-cols-2'
         : ''}"
     >
       {#if advanceOptions}
-        {#each advanceOptions as params}
+        {#each advanceOptions as params (params.id)}
           {#if params.field === FieldType.RANGE}
-            <InputRange {params} bind:value={$pipelineValues[params.id]}></InputRange>
+            <InputRange {params} bind:value={$pipelineValues[params.id]}
+            ></InputRange>
           {:else if params.field === FieldType.SEED}
-            <SeedInput {params} bind:value={$pipelineValues[params.id]}></SeedInput>
+            <SeedInput {params} bind:value={$pipelineValues[params.id]}
+            ></SeedInput>
           {:else if params.field === FieldType.TEXTAREA}
-            <TextArea {params} bind:value={$pipelineValues[params.id]}></TextArea>
+            <TextArea {params} bind:value={$pipelineValues[params.id]}
+            ></TextArea>
           {:else if params.field === FieldType.CHECKBOX}
-            <Checkbox {params} bind:value={$pipelineValues[params.id]}></Checkbox>
+            <Checkbox {params} bind:value={$pipelineValues[params.id]}
+            ></Checkbox>
           {:else if params.field === FieldType.SELECT}
-            <Selectlist {params} bind:value={$pipelineValues[params.id]}></Selectlist>
+            <Selectlist {params} bind:value={$pipelineValues[params.id]}
+            ></Selectlist>
           {/if}
         {/each}
       {/if}

frontend/src/lib/components/SeedInput.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import type { FieldProps } from '$lib/types';
-  import { onMount } from 'svelte';
-  import Button from './Button.svelte';
-  export let value = 299792458;
-  export let params: FieldProps;
+  import Button from "./Button.svelte";
+  import { onMount } from "svelte";
+  import type { FieldProps } from "$lib/types";
+  let { value = $bindable(), params }: { value: number; params: FieldProps } =
+    $props();
 
-  onMount(() => {
-    value = Number(params?.default ?? '');
-  });
   function randomize() {
     value = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
   }
+  onMount(() => {
+    value = Number(params?.default ?? "");
+  });
 </script>
 
 <div class="grid max-w-md grid-cols-4 items-center gap-3">
@@ -22,5 +22,5 @@
     name="seed"
     class="col-span-2 rounded-md border border-gray-700 p-2 text-right font-light dark:text-black"
   />
-  <Button on:click={randomize}>Rand</Button>
+  <Button onclick={randomize}>Rand</Button>
 </div>

frontend/src/lib/components/Selectlist.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import type { FieldProps } from '$lib/types';
-  import { onMount } from 'svelte';
-  export let value = '';
-  export let params: FieldProps;
+  import { onMount } from "svelte";
+  import type { FieldProps } from "$lib/types";
+  let { value = $bindable(""), params }: { value: string; params: FieldProps } =
+    $props();
+
   onMount(() => {
     value = String(params?.default);
   });
@@ -16,7 +17,7 @@
       id="model-list"
       class="cursor-pointer rounded-md border-2 border-gray-500 p-2 font-light dark:text-black"
     >
-      {#each params.values as model, i}
+      {#each params.values as model, i (model)}
         <option value={model} selected={i === 0}>{model}</option>
       {/each}
     </select>

frontend/src/lib/components/TextArea.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import type { FieldProps } from '$lib/types';
-  import { onMount } from 'svelte';
-  export let value: string;
-  export let params: FieldProps;
+  import { onMount } from "svelte";
+  import type { FieldProps } from "$lib/types";
+  let { value = $bindable(), params }: { value: string; params: FieldProps } =
+    $props();
+
   onMount(() => {
-    value = String(params?.default ?? '');
+    value = String(params?.default ?? "");
   });
 </script>
 

frontend/src/lib/components/VideoInput.svelte

@@ -1,54 +1,66 @@
 <script lang="ts">
-  import 'rvfc-polyfill';
+  import "rvfc-polyfill";
 
-  import { onDestroy, onMount } from 'svelte';
+  import { onDestroy, onMount } from "svelte";
   import {
     mediaStreamStatus,
     MediaStreamStatusEnum,
     onFrameChangeStore,
     mediaStream,
-    mediaDevices
-  } from '$lib/mediaStream';
-  import MediaListSwitcher from './MediaListSwitcher.svelte';
-  import Button from '$lib/components/Button.svelte';
-  import Expand from '$lib/icons/expand.svelte';
+    mediaDevices,
+  } from "$lib/mediaStream";
+  import MediaListSwitcher from "./MediaListSwitcher.svelte";
+  import Button from "$lib/components/Button.svelte";
+  import Expand from "$lib/icons/expand.svelte";
+
+  let { width = 512, height = 512 }: { width: number; height: number } =
+    $props();
 
-  export let width = 512;
-  export let height = 512;
   const size = { width, height };
 
-  let videoEl: HTMLVideoElement;
-  let canvasEl: HTMLCanvasElement;
-  let ctx: CanvasRenderingContext2D;
-  let videoFrameCallbackId: number;
+  let videoEl: HTMLVideoElement | undefined = $state();
+  let canvasEl: HTMLCanvasElement | undefined = $state();
+  let ctx: CanvasRenderingContext2D | undefined = $state();
+  let videoFrameCallbackId: number | undefined = $state();
 
   // ajust the throttle time to your needs
   const THROTTLE = 1000 / 120;
-  let selectedDevice: string = '';
-  let videoIsReady = false;
+  let selectedDevice: string = $state("");
+  let videoIsReady = $state(false);
 
   onMount(() => {
-    ctx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
-    canvasEl.width = size.width;
-    canvasEl.height = size.height;
+    if (canvasEl) {
+      ctx = canvasEl.getContext("2d") as CanvasRenderingContext2D;
+      canvasEl.width = size.width;
+      canvasEl.height = size.height;
+    }
   });
-  $: {
+  $effect(() => {
     console.log(selectedDevice);
-  }
+  });
 
   onDestroy(() => {
-    if (videoFrameCallbackId) videoEl.cancelVideoFrameCallback(videoFrameCallbackId);
+    if (videoFrameCallbackId && videoEl) {
+      videoEl.cancelVideoFrameCallback(videoFrameCallbackId);
+    }
+  });
+
+  $effect(() => {
+    if (videoEl && $mediaStream) {
+      videoEl.srcObject = $mediaStream;
+    }
   });
 
-  $: if (videoEl) {
-    videoEl.srcObject = $mediaStream;
-  }
   let lastMillis = 0;
-  async function onFrameChange(now: DOMHighResTimeStamp, metadata: VideoFrameCallbackMetadata) {
+  async function onFrameChange(now: DOMHighResTimeStamp) {
+    if (!videoEl || !ctx || !canvasEl) return;
+
     if (now - lastMillis < THROTTLE) {
       videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
       return;
     }
+
+    lastMillis = now;
     const videoWidth = videoEl.videoWidth;
     const videoHeight = videoEl.videoHeight;
     // scale down video to fit canvas,  size.width, size.height
@@ -61,24 +73,30 @@
     ctx.drawImage(videoEl, x0, y0, width0, height0);
 
     const blob = await new Promise<Blob>((resolve) => {
-      canvasEl.toBlob(
+      canvasEl?.toBlob(
         (blob) => {
           resolve(blob as Blob);
         },
-        'image/jpeg',
-        1
+        "image/jpeg",
+        1,
       );
     });
     onFrameChangeStore.set({ blob });
     videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
   }
 
-  $: if ($mediaStreamStatus == MediaStreamStatusEnum.CONNECTED && videoIsReady) {
-    videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
-  }
+  $effect(() => {
+    if (
+      $mediaStreamStatus == MediaStreamStatusEnum.CONNECTED &&
+      videoIsReady &&
+      videoEl
+    ) {
+      videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
+    }
+  });
 
   function toggleFullscreen() {
-    if (videoIsReady) {
+    if (videoIsReady && videoEl) {
       if (document.fullscreenElement) {
         document.exitFullscreen();
       } else {
@@ -88,24 +106,28 @@
   }
 </script>
 
-<div class="relative mx-auto max-w-lg overflow-hidden rounded-lg border border-slate-300">
-  <div class="relative z-10 flex aspect-square w-full items-center justify-center object-cover">
+<div
+  class="relative mx-auto max-w-lg overflow-hidden rounded-lg border border-slate-300"
+>
+  <div
+    class="relative z-10 flex aspect-square w-full items-center justify-center object-cover"
+  >
     {#if $mediaDevices.length > 0}
-      <div class="absolute bottom-0 right-0 z-10 flex bg-slate-400 bg-opacity-40">
+      <div class="absolute bottom-0 right-0 z-10 flex bg-slate-400/40">
         <MediaListSwitcher />
         <Button
-          on:click={toggleFullscreen}
-          title={'Expand Fullscreen'}
-          classList={'text-sm ml-auto text-white p-1 shadow-lg rounded-lg opacity-50'}
+          onclick={toggleFullscreen}
+          title="Expand Fullscreen"
+          class="ml-auto rounded-lg p-1 text-sm text-white opacity-50 shadow-lg"
         >
-          <Expand classList={''} />
+          <Expand />
         </Button>
       </div>
     {/if}
     <video
       class="pointer-events-none aspect-square w-full justify-center object-contain"
       bind:this={videoEl}
-      on:loadeddata={() => {
+      onloadeddata={() => {
         videoIsReady = true;
       }}
       playsinline
@@ -113,11 +135,19 @@
       muted
       loop
     ></video>
-    <canvas bind:this={canvasEl} class="absolute left-0 top-0 aspect-square w-full object-cover"
+    <canvas
+      bind:this={canvasEl}
+      class="absolute left-0 top-0 aspect-square w-full object-cover"
     ></canvas>
   </div>
-  <div class="absolute left-0 top-0 flex aspect-square w-full items-center justify-center">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448" class="w-40 p-5 opacity-20">
+  <div
+    class="absolute left-0 top-0 flex aspect-square w-full items-center justify-center"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 448"
+      class="w-40 p-5 opacity-20"
+    >
       <path
         fill="currentColor"
         d="M224 256a128 128 0 1 0 0-256 128 128 0 1 0 0 256zm-45.7 48A178.3 178.3 0 0 0 0 482.3 29.7 29.7 0 0 0 29.7 512h388.6a29.7 29.7 0 0 0 29.7-29.7c0-98.5-79.8-178.3-178.3-178.3h-91.4z"

frontend/src/lib/components/Warning.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-  export let message: string = '';
+  let { message = $bindable() }: { message: string } = $props();
 
-  let timeout = 0;
-  $: if (message !== '') {
-    console.log('message', message);
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      message = '';
-    }, 5000);
-  }
+  let timeout = $state(0);
+  $effect(() => {
+    if (message !== "") {
+      console.log("message", message);
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        message = "";
+      }, 5000);
+    }
+  });
 </script>
 
 {#if message}
@@ -16,8 +18,8 @@
     <button
       type="button"
       class="w-full"
-      on:click={() => (message = '')}
-      on:keydown={(e) => e.key === 'Enter' && (message = '')}
+      onclick={() => (message = "")}
+      onkeydown={(e) => e.key === "Enter" && (message = "")}
     >
       <div class="rounded bg-red-800 p-4 text-white">
         {message}

frontend/src/lib/icons/aspect.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
-  export let classList: string = '';
+  let props = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="16px" class={classList}>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 448 512"
+  height="16px"
+  {...props}
+>
   <path
     fill="currentColor"
     d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"

frontend/src/lib/icons/expand.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
-  export let classList: string = '';
+  let props = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="1em" class={classList}>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+  height="1em"
+  {...props}
+>
   <path
     fill="currentColor"
     d="M.3 89.5C.1 91.6 0 93.8 0 96V224 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64V224 96c0-35.3-28.7-64-64-64H64c-2.2 0-4.4 .1-6.5 .3c-9.2 .9-17.8 3.8-25.5 8.2C21.8 46.5 13.4 55.1 7.7 65.5c-3.9 7.3-6.5 15.4-7.4 24zM48 224H464l0 192c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16l0-192z"

frontend/src/lib/icons/floppy.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
-  export let classList: string;
+  let props = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" class={classList}>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="1em"
+  viewBox="0 0 448 512"
+  {...props}
+>
   <path
     fill="currentColor"
     d="M48 96v320a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V170.5a16 16 0 0 0-4.7-11.3l33.9-33.9a64 64 0 0 1 18.7 45.3V416a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V96a64 64 0 0 1 64-64h245.5a64 64 0 0 1 45.3 18.7l74.5 74.5-33.9 33.9-74.6-74.4-.8-.8V184a24 24 0 0 1-24 24H104a24 24 0 0 1-24-24V80H64a16 16 0 0 0-16 16zm80-16v80h144V80H128zm32 240a64 64 0 1 1 128 0 64 64 0 1 1-128 0z"

frontend/src/lib/icons/screen.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
-  export let classList: string = '';
+  let props = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" height="16px" class={classList}>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 -32 576 576"
+  height="16px"
+  {...props}
+>
   <path
     fill="currentColor"
     d="M64 0A64 64 0 0 0 0 64v288a64 64 0 0 0 64 64h176l-10.7 32H160a32 32 0 1 0 0 64h256a32 32 0 1 0 0-64h-69.3L336 416h176a64 64 0 0 0 64-64V64a64 64 0 0 0-64-64H64zm448 64v288H64V64h448z"

frontend/src/lib/icons/spinner.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
-  export let classList: string;
+  let props = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" class={classList}>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="1em"
+  viewBox="0 0 512 512"
+  {...props}
+>
   <path
     fill="currentColor"
     d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"

frontend/src/lib/lcmLive.ts

@@ -1,13 +1,13 @@
-import { get, writable } from 'svelte/store';
+import { get, writable } from "svelte/store";
 
 export enum LCMLiveStatus {
-  CONNECTED = 'connected',
-  DISCONNECTED = 'disconnected',
-  CONNECTING = 'connecting',
-  WAIT = 'wait',
-  SEND_FRAME = 'send_frame',
-  TIMEOUT = 'timeout',
-  ERROR = 'error'
+  CONNECTED = "connected",
+  DISCONNECTED = "disconnected",
+  CONNECTING = "connecting",
+  WAIT = "wait",
+  SEND_FRAME = "send_frame",
+  TIMEOUT = "timeout",
+  ERROR = "error",
 }
 
 const initStatus: LCMLiveStatus = LCMLiveStatus.DISCONNECTED;
@@ -16,23 +16,23 @@ export const lcmLiveStatus = writable<LCMLiveStatus>(initStatus);
 export const streamId = writable<string | null>(null);
 
 // WebSocket connection
-let websocket: WebSocket | null = null;
-// Flag to track intentional connection closure
-let intentionalClosure = false;
+let websocket: WebSocket;
 
 // Register browser unload event listener to properly close WebSockets
-if (typeof window !== 'undefined') {
-  window.addEventListener('beforeunload', () => {
-    // Mark any closure during page unload as intentional
-    intentionalClosure = true;
+if (typeof window !== "undefined") {
+  window.addEventListener("beforeunload", () => {
     // Close the WebSocket properly if it exists
     if (websocket && websocket.readyState === WebSocket.OPEN) {
-      websocket.close(1000, 'Page unload');
+      websocket.close(1000, "Page unload");
     }
   });
 }
 export const lcmLiveActions = {
-  async start(getSreamdata: () => any[]) {
+  async start(
+    getSreamdata: () =>
+      | [Record<string, unknown>]
+      | [Record<string, unknown>, Blob],
+  ) {
     return new Promise((resolve, reject) => {
       try {
         // Set connecting status immediately
@@ -40,7 +40,7 @@ export const lcmLiveActions = {
 
         const userId = crypto.randomUUID();
         const websocketURL = `${
-          window.location.protocol === 'https:' ? 'wss' : 'ws'
+          window.location.protocol === "https:" ? "wss" : "ws"
         }:${window.location.host}/api/ws/${userId}`;
 
         // Close any existing connection first
@@ -53,22 +53,24 @@ export const lcmLiveActions = {
         // Set a connection timeout
         const connectionTimeout = setTimeout(() => {
           if (websocket && websocket.readyState !== WebSocket.OPEN) {
-            console.error('WebSocket connection timeout');
+            console.error("WebSocket connection timeout");
             lcmLiveStatus.set(LCMLiveStatus.ERROR);
             streamId.set(null);
-            reject(new Error('Connection timeout. Please try again.'));
+            reject(new Error("Connection timeout. Please try again."));
             websocket.close();
           }
         }, 10000); // 10 second timeout
 
         websocket.onopen = () => {
           clearTimeout(connectionTimeout);
-          console.log('Connected to websocket');
+          console.log("Connected to websocket");
         };
 
         websocket.onclose = (event) => {
           clearTimeout(connectionTimeout);
-          console.log(`Disconnected from websocket: ${event.code} ${event.reason}`);
+          console.log(
+            `Disconnected from websocket: ${event.code} ${event.reason}`,
+          );
 
           // Only change status if we're not in ERROR state (which would mean we already handled the error)
           if (get(lcmLiveStatus) !== LCMLiveStatus.ERROR) {
@@ -77,71 +79,73 @@ export const lcmLiveActions = {
 
           // If connection was never established (close without open)
           if (event.code === 1006 && get(streamId) === null) {
-            reject(new Error('Cannot connect to server. Please try again later.'));
+            reject(
+              new Error("Cannot connect to server. Please try again later."),
+            );
           }
         };
 
         websocket.onerror = (err) => {
           clearTimeout(connectionTimeout);
-          console.error('WebSocket error:', err);
+          console.error("WebSocket error:", err);
           lcmLiveStatus.set(LCMLiveStatus.ERROR);
           streamId.set(null);
-          reject(new Error('Connection error. Please try again.'));
+          reject(new Error("Connection error. Please try again."));
         };
 
         websocket.onmessage = (event) => {
           try {
             const data = JSON.parse(event.data);
             switch (data.status) {
-              case 'connected':
+              case "connected":
                 lcmLiveStatus.set(LCMLiveStatus.CONNECTED);
                 streamId.set(userId);
-                resolve({ status: 'connected', userId });
+                resolve({ status: "connected", userId });
                 break;
-              case 'send_frame':
+              case "send_frame":
                 lcmLiveStatus.set(LCMLiveStatus.SEND_FRAME);
                 try {
                   const streamData = getSreamdata();
                   // Send as an object, not a string, to use the proper handling in the send method
-                  this.send({ status: 'next_frame' });
+                  this.send({ status: "next_frame" });
                   for (const d of streamData) {
                     this.send(d);
                   }
                 } catch (error) {
-                  console.error('Error sending frame data:', error);
+                  console.error("Error sending frame data:", error);
                 }
                 break;
-              case 'wait':
+              case "wait":
                 lcmLiveStatus.set(LCMLiveStatus.WAIT);
                 break;
-              case 'timeout':
-                console.log('Session timeout');
+              case "timeout":
+                console.log("Session timeout");
                 lcmLiveStatus.set(LCMLiveStatus.TIMEOUT);
                 streamId.set(null);
-                reject(new Error('Session timeout. Please restart.'));
+                reject(new Error("Session timeout. Please restart."));
                 break;
-              case 'error':
-                console.error('Server error:', data.message);
+              case "error":
+                console.error("Server error:", data.message);
                 lcmLiveStatus.set(LCMLiveStatus.ERROR);
                 streamId.set(null);
-                reject(new Error(data.message || 'Server error occurred'));
+                reject(new Error(data.message || "Server error occurred"));
                 break;
               default:
-                console.log('Unknown message status:', data.status);
+                console.log("Unknown message status:", data.status);
             }
           } catch (error) {
-            console.error('Error handling websocket message:', error);
+            console.error("Error handling websocket message:", error);
           }
         };
       } catch (err) {
-        console.error('Error initializing websocket:', err);
+        console.error("Error initializing websocket:", err);
         lcmLiveStatus.set(LCMLiveStatus.ERROR);
         streamId.set(null);
         reject(err);
       }
     });
   },
-  send(data: Blob | { [key: string]: any }) {
+  send(data: Blob | Record<string, unknown>) {
     try {
       if (websocket && websocket.readyState === WebSocket.OPEN) {
         if (data instanceof Blob) {
@@ -151,8 +155,8 @@ export const lcmLiveActions = {
         }
       } else {
         const readyStateText = websocket
-          ? ['CONNECTING', 'OPEN', 'CLOSING', 'CLOSED'][websocket.readyState]
-          : 'null';
+          ? ["CONNECTING", "OPEN", "CLOSING", "CLOSED"][websocket.readyState]
+          : "null";
         console.warn(`WebSocket not ready for sending: ${readyStateText}`);
 
         // If WebSocket is closed unexpectedly, set status to disconnected
@@ -162,20 +166,24 @@ export const lcmLiveActions = {
         }
       }
     } catch (error) {
-      console.error('Error sending data through WebSocket:', error);
+      console.error("Error sending data through WebSocket:", error);
       // Handle WebSocket error by forcing disconnection
       this.stop();
     }
   },
 
-  async reconnect(getSreamdata: () => any[]) {
+  async reconnect(
+    getSreamdata: () =>
+      | [Record<string, unknown>]
+      | [Record<string, unknown>, Blob],
+  ) {
     try {
       await this.stop();
       // Small delay to ensure clean disconnection before reconnecting
       await new Promise((resolve) => setTimeout(resolve, 500));
       return await this.start(getSreamdata);
     } catch (error) {
-      console.error('Reconnection failed:', error);
+      console.error("Reconnection failed:", error);
       throw error;
     }
   },
@@ -188,21 +196,21 @@ export const lcmLiveActions = {
         if (websocket.readyState !== WebSocket.CLOSED) {
           // Set up onclose handler to clean up only
           websocket.onclose = () => {
-            console.log('WebSocket closed cleanly during stop()');
+            console.log("WebSocket closed cleanly during stop()");
           };
 
           // Set up onerror to be silent during intentional closure
           websocket.onerror = () => {};
 
-          websocket.close(1000, 'Client initiated disconnect');
+          websocket.close(1000, "Client initiated disconnect");
         }
       }
     } catch (error) {
-      console.error('Error during WebSocket closure:', error);
+      console.error("Error during WebSocket closure:", error);
     } finally {
       // Always clean up references
       websocket = null;
       streamId.set(null);
     }
-  }
+  },
 };

frontend/src/lib/mediaStream.ts

@@ -1,12 +1,14 @@
-import { get, writable, type Writable } 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() });
+export const onFrameChangeStore: Writable<{ blob: Blob }> = writable({
+  blob: new Blob(),
+});
 
 export const mediaDevices = writable<MediaDeviceInfo[]>([]);
 export const mediaStreamStatus = writable(MediaStreamStatusEnum.INIT);
@@ -18,7 +20,9 @@ export const mediaStreamActions = {
     await navigator.mediaDevices
       .enumerateDevices()
       .then((devices) => {
-        const cameras = devices.filter((device) => device.kind === 'videoinput');
+        const cameras = devices.filter(
+          (device) => device.kind === "videoinput",
+        );
         mediaDevices.set(cameras);
       })
       .catch((err) => {
@@ -30,13 +34,13 @@ export const mediaStreamActions = {
       audio: false,
       video: {
         width: {
-          ideal: BASE_HEIGHT * aspectRatio
+          ideal: BASE_HEIGHT * aspectRatio,
         },
         height: {
-          ideal: BASE_HEIGHT
+          ideal: BASE_HEIGHT,
         },
-        deviceId: mediaDevicedID
-      }
+        deviceId: mediaDevicedID,
+      },
     };
 
     await navigator.mediaDevices
@@ -54,34 +58,35 @@ export const mediaStreamActions = {
   async startScreenCapture() {
     const displayMediaOptions = {
       video: {
-        displaySurface: 'window'
+        displaySurface: "window",
       },
       audio: false,
-      surfaceSwitching: 'include'
+      surfaceSwitching: "include",
     };
 
     let captureStream = null;
 
     try {
-      captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+      captureStream =
+        await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
       const videoTrack = captureStream.getVideoTracks()[0];
 
-      console.log('Track settings:');
+      console.log("Track settings:");
       console.log(JSON.stringify(videoTrack.getSettings(), null, 2));
-      console.log('Track constraints:');
+      console.log("Track constraints:");
       console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
       mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
       mediaStream.set(captureStream);
 
       const capabilities = videoTrack.getCapabilities();
       const aspectRatio = capabilities.aspectRatio;
-      console.log('Aspect Ratio Constraints:', aspectRatio);
+      console.log("Aspect Ratio Constraints:", aspectRatio);
     } catch (err) {
       console.error(err);
     }
   },
   async switchCamera(mediaDevicedID: string, aspectRatio: number) {
-    console.log('Switching camera');
+    console.log("Switching camera");
     if (get(mediaStreamStatus) !== MediaStreamStatusEnum.CONNECTED) {
       return;
     }
@@ -89,15 +94,15 @@ export const mediaStreamActions = {
       audio: false,
       video: {
         width: {
-          ideal: BASE_HEIGHT * aspectRatio
+          ideal: BASE_HEIGHT * aspectRatio,
         },
         height: {
-          ideal: BASE_HEIGHT
+          ideal: BASE_HEIGHT,
         },
-        deviceId: mediaDevicedID
-      }
+        deviceId: mediaDevicedID,
+      },
     };
-    console.log('Switching camera', constraints);
+    console.log("Switching camera", constraints);
     await navigator.mediaDevices
       .getUserMedia(constraints)
       .then((stream) => {
@@ -114,5 +119,5 @@ export const mediaStreamActions = {
     });
     mediaStreamStatus.set(MediaStreamStatusEnum.DISCONNECTED);
     mediaStream.set(null);
-  }
+  },
 };

frontend/src/lib/store.ts

@@ -1,14 +1,22 @@
-import { derived, get, writable, type Readable, type Writable } 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(
+export type PipelineValues = Record<string, string | boolean | number>;
+
+export const pipelineValues: Writable<PipelineValues> = writable({});
+export const deboucedPipelineValues: Readable<PipelineValues> = derived(
   pipelineValues,
   ($pipelineValues, set) => {
     const debounced = setTimeout(() => {
       set($pipelineValues);
     }, 100);
     return () => clearTimeout(debounced);
-  }
+  },
 );
 
 export const getPipelineValues = () => get(pipelineValues);

frontend/src/lib/types.ts

@@ -1,14 +1,14 @@
 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 {

frontend/src/lib/utils.ts

@@ -1,40 +1,40 @@
-import * as piexif from 'piexifjs';
+import * as piexif from "piexifjs";
 
-interface IImageInfo {
+export interface IImageInfo {
   prompt?: string;
   negative_prompt?: string;
   seed?: number;
   guidance_scale?: number;
 }
+
 export enum windowType {
-  image = 'image',
-  video = 'video'
+  image = "image",
 }
 
 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';
+    const zeroth: { [key: string]: string | number } = {};
+    const exif: { [key: string]: string | number } = {};
+    const gps: { [key: string]: string | number } = {};
+    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';
+      "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 exifObj = { "0th": zeroth, Exif: exif, GPS: gps };
     const exifBytes = piexif.dump(exifObj);
 
-    const canvas = document.createElement('canvas');
+    const canvas = document.createElement("canvas");
     canvas.width = imageEl.naturalWidth;
     canvas.height = imageEl.naturalHeight;
-    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
     ctx.drawImage(imageEl, 0, 0);
-    const dataURL = canvas.toDataURL('image/jpeg');
+    const dataURL = canvas.toDataURL("image/jpeg");
     const withExif = piexif.insert(exifBytes, dataURL);
 
-    const a = document.createElement('a');
+    const a = document.createElement("a");
     a.href = withExif;
     a.download = `lcm_txt_2_img${Date.now()}.png`;
     a.click();
@@ -43,11 +43,11 @@ export function snapImage(imageEl: HTMLImageElement, info: IImageInfo) {
   }
 }
 
-export function expandWindow(streamURL: string, type: windowType = windowType.image) {
+export function expandWindow(streamURL: string) {
   const newWindow = window.open(
-    '',
-    '_blank',
-    'width=1024,height=1024,scrollbars=0,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=0'
+    "",
+    "_blank",
+    "width=1024,height=1024,scrollbars=0,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=0",
   ) as Window;
 
   const html = `
@@ -87,11 +87,11 @@ export function expandWindow(streamURL: string, type: windowType = windowType.im
       `;
   newWindow.document.write(html);
 
-  const img = newWindow.document.createElement('img');
+  const img = newWindow.document.createElement("img");
   img.src = streamURL;
-  img.style.width = '100%';
-  img.style.height = '100%';
-  img.style.objectFit = 'contain';
+  img.style.width = "100%";
+  img.style.height = "100%";
+  img.style.objectFit = "contain";
   newWindow.document.body.appendChild(img);
 
   return newWindow;

frontend/src/piexifjs.d.ts

@@ -1,4 +1,4 @@
-declare module 'piexifjs' {
+declare module "piexifjs" {
   export const ImageIFD: {
     Make: number;
     ImageDescription: number;
@@ -7,6 +7,6 @@ declare module 'piexifjs' {
   export const ExifIFD: {
     DateTimeOriginal: number;
   };
-  export function dump(exifObj: any): any;
-  export function insert(exifBytes: any, dataURL: string): string;
+  export function dump(exifObj: Record<string, unknown>): string;
+  export function insert(exifBytes: string, dataURL: string): string;
 }

frontend/src/routes/+layout.svelte

@@ -1,5 +1,7 @@
-<script>
-  import '../app.css';
+<script lang="ts">
+  import "../app.css";
+
+  let { children } = $props();
 </script>
 
-<slot />
+{@render children()}

frontend/src/routes/+page.svelte

@@ -1,38 +1,40 @@
 <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 = '';
+  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 | undefined = $state();
+  let pipelineInfo: PipelineInfo | undefined = $state();
+  let pageContent: string | undefined = $state();
+  let isImageMode: boolean = $state(false);
+  let maxQueueSize: number = $state(0);
+  let currentQueueSize: number = $state(0);
+  let disabled: boolean = $state(false);
+  let queueCheckerRunning: boolean = $state(false);
+  let warningMessage: string = $state("");
+
   onMount(() => {
     getSettings();
   });
 
   async function getSettings() {
-    const settings = await fetch('/api/settings').then((r) => r.json());
+    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;
+    isImageMode = pipelineInfo?.input_mode?.default === PipelineMode.IMAGE;
     maxQueueSize = settings.max_queue_size;
     pageContent = settings.page_content;
-    console.log(pipelineParams);
     toggleQueueChecker(true);
+    console.log(pipelineParams);
   }
   function toggleQueueChecker(start: boolean) {
     queueCheckerRunning = start && maxQueueSize > 0;
@@ -44,12 +46,13 @@
     if (!queueCheckerRunning) {
       return;
     }
-    const data = await fetch('/api/queue').then((r) => r.json());
+    const data = await fetch("/api/queue").then((r) => r.json());
     currentQueueSize = data.queue_size;
     setTimeout(getQueueSize, 10000);
   }
-
-  function getSreamdata() {
+  function getSreamdata():
+    | [Record<string, unknown>]
+    | [Record<string, unknown>, Blob] {
     if (isImageMode) {
       return [getPipelineValues(), $onFrameChangeStore?.blob];
     } else {
@@ -57,19 +60,20 @@
     }
   }
 
-  $: isLCMRunning =
-    $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED && $lcmLiveStatus !== LCMLiveStatus.ERROR;
-  $: isConnecting = $lcmLiveStatus === LCMLiveStatus.CONNECTING;
+  const isLCMRunning = $derived(
+    $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED &&
+      $lcmLiveStatus !== LCMLiveStatus.ERROR,
+  );
+  const isConnecting = $derived($lcmLiveStatus === LCMLiveStatus.CONNECTING);
 
-  $: {
+  $effect(() => {
     // Set warning messages based on lcmLiveStatus
     if ($lcmLiveStatus === LCMLiveStatus.TIMEOUT) {
-      warningMessage = 'Session timed out. Please try again.';
+      warningMessage = "Session timed out. Please try again.";
     } else if ($lcmLiveStatus === LCMLiveStatus.ERROR) {
-      warningMessage = 'Connection error occurred. Please try again.';
+      warningMessage = "Connection error occurred. Please try again.";
     }
-  }
-  let disabled = false;
+  });
   async function toggleLcmLive() {
     try {
       if (!isLCMRunning) {
@@ -78,7 +82,7 @@
         }
 
         // Clear any previous warning messages
-        warningMessage = '';
+        warningMessage = "";
         disabled = true;
 
         try {
@@ -108,8 +112,9 @@
         }
       }
     } catch (e) {
-      console.error('Error in toggleLcmLive:', e);
-      warningMessage = e instanceof Error ? e.message : 'An unknown error occurred';
+      console.error("Error in toggleLcmLive:", e);
+      warningMessage =
+        e instanceof Error ? e.message : "An unknown error occurred";
       disabled = false;
       toggleQueueChecker(true);
     }
@@ -119,7 +124,7 @@
   async function reconnect() {
     try {
       disabled = true;
-      warningMessage = 'Reconnecting...';
+      warningMessage = "Reconnecting...";
 
       if (isImageMode) {
         await mediaStreamActions.stop();
@@ -128,10 +133,10 @@
       }
 
       await lcmLiveActions.reconnect(getSreamdata);
-      warningMessage = '';
+      warningMessage = "";
       toggleQueueChecker(false);
     } catch (e) {
-      warningMessage = e instanceof Error ? e.message : 'Reconnection failed';
+      warningMessage = e instanceof Error ? e.message : "Reconnection failed";
       toggleQueueChecker(true);
     } finally {
       disabled = false;
@@ -149,12 +154,16 @@
   <Warning bind:message={warningMessage}></Warning>
   <article class="text-center">
     {#if pageContent}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
       {@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}.
+        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"
@@ -165,7 +174,11 @@
 
     {#if $lcmLiveStatus === LCMLiveStatus.ERROR}
       <p class="mt-2 text-sm">
-        <button class="text-blue-500 underline hover:no-underline" on:click={reconnect} {disabled}>
+        <button
+          class="text-blue-500 underline hover:no-underline"
+          onclick={reconnect}
+          {disabled}
+        >
           Try reconnecting
         </button>
       </p>
@@ -181,11 +194,11 @@
           ></VideoInput>
         </div>
       {/if}
-      <div class={isImageMode ? 'col-span-2 sm:col-start-3' : 'col-span-4'}>
+      <div class={isImageMode ? "col-span-2 sm:col-start-3" : "col-span-4"}>
         <ImagePlayer />
       </div>
       <div class="sm:col-span-4 sm:row-start-2">
-        <Button on:click={toggleLcmLive} {disabled} classList={'text-lg my-1 p-2'}>
+        <Button onclick={toggleLcmLive} {disabled} class="my-1 p-2 text-lg">
           {#if isConnecting}
             Connecting...
           {:else if isLCMRunning}
@@ -200,13 +213,14 @@
   {:else}
     <!-- loading -->
     <div class="flex items-center justify-center gap-3 py-48 text-2xl">
-      <Spinner classList={'animate-spin opacity-50'}></Spinner>
+      <Spinner class="animate-spin opacity-50"></Spinner>
       <p>Loading...</p>
     </div>
   {/if}
 </main>
 
 <style lang="postcss">
+  @reference "tailwindcss";
   :global(html) {
     @apply text-black dark:bg-gray-900 dark:text-white;
   }

frontend/svelte.config.js

@@ -1,18 +1,17 @@
-import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import adapter from "@sveltejs/adapter-static";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
-/** @type {import('@sveltejs/kit').Config} */
 const config = {
-  preprocess: vitePreprocess({ postcss: true }),
+  preprocess: vitePreprocess(),
   kit: {
     adapter: adapter({
-      pages: 'public',
-      assets: 'public',
+      pages: "public",
+      assets: "public",
       fallback: undefined,
       precompress: false,
-      strict: true
-    })
-  }
+      strict: true,
+    }),
+  },
 };
 
 export default config;

frontend/tailwind.config.js

@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{html,js,svelte,ts}', '../pipelines/**/*.py'],
+  content: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
-    extend: {}
+    extend: {},
   },
-  plugins: []
+  plugins: [import("@tailwindcss/typography")],
 };

frontend/tsconfig.json

@@ -1,17 +1,19 @@
 {
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true
-  }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-  //
-  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-  // from the referenced tsconfig.json - TypeScript does not merge them in
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
 }

frontend/vite.config.ts

@@ -1,15 +1,16 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { sveltekit } from "@sveltejs/kit/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [tailwindcss(), sveltekit()],
   server: {
     proxy: {
-      '/api': 'http://localhost:7860',
-      '/api/ws': {
-        target: 'ws://localhost:7860',
-        ws: true
-      }
-    }
-  }
+      "/api": "http://localhost:7860",
+      "/api/ws": {
+        target: "ws://localhost:7860",
+        ws: true,
+      },
+    },
+  },
 });