prompt debounce (#150)

Author: ryanontheinside

demo/realtime-img2img/frontend/src/lib/components/BlendingControl.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, onDestroy } from 'svelte';
   import Button from './Button.svelte';
 
   export let promptBlendingConfig: any = null;
@@ -27,6 +27,21 @@
   // UI state
   let activeTab: 'prompts' | 'seeds' = 'prompts';
 
+  // Debounce timers
+  let promptDebounceTimer: number | null = null;
+  let seedDebounceTimer: number | null = null;
+  const DEBOUNCE_DELAY = 300; // milliseconds
+
+  // Cleanup timers on component destroy
+  onDestroy(() => {
+    if (promptDebounceTimer !== null) {
+      clearTimeout(promptDebounceTimer);
+    }
+    if (seedDebounceTimer !== null) {
+      clearTimeout(seedDebounceTimer);
+    }
+  });
+
   // Helper functions for config hashing
   function getPromptConfigHash(config: any, current: string): string {
     return JSON.stringify(config) + '|' + current;
@@ -146,8 +161,18 @@
 
   function updatePromptText(index: number, value: string) {
     promptList[index][0] = value;
-    promptList = [...promptList];
-    updatePromptBlendingWithoutRefresh();
+    hasPendingPromptChanges = true;
+    
+    // Clear existing timer
+    if (promptDebounceTimer !== null) {
+      clearTimeout(promptDebounceTimer);
+    }
+    
+    // Set new debounced timer
+    promptDebounceTimer = setTimeout(() => {
+      updatePromptBlendingWithoutRefresh();
+      promptDebounceTimer = null;
+    }, DEBOUNCE_DELAY) as unknown as number;
   }
 
   function updatePromptWeight(index: number, value: number) {
@@ -225,8 +250,18 @@
 
   function updateSeedValue(index: number, value: number) {
     seedList[index][0] = value;
-    seedList = [...seedList];
-    updateSeedBlendingWithoutRefresh();
+    hasPendingSeedChanges = true;
+    
+    // Clear existing timer
+    if (seedDebounceTimer !== null) {
+      clearTimeout(seedDebounceTimer);
+    }
+    
+    // Set new debounced timer
+    seedDebounceTimer = setTimeout(() => {
+      updateSeedBlendingWithoutRefresh();
+      seedDebounceTimer = null;
+    }, DEBOUNCE_DELAY) as unknown as number;
   }
 
   function updateSeedWeight(index: number, value: number) {
@@ -370,7 +405,7 @@
 
             <textarea
               bind:value={promptList[index][0]}
-              on:input={() => updatePromptText(index, promptList[index][0])}
+              on:input={(e) => updatePromptText(index, e.currentTarget.value)}
               placeholder="Enter prompt..."
               rows="2"
               class="w-full p-2 border rounded resize-none dark:bg-gray-600 dark:border-gray-500"
@@ -463,7 +498,7 @@
               <input
                 type="number"
                 bind:value={seedList[index][0]}
-                on:input={() => updateSeedValue(index, seedList[index][0])}
+                on:input={(e) => updateSeedValue(index, Number(e.currentTarget.value))}
                 min="1"
                 max="999999"
                 class="flex-1 p-2 border rounded dark:bg-gray-600 dark:border-gray-500"

demo/realtime-img2img/frontend/src/lib/components/TextArea.svelte

@@ -1,13 +1,46 @@
 <script lang="ts">
   import type { FieldProps } from '$lib/types';
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   export let value: string;
   export let params: FieldProps;
+  
+  let localValue: string = value;
+  let debounceTimer: number | null = null;
+  const DEBOUNCE_DELAY = 300;
+  
   onMount(() => {
     if (!value || value === '') {
       value = String(params?.default ?? '');
+      localValue = value;
     }
   });
+  
+  onDestroy(() => {
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer);
+    }
+  });
+  
+  // Update localValue when external value changes (but not during typing)
+  $: if (value !== localValue && debounceTimer === null) {
+    localValue = value;
+  }
+  
+  function handleInput(event: Event) {
+    const target = event.currentTarget as HTMLTextAreaElement;
+    localValue = target.value;
+    
+    // Clear existing timer
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer);
+    }
+    
+    // Set new debounced timer to update parent value
+    debounceTimer = setTimeout(() => {
+      value = localValue;
+      debounceTimer = null;
+    }, DEBOUNCE_DELAY) as unknown as number;
+  }
 </script>
 
 <div class="">
@@ -19,7 +52,8 @@
       class="mx-1 w-full px-3 py-2 outline-none"
       title={params?.title}
       placeholder="Add your prompt here..."
-      bind:value
+      value={localValue}
+      on:input={handleInput}
     ></textarea>
   </div>
 </div>