From 66a8c1f931bf0fde1da92a4221153526358a14aa Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Sat, 28 Mar 2026 18:48:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=9B=AE=E6=A0=87?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E4=BF=9D=E5=AD=98=E5=92=8C=E5=8F=8D=E9=A6=88?=
 =?UTF-8?q?=E6=9C=BA=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.css                                   |  8 ++
 src/routes/dataset/DatasetInfoForm.svelte     |  2 +
 .../dataset/meta-form/TargetSize.svelte       | 78 +++++++++++++++++++
 3 files changed, 88 insertions(+)
 create mode 100644 src/routes/dataset/meta-form/TargetSize.svelte

diff --git a/src/app.css b/src/app.css
index 60cba52..17c7d2f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,3 +4,11 @@
 html, body {
   @apply size-full;
 }
+
+input {
+  &[type='number']::-webkit-outer-spin-button,
+  &[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
diff --git a/src/routes/dataset/DatasetInfoForm.svelte b/src/routes/dataset/DatasetInfoForm.svelte
index 744e96c..7c63e2f 100644
--- a/src/routes/dataset/DatasetInfoForm.svelte
+++ b/src/routes/dataset/DatasetInfoForm.svelte
@@ -2,10 +2,12 @@
 import DatasetName from './meta-form/DatasetName.svelte';
 import SelectLoraType from './meta-form/SelectLoraType.svelte';
 import SelectModel from './meta-form/SelectModel.svelte';
+import TargetSize from './meta-form/TargetSize.svelte';
 </script>
 
 <div class="flex flex-col gap-2 px-4 py-4">
   <DatasetName />
   <SelectModel />
   <SelectLoraType />
+  <TargetSize />
 </div>
diff --git a/src/routes/dataset/meta-form/TargetSize.svelte b/src/routes/dataset/meta-form/TargetSize.svelte
new file mode 100644
index 0000000..1a018e3
--- /dev/null
+++ b/src/routes/dataset/meta-form/TargetSize.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+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 width = $state<number>(512);
+let height = $state<number>(512);
+let saveFeedback = $state<SaveFeedbackState>('idle');
+
+const feedback = createSaveFeedbackController((state) => {
+  saveFeedback = state;
+});
+
+onMount(() => {
+  const meta = get(activeDatasetMeta);
+  if (meta?.imageSize) {
+    width = meta.imageSize?.[0] ?? 512;
+    height = meta.imageSize?.[1] ?? 512;
+  }
+});
+
+onDestroy(() => {
+  saveLater.cancel();
+  feedback.dispose();
+});
+
+async function saveTargetSize(nextWidth: number, nextHeight: number) {
+  const normalizedWidth = Number.isFinite(nextWidth) ? Math.floor(nextWidth) : 0;
+  const normalizedHeight = Number.isFinite(nextHeight) ? Math.floor(nextHeight) : 0;
+
+  if (normalizedWidth <= 0 || normalizedHeight <= 0) {
+    feedback.markNotUpdated();
+    return;
+  }
+
+  try {
+    await updateActiveDatasetMeta({ imageSize: [normalizedWidth, normalizedHeight] });
+    feedback.markUpdated();
+  } catch (error) {
+    console.error('Failed to save target size:', error);
+    feedback.markNotUpdated();
+  }
+}
+
+const saveLater = createDebouncedTrigger(() => {
+  void saveTargetSize(width, height);
+}, 5000);
+
+function saveTargetSizeDelayed() {
+  saveLater.trigger();
+}
+</script>
+
+<label
+  class={[
+    'input w-fit focus-within:outline-none transition-colors duration-300 ease-out',
+    saveFeedback === 'updated' && 'border-green-500',
+    saveFeedback === 'not-updated' && 'border-red-500',
+  ]}>
+  <span class="label min-w-[10em]">Scale To</span>
+  <input
+    type="number"
+    class="text-right max-w-[5em]"
+    bind:value={width}
+    oninput={saveTargetSizeDelayed} />
+  <span>&times;</span>
+  <input
+    type="number"
+    class="text-right max-w-[5em]"
+    bind:value={height}
+    oninput={saveTargetSizeDelayed} />
+  <span>px</span>
+</label>