From 69a3b89d2a6cf41a1515f646a9ac051e1f6f2d0d Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Thu, 12 Feb 2026 08:39:22 +0800
Subject: [PATCH] sv

---
 .../asset/gen/backdrop/BackdropGen.vue        |  26 +-
 .../asset/gen/common/ImageSelector.vue        |  15 +-
 .../gen/sprite/SpriteGenPhaseSettings.vue     |  29 +--
 spx-gui/src/components/editor/editor-state.ts | 233 +++++++++++++-----
 .../src/models/spx/gen/backdrop-gen.test.ts   |  48 ++--
 spx-gui/src/models/spx/gen/backdrop-gen.ts    |  68 +++--
 spx-gui/src/models/spx/gen/common.ts          |  42 +++-
 spx-gui/src/models/spx/gen/sprite-gen.test.ts |  14 +-
 spx-gui/src/models/spx/gen/sprite-gen.ts      |  31 ++-
 9 files changed, 366 insertions(+), 140 deletions(-)

diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
index 811824e10..cef15811e 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { UIButton } from '@/components/ui'
 import type { Backdrop } from '@/models/spx/backdrop'
 import type { BackdropGen } from '@/models/spx/gen/backdrop-gen'
@@ -20,13 +20,7 @@ const emit = defineEmits<{
   finished: [Backdrop]
 }>()
 
-const imageInResult = computed(() => {
-  if (props.gen.image == null) return false
-  return props.gen.imagesGenState.result?.includes(props.gen.image)
-})
-const canSubmit = computed(
-  () => props.gen.image != null && imageInResult.value && props.gen.imagesGenState.status !== 'running'
-)
+const canSubmit = computed(() => props.gen.image != null)
 const handleSubmit = useMessageHandle(
   async () => {
     const backdrop = await props.gen.finish()
@@ -41,7 +35,11 @@ const handleSubmit = useMessageHandle(
   }
 )
 
-const hasPreview = computed(() => props.gen.image != null)
+const hasPreview = ref(props.gen.imageIndex != null)
+function handleImageSelect(index: number) {
+  props.gen.setImageIndex(index)
+  hasPreview.value = true
+}
 </script>
 
 <template>
@@ -59,15 +57,15 @@ const hasPreview = computed(() => props.gen.image != null)
       />
       <ImageSelector
         :state="gen.imagesGenState"
-        :selected="gen.image"
+        :selected="gen.imageIndex"
         :disabled="handleSubmit.isLoading.value"
-        @select="gen.setImage($event)"
+        @select="handleImageSelect"
       >
         <template #loading-item>
           <BackdropImageItem loading />
         </template>
-        <template #item="{ file, active, select }">
-          <BackdropImageItem :file="file" :active="active" @click="select(file)" />
+        <template #item="{ file, active, onClick }">
+          <BackdropImageItem :file="file" :active="active" @click="onClick" />
         </template>
         <template #tip>
           <template v-if="gen.imagesGenState.status === 'running'">
@@ -86,7 +84,7 @@ const hasPreview = computed(() => props.gen.image != null)
       </ImageSelector>
 
       <template #preview>
-        <ImagePreview :file="imageInResult ? gen.image : null" />
+        <ImagePreview :file="gen.image" />
       </template>
     </LayoutWithPreview>
     <footer class="footer">
diff --git a/spx-gui/src/components/asset/gen/common/ImageSelector.vue b/spx-gui/src/components/asset/gen/common/ImageSelector.vue
index fd3cfe414..24d262a74 100644
--- a/spx-gui/src/components/asset/gen/common/ImageSelector.vue
+++ b/spx-gui/src/components/asset/gen/common/ImageSelector.vue
@@ -28,7 +28,7 @@ import type { PhaseState } from '@/models/spx/gen/common'
 const props = withDefaults(
   defineProps<{
     state: PhaseState<File[]>
-    selected: File | null
+    selected: number | null
     disabled?: boolean
   }>(),
   {
@@ -37,7 +37,7 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  select: [File]
+  select: [number]
 }>()
 
 const wrapperRef = ref<HTMLElement | null>(null)
@@ -56,9 +56,9 @@ provide(
   computed(() => props.disabled)
 )
 
-function handleSelect(file: File) {
+function handleSelect(index: number) {
   if (props.disabled) return
-  emit('select', file)
+  emit('select', index)
 }
 </script>
 
@@ -78,7 +78,12 @@ function handleSelect(file: File) {
       <GenStateFailed v-else-if="state.status === 'failed'" :state-failed="state"></GenStateFailed>
       <template v-else>
         <template v-for="(option, idx) in state.result ?? []" :key="idx">
-          <slot name="item" :file="option" :active="selected === option" :select="handleSelect"></slot>
+          <slot
+            name="item"
+            :file="option"
+            :active="selected === idx"
+            :on-click="() => handleSelect(idx)"
+          ></slot>
         </template>
       </template>
     </ul>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
index 6887b2929..64fd55b77 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
@@ -5,7 +5,7 @@
 -->
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { UIButton } from '@/components/ui'
 import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { useMessageHandle } from '@/utils/exception'
@@ -21,23 +21,18 @@ const props = defineProps<{
   descriptionPlaceholder?: string
 }>()
 
-// Only allow submission if the selected image is part of the generated results.
-// If the image is not in the results, it might be inconsistent with the current settings
-// (e.g., after modifying the description and regenerating), so we prevent submission in this case.
-const imageInResult = computed(() => {
-  if (props.gen.image == null) return false
-  return props.gen.imagesGenState.result?.includes(props.gen.image)
-})
-const canSubmit = computed(
-  () => props.gen.image != null && imageInResult.value && props.gen.imagesGenState.status !== 'running'
-)
+const canSubmit = computed(() => props.gen.image != null)
 
 const handleSubmit = useMessageHandle(() => props.gen.prepareContent(), {
   en: 'Failed to generate sprite content',
   zh: '生成精灵内容失败'
 })
 
-const hasPreview = computed(() => props.gen.image != null)
+const hasPreview = ref(props.gen.imageIndex != null)
+function handleImageSelect(index: number) {
+  props.gen.setImageIndex(index)
+  hasPreview.value = true
+}
 </script>
 
 <template>
@@ -57,15 +52,15 @@ const hasPreview = computed(() => props.gen.image != null)
       />
       <ImageSelector
         :state="gen.imagesGenState"
-        :selected="gen.image"
+        :selected="gen.imageIndex"
         :disabled="handleSubmit.isLoading.value"
-        @select="gen.setImage($event)"
+        @select="handleImageSelect"
       >
         <template #loading-item>
           <SpriteImageItem loading />
         </template>
-        <template #item="{ file, active, select }">
-          <SpriteImageItem :file="file" :active="active" @click="select(file)" />
+        <template #item="{ file, active, onClick }">
+          <SpriteImageItem :file="file" :active="active" @click="onClick" />
         </template>
         <template #tip>
           <template v-if="gen.imagesGenState.status === 'running'">
@@ -84,7 +79,7 @@ const hasPreview = computed(() => props.gen.image != null)
       </ImageSelector>
 
       <template #preview>
-        <ImagePreview :file="imageInResult ? gen.image : null" />
+        <ImagePreview :file="gen.image" />
       </template>
     </LayoutWithPreview>
     <footer class="footer">
diff --git a/spx-gui/src/components/editor/editor-state.ts b/spx-gui/src/components/editor/editor-state.ts
index 378c3fb02..9ba54aa6d 100644
--- a/spx-gui/src/components/editor/editor-state.ts
+++ b/spx-gui/src/components/editor/editor-state.ts
@@ -21,9 +21,11 @@ import { SpriteEditorState, type Selected as SpriteEditorSelected } from './spri
 import { Runtime } from './runtime'
 import * as editing from './editing'
 import { EditingMode } from './editing'
+import type { IProject, Metadata } from '@/models/project'
+import type { Files } from '@/models/common/file'
 
-type GenCollapsePos = { x: number; y: number }
-type CollapsePosProvider<T extends AssetType> = (gen: AssetGenModel<T>) => Promise<GenCollapsePos | null>
+type GenPos = { x: number; y: number }
+type GenPosProvider<T extends AssetType> = (gen: AssetGenModel<T>) => Promise<GenPos | null>
 
 export type SelectedType = 'stage' | 'sprite' | 'sound'
 
@@ -52,6 +54,123 @@ export enum EditMode {
   Map = 'map'
 }
 
+class GenManager {
+  spriteGens = shallowReactive<SpriteGen[]>([])
+  addSpriteGen(gen: SpriteGen) {
+    this.spriteGens.push(gen)
+  }
+  removeSpriteGen(id: string) {
+    const index = this.spriteGens.findIndex((gen) => gen.id === id)
+    if (index < 0) throw new Error('SpriteGen not found in editor state')
+    const [gen] = this.spriteGens.splice(index, 1)
+    gen.dispose()
+  }
+
+  backdropGens = shallowReactive<BackdropGen[]>([])
+  addBackdropGen(gen: BackdropGen) {
+    this.backdropGens.push(gen)
+  }
+  removeBackdropGen(id: string) {
+    const index = this.backdropGens.findIndex((gen) => gen.id === id)
+    if (index < 0) throw new Error('BackdropGen not found in editor state')
+    const [gen] = this.backdropGens.splice(index, 1)
+    gen.dispose()
+  }
+
+  private genPosProviderMap = shallowReactive(new Map<AssetType, GenPosProvider<AssetType>[]>())
+  private registerGenPosProvider<T extends AssetType>(type: T, provider: GenPosProvider<T>) {
+    const providers = this.genPosProviderMap.get(type) ?? []
+    this.genPosProviderMap.set(type, [...providers, provider])
+    return () => {
+      this.genPosProviderMap.set(
+        type,
+        (this.genPosProviderMap.get(type) ?? []).filter((p) => p !== provider)
+      )
+    }
+  }
+  registerSpriteGenPosProvider(provider: GenPosProvider<AssetType.Sprite>) {
+    return this.registerGenPosProvider(AssetType.Sprite, provider)
+  }
+  registerBackdropGenPosProvider(provider: GenPosProvider<AssetType.Backdrop>) {
+    return this.registerGenPosProvider(AssetType.Backdrop, provider)
+  }
+  /**
+   * Retrieves the position for the given generator.
+   * Acts as a consumer of positions, returning the result from a registered provider
+   * for the generator's asset type, or null if no providers are available.
+   */
+  private async getGenPos<T extends AssetType>(assetType: T, gen: AssetGenModel<T>) {
+    const providers = this.genPosProviderMap.get(assetType) ?? []
+    const provider = providers.at(-1)
+    return provider != null ? provider(gen) : null
+  }
+  getSpriteGenPos(gen: SpriteGen) {
+    return this.getGenPos(AssetType.Sprite, gen)
+  }
+  getBackdropGenPos(gen: BackdropGen) {
+    return this.getGenPos(AssetType.Backdrop, gen)
+  }
+
+  static async load(name: string, files: Files): Promise<void> {
+
+  }
+
+  export(): Files {
+    const files: Files = {}
+    ;[...this.spriteGens, ...this.backdropGens].forEach((gen => {
+      const genFiles = gen.export()
+      Object.assign(files, genFiles)
+    }))
+    return files
+  }
+}
+
+class ProjectWithGens implements IProject {
+  constructor(
+    private project: SpxProject,
+    private genManager: GenManager
+  ) {}
+  get mutex() {
+    return this.project.mutex
+  }
+  get owner() {
+    return this.project.owner
+  }
+  get name() {
+    return this.project.name
+  }
+  setMetadata(metadata: Metadata) {
+    return this.project.setMetadata(metadata)
+  }
+  exportFiles() {
+    const files: Files = {}
+    const projectFiles = this.project.exportFiles()
+    Object.assign(files, projectFiles)
+    // TODO: Include gen files
+    ;[...this.genManager.spriteGens, ...this.genManager.backdropGens].forEach((gen => {
+      const genFiles = gen.export()
+      Object.assign(files, genFiles)
+    }))
+    return files
+  }
+  loadFiles(files: Files, signal?: AbortSignal): Promise<void> {
+    return Promise.all([
+      this.project.loadFiles(files),
+
+    ])
+  }
+  async load(metadata: Metadata, files: Files, signal?: AbortSignal) {
+    await this.project.load(metadata, files)
+    // TODO: Load gen files
+    return
+  }
+  async export(signal?: AbortSignal): Promise<[Metadata, Files]> {
+    const [metadata, files] = await this.project.export(signal)
+    // TODO: Include gen files
+    return [metadata, files]
+  }
+}
+
 export class EditorState extends Disposable {
   constructor(
     private project: SpxProject,
@@ -95,61 +214,61 @@ export class EditorState extends Disposable {
   stageState: StageEditorState
   spriteState: SpriteEditorState | null = null
 
-  spriteGens = shallowReactive<SpriteGen[]>([])
-  addSpriteGen(gen: SpriteGen) {
-    this.spriteGens.push(gen)
-  }
-  removeSpriteGen(id: string) {
-    const index = this.spriteGens.findIndex((gen) => gen.id === id)
-    if (index < 0) throw new Error('SpriteGen not found in editor state')
-    const [gen] = this.spriteGens.splice(index, 1)
-    gen.dispose()
-  }
-
-  backdropGens = shallowReactive<BackdropGen[]>([])
-  addBackdropGen(gen: BackdropGen) {
-    this.backdropGens.push(gen)
-  }
-  removeBackdropGen(id: string) {
-    const index = this.backdropGens.findIndex((gen) => gen.id === id)
-    if (index < 0) throw new Error('BackdropGen not found in editor state')
-    const [gen] = this.backdropGens.splice(index, 1)
-    gen.dispose()
-  }
-
-  private genCollapsePosProviderMap = shallowReactive(new Map<AssetType, CollapsePosProvider<AssetType>[]>())
-  private addGenCollapsePosProvider<T extends AssetType>(type: T, provider: CollapsePosProvider<T>) {
-    const providers = this.genCollapsePosProviderMap.get(type) ?? []
-    this.genCollapsePosProviderMap.set(type, [...providers, provider])
-    return () => {
-      this.genCollapsePosProviderMap.set(
-        type,
-        (this.genCollapsePosProviderMap.get(type) ?? []).filter((p) => p !== provider)
-      )
-    }
-  }
-  addSpriteGenCollapsePosProvider(provider: CollapsePosProvider<AssetType.Sprite>) {
-    return this.addGenCollapsePosProvider(AssetType.Sprite, provider)
-  }
-  addBackdropGenCollapsePosProvider(provider: CollapsePosProvider<AssetType.Backdrop>) {
-    return this.addGenCollapsePosProvider(AssetType.Backdrop, provider)
-  }
-  /**
-   * Retrieves the collapse position for the given generator.
-   * Acts as a consumer of collapse positions, returning the result from a registered provider
-   * for the generator's asset type, or null if no providers are available.
-   */
-  private async getGenCollapsePos<T extends AssetType>(assetType: T, gen: AssetGenModel<T>) {
-    const providers = this.genCollapsePosProviderMap.get(assetType) ?? []
-    const provider = providers.at(-1)
-    return provider != null ? provider(gen) : null
-  }
-  getSpriteGenCollapsePos(gen: SpriteGen) {
-    return this.getGenCollapsePos(AssetType.Sprite, gen)
-  }
-  getBackdropGenCollapsePos(gen: BackdropGen) {
-    return this.getGenCollapsePos(AssetType.Backdrop, gen)
-  }
+  // spriteGens = shallowReactive<SpriteGen[]>([])
+  // addSpriteGen(gen: SpriteGen) {
+  //   this.spriteGens.push(gen)
+  // }
+  // removeSpriteGen(id: string) {
+  //   const index = this.spriteGens.findIndex((gen) => gen.id === id)
+  //   if (index < 0) throw new Error('SpriteGen not found in editor state')
+  //   const [gen] = this.spriteGens.splice(index, 1)
+  //   gen.dispose()
+  // }
+
+  // backdropGens = shallowReactive<BackdropGen[]>([])
+  // addBackdropGen(gen: BackdropGen) {
+  //   this.backdropGens.push(gen)
+  // }
+  // removeBackdropGen(id: string) {
+  //   const index = this.backdropGens.findIndex((gen) => gen.id === id)
+  //   if (index < 0) throw new Error('BackdropGen not found in editor state')
+  //   const [gen] = this.backdropGens.splice(index, 1)
+  //   gen.dispose()
+  // }
+
+  // private genCollapsePosProviderMap = shallowReactive(new Map<AssetType, CollapsePosProvider<AssetType>[]>())
+  // private addGenCollapsePosProvider<T extends AssetType>(type: T, provider: CollapsePosProvider<T>) {
+  //   const providers = this.genCollapsePosProviderMap.get(type) ?? []
+  //   this.genCollapsePosProviderMap.set(type, [...providers, provider])
+  //   return () => {
+  //     this.genCollapsePosProviderMap.set(
+  //       type,
+  //       (this.genCollapsePosProviderMap.get(type) ?? []).filter((p) => p !== provider)
+  //     )
+  //   }
+  // }
+  // addSpriteGenCollapsePosProvider(provider: CollapsePosProvider<AssetType.Sprite>) {
+  //   return this.addGenCollapsePosProvider(AssetType.Sprite, provider)
+  // }
+  // addBackdropGenCollapsePosProvider(provider: CollapsePosProvider<AssetType.Backdrop>) {
+  //   return this.addGenCollapsePosProvider(AssetType.Backdrop, provider)
+  // }
+  // /**
+  //  * Retrieves the collapse position for the given generator.
+  //  * Acts as a consumer of collapse positions, returning the result from a registered provider
+  //  * for the generator's asset type, or null if no providers are available.
+  //  */
+  // private async getGenCollapsePos<T extends AssetType>(assetType: T, gen: AssetGenModel<T>) {
+  //   const providers = this.genCollapsePosProviderMap.get(assetType) ?? []
+  //   const provider = providers.at(-1)
+  //   return provider != null ? provider(gen) : null
+  // }
+  // getSpriteGenCollapsePos(gen: SpriteGen) {
+  //   return this.getGenCollapsePos(AssetType.Sprite, gen)
+  // }
+  // getBackdropGenCollapsePos(gen: BackdropGen) {
+  //   return this.getGenCollapsePos(AssetType.Backdrop, gen)
+  // }
 
   private selectedEditModeRef = ref<EditMode>(EditMode.Default)
   private selectedTypeRef = ref<SelectedType>('sprite')
diff --git a/spx-gui/src/models/spx/gen/backdrop-gen.test.ts b/spx-gui/src/models/spx/gen/backdrop-gen.test.ts
index 00165bbc4..f5170e6e9 100644
--- a/spx-gui/src/models/spx/gen/backdrop-gen.test.ts
+++ b/spx-gui/src/models/spx/gen/backdrop-gen.test.ts
@@ -19,7 +19,9 @@ describe('BackdropGen', () => {
     const project = makeSpxProject()
 
     // 1. Create BackdropGen with initial description
-    const gen = new BackdropGen(project, 'A sunny beach with palm trees and clear blue water')
+    const gen = new BackdropGen(project, {
+      settings: { description: 'A sunny beach with palm trees and clear blue water' }
+    })
     expect(gen.settings.description).toBe('A sunny beach with palm trees and clear blue water')
     expect(gen.enrichState.status).toBe('initial')
     expect(gen.imagesGenState.status).toBe('initial')
@@ -56,7 +58,7 @@ describe('BackdropGen', () => {
     expect(gen.imagesGenState.result?.length).toBe(4)
 
     // 6. Select one generated image
-    gen.setImage(gen.imagesGenState.result![2])
+    gen.setImageIndex(2)
     expect(gen.image).toBe(gen.imagesGenState.result![2])
 
     // 7. Finish the backdrop generation
@@ -74,7 +76,9 @@ describe('BackdropGen', () => {
 
   it('should handle errors and retry successfully', async () => {
     const project = makeSpxProject()
-    const gen = new BackdropGen(project, 'A beautiful sunset over mountains')
+    const gen = new BackdropGen(project, {
+      settings: { description: 'A beautiful sunset over mountains' }
+    })
 
     // 1. First enrich attempt fails
     aigcMock.injectErrorOnce('enrichBackdropSettings', new Error('Network error'))
@@ -103,30 +107,36 @@ describe('BackdropGen', () => {
     expect(gen.imagesGenState.result?.length).toBe(4)
 
     // 5. Finish successfully
-    gen.setImage(gen.imagesGenState.result![0])
+    gen.setImageIndex(0)
     const backdrop = await gen.finish()
     expect(backdrop.name).toBe('enriched-backdrop')
   })
 
   it('should validate backdrop name correctly', async () => {
     const project = makeSpxProject()
-    const gen = new BackdropGen(project, 'A scenic landscape')
+    const gen = new BackdropGen(project, {
+      settings: { description: 'A scenic landscape' }
+    })
 
     await gen.enrich()
     await gen.genImages()
-    gen.setImage(gen.imagesGenState.result![0])
+    gen.setImageIndex(0)
     const backdrop1 = await gen.finish()
     project.stage.addBackdrop(backdrop1)
 
     // Create another gen and try to set duplicate name should fail
-    const gen2 = new BackdropGen(project, 'Another landscape')
+    const gen2 = new BackdropGen(project, {
+      settings: { description: 'Another landscape' }
+    })
     await gen2.enrich()
     expect(() => gen2.setName(backdrop1.name)).toThrow()
   })
 
   it('should throw error when finishing without image', async () => {
     const project = makeSpxProject()
-    const gen = new BackdropGen(project, 'A test backdrop')
+    const gen = new BackdropGen(project, {
+      settings: { description: 'A test backdrop' }
+    })
 
     await gen.enrich()
     await gen.genImages()
@@ -137,7 +147,9 @@ describe('BackdropGen', () => {
 
   it('should throw error when recording adoption without result', async () => {
     const project = makeSpxProject()
-    const gen = new BackdropGen(project, 'A test backdrop')
+    const gen = new BackdropGen(project, {
+      settings: { description: 'A test backdrop' }
+    })
 
     await gen.enrich()
     await gen.genImages()
@@ -148,7 +160,9 @@ describe('BackdropGen', () => {
 
   it('should track isPreparePhase correctly', async () => {
     const project = makeSpxProject()
-    const gen = new BackdropGen(project, 'A test backdrop')
+    const gen = new BackdropGen(project, {
+      settings: { description: 'A test backdrop' }
+    })
 
     expect(gen.isPreparePhase).toBe(true)
 
@@ -156,14 +170,16 @@ describe('BackdropGen', () => {
     await gen.genImages()
     expect(gen.isPreparePhase).toBe(true)
 
-    gen.setImage(gen.imagesGenState.result![0])
+    gen.setImageIndex(0)
     await gen.finish()
     expect(gen.isPreparePhase).toBe(false)
   })
 
   it('should allow multiple enrichments', async () => {
     const project = makeSpxProject()
-    const gen = new BackdropGen(project, 'First description')
+    const gen = new BackdropGen(project, {
+      settings: { description: 'First description' }
+    })
 
     await gen.enrich()
     expect(gen.enrichState.result?.description).toContain('First description')
@@ -175,7 +191,9 @@ describe('BackdropGen', () => {
 
   it('should allow multiple image generations', async () => {
     const project = makeSpxProject()
-    const gen = new BackdropGen(project, 'A test backdrop')
+    const gen = new BackdropGen(project, {
+      settings: { description: 'A test backdrop' }
+    })
 
     await gen.enrich()
 
@@ -192,7 +210,9 @@ describe('BackdropGen', () => {
 
   it('should cancel running image generation', async () => {
     const project = makeSpxProject()
-    const gen = new BackdropGen(project, 'A test backdrop')
+    const gen = new BackdropGen(project, {
+      settings: { description: 'A test backdrop' }
+    })
     const tasks = aigcMock.tasks
 
     const waitForTask = aigcMock.waitForTaskCount(1)
diff --git a/spx-gui/src/models/spx/gen/backdrop-gen.ts b/spx-gui/src/models/spx/gen/backdrop-gen.ts
index a32a1e432..dd4d6a006 100644
--- a/spx-gui/src/models/spx/gen/backdrop-gen.ts
+++ b/spx-gui/src/models/spx/gen/backdrop-gen.ts
@@ -3,14 +3,24 @@ import { reactive } from 'vue'
 import { Disposable } from '@/utils/disposable'
 import { ArtStyle, BackdropCategory, Perspective } from '@/apis/common'
 import { adoptAsset, enrichBackdropSettings, TaskType, TaskStatus, type BackdropSettings } from '@/apis/aigc'
-import type { File } from '../../common/file'
+import type { File, Files } from '../../common/file'
 import { createFileWithUniversalUrl } from '../../common/cloud'
-import { validateBackdropName } from '../common/asset-name'
+import { ensureValidBackdropName, validateBackdropName } from '../common/asset-name'
 import { backdrop2Asset } from '../common/asset'
 import type { SpxProject } from '../project'
 import { Backdrop } from '../backdrop'
 import { getProjectSettings, Phase, Task } from './common'
 
+export type BackdropGenInits = {
+  id?: string
+  settings?: Partial<BackdropSettings>
+  imageIndex?: number | null
+  result?: Backdrop | null
+  enrichPhase?: Phase<BackdropSettings>
+  generateTask?: Task<TaskType.GenerateBackdrop>
+  generatePhase?: Phase<File[]>
+}
+
 export class BackdropGen extends Disposable {
   id: string
   private project: SpxProject
@@ -18,22 +28,23 @@ export class BackdropGen extends Disposable {
   private generateTask: Task<TaskType.GenerateBackdrop>
   private generatePhase: Phase<File[]>
 
-  constructor(project: SpxProject, initialDescription = '') {
+  constructor(project: SpxProject, inits: BackdropGenInits = {}) {
     super()
-    this.id = nanoid()
+    this.id = inits.id ?? nanoid()
     this.project = project
-    this.enrichPhase = new Phase({ en: 'enrich backdrop settings', zh: '丰富背景设置' })
-    this.generateTask = new Task(TaskType.GenerateBackdrop)
-    this.generatePhase = new Phase({ en: 'generate backdrop images', zh: '生成背景图片' })
+    this.enrichPhase = inits.enrichPhase ?? new Phase({ en: 'enrich backdrop settings', zh: '丰富背景设置' })
+    this.generateTask = inits.generateTask ?? new Task(TaskType.GenerateBackdrop)
+    this.generatePhase = inits.generatePhase ?? new Phase({ en: 'generate backdrop images', zh: '生成背景图片' })
     this.settings = {
       name: '',
       category: BackdropCategory.Unspecified,
-      description: initialDescription,
+      description: '',
       artStyle: ArtStyle.Unspecified,
-      perspective: Perspective.Unspecified
+      perspective: Perspective.Unspecified,
+      ...inits.settings
     }
-    this.image = null
-    this.result = null
+    this.imageIndex = inits.imageIndex ?? null
+    this.result = inits.result ?? null
     return reactive(this) as this
   }
 
@@ -57,7 +68,15 @@ export class BackdropGen extends Disposable {
   }
 
   settings: BackdropSettings
+  /**
+   * Update multiple settings at once.
+   * NOTE: the name in updates may be altered to avoid conflict
+   */
   setSettings(updates: Partial<BackdropSettings>) {
+    if (updates.name != null && updates.name !== this.settings.name) {
+      const newName = ensureValidBackdropName(updates.name, this.project.stage)
+      updates = { ...updates, name: newName }
+    }
     Object.assign(this.settings, updates)
   }
 
@@ -65,6 +84,7 @@ export class BackdropGen extends Disposable {
     return this.generatePhase.state
   }
   genImages() {
+    this.setImageIndex(null)
     return this.generatePhase.run(async () => {
       await this.generateTask.start({
         settings: this.settings,
@@ -75,9 +95,15 @@ export class BackdropGen extends Disposable {
     }, this.generateTask.runDuration)
   }
 
-  image: File | null
-  setImage(file: File) {
-    this.image = file
+  imageIndex: number | null
+  get image(): File | null {
+    if (this.imageIndex == null) return null
+    const images = this.imagesGenState.result
+    if (images == null) return null
+    return images[this.imageIndex] ?? null
+  }
+  setImageIndex(index: number | null) {
+    this.imageIndex = index
   }
 
   get isPreparePhase() {
@@ -87,8 +113,9 @@ export class BackdropGen extends Disposable {
   result: Backdrop | null
 
   async finish() {
-    if (this.image == null) throw new Error('image expected')
-    const backdrop = await Backdrop.create(this.settings.name, this.image)
+    const image = this.image
+    if (image == null) throw new Error('image expected')
+    const backdrop = await Backdrop.create(this.settings.name, image)
     backdrop.setAssetMetadata({
       description: this.settings.description,
       extraSettings: {
@@ -127,4 +154,13 @@ export class BackdropGen extends Disposable {
   cancel() {
     return this.generateTask.tryCancel()
   }
+
+  export(): Files {
+    // TODO
+    return {}
+  }
+
+  async load(files: Files) {
+    // TODO
+  }
 }
diff --git a/spx-gui/src/models/spx/gen/common.ts b/spx-gui/src/models/spx/gen/common.ts
index 0dc056aad..3af97c898 100644
--- a/spx-gui/src/models/spx/gen/common.ts
+++ b/spx-gui/src/models/spx/gen/common.ts
@@ -82,16 +82,21 @@ export type PhaseState<R> =
       remaining?: null
     }
 
+export type PhaseSerialized = {
+  state: PhaseState<unknown>
+  actionName: LocaleMessage
+}
+
 /** `Phase` tracks the state of an asynchronous process. */
 export class Phase<R> {
-  state: PhaseState<R>
   private _timer: ReturnType<typeof setInterval> | null = null
   constructor(
     /**
      * The name of the action being tracked, used for error messages.
      * For example, "generate video" or "extract frames".
      */
-    private actionName: LocaleMessage
+    private actionName: LocaleMessage,
+    public state: PhaseState<R> = { status: 'initial' }
   ) {
     this.state = { status: 'initial' }
   }
@@ -159,6 +164,20 @@ export class Phase<R> {
   async run(fn: () => Promise<R>, runDuration: number | null = null): Promise<R> {
     return this.track(fn(), runDuration)
   }
+
+  static load(serialized: PhaseSerialized): Phase<unknown> {
+    return new Phase(serialized.actionName, serialized.state)
+  }
+
+  export(): PhaseSerialized {
+    let { state, actionName } = this
+    if (state.status === 'failed') {
+      // It is complex to serialize the error (exception) object, so we choose not to save the failed state.
+      // Using `initial` state instead to allow users to retry the action.
+      state = { status: 'initial' }
+    }
+    return { state, actionName }
+  }
 }
 
 const taskErrorMessages: Record<TaskErrorReason, LocaleMessage> = {
@@ -213,16 +232,19 @@ const taskRunDuration: Record<TaskType, number | null> = {
 
 export type TaskApis = Pick<typeof aigcApis, 'createTask' | 'cancelTask' | 'subscribeTaskEvents'>
 
+export type TaskSerialized = {
+  type: TaskType
+  data: TaskData<TaskType> | null
+}
+
 /** `Task` manages the lifecycle and state of an AIGC task. */
 export class Task<T extends TaskType> extends Disposable {
-  data: TaskData<T> | null
-
   constructor(
     private type: T,
-    private apis: TaskApis = aigcApis
+    public data: TaskData<T> | null = null,
+    private apis: TaskApis = aigcApis,
   ) {
     super()
-    this.data = null
   }
 
   /** Estimated duration (in seconds) for this task type, or null if unknown. */
@@ -288,6 +310,14 @@ export class Task<T extends TaskType> extends Disposable {
     // It is usual to call `dispose()` right after calling `tryCancel()` and we should not increase the burden of the caller.
     await this.apis.cancelTask(id).catch((err) => capture(err, `failed to cancel task ${id}`))
   }
+
+  static load(serialized: TaskSerialized, apis: TaskApis = aigcApis): Task<TaskType> {
+    return new Task(serialized.type, serialized.data, apis)
+  }
+
+  export(): TaskSerialized {
+    return { type: this.type, data: this.data }
+  }
 }
 
 /** Returns the majority value (appears more than half) in the array, or null if none exists. */
diff --git a/spx-gui/src/models/spx/gen/sprite-gen.test.ts b/spx-gui/src/models/spx/gen/sprite-gen.test.ts
index 100ed6716..05900f126 100644
--- a/spx-gui/src/models/spx/gen/sprite-gen.test.ts
+++ b/spx-gui/src/models/spx/gen/sprite-gen.test.ts
@@ -93,7 +93,7 @@ describe('SpriteGen', () => {
     const images = await gen.genImages()
     expect(gen.imagesGenState.status).toBe('finished')
     expect(images.length).toBe(4)
-    gen.setImage(images[0])
+    gen.setImageIndex(0)
     expect(gen.image).toBe(images[0])
 
     // Prepare sprite content
@@ -157,7 +157,7 @@ describe('SpriteGen', () => {
     await gen.enrich()
     gen.setSettings({ name: 'Sprite1' })
     await gen.genImages()
-    gen.setImage(gen.imagesGenState.result![0])
+    gen.setImageIndex(0)
     await gen.prepareContent()
     const sprite1 = gen.finish()
     project.addSprite(sprite1)
@@ -236,7 +236,7 @@ describe('SpriteGen', () => {
 
     await gen.enrich()
     await gen.genImages()
-    gen.setImage(gen.imagesGenState.result![0])
+    gen.setImageIndex(0)
 
     const prepared = gen.prepareContent()
     expect(gen.contentPreparingState.status).toBe('running')
@@ -267,7 +267,7 @@ describe('SpriteGen', () => {
 
     await gen.enrich()
     await gen.genImages()
-    gen.setImage(gen.imagesGenState.result![0])
+    gen.setImageIndex(0)
     await gen.prepareContent()
 
     const costumeGen = gen.costumes[1]
@@ -295,7 +295,7 @@ describe('SpriteGen', () => {
     await gen1.enrich()
     gen1.setSettings({ perspective: Perspective.SideScrolling })
     await gen1.genImages()
-    gen1.setImage(gen1.imagesGenState.result![0])
+    gen1.setImageIndex(0)
     await gen1.prepareContent()
     const sprite1 = gen1.finish()
     expect(sprite1.rotationStyle).toBe(RotationStyle.LeftRight)
@@ -305,7 +305,7 @@ describe('SpriteGen', () => {
     await gen2.enrich()
     gen2.setSettings({ name: 'Sprite2', perspective: Perspective.AngledTopDown })
     await gen2.genImages()
-    gen2.setImage(gen2.imagesGenState.result![0])
+    gen2.setImageIndex(0)
     await gen2.prepareContent()
     const sprite2 = gen2.finish()
     expect(sprite2.rotationStyle).toBe(RotationStyle.LeftRight)
@@ -315,7 +315,7 @@ describe('SpriteGen', () => {
     await gen3.enrich()
     gen3.setSettings({ name: 'Sprite3', perspective: Perspective.Unspecified })
     await gen3.genImages()
-    gen3.setImage(gen3.imagesGenState.result![0])
+    gen3.setImageIndex(0)
     await gen3.prepareContent()
     const sprite3 = gen3.finish()
     expect(sprite3.rotationStyle).toBe(RotationStyle.Normal)
diff --git a/spx-gui/src/models/spx/gen/sprite-gen.ts b/spx-gui/src/models/spx/gen/sprite-gen.ts
index 3bf7f4177..f0d0f809e 100644
--- a/spx-gui/src/models/spx/gen/sprite-gen.ts
+++ b/spx-gui/src/models/spx/gen/sprite-gen.ts
@@ -21,7 +21,7 @@ import { getProjectSettings, Phase, Task } from './common'
 import { CostumeGen } from './costume-gen'
 import { AnimationGen } from './animation-gen'
 import { createFileWithUniversalUrl } from '../../common/cloud'
-import type { File } from '../../common/file'
+import type { File, Files } from '../../common/file'
 import { getAnimationName, getCostumeName, validateSpriteName } from '../common/asset-name'
 import { sprite2Asset } from '../common/asset'
 
@@ -31,6 +31,8 @@ type SpriteGenSelected = {
   id: string
 }
 
+export const spriteGenAssetPath = 'assets/sprite-gens'
+
 export class SpriteGen extends Disposable {
   id: string
   private i18n: I18n
@@ -132,6 +134,7 @@ export class SpriteGen extends Disposable {
     }
   }
   async genImages() {
+    this.setImageIndex(null)
     return this.genImagesPhase.run(async () => {
       const settings = this.getDefaultCostumeSettings()
       await this.genImagesTask.start({ settings, n: 4 })
@@ -140,9 +143,15 @@ export class SpriteGen extends Disposable {
     }, this.genImagesTask.runDuration)
   }
 
-  image: File | null = null
-  setImage(file: File) {
-    this.image = file
+  imageIndex: number | null = null
+  get image(): File | null {
+    if (this.imageIndex == null) return null
+    const images = this.imagesGenState.result
+    if (images == null) return null
+    return images[this.imageIndex] ?? null
+  }
+  setImageIndex(index: number | null) {
+    this.imageIndex = index
   }
 
   /** The project instance for preview within generation */
@@ -388,6 +397,20 @@ export class SpriteGen extends Disposable {
       ...this.animations.map((a) => a.cancel())
     ])
   }
+
+  static async loadAll(files: Files) {
+
+  }
+
+  static async load(files: Files) {
+    // TODO
+  }
+
+  export(): Files {
+    // TODO
+    return {}
+  }
+
 }
 
 // TODO: consider moving such logic to AIGC backend to colocate all AIGC generation prompts