From 3a7b21e3e7790cffc145cd62b222a318c1a43791 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Sat, 28 Mar 2026 17:53:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20LoRA=20=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E5=92=8C=E5=8F=8D=E9=A6=88=E6=8E=A7=E5=88=B6=E5=99=A8?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE=E9=9B=86=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E5=92=8C=E7=9B=AE=E6=A0=87=E6=A8=A1=E5=9E=8B=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/types/models.ts                       | 11 ++++
 src/lib/utils/form-save.ts                    | 55 ++++++++++++++++++
 .../dataset/meta-form/DatasetName.svelte      | 57 +++++++++++++++++--
 .../dataset/meta-form/SelectModel.svelte      | 40 ++++---------
 4 files changed, 131 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/utils/form-save.ts

diff --git a/src/lib/types/models.ts b/src/lib/types/models.ts
index 0586744..e0e334e 100644
--- a/src/lib/types/models.ts
+++ b/src/lib/types/models.ts
@@ -12,3 +12,14 @@ export const ModelChoices: Option<TargetModels>[] = [
   { label: 'Flux', value: 'flux' },
   { label: 'Flux 2', value: 'flux2' },
 ]
+
+export type LoRATypes = 'char' | 'clothing' | 'style' | 'concept' | 'scene' | 'other';
+
+export const LoRATypeChoices: Option<LoRATypes>[] = [
+  { label: 'Character', value: 'char' },
+  { label: 'Clothing', value: 'clothing' },
+  { label: 'Style', value: 'style' },
+  { label: 'Concept', value: 'concept' },
+  { label: 'Scene', value: 'scene' },
+  { label: 'Other', value: 'other' },
+]
diff --git a/src/lib/utils/form-save.ts b/src/lib/utils/form-save.ts
new file mode 100644
index 0000000..d735f65
--- /dev/null
+++ b/src/lib/utils/form-save.ts
@@ -0,0 +1,55 @@
+export type SaveFeedbackState = 'idle' | 'updated' | 'not-updated';
+
+export function createSaveFeedbackController(
+  setState: (state: SaveFeedbackState) => void,
+  resetDelayMs = 2000,
+) {
+  let feedbackTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const resetLater = () => {
+    if (feedbackTimer) {
+      clearTimeout(feedbackTimer);
+    }
+
+    feedbackTimer = setTimeout(() => {
+      setState('idle');
+    }, resetDelayMs);
+  };
+
+  return {
+    markUpdated() {
+      setState('updated');
+      resetLater();
+    },
+    markNotUpdated() {
+      setState('not-updated');
+      resetLater();
+    },
+    dispose() {
+      if (feedbackTimer) {
+        clearTimeout(feedbackTimer);
+      }
+    },
+  };
+}
+
+export function createDebouncedTrigger(callback: () => void, delayMs: number) {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  return {
+    trigger() {
+      if (timer) {
+        clearTimeout(timer);
+      }
+
+      timer = setTimeout(() => {
+        callback();
+      }, delayMs);
+    },
+    cancel() {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    },
+  };
+}
diff --git a/src/routes/dataset/meta-form/DatasetName.svelte b/src/routes/dataset/meta-form/DatasetName.svelte
index 6ceec5a..720f90b 100644
--- a/src/routes/dataset/meta-form/DatasetName.svelte
+++ b/src/routes/dataset/meta-form/DatasetName.svelte
@@ -1,16 +1,65 @@
 <script lang="ts">
-import { activeDatasetMeta } from '$lib/stores/dataset';
-import { onMount } from 'svelte';
+import { activeDatasetMeta, updateActiveDatasetMeta } from '$lib/stores/dataset';
+import {
+  createDebouncedTrigger,
+  createSaveFeedbackController,
+  type SaveFeedbackState,
+} from '$lib/utils/form-save';
+import { onDestroy, onMount } from 'svelte';
 import { get } from 'svelte/store';
 
 let name = $state('');
+let saveFeedback = $state<SaveFeedbackState>('idle');
+
+const feedback = createSaveFeedbackController((state) => {
+  saveFeedback = state;
+});
 
 onMount(() => {
   name = get(activeDatasetMeta)?.name ?? '';
 });
+
+onDestroy(() => {
+  saveLater.cancel();
+  feedback.dispose();
+});
+
+async function saveDatasetName(value: string) {
+  const nextName = value.trim();
+
+  if (!nextName) {
+    feedback.markNotUpdated();
+    return;
+  }
+
+  try {
+    await updateActiveDatasetMeta({ name: nextName });
+    feedback.markUpdated();
+  } catch (error) {
+    console.error('Failed to save dataset name:', error);
+    feedback.markNotUpdated();
+  }
+}
+
+const saveLater = createDebouncedTrigger(() => {
+  void saveDatasetName(name);
+}, 5000);
+
+function saveNameDelayed() {
+  saveLater.trigger();
+}
 </script>
 
-<label class="input w-fit in-focus-within:outline-0">
+<label
+  class={[
+    'input w-fit in-focus-within:outline-0 transition-colors duration-300 ease-out',
+    saveFeedback === 'updated' && 'border-green-500',
+    saveFeedback === 'not-updated' && 'border-red-500',
+  ]}>
   <span class="label min-w-[10em]">Dataset Name</span>
-  <input type="text" bind:value={name} class="min-w-[20em] focus:outline-0" />
+  <input
+    type="text"
+    bind:value={name}
+    oninput={saveNameDelayed}
+    class="min-w-[20em] focus:outline-0" />
 </label>
diff --git a/src/routes/dataset/meta-form/SelectModel.svelte b/src/routes/dataset/meta-form/SelectModel.svelte
index 27524e2..ac5ca21 100644
--- a/src/routes/dataset/meta-form/SelectModel.svelte
+++ b/src/routes/dataset/meta-form/SelectModel.svelte
@@ -1,62 +1,46 @@
 <script lang="ts">
 import { activeDatasetMeta, updateActiveDatasetMeta } from '$lib/stores/dataset';
 import { ModelChoices, type TargetModels } from '$lib/types/models';
+import { createSaveFeedbackController, type SaveFeedbackState } from '$lib/utils/form-save';
 import { onDestroy, onMount } from 'svelte';
 import { get } from 'svelte/store';
 
 let selected: TargetModels | null = $state(null);
-let updated = $state(false);
-let notUpdated = $state(false);
-let feedbackTimer: ReturnType<typeof setTimeout> | null = null;
+let saveFeedback = $state<SaveFeedbackState>('idle');
+
+const feedback = createSaveFeedbackController((state) => {
+  saveFeedback = state;
+});
 
 onMount(() => {
   selected = get(activeDatasetMeta)?.targetModel ?? null;
 });
 
 onDestroy(() => {
-  if (feedbackTimer) {
-    clearTimeout(feedbackTimer);
-  }
+  feedback.dispose();
 });
 
-function resetFeedbackIn2s() {
-  if (feedbackTimer) {
-    clearTimeout(feedbackTimer);
-  }
-
-  feedbackTimer = setTimeout(() => {
-    updated = false;
-    notUpdated = false;
-  }, 2000);
-}
-
 async function saveTargetModel() {
   if (!selected) {
-    updated = false;
-    notUpdated = true;
-    resetFeedbackIn2s();
+    feedback.markNotUpdated();
     return;
   }
 
   try {
     await updateActiveDatasetMeta({ targetModel: selected });
-    updated = true;
-    notUpdated = false;
+    feedback.markUpdated();
   } catch (error) {
     console.error('Failed to save target model:', error);
-    updated = false;
-    notUpdated = true;
+    feedback.markNotUpdated();
   }
-
-  resetFeedbackIn2s();
 }
 </script>
 
 <label
   class={[
     'input w-fit in-focus-within:outline-0 transition-colors duration-300 ease-out',
-    updated && 'border-green-500',
-    notUpdated && 'border-red-500',
+    saveFeedback === 'updated' && 'border-green-500',
+    saveFeedback === 'not-updated' && 'border-red-500',
   ]}>
   <span class="label min-w-[10em]">Target Model</span>
   <select bind:value={selected} onchange={saveTargetModel} class="min-w-[20em] focus:outline-0">