feat: add visual novel AI image entry points

src/components/visual-novel-result/VisualNovelResultView.test.tsx

@@ -11,6 +11,8 @@ import { VisualNovelResultView } from './VisualNovelResultView';
 vi.mock('../../services/visual-novel-creation', () => ({
   createVisualNovelBackgroundMusicTask: vi.fn(),
   createVisualNovelSoundEffectTask: vi.fn(),
+  generateVisualNovelImageAsset: vi.fn(),
+  buildVisualNovelImageGenerationPrompt: vi.fn(() => '默认图片提示词'),
   listVisualNovelHistoryAssets: vi.fn().mockResolvedValue([]),
   publishVisualNovelBackgroundMusicAsset: vi.fn(),
   publishVisualNovelSoundEffectAsset: vi.fn(),
@@ -134,3 +136,58 @@ test('visual novel result uploads scene and character assets into platform refer
     onSaveDraft.mock.calls[0]?.[0].scenes[0]?.backgroundImageSrc,
   ).toContain('/generated-custom-world-scenes/');
 });
+
+test('visual novel result generates scene background from asset picker', async () => {
+  const user = userEvent.setup();
+  const onSaveDraft = vi.fn();
+  const visualNovelCreation = await import('../../services/visual-novel-creation');
+  const generateImageMock = vi.mocked(
+    visualNovelCreation.generateVisualNovelImageAsset,
+  );
+
+  generateImageMock.mockResolvedValue({
+    imageSrc: '/generated-custom-world-scenes/vn-profile/scene-ai.webp',
+    assetId: 'asset-scene-ai',
+    model: 'test-image-model',
+    size: '1280*720',
+    taskId: 'task-scene-ai',
+    prompt: '默认图片提示词',
+  });
+
+  render(
+    <VisualNovelResultView
+      draft={mockVisualNovelDraft}
+      onBack={() => {}}
+      onSaveDraft={onSaveDraft}
+    />,
+  );
+
+  await user.click(screen.getByRole('button', { name: '场景' }));
+  await user.click(screen.getByRole('button', { name: /风雪站台/u }));
+
+  const editorDialog = screen.getByRole('dialog', { name: '风雪站台' });
+  await user.click(
+    within(editorDialog).getAllByRole('button', { name: '背景图' })[0]!,
+  );
+  await user.click(
+    within(screen.getByRole('dialog', { name: '背景图' })).getByRole('button', {
+      name: 'AI生成',
+    }),
+  );
+
+  await user.click(within(editorDialog).getByRole('button', { name: '关闭' }));
+  await user.click(screen.getAllByRole('button', { name: '保存草稿' })[1]!);
+
+  expect(generateImageMock).toHaveBeenCalledWith(
+    expect.objectContaining({
+      kind: 'scene_background',
+      scene: expect.objectContaining({
+        sceneId: mockVisualNovelDraft.scenes[0]?.sceneId,
+      }),
+      prompt: '默认图片提示词',
+    }),
+  );
+  expect(onSaveDraft.mock.calls[0]?.[0].scenes[0]?.backgroundImageSrc).toBe(
+    '/generated-custom-world-scenes/vn-profile/scene-ai.webp',
+  );
+});

src/components/visual-novel-result/VisualNovelResultView.tsx

@@ -4,16 +4,16 @@ import {
   ImagePlus,
   Images,
   Loader2,
+  type LucideIcon,
   Music,
-  Save,
   PenLine,
   Play,
+  Save,
   Settings,
   Sparkles,
   Upload,
   Waves,
   X,
-  type LucideIcon,
 } from 'lucide-react';
 import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -27,9 +27,12 @@ import type {
   VisualNovelStoryPhaseDraft,
   VisualNovelValidationIssue,
 } from '../../../packages/shared/src/contracts/visualNovel';
+import { resolveAssetReadUrl } from '../../services/assetReadUrlService';
 import {
+  buildVisualNovelImageGenerationPrompt,
   createVisualNovelBackgroundMusicTask,
   createVisualNovelSoundEffectTask,
+  generateVisualNovelImageAsset,
   listVisualNovelHistoryAssets,
   publishVisualNovelBackgroundMusicAsset,
   publishVisualNovelSoundEffectAsset,
@@ -38,7 +41,6 @@ import {
   type VisualNovelHistoryAssetKind,
   type VisualNovelUploadAssetKind,
 } from '../../services/visual-novel-creation';
-import { resolveAssetReadUrl } from '../../services/assetReadUrlService';
 import { useAuthUi } from '../auth/AuthUiContext';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 import { mockVisualNovelDraft } from '../visual-novel-runtime/visualNovelMockData';
@@ -102,10 +104,23 @@ type VisualNovelAssetPickerConfig = {
   profileId?: string | null;
   entityId?: string | null;
   previewTone: 'image' | 'audio';
+  imageGeneratorConfig?: VisualNovelImageGeneratorConfig;
 };
 
 type VisualNovelAudioGeneratorKind = 'background_music' | 'sound_effect';
 
+type VisualNovelImageGeneratorKind =
+  | 'cover'
+  | 'scene_background'
+  | 'character_standee';
+
+type VisualNovelImageGeneratorConfig = {
+  kind: VisualNovelImageGeneratorKind;
+  draft: VisualNovelResultDraft;
+  scene?: VisualNovelSceneDraft | null;
+  character?: VisualNovelCharacterDraft | null;
+};
+
 type VisualNovelAudioGeneratorConfig = {
   kind: VisualNovelAudioGeneratorKind;
   scene: VisualNovelSceneDraft;
@@ -404,6 +419,7 @@ function VisualNovelAssetPickerDialog({
     Boolean(config.historyKind),
   );
   const [isUploading, setIsUploading] = useState(false);
+  const [isGeneratingImage, setIsGeneratingImage] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -445,6 +461,42 @@ function VisualNovelAssetPickerDialog({
     };
   }, [config.historyKind]);
 
+  const handleGenerateImage = async () => {
+    if (!config.imageGeneratorConfig || config.previewTone !== 'image') {
+      return;
+    }
+
+    setIsGeneratingImage(true);
+    setError(null);
+    try {
+      const result = await generateVisualNovelImageAsset({
+        ...config.imageGeneratorConfig,
+        prompt: buildVisualNovelImageGenerationPrompt(config.imageGeneratorConfig),
+      });
+      onSelect({
+        assetObjectId: result.assetId || result.taskId,
+        assetKind:
+          config.uploadKind === 'character_standee'
+            ? 'character_visual'
+            : config.uploadKind === 'cover'
+              ? 'visual_novel_cover_image'
+              : 'scene_image',
+        objectKey: '',
+        imageSrc: result.imageSrc,
+        profileId: config.profileId ?? null,
+        entityId: config.entityId ?? null,
+      });
+    } catch (generationError) {
+      setError(
+        generationError instanceof Error
+          ? generationError.message
+          : 'AI 图片生成失败。',
+      );
+    } finally {
+      setIsGeneratingImage(false);
+    }
+  };
+
   const handleUpload = async (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     event.currentTarget.value = '';
@@ -512,7 +564,7 @@ function VisualNovelAssetPickerDialog({
           <div className="mb-4 flex flex-wrap gap-2">
             <button
               type="button"
-              disabled={disabled || isUploading}
+              disabled={disabled || isUploading || isGeneratingImage}
               onClick={() => fileInputRef.current?.click()}
               className="platform-button platform-button--secondary min-h-10 px-4 py-2 text-sm"
             >
@@ -523,11 +575,28 @@ function VisualNovelAssetPickerDialog({
               )}
               上传
             </button>
+            {config.imageGeneratorConfig && config.previewTone === 'image' ? (
+              <button
+                type="button"
+                disabled={disabled || isUploading || isGeneratingImage}
+                onClick={() => {
+                  void handleGenerateImage();
+                }}
+                className="platform-button platform-button--primary min-h-10 px-4 py-2 text-sm"
+              >
+                {isGeneratingImage ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Sparkles className="h-4 w-4" />
+                )}
+                AI生成
+              </button>
+            ) : null}
             <input
               ref={fileInputRef}
               type="file"
               accept={config.accept}
-              disabled={disabled || isUploading}
+              disabled={disabled || isUploading || isGeneratingImage}
               onChange={(event) => {
                 void handleUpload(event);
               }}
@@ -609,6 +678,7 @@ function VisualNovelAssetField({
   entityId,
   historyKind,
   icon: Icon,
+  imageGeneratorConfig,
   label,
   onSelect,
   previewTone,
@@ -621,6 +691,7 @@ function VisualNovelAssetField({
   entityId?: string | null;
   historyKind?: VisualNovelHistoryAssetKind;
   icon: LucideIcon;
+  imageGeneratorConfig?: VisualNovelImageGeneratorConfig;
   label: string;
   onSelect: (asset: VisualNovelAssetReference) => void;
   previewTone: 'image' | 'audio';
@@ -710,6 +781,7 @@ function VisualNovelAssetField({
             profileId,
             entityId,
             previewTone,
+            imageGeneratorConfig,
           }}
           disabled={disabled}
           onClose={() => setIsPickerOpen(false)}
@@ -1051,6 +1123,7 @@ function VisualNovelProfileTab({
             accept="image/png,image/jpeg,image/webp"
             profileId={draft.profileId}
             previewTone="image"
+            imageGeneratorConfig={{ kind: 'cover', draft }}
             onSelect={(asset) =>
               onChange({ ...draft, coverImageSrc: asset.imageSrc })
             }
@@ -1321,10 +1394,12 @@ function VisualNovelRuntimeConfigTab({
 function VisualNovelCharacterEditor({
   item,
   disabled,
+  draft,
   onChange,
 }: {
   item: VisualNovelCharacterDraft;
   disabled: boolean;
+  draft: VisualNovelResultDraft;
   onChange: (item: VisualNovelCharacterDraft) => void;
 }) {
   return (
@@ -1396,6 +1471,11 @@ function VisualNovelCharacterEditor({
         profileId={null}
         entityId={item.characterId}
         previewTone="image"
+        imageGeneratorConfig={{
+          kind: 'character_standee',
+          draft,
+          character: item,
+        }}
         onSelect={(asset) =>
           onChange({
             ...item,
@@ -1432,11 +1512,13 @@ function VisualNovelSceneEditor({
   item,
   disabled,
   profileId,
+  draft,
   onChange,
 }: {
   item: VisualNovelSceneDraft;
   disabled: boolean;
   profileId?: string | null;
+  draft: VisualNovelResultDraft;
   onChange: (item: VisualNovelSceneDraft) => void;
 }) {
   return (
@@ -1510,6 +1592,11 @@ function VisualNovelSceneEditor({
         profileId={profileId ?? null}
         entityId={item.sceneId}
         previewTone="image"
+        imageGeneratorConfig={{
+          kind: 'scene_background',
+          draft,
+          scene: item,
+        }}
         onSelect={(asset) =>
           onChange({ ...item, backgroundImageSrc: asset.imageSrc })
         }
@@ -1890,6 +1977,7 @@ function VisualNovelEditorDialog({
             <VisualNovelCharacterEditor
               item={target.item}
               disabled={disabled}
+              draft={draft}
               onChange={updateCharacter}
             />
           ) : null}
@@ -1898,6 +1986,7 @@ function VisualNovelEditorDialog({
               item={target.item}
               disabled={disabled}
               profileId={draft.profileId}
+              draft={draft}
               onChange={updateScene}
             />
           ) : null}

src/services/visual-novel-creation/index.ts

@@ -1,3 +1,4 @@
-export * from './visualNovelCreationClient';
 export * from './visualNovelAssetClient';
 export * from './visualNovelAudioGenerationClient';
+export * from './visualNovelCreationClient';
+export * from './visualNovelImageGenerationClient';

src/services/visual-novel-creation/visualNovelImageGenerationClient.ts

@@ -0,0 +1,158 @@
+import type {
+  VisualNovelCharacterDraft,
+  VisualNovelResultDraft,
+  VisualNovelSceneDraft,
+} from '../../../packages/shared/src/contracts/visualNovel';
+import type {
+  CustomWorldSceneImageRequest,
+  CustomWorldSceneImageResult,
+} from '../aiTypes';
+import { generateRpgWorldSceneImage } from '../rpg-creation/rpgCreationAssetClient';
+
+export type VisualNovelImageGenerationKind =
+  | 'cover'
+  | 'scene_background'
+  | 'character_standee';
+
+export type VisualNovelImageGenerationRequest = {
+  kind: VisualNovelImageGenerationKind;
+  draft: VisualNovelResultDraft;
+  scene?: VisualNovelSceneDraft | null;
+  character?: VisualNovelCharacterDraft | null;
+  prompt?: string;
+  referenceImageSrc?: string;
+};
+
+function buildVisualNovelProfile(
+  draft: VisualNovelResultDraft,
+): CustomWorldSceneImageRequest['profile'] {
+  return {
+    id: draft.profileId?.trim() || 'visual-novel-draft',
+    name: draft.workTitle.trim() || draft.world.title.trim() || '视觉小说作品',
+    subtitle: draft.world.title.trim() || draft.workTitle.trim() || '视觉小说',
+    summary: draft.workDescription.trim() || draft.world.summary.trim(),
+    tone:
+      draft.world.defaultTone.trim() || draft.world.literaryStyle.trim() || '视觉小说',
+    playerGoal: draft.world.playerRole.trim() || '推进剧情并完成关键选择',
+    settingText: [
+      draft.world.premise,
+      draft.world.background,
+      draft.world.literaryStyle,
+    ]
+      .map((part) => part.trim())
+      .filter(Boolean)
+      .join('\n'),
+  };
+}
+
+function buildVisualNovelLandmark(
+  payload: VisualNovelImageGenerationRequest,
+): CustomWorldSceneImageRequest['landmark'] {
+  if (payload.kind === 'scene_background' && payload.scene) {
+    return {
+      id: payload.scene.sceneId,
+      name: payload.scene.name.trim() || '视觉小说场景',
+      description: payload.scene.description.trim() || payload.draft.world.summary,
+    };
+  }
+
+  if (payload.kind === 'character_standee' && payload.character) {
+    return {
+      id: payload.character.characterId,
+      name: `${payload.character.name.trim() || '视觉小说角色'}立绘`,
+      description: [
+        payload.character.appearance,
+        payload.character.personality,
+        payload.character.role,
+        payload.character.relationshipToPlayer,
+      ]
+        .map((part) => part?.trim() ?? '')
+        .filter(Boolean)
+        .join('；'),
+    };
+  }
+
+  return {
+    id: payload.draft.profileId?.trim() || 'visual-novel-cover',
+    name: `${payload.draft.workTitle.trim() || '视觉小说'}封面`,
+    description:
+      payload.draft.workDescription.trim() ||
+      payload.draft.world.summary.trim() ||
+      payload.draft.world.premise.trim(),
+  };
+}
+
+function buildDefaultVisualNovelImagePrompt(
+  payload: VisualNovelImageGenerationRequest,
+) {
+  const draft = payload.draft;
+  if (payload.kind === 'scene_background' && payload.scene) {
+    return [
+      `视觉小说场景背景：${payload.scene.name}`,
+      payload.scene.description,
+      draft.world.defaultTone,
+      '16:9 横版背景图，无文字，无 UI，无人物特写',
+    ]
+      .map((part) => part.trim())
+      .filter(Boolean)
+      .join('，');
+  }
+
+  if (payload.kind === 'character_standee' && payload.character) {
+    return [
+      `视觉小说角色立绘：${payload.character.name}`,
+      payload.character.appearance,
+      payload.character.personality,
+      payload.character.tone,
+      '透明感二次元全身或半身立绘，干净背景，无文字，无 UI',
+    ]
+      .map((part) => part.trim())
+      .filter(Boolean)
+      .join('，');
+  }
+
+  return [
+    `视觉小说作品封面：${draft.workTitle}`,
+    draft.workDescription,
+    draft.world.summary,
+    draft.world.defaultTone,
+    '精致视觉小说封面构图，无文字，无 UI，适合 4:3/16:9 裁切',
+  ]
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .join('，');
+}
+
+function resolveVisualNovelImageSize(kind: VisualNovelImageGenerationKind) {
+  if (kind === 'character_standee') {
+    return '768*1024';
+  }
+  return '1280*720';
+}
+
+export async function generateVisualNovelImageAsset(
+  payload: VisualNovelImageGenerationRequest,
+): Promise<CustomWorldSceneImageResult> {
+  const userPrompt =
+    payload.prompt?.trim() || buildDefaultVisualNovelImagePrompt(payload);
+
+  if (!userPrompt.trim()) {
+    throw new Error('请先补充图片生成提示词。');
+  }
+
+  return generateRpgWorldSceneImage({
+    profile: buildVisualNovelProfile(payload.draft),
+    landmark: buildVisualNovelLandmark(payload),
+    userPrompt,
+    size: resolveVisualNovelImageSize(payload.kind),
+    ...(payload.referenceImageSrc?.trim()
+      ? { referenceImageSrc: payload.referenceImageSrc.trim() }
+      : {}),
+  });
+}
+
+export function buildVisualNovelImageGenerationPrompt(
+  payload: VisualNovelImageGenerationRequest,
+) {
+  return buildDefaultVisualNovelImagePrompt(payload);
+}