debouce

frontend/src/lib/store.ts

@@ -1,7 +1,15 @@
 
-import {
-    writable, type Writable, get
-} from 'svelte/store';
+import { derived, writable, get, type Writable, type Readable } 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 pipelineValues = writable({} as Record<string, any>);
 export const getPipelineValues = () => get(pipelineValues);

frontend/src/routes/+page.svelte

@@ -15,7 +15,7 @@
     onFrameChangeStore,
     MediaStreamStatusEnum
   } from '$lib/mediaStream';
-  import { getPipelineValues, pipelineValues } from '$lib/store';
+  import { getPipelineValues, deboucedPipelineValues } from '$lib/store';
 
   let pipelineParams: FieldProps[];
   let pipelineInfo: PipelineInfo;
@@ -49,7 +49,7 @@
   // send only prompt if text mode
   $: {
     if ($lcmLiveStatus === LCMLiveStatus.CONNECTED) {
-      lcmLiveActions.send($pipelineValues);
+      lcmLiveActions.send($deboucedPipelineValues);
     }
   }