diff --git a/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue b/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
index d5717d731..37fab6913 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
@@ -4,7 +4,7 @@ import { useMessageHandle } from '@/utils/exception'
 import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 import { UIButton } from '@/components/ui'
 import SettingsInput from '../common/SettingsInput.vue'
-import ReferenceCostumeInput from '../common/ReferenceCostumeInput.vue'
+import ReferenceImageInput from '../common/ReferenceImageInput.vue'
 import ArtStyleInput from '../common/ArtStyleInput.vue'
 import PerspectiveInput from '../common/PerspectiveInput.vue'
 import AnimationLoopModeInput from './AnimationLoopModeInput.vue'
@@ -44,11 +44,13 @@ const submitText = computed(() => {
     @enrich="handleEnrich"
   >
     <template #extra>
-      <ReferenceCostumeInput
+      <ReferenceImageInput
         :costumes="gen.sprite.costumes"
-        :selected-id="gen.referenceCostume?.id ?? null"
+        :selected-costume-id="gen.referenceCostume?.id ?? null"
+        :reference-image="gen.referenceImage"
         :clearable="false"
-        @update:selected-id="gen.setReferenceCostume($event)"
+        @update:selected-costume-id="gen.setReferenceCostume($event)"
+        @update:reference-image="gen.setReferenceImage($event)"
       />
       <ArtStyleInput :value="gen.settings.artStyle" @update:value="gen.setSettings({ artStyle: $event })" />
       <PerspectiveInput :value="gen.settings.perspective" @update:value="gen.setSettings({ perspective: $event })" />
diff --git a/spx-gui/src/components/asset/gen/common/ReferenceCostumeInput.vue b/spx-gui/src/components/asset/gen/common/ReferenceCostumeInput.vue
deleted file mode 100644
index d73705f57..000000000
--- a/spx-gui/src/components/asset/gen/common/ReferenceCostumeInput.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { useAsyncComputed } from '@/utils/utils'
-import type { Costume } from '@/models/spx/costume'
-import ParamSelector from './param-settings/ParamSelector.vue'
-import imgCostume from './param-settings/assets/costume.svg'
-
-const props = withDefaults(
-  defineProps<{
-    /** The selected costume ID */
-    selectedId: string | null
-    /** Available costumes to select from */
-    costumes: Costume[]
-    /** Whether to allow clearing the selection */
-    clearable?: boolean
-  }>(),
-  {
-    clearable: true
-  }
-)
-
-const emit = defineEmits<{
-  'update:selectedId': [id: string | null]
-}>()
-
-const options = useAsyncComputed((onCleanup) => {
-  return Promise.all(
-    props.costumes.map(async (c) => {
-      const url = await c.img.url(onCleanup)
-      return {
-        value: c.id,
-        label: { en: c.name, zh: c.name },
-        image: url
-      }
-    })
-  )
-})
-
-const placeholder = {
-  label: { en: 'Reference costume', zh: '参考造型' },
-  image: imgCostume
-}
-</script>
-
-<template>
-  <ParamSelector
-    v-if="options != null"
-    :name="{ en: 'Reference costume', zh: '参考造型' }"
-    :tips="{ en: 'Please select the reference costume image', zh: '请选择参考造型图片' }"
-    :options="options"
-    :placeholder="placeholder"
-    :clearable="clearable"
-    :value="selectedId"
-    @update:value="emit('update:selectedId', $event)"
-  />
-</template>
diff --git a/spx-gui/src/components/asset/gen/common/ReferenceImageInput.vue b/spx-gui/src/components/asset/gen/common/ReferenceImageInput.vue
new file mode 100644
index 000000000..b4bbfc3ef
--- /dev/null
+++ b/spx-gui/src/components/asset/gen/common/ReferenceImageInput.vue
@@ -0,0 +1,317 @@
+<script lang="ts" setup>
+import { computed, inject, shallowRef, watch } from 'vue'
+import { UIBlockItem, UIBlockItemTitle, UICornerIcon, UIDropdownWithTooltip, UIIcon, UIImg } from '@/components/ui'
+import { useFileUrl, imgExts } from '@/utils/file'
+import { useAsyncComputed } from '@/utils/utils'
+import { selectFileWithUploadLimit } from '@/models/common/cloud'
+import { fromNativeFile, type File } from '@/models/common/file'
+import { useMessageHandle } from '@/utils/exception'
+import type { Costume } from '@/models/spx/costume'
+import { settingsInputCtxKey } from './SettingsInput.vue'
+import imgCostume from './param-settings/assets/costume.svg'
+
+const props = withDefaults(
+  defineProps<{
+    /** Available costumes to select from. When omitted, only local upload is shown. */
+    costumes?: Costume[]
+    /** The selected costume ID (mutually exclusive with referenceImage) */
+    selectedCostumeId?: string | null
+    /** The reference image file (mutually exclusive with selectedCostumeId) */
+    referenceImage: File | null
+    /** Whether to allow clearing the selection */
+    clearable?: boolean
+  }>(),
+  {
+    costumes: undefined,
+    selectedCostumeId: null,
+    clearable: true
+  }
+)
+
+const emit = defineEmits<{
+  'update:selectedCostumeId': [id: string | null]
+  'update:referenceImage': [File | null]
+}>()
+
+const settingsInputCtx = inject(settingsInputCtxKey)
+if (settingsInputCtx == null) throw new Error('settingsInputCtxKey should be provided')
+
+const disabled = computed(() => settingsInputCtx.disabled || settingsInputCtx.readonly)
+const iconOnly = computed(() => settingsInputCtx.iconOnly)
+
+// Costume options with resolved image URLs
+const costumeOptions = useAsyncComputed((onCleanup) => {
+  if (props.costumes == null) return Promise.resolve([])
+  return Promise.all(
+    props.costumes.map(async (c) => {
+      const url = await c.img.url(onCleanup)
+      return { id: c.id, name: c.name, imageUrl: url }
+    })
+  )
+})
+
+// Track uploaded file locally so deselecting doesn't lose it
+const uploadedFile = shallowRef<File | null>(props.referenceImage)
+watch(
+  () => props.referenceImage,
+  (image) => {
+    if (image != null) uploadedFile.value = image
+  }
+)
+const [uploadedThumbnailUrl] = useFileUrl(() => uploadedFile.value)
+
+// Current active state
+const hasSelection = computed(() => props.selectedCostumeId != null || props.referenceImage != null)
+
+// Determine button display: show selected costume image, uploaded image, or placeholder
+const selectedCostumeOption = computed(() => {
+  if (props.selectedCostumeId == null) return null
+  return costumeOptions.value?.find((o) => o.id === props.selectedCostumeId) ?? null
+})
+const buttonImageUrl = computed(() => {
+  if (selectedCostumeOption.value != null) return selectedCostumeOption.value.imageUrl
+  if (props.referenceImage != null && uploadedThumbnailUrl.value != null) return uploadedThumbnailUrl.value
+  return null
+})
+
+const name = { en: 'Reference image', zh: '参考图' }
+
+const tooltipText = computed(() => {
+  if (selectedCostumeOption.value != null) {
+    return {
+      en: `Reference image: ${selectedCostumeOption.value.name}`,
+      zh: `参考图：${selectedCostumeOption.value.name}`
+    }
+  }
+  if (props.referenceImage != null) {
+    return { en: `Reference image: ${props.referenceImage.name}`, zh: `参考图：${props.referenceImage.name}` }
+  }
+  return name
+})
+
+const dropdownHintText = computed(() => {
+  if (props.costumes == null) {
+    return { en: 'Upload a local image as reference', zh: '上传本地图片作为参考' }
+  }
+  return {
+    en: 'Select a generated costume or upload a local image as reference',
+    zh: '选择已生成的造型或上传本地图片作为参考'
+  }
+})
+
+function handleSelectCostume(id: string) {
+  if (props.clearable && props.selectedCostumeId === id) {
+    emit('update:selectedCostumeId', null)
+  } else {
+    emit('update:selectedCostumeId', id)
+    emit('update:referenceImage', null)
+  }
+}
+
+function handleClearCostume() {
+  emit('update:selectedCostumeId', null)
+}
+
+const handleUpload = useMessageHandle(
+  async () => {
+    const nativeFile = await selectFileWithUploadLimit({ accept: imgExts })
+    const file = fromNativeFile(nativeFile)
+    uploadedFile.value = file
+    emit('update:referenceImage', file)
+    emit('update:selectedCostumeId', null)
+  },
+  { en: 'Failed to upload reference image', zh: '上传参考图失败' }
+).fn
+
+function handleToggleUploaded() {
+  if (props.referenceImage != null) {
+    if (!props.clearable) return
+    emit('update:referenceImage', null)
+  } else {
+    emit('update:referenceImage', uploadedFile.value)
+    emit('update:selectedCostumeId', null)
+  }
+}
+
+function handleClearUploaded() {
+  if (!props.clearable) return
+  emit('update:referenceImage', null)
+}
+</script>
+
+<template>
+  <UIDropdownWithTooltip :disabled="disabled" placement="top">
+    <template #trigger>
+      <button
+        v-radar="{
+          name: $t(name),
+          desc: 'Click to select a reference image for generation'
+        }"
+        class="param-button"
+        :class="[{ 'icon-only': iconOnly }]"
+        :disabled="disabled"
+      >
+        <img
+          v-if="buttonImageUrl != null"
+          :class="['button-image', { disabled, placeholder: !hasSelection }]"
+          :src="buttonImageUrl"
+          alt=""
+        />
+        <img v-else :class="['button-image', { disabled, placeholder: true }]" :src="imgCostume" alt="" />
+        <template v-if="!iconOnly">
+          {{ $t(name) }}
+        </template>
+      </button>
+    </template>
+    <template #tooltip-content>
+      {{ $t(tooltipText) }}
+    </template>
+    <template #dropdown-content>
+      <div class="dropdown-content">
+        <div>{{ $t(dropdownHintText) }}</div>
+        <ul class="options">
+          <!-- Costume options -->
+          <UIBlockItem
+            v-for="option in costumeOptions"
+            :key="option.id"
+            v-radar="{
+              name: `Option '${option.name}'`,
+              desc: `Select '${option.name}' as reference image`
+            }"
+            class="option"
+            :active="selectedCostumeId === option.id"
+            @click="handleSelectCostume(option.id)"
+          >
+            <UIImg class="costume-image" :src="option.imageUrl" size="cover" />
+            <UIBlockItemTitle size="medium">
+              {{ option.name }}
+            </UIBlockItemTitle>
+            <UICornerIcon
+              v-show="clearable && selectedCostumeId === option.id"
+              type="minus"
+              @click.stop.prevent="handleClearCostume"
+            />
+          </UIBlockItem>
+          <!-- Uploaded image option -->
+          <UIBlockItem
+            v-if="uploadedFile != null && uploadedThumbnailUrl != null"
+            v-radar="{ name: 'Uploaded reference', desc: 'Click to toggle uploaded reference image' }"
+            class="option"
+            :active="referenceImage != null"
+            @click="handleToggleUploaded"
+          >
+            <img class="uploaded-image" :src="uploadedThumbnailUrl" alt="" />
+            <UICornerIcon
+              v-show="clearable && referenceImage != null"
+              type="minus"
+              @click.stop.prevent="handleClearUploaded"
+            />
+          </UIBlockItem>
+          <!-- Upload button -->
+          <UIBlockItem
+            v-radar="{ name: 'Upload image', desc: 'Click to upload a local image' }"
+            class="option"
+            @click="handleUpload"
+          >
+            <div class="upload-placeholder">
+              <UIIcon class="upload-icon" type="plus" />
+            </div>
+          </UIBlockItem>
+        </ul>
+      </div>
+    </template>
+  </UIDropdownWithTooltip>
+</template>
+
+<style lang="scss" scoped>
+.param-button {
+  height: 32px;
+  padding: 0 8px 0 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 13px;
+  line-height: 20px;
+
+  color: var(--ui-color-grey-900);
+  border-radius: var(--ui-border-radius-2);
+  border: 1px solid var(--ui-color-grey-400);
+  background: var(--ui-color-grey-100);
+
+  &.icon-only {
+    aspect-ratio: 1;
+    padding: 0;
+  }
+
+  &:hover:not(:active, :disabled) {
+    cursor: pointer;
+    background: var(--ui-color-grey-300);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--ui-color-grey-300);
+    color: var(--ui-color-grey-600);
+  }
+}
+
+.button-image {
+  width: 24px;
+  height: 24px;
+  border-radius: 10px;
+  object-fit: cover;
+
+  &.disabled {
+    opacity: 0.4;
+  }
+  &.placeholder.disabled {
+    filter: invert(96%) sepia(11%) saturate(163%) hue-rotate(169deg) brightness(91%) contrast(88%);
+  }
+}
+
+.dropdown-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  max-width: 408px;
+
+  .options {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .costume-image {
+    width: 80px;
+    height: 60px;
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 4px;
+  }
+
+  .uploaded-image,
+  .upload-placeholder {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    margin: 2px;
+    object-fit: cover;
+  }
+
+  .upload-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ui-color-grey-400);
+
+    .upload-icon {
+      width: 24px;
+      height: 24px;
+      color: var(--ui-color-grey-700);
+    }
+  }
+}
+</style>
diff --git a/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue b/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
index 8c97d50cc..1f3e4782e 100644
--- a/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
@@ -4,7 +4,7 @@ import { useMessageHandle } from '@/utils/exception'
 import type { CostumeGen } from '@/models/spx/gen/costume-gen'
 import { UIButton } from '@/components/ui'
 import SettingsInput from '../common/SettingsInput.vue'
-import ReferenceCostumeInput from '../common/ReferenceCostumeInput.vue'
+import ReferenceImageInput from '../common/ReferenceImageInput.vue'
 import ArtStyleInput from '../common/ArtStyleInput.vue'
 import PerspectiveInput from '../common/PerspectiveInput.vue'
 import FacingInput from './FacingInput.vue'
@@ -42,10 +42,12 @@ const submitText = computed(() => {
     @enrich="handleEnrich"
   >
     <template #extra>
-      <ReferenceCostumeInput
+      <ReferenceImageInput
         :costumes="gen.sprite.costumes"
-        :selected-id="gen.referenceCostume?.id ?? null"
-        @update:selected-id="gen.setReferenceCostume($event)"
+        :selected-costume-id="gen.referenceCostume?.id ?? null"
+        :reference-image="gen.referenceImage"
+        @update:selected-costume-id="gen.setReferenceCostume($event)"
+        @update:reference-image="gen.setReferenceImage($event)"
       />
       <FacingInput :value="gen.settings.facing" @update:value="gen.setSettings({ facing: $event })" />
       <ArtStyleInput :value="gen.settings.artStyle" @update:value="gen.setSettings({ artStyle: $event })" />
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
index 1db68f5ef..03c8dfd27 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
@@ -6,6 +6,7 @@ import SettingsInput from '../common/SettingsInput.vue'
 import SpriteCategoryInput from './SpriteCategoryInput.vue'
 import ArtStyleInput from '../common/ArtStyleInput.vue'
 import PerspectiveInput from '../common/PerspectiveInput.vue'
+import ReferenceImageInput from '../common/ReferenceImageInput.vue'
 import EnrichableSubmitButton from '../common/EnrichableSubmitButton.vue'
 
 const props = withDefaults(
@@ -63,6 +64,10 @@ const submitText = computed(() => {
       <SpriteCategoryInput :value="gen.settings.category" @update:value="gen.setSettings({ category: $event })" />
       <ArtStyleInput :value="gen.settings.artStyle" @update:value="gen.setSettings({ artStyle: $event })" />
       <PerspectiveInput :value="gen.settings.perspective" @update:value="gen.setSettings({ perspective: $event })" />
+      <ReferenceImageInput
+        :reference-image="gen.referenceImage"
+        @update:reference-image="gen.setReferenceImage($event)"
+      />
     </template>
     <template #submit>
       <EnrichableSubmitButton
@@ -73,8 +78,9 @@ const submitText = computed(() => {
         :loading="imageGenerating"
         @enrich="handleEnrich"
         @submit="handleSubmit"
-        >{{ $t(submitText) }}</EnrichableSubmitButton
       >
+        {{ $t(submitText) }}
+      </EnrichableSubmitButton>
     </template>
   </SettingsInput>
 </template>
diff --git a/spx-gui/src/models/spx/gen/animation-gen.test.ts b/spx-gui/src/models/spx/gen/animation-gen.test.ts
index 7abe11725..f012a2aeb 100644
--- a/spx-gui/src/models/spx/gen/animation-gen.test.ts
+++ b/spx-gui/src/models/spx/gen/animation-gen.test.ts
@@ -141,7 +141,7 @@ describe('AnimationGen', () => {
     await gen.enrich()
 
     // Try to generate video without reference costume
-    await expect(gen.generateVideo()).rejects.toThrow('reference costume expected')
+    await expect(gen.generateVideo()).rejects.toThrow('reference image expected')
   })
 
   it('should throw error when extracting frames without video', async () => {
diff --git a/spx-gui/src/models/spx/gen/animation-gen.ts b/spx-gui/src/models/spx/gen/animation-gen.ts
index 6d80ffcf2..8ae9ac3f5 100644
--- a/spx-gui/src/models/spx/gen/animation-gen.ts
+++ b/spx-gui/src/models/spx/gen/animation-gen.ts
@@ -36,6 +36,7 @@ export type AnimationGenInits = {
   id?: string
   settings?: Partial<Omit<AnimationSettings, 'referenceFrameUrl'>>
   referenceCostumeId?: string | null
+  referenceImage?: File | null
   video?: File
   framesConfig?: FramesConfig
   enrichPhase?: Phase<AnimationSettings>
@@ -48,9 +49,16 @@ export type AnimationGenInits = {
 export type RawAnimationGenConfig = Prettify<
   Omit<
     AnimationGenInits,
-    'enrichPhase' | 'generateVideoTask' | 'generateVideoPhase' | 'extractFramesTask' | 'finishPhase' | 'video'
+    | 'enrichPhase'
+    | 'generateVideoTask'
+    | 'generateVideoPhase'
+    | 'extractFramesTask'
+    | 'finishPhase'
+    | 'video'
+    | 'referenceImage'
   > & {
     videoPath?: string
+    referenceImagePath?: string
     enrichPhaseSerialized?: PhaseSerialized<AnimationSettings>
     generateVideoTaskSerialized?: TaskSerialized<TaskType.GenerateAnimationVideo>
     generateVideoPhaseSerialized?: PhaseSerialized<string>
@@ -96,6 +104,7 @@ export class AnimationGen extends Disposable {
       ...inits.settings
     }
     this.referenceCostumeId = inits.referenceCostumeId ?? null
+    this.referenceImage = inits.referenceImage ?? null
     this.enrichPhase = inits.enrichPhase ?? new Phase({ en: 'enrich animation settings', zh: '丰富动画设置' })
     this.generateVideoTask = inits.generateVideoTask ?? null
     this.generateVideoPhase =
@@ -161,6 +170,13 @@ export class AnimationGen extends Disposable {
   }
   setReferenceCostume(costumeId: string | null) {
     this.referenceCostumeId = costumeId
+    if (costumeId != null) this.referenceImage = null
+  }
+
+  referenceImage: File | null = null
+  setReferenceImage(file: File | null) {
+    this.referenceImage = file
+    if (file != null) this.referenceCostumeId = null
   }
 
   get generateVideoState() {
@@ -170,9 +186,9 @@ export class AnimationGen extends Disposable {
     this.setVideo(null)
     this.setFramesConfig(null)
     const video = await this.generateVideoPhase.run(async (reporter) => {
-      const costume = this.referenceCostume
-      if (costume == null) throw new Error('reference costume expected')
-      const referenceFrameUrl = await saveFile(costume.img)
+      const refImg = this.referenceImage ?? this.referenceCostume?.img ?? null
+      if (refImg == null) throw new Error('reference image expected')
+      const referenceFrameUrl = await saveFile(refImg)
       const settings = { ...this.settings, referenceFrameUrl }
       this.generateVideoTask?.tryCancel()
       this.generateVideoTask = new Task(TaskType.GenerateAnimationVideo)
@@ -289,6 +305,12 @@ export class AnimationGen extends Disposable {
       config.videoPath = videoPath
     }
 
+    if (this.referenceImage != null) {
+      const refPath = `${assetsPath}/referenceImage${extname(this.referenceImage.name)}`
+      files[refPath] = this.referenceImage
+      config.referenceImagePath = refPath
+    }
+
     return [config, files]
   }
 
@@ -303,6 +325,7 @@ export class AnimationGen extends Disposable {
       id,
       settings,
       referenceCostumeId,
+      referenceImagePath,
       framesConfig,
       videoPath,
       enrichPhaseSerialized,
@@ -320,6 +343,10 @@ export class AnimationGen extends Disposable {
     const inits: AnimationGenInits = { id: genId }
     inits.settings = settings
     if (referenceCostumeId != null) inits.referenceCostumeId = referenceCostumeId
+    if (referenceImagePath != null) {
+      const refFile = files[referenceImagePath]
+      if (refFile != null) inits.referenceImage = refFile
+    }
     if (framesConfig != null) inits.framesConfig = framesConfig
     if (enrichPhaseSerialized != null) inits.enrichPhase = Phase.load(enrichPhaseSerialized)
     if (generateVideoTaskSerialized != null) inits.generateVideoTask = Task.load(generateVideoTaskSerialized)
diff --git a/spx-gui/src/models/spx/gen/costume-gen.ts b/spx-gui/src/models/spx/gen/costume-gen.ts
index 381d4322e..4e195ba47 100644
--- a/spx-gui/src/models/spx/gen/costume-gen.ts
+++ b/spx-gui/src/models/spx/gen/costume-gen.ts
@@ -33,6 +33,7 @@ export type CostumeGenInits = {
   id?: string
   settings?: Partial<Omit<CostumeSettings, 'referenceImageUrl'>>
   referenceCostumeId?: string
+  referenceImage?: File | null
   image?: File
   enrichPhase?: Phase<CostumeSettings>
   generateTask?: Task<TaskType.GenerateCostume>
@@ -41,8 +42,12 @@ export type CostumeGenInits = {
 }
 
 export type RawCostumeGenConfig = Prettify<
-  Omit<CostumeGenInits, 'result' | 'enrichPhase' | 'generateTask' | 'generatePhase' | 'finishPhase' | 'image'> & {
+  Omit<
+    CostumeGenInits,
+    'result' | 'enrichPhase' | 'generateTask' | 'generatePhase' | 'finishPhase' | 'image' | 'referenceImage'
+  > & {
     imagePath?: string
+    referenceImagePath?: string
     enrichPhaseSerialized?: PhaseSerialized<CostumeSettings>
     generateTaskSerialized?: TaskSerialized<TaskType.GenerateCostume>
     generatePhaseSerialized?: PhaseSerialized<string>
@@ -87,6 +92,7 @@ export class CostumeGen extends Disposable {
       ...inits.settings
     }
     this.referenceCostumeId = inits.referenceCostumeId ?? null
+    this.referenceImage = inits.referenceImage ?? null
     this.image = inits.image ?? null
     return reactive(this) as this
   }
@@ -143,6 +149,13 @@ export class CostumeGen extends Disposable {
   }
   setReferenceCostume(costumeId: string | null) {
     this.referenceCostumeId = costumeId
+    if (costumeId != null) this.referenceImage = null
+  }
+
+  referenceImage: File | null = null
+  setReferenceImage(file: File | null) {
+    this.referenceImage = file
+    if (file != null) this.referenceCostumeId = null
   }
 
   image: File | null = null
@@ -156,8 +169,8 @@ export class CostumeGen extends Disposable {
   async generate() {
     this.setImage(null)
     const image = await this.generatePhase.run(async (reporter) => {
-      const referenceCostume = this.referenceCostume
-      const referenceImageUrl = referenceCostume != null ? await saveFile(referenceCostume.img) : null
+      const refImg = this.referenceImage ?? this.referenceCostume?.img ?? null
+      const referenceImageUrl = refImg != null ? await saveFile(refImg) : null
       const settings = { ...this.settings, referenceImageUrl }
       this.generateTask?.tryCancel()
       this.generateTask = new Task(TaskType.GenerateCostume)
@@ -236,6 +249,11 @@ export class CostumeGen extends Disposable {
       finishPhaseSerialized
     }
     if (imagePath != null) config.imagePath = imagePath
+    if (this.referenceImage != null) {
+      const refPath = `${assetsPath}/referenceImage${extname(this.referenceImage.name)}`
+      files[refPath] = this.referenceImage
+      config.referenceImagePath = refPath
+    }
     return [config, files]
   }
 
@@ -250,6 +268,7 @@ export class CostumeGen extends Disposable {
       id,
       settings,
       imagePath,
+      referenceImagePath,
       enrichPhaseSerialized,
       generateTaskSerialized,
       generatePhaseSerialized,
@@ -262,6 +281,10 @@ export class CostumeGen extends Disposable {
     const inits: CostumeGenInits = { id: genId }
     if (settings != null) inits.settings = settings
     if (referenceCostumeId != null) inits.referenceCostumeId = referenceCostumeId
+    if (referenceImagePath != null) {
+      const refFile = files[referenceImagePath]
+      if (refFile != null) inits.referenceImage = refFile
+    }
     if (enrichPhaseSerialized != null) inits.enrichPhase = Phase.load(enrichPhaseSerialized)
     if (generateTaskSerialized != null) inits.generateTask = Task.load(generateTaskSerialized)
     if (generatePhaseSerialized != null) {
diff --git a/spx-gui/src/models/spx/gen/sprite-gen.ts b/spx-gui/src/models/spx/gen/sprite-gen.ts
index fc4d768f6..3e4c66caf 100644
--- a/spx-gui/src/models/spx/gen/sprite-gen.ts
+++ b/spx-gui/src/models/spx/gen/sprite-gen.ts
@@ -23,7 +23,7 @@ import type { Animation } from '../animation'
 import { getProjectSettings, mapPhaseResult, Phase, Task, type PhaseSerialized, type TaskSerialized } from './common'
 import { CostumeGen, type RawCostumeGenConfig } from './costume-gen'
 import { AnimationGen, type RawAnimationGenConfig } from './animation-gen'
-import { createFileWithUniversalUrl } from '../../common/cloud'
+import { createFileWithUniversalUrl, saveFile } from '../../common/cloud'
 import type { File, Files } from '../../common/file'
 import { fromConfig, toConfig, listDirs } from '../../common/file'
 import {
@@ -53,6 +53,7 @@ export type SpriteGenInits = {
   settings?: Partial<SpriteSettings>
   imageIndex?: number | null
   selectedItem?: SpriteGenSelected | null
+  referenceImage?: File | null
   animationGenIdBindings?: Partial<Record<State, string>>
   enrichPhase?: Phase<SpriteSettings>
   genImagesTask?: Task<TaskType.GenerateCostume>
@@ -65,8 +66,15 @@ export type SpriteGenInits = {
 export type RawSpriteGenConfig = Prettify<
   Omit<
     SpriteGenInits,
-    'enrichPhase' | 'genImagesTask' | 'genImagesPhase' | 'prepareContentPhase' | 'costumes' | 'animations'
+    | 'enrichPhase'
+    | 'genImagesTask'
+    | 'genImagesPhase'
+    | 'prepareContentPhase'
+    | 'costumes'
+    | 'animations'
+    | 'referenceImage'
   > & {
+    referenceImagePath?: string
     enrichPhaseSerialized?: PhaseSerialized<SpriteSettings>
     genImagesTaskSerialized?: TaskSerialized<TaskType.GenerateCostume>
     genImagesPhaseSerialized?: PhaseSerialized<string[]>
@@ -111,6 +119,7 @@ export class SpriteGen extends Disposable {
     }
     this.imageIndex = inits.imageIndex ?? null
     this.selectedItem = inits.selectedItem ?? null
+    this.referenceImage = inits.referenceImage ?? null
     this.previewProject = new SpxProject()
     this.previewSprite = this.createSprite()
     this.previewProject.addSprite(this.previewSprite)
@@ -200,6 +209,9 @@ export class SpriteGen extends Disposable {
     this.setImageIndex(null)
     return this.genImagesPhase.run(async (reporter) => {
       const settings = this.getDefaultCostumeSettings()
+      if (this.referenceImage != null) {
+        settings.referenceImageUrl = await saveFile(this.referenceImage)
+      }
       this.genImagesTask?.tryCancel()
       this.genImagesTask = new Task(TaskType.GenerateCostume)
       await this.genImagesTask.start({ settings, n: 4 })
@@ -416,6 +428,11 @@ export class SpriteGen extends Disposable {
     this.selectedItem = item
   }
 
+  referenceImage: File | null = null
+  setReferenceImage(file: File | null) {
+    this.referenceImage = file
+  }
+
   finish() {
     const previewSprite = this.previewSprite
     const sprite = this.createSprite()
@@ -493,6 +510,7 @@ export class SpriteGen extends Disposable {
       settings,
       imageIndex,
       selectedItem,
+      referenceImagePath,
       animationGenIdBindings,
       enrichPhaseSerialized,
       genImagesTaskSerialized,
@@ -510,6 +528,10 @@ export class SpriteGen extends Disposable {
     inits.settings = settings
     if (imageIndex != null) inits.imageIndex = imageIndex
     if (selectedItem != null) inits.selectedItem = selectedItem
+    if (referenceImagePath != null) {
+      const refFile = files[referenceImagePath]
+      if (refFile != null) inits.referenceImage = refFile
+    }
     if (animationGenIdBindings != null) inits.animationGenIdBindings = animationGenIdBindings
     if (enrichPhaseSerialized != null) inits.enrichPhase = Phase.load(enrichPhaseSerialized)
     if (genImagesTaskSerialized != null) inits.genImagesTask = Task.load(genImagesTaskSerialized)
@@ -573,6 +595,11 @@ export class SpriteGen extends Disposable {
       costumeConfigs,
       animationConfigs
     }
+    if (this.referenceImage != null) {
+      const refPath = `${basePath}/referenceImage${extname(this.referenceImage.name)}`
+      files[refPath] = this.referenceImage
+      config.referenceImagePath = refPath
+    }
     if (this.imageIndex != null) config.imageIndex = this.imageIndex
     if (this.selectedItem != null) config.selectedItem = this.selectedItem
     files[`${spriteGenAssetPath}/${this.name}/${spriteGenConfigFileName}`] = fromConfig(spriteGenConfigFileName, config)