forked from 77media/video-flow
314 lines
10 KiB
TypeScript
314 lines
10 KiB
TypeScript
import { StoryTemplateEntity } from "../domain/Entities";
|
|
import { useUploadFile } from "../domain/service";
|
|
import { debounce } from "lodash";
|
|
import { TemplateStoryUseCase } from "../usecase/templateStoryUseCase";
|
|
import { useState, useCallback, useMemo } from "react";
|
|
import { generateTextToImage } from "@/api/movie_start";
|
|
import { MovieProjectService, MovieProjectMode } from "./MovieProjectService";
|
|
import { CreateMovieProjectV3Request } from "@/api/DTO/movie_start_dto";
|
|
|
|
interface UseTemplateStoryService {
|
|
/** 模板列表 */
|
|
templateStoryList: StoryTemplateEntity[];
|
|
/** 当前选中要使用的模板 */
|
|
selectedTemplate: StoryTemplateEntity | null;
|
|
/** 加载状态 */
|
|
isLoading: boolean;
|
|
/** 获取模板列表函数 */
|
|
getTemplateStoryList: () => Promise<void>;
|
|
/**
|
|
* action 生成电影函数
|
|
* @param {string} user_id - 用户ID
|
|
* @param {"auto" | "manual"} mode - 生成模式
|
|
* @param {"720p" | "1080p" | "4k"} resolution - 分辨率
|
|
* @param {string} language - 语言
|
|
* @returns {Promise<string>} - 生成的电影ID
|
|
*/
|
|
actionStory: (
|
|
user_id: string,
|
|
mode: "auto" | "manual",
|
|
resolution: "720p" | "1080p" | "4k",
|
|
language: string,
|
|
aspectRatio?: "16:9" | "9:16"
|
|
) => Promise<string | undefined>;
|
|
/** 设置选中的模板 */
|
|
setSelectedTemplate: (template: StoryTemplateEntity | null) => void;
|
|
/** 清空数据 */
|
|
clearData: () => void;
|
|
/** 上传人物头像并分析 */
|
|
AvatarAndAnalyzeFeatures: (imageUrl: string, roleName: string) => Promise<void>;
|
|
/** 更新指定角色的图片 */
|
|
updateRoleImage: (roleName: string, imageUrl: string) => void;
|
|
/** 更新指定道具的图片 */
|
|
updateItemImage: (itemName: string, imageUrl: string) => void;
|
|
/** 带防抖的失焦处理函数 - 角色图片生成 */
|
|
handleRoleFieldBlur: (roleName: string, fieldValue: string) => void;
|
|
/** 带防抖的失焦处理函数 - 道具图片生成 */
|
|
handleItemFieldBlur: (itemName: string, fieldValue: string) => void;
|
|
}
|
|
|
|
export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
|
|
const [templateStoryList, setTemplateStoryList] = useState<
|
|
StoryTemplateEntity[]
|
|
>([]);
|
|
const [selectedTemplate, setSelectedTemplate] =
|
|
useState<StoryTemplateEntity | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
// 使用上传文件Hook
|
|
const { uploadFile } = useUploadFile();
|
|
|
|
/** 模板故事用例实例 */
|
|
const templateStoryUseCase = useMemo(() => new TemplateStoryUseCase(), []);
|
|
|
|
/**
|
|
* 获取模板列表函数
|
|
*/
|
|
const getTemplateStoryList = useCallback(async (): Promise<void> => {
|
|
try {
|
|
setIsLoading(true);
|
|
|
|
const templates = await templateStoryUseCase.getTemplateStoryList();
|
|
// templates.forEach(template => {
|
|
// if (template.id === 'f944abad-f42b-4899-b54a-a6beb9d27805') {
|
|
// template.freeInput = {
|
|
// user_tips: "How is coffee made?",
|
|
// constraints: "",
|
|
// free_input_text: ""
|
|
// };
|
|
// // template.storyRole = [];
|
|
// }
|
|
// if (template.id === 'e7438cd8-a23d-4974-8cde-13b5671b410c') {
|
|
// // template.freeInput = {
|
|
// // user_tips: "Input an English word you wanna learn",
|
|
// // constraints: "",
|
|
// // free_input_text: ""
|
|
// // };
|
|
// template.storyItem = [{
|
|
// ...template.storyItem[0],
|
|
// item_name: "Choose an English word you wanna learn"
|
|
// }];
|
|
// }
|
|
// });
|
|
|
|
setTemplateStoryList(templates);
|
|
setSelectedTemplate(templates[0]);
|
|
console.log(selectedTemplate);
|
|
} catch (err) {
|
|
console.error("获取模板列表失败:", err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [templateStoryUseCase]);
|
|
|
|
/**
|
|
* 更新指定角色的图片
|
|
* @param {string} roleName - 角色名称
|
|
* @param {string} imageUrl - 新的图片URL
|
|
*/
|
|
const updateRoleImage = useCallback(
|
|
(roleName: string, imageUrl: string): void => {
|
|
if (!selectedTemplate) {
|
|
console.warn("updateRoleImage: selectedTemplate 为空");
|
|
return;
|
|
}
|
|
|
|
console.log(`更新角色 ${roleName} 的图片:`, imageUrl);
|
|
|
|
const updatedTemplate = {
|
|
...selectedTemplate,
|
|
storyRole: selectedTemplate.storyRole.map((role) =>
|
|
role.role_name === roleName
|
|
? { ...role, photo_url: imageUrl }
|
|
: role
|
|
),
|
|
};
|
|
|
|
console.log("更新后的模板:", updatedTemplate);
|
|
setSelectedTemplate(updatedTemplate);
|
|
},
|
|
[selectedTemplate]
|
|
);
|
|
|
|
/**
|
|
* 更新指定道具的图片
|
|
* @param {string} itemName - 道具名称
|
|
* @param {string} imageUrl - 新的图片URL
|
|
*/
|
|
const updateItemImage = useCallback(
|
|
(itemName: string, imageUrl: string): void => {
|
|
if (!selectedTemplate) {
|
|
console.warn("updateItemImage: selectedTemplate 为空");
|
|
return;
|
|
}
|
|
|
|
console.log(`更新道具 ${itemName} 的图片:`, imageUrl);
|
|
|
|
const updatedTemplate = {
|
|
...selectedTemplate,
|
|
storyItem: selectedTemplate.storyItem.map((item) =>
|
|
item.item_name === itemName
|
|
? { ...item, photo_url: imageUrl }
|
|
: item
|
|
),
|
|
};
|
|
|
|
console.log("更新后的模板:", updatedTemplate);
|
|
setSelectedTemplate(updatedTemplate);
|
|
},
|
|
[selectedTemplate]
|
|
);
|
|
|
|
/**
|
|
* 上传人物头像并分析特征，替换旧的角色数据
|
|
* @param {string} imageUrl - 图片URL
|
|
* @param {string} roleName - 角色名称
|
|
*/
|
|
const AvatarAndAnalyzeFeatures = useCallback(
|
|
async (imageUrl: string, roleName: string): Promise<void> => {
|
|
try {
|
|
setIsLoading(true);
|
|
// 直接更新指定角色的图片
|
|
updateRoleImage(roleName, imageUrl);
|
|
} catch (error) {
|
|
console.error("人物头像上传和特征分析失败:", error);
|
|
throw error;
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
},
|
|
[updateRoleImage]
|
|
);
|
|
|
|
/**
|
|
* 带防抖的失焦处理函数 - 角色图片生成
|
|
* @param {string} roleName - 角色名称
|
|
* @param {string} fieldValue - 字段值
|
|
*/
|
|
const handleRoleFieldBlur = useCallback(
|
|
debounce(async (roleName: string, fieldValue: string): Promise<void> => {
|
|
try {
|
|
// 设置 loading 状态
|
|
setIsLoading(true);
|
|
|
|
// 调用图片生成接口
|
|
const result = await generateTextToImage({
|
|
description: fieldValue
|
|
});
|
|
|
|
if (result.successful && result.data?.image_url) {
|
|
// 更新对应角色的图片
|
|
updateRoleImage(roleName, result.data.image_url);
|
|
console.log(`角色 ${roleName} 图片生成成功:`, result.data.image_url);
|
|
} else {
|
|
console.error(`角色 ${roleName} 图片生成失败:`, result.message);
|
|
}
|
|
} catch (error) {
|
|
console.error(`角色 ${roleName} 处理失败:`, error);
|
|
} finally {
|
|
// 清除 loading 状态
|
|
setIsLoading(false);
|
|
}
|
|
}, 500),
|
|
[updateRoleImage, setIsLoading]
|
|
);
|
|
|
|
/**
|
|
* 带防抖的失焦处理函数 - 道具图片生成
|
|
* @param {string} itemName - 道具名称
|
|
* @param {string} fieldValue - 字段值
|
|
*/
|
|
const handleItemFieldBlur = useCallback(
|
|
debounce(async (itemName: string, fieldValue: string): Promise<void> => {
|
|
try {
|
|
// 设置 loading 状态
|
|
setIsLoading(true);
|
|
|
|
// 调用图片生成接口
|
|
const result = await generateTextToImage({
|
|
description: fieldValue
|
|
});
|
|
|
|
if (result.successful && result.data?.image_url) {
|
|
// 更新对应道具的图片
|
|
updateItemImage(itemName, result.data.image_url);
|
|
console.log(`道具 ${itemName} 图片生成成功:`, result.data.image_url);
|
|
} else {
|
|
console.error(`道具 ${itemName} 图片生成失败:`, result.message);
|
|
}
|
|
} catch (error) {
|
|
console.error(`道具 ${itemName} 处理失败:`, error);
|
|
} finally {
|
|
// 清除 loading 状态
|
|
setIsLoading(false);
|
|
}
|
|
}, 500),
|
|
[updateItemImage, setIsLoading]
|
|
);
|
|
|
|
const actionStory = useCallback(
|
|
async (
|
|
user_id: string,
|
|
mode: "auto" | "manual" = "auto",
|
|
resolution: "720p" | "1080p" | "4k" = "720p",
|
|
language: string = "English",
|
|
aspectRatio?: "16:9" | "9:16"
|
|
) => {
|
|
console.log('selectedTemplate', selectedTemplate)
|
|
try {
|
|
// 设置 loading 状态
|
|
setIsLoading(true);
|
|
const script = selectedTemplate?.freeInput && selectedTemplate.freeInput.length > 0 ? selectedTemplate.freeInput[0].free_input_text : "";
|
|
if (!script && !selectedTemplate?.storyRole.length && !selectedTemplate?.storyItem.length) {
|
|
throw new Error("please input what you want to generate");
|
|
}
|
|
|
|
const params: CreateMovieProjectV3Request = {
|
|
script: script,
|
|
category: selectedTemplate?.category || "",
|
|
user_id,
|
|
mode,
|
|
resolution,
|
|
storyRole: selectedTemplate?.storyRole || [],
|
|
storyItem: selectedTemplate?.storyItem || [],
|
|
freeInput: selectedTemplate?.freeInput || [],
|
|
language,
|
|
template_id: selectedTemplate?.template_id || "",
|
|
...(aspectRatio ? { aspect_ratio: aspectRatio } : {})
|
|
};
|
|
console.log("params", params);
|
|
const result = await MovieProjectService.createProject(
|
|
MovieProjectMode.TEMPLATE,
|
|
params
|
|
);
|
|
return result.project_id;
|
|
} catch (error) {
|
|
console.error("创建电影项目失败:", error);
|
|
throw error;
|
|
} finally {
|
|
// 清除 loading 状态
|
|
setIsLoading(false);
|
|
}
|
|
},
|
|
[selectedTemplate]
|
|
);
|
|
|
|
return {
|
|
templateStoryList,
|
|
selectedTemplate,
|
|
isLoading,
|
|
getTemplateStoryList,
|
|
actionStory,
|
|
setSelectedTemplate,
|
|
AvatarAndAnalyzeFeatures,
|
|
updateRoleImage,
|
|
updateItemImage,
|
|
handleRoleFieldBlur,
|
|
handleItemFieldBlur,
|
|
clearData: () => {
|
|
setTemplateStoryList([]);
|
|
setSelectedTemplate(null);
|
|
},
|
|
};
|
|
};
|