feat: 添加统一尺寸选择组件,支持动态保存和反馈机制
This commit is contained in:
@@ -3,11 +3,13 @@ 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';
|
||||
import UnifiedSizeChoice from './meta-form/UnifiedSizeChoice.svelte';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-2 px-4 py-4">
|
||||
<DatasetName />
|
||||
<SelectModel />
|
||||
<SelectLoraType />
|
||||
<UnifiedSizeChoice />
|
||||
<TargetSize />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<script lang="ts">
|
||||
import { activeDatasetMeta, updateActiveDatasetMeta } from '$lib/stores/dataset';
|
||||
import { createSaveFeedbackController, type SaveFeedbackState } from '$lib/utils/form-save';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
let unifiedSize = $state<boolean>(false);
|
||||
let unifiedRatio = $state<boolean>(false);
|
||||
let sizeFeedback = $state<SaveFeedbackState>('idle');
|
||||
let ratioFeedback = $state<SaveFeedbackState>('idle');
|
||||
|
||||
const sizeSaveFeedback = createSaveFeedbackController((state) => {
|
||||
sizeFeedback = state;
|
||||
});
|
||||
|
||||
const ratioSaveFeedback = createSaveFeedbackController((state) => {
|
||||
ratioFeedback = state;
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
const meta = get(activeDatasetMeta);
|
||||
unifiedSize = meta?.unifiedImageSize ?? false;
|
||||
unifiedRatio = meta?.unifiedImageRatio ?? false;
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
sizeSaveFeedback.dispose();
|
||||
ratioSaveFeedback.dispose();
|
||||
});
|
||||
|
||||
async function saveUnifiedSize() {
|
||||
try {
|
||||
await updateActiveDatasetMeta({ unifiedImageSize: unifiedSize });
|
||||
sizeSaveFeedback.markUpdated();
|
||||
} catch (error) {
|
||||
console.error('Failed to save unified size option:', error);
|
||||
sizeSaveFeedback.markNotUpdated();
|
||||
}
|
||||
}
|
||||
|
||||
async function saveUnifiedRatio() {
|
||||
try {
|
||||
await updateActiveDatasetMeta({ unifiedImageRatio: unifiedRatio });
|
||||
ratioSaveFeedback.markUpdated();
|
||||
} catch (error) {
|
||||
console.error('Failed to save unified ratio option:', error);
|
||||
ratioSaveFeedback.markNotUpdated();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-row gap-3 h-(--size) py-2">
|
||||
<div class="min-w-[10em]"> </div>
|
||||
<label
|
||||
class={[
|
||||
'label transition-colors duration-300 ease-out',
|
||||
sizeFeedback === 'updated' && 'text-green-600',
|
||||
sizeFeedback === 'not-updated' && 'text-red-600',
|
||||
]}>
|
||||
<input type="checkbox" bind:checked={unifiedSize} onchange={saveUnifiedSize} class="checkbox" />
|
||||
Unified Size
|
||||
</label>
|
||||
<label
|
||||
class={[
|
||||
'label transition-colors duration-300 ease-out',
|
||||
ratioFeedback === 'updated' && 'text-green-600',
|
||||
ratioFeedback === 'not-updated' && 'text-red-600',
|
||||
]}>
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={unifiedRatio}
|
||||
onchange={saveUnifiedRatio}
|
||||
class="checkbox" />
|
||||
Unified Ratio
|
||||
</label>
|
||||
</div>
|
||||
Reference in New Issue
Block a user