xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

播放器啊~

Browse Source
This commit is contained in:
海龙 2025-08-23 01:30:24 +08:00
parent 5473662fbb
commit b0e15c16c0
11 changed files with 580 additions and 402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/DTO/movie_start_dto.ts
View File

@ -200,8 +200,6 @@ export interface CreateMovieProjectV3Request {
mode: "auto" | "manual";
/** 分辨率：720p | 1080p | 4k */
resolution: "720p" | "1080p" | "4k";
/** 类型 */
genre: string;
/** 语言 */
language: string;
/**模板id */
@ -210,6 +208,8 @@ export interface CreateMovieProjectV3Request {
storyRole: {
/**角色名 */
role_name: string;
/**角色描述 */
role_description: string;
/**照片URL */
photo_url: string;
/**声音URL */

26
api/movie_start.ts
View File

@ -5,28 +5,26 @@ import {
MovieStartDTO,
StoryAnalysisTask,
MovieStoryTaskDetail,
CreateMovieProjectV3Request,
} from "./DTO/movie_start_dto";
import { get, post } from "./request";
import {
StoryTemplateEntity,
ImageStoryEntity,
} from "@/app/service/domain/Entities";
/**
* 获取故事模板列表
*/
export const getTemplateStoryList = async () => {
return await get<ApiResponse<StoryTemplateEntity[]>>("/template-story/list");
};
/**
* 执行故事模板操作，生成电影项目
*/
export const actionTemplateStory = async (template: StoryTemplateEntity) => {
return await post<ApiResponse<{ projectId: string }>>(
"/template-story/action",
template
);
export const getTemplateStoryList = async (page?: number, per_page?: number) => {
return await post<ApiResponse<{
total: number;
items: StoryTemplateEntity[];
page: number;
per_page: number;
}>>("/movie_template/story-template-list",{
page,
per_page,
});
};
/**
@ -62,7 +60,7 @@ export const createMovieProjectV2 = async (
* @returns Promise<ApiResponse<CreateMovieProjectResponse>>
*/
export const createMovieProjectV3 = async (
request: CreateMovieProjectV2Request
request: CreateMovieProjectV3Request
) => {
return post<ApiResponse<CreateMovieProjectResponse>>(
"/movie/create_movie_project_v3",

4
app/create/page.tsx
View File

@ -1,7 +1,7 @@
// import { redirect } from 'next/navigation';
import { CreateToVideo2 } from '@/components/pages/create-to-video2';
import CreateToVideo2 from '@/components/pages/create-to-video2';
export default function CreatePage() {
// redirect('/create/video-to-video');
return <CreateToVideo2 />;
}
}

5
app/globals.css
View File

@ -174,4 +174,7 @@ body {
float: left;
height: 0;
pointer-events: none;
}
}
.ant-spin-nested-loading .ant-spin {
max-height: none !important;
}

282
app/service/Interaction/templateStoryService.ts
View File

@ -1,4 +1,6 @@
import { message } from "antd";
import { StoryTemplateEntity } from "../domain/Entities";
import { useUploadFile } from "../domain/service";
/** 模板角色接口 */
interface TemplateRole {
@ -12,6 +14,8 @@ interface TemplateRole {
import { TemplateStoryUseCase } from "../usecase/templateStoryUseCase";
import { getUploadToken, uploadToQiniu } from "@/api/common";
import { useState, useCallback, useMemo } from "react";
import { createMovieProjectV3 } from "@/api/movie_start";
import { CreateMovieProjectV3Request } from "@/api/DTO/movie_start_dto";
interface UseTemplateStoryService {
/** 模板列表 */
@ -25,33 +29,56 @@ interface UseTemplateStoryService {
/** 加载状态 */
isLoading: boolean;
/** 获取模板列表函数 */
/** 获取模板列表函数 */
getTemplateStoryList: () => Promise<void>;
/** action 生成电影函数 */
actionStory: () => Promise<string>;
/**
* 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
) => Promise<string|undefined>;
/** 设置选中的模板 */
setSelectedTemplate: (template: StoryTemplateEntity | null) => void;
/** 设置活跃角色索引 */
setActiveRoleIndex: (index: number) => void;
/** 设置当前活跃角色的图片URL */
setActiveRoleImage: (imageUrl: string) => void;
/** 设置当前活跃角色的音频URL */
setActiveRoleAudio: (audioUrl: string) => void;
/**清空数据 */
clearData: () => void;
/** 上传人物头像并分析 */
AvatarAndAnalyzeFeatures: (imageUrl: string) => Promise<void>;
}
export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
const [templateStoryList, setTemplateStoryList] = useState<StoryTemplateEntity[]>([]);
const [selectedTemplate, setSelectedTemplate] = useState<StoryTemplateEntity | null>(null);
const [templateStoryList, setTemplateStoryList] = useState<
StoryTemplateEntity[]
>([]);
const [selectedTemplate, setSelectedTemplate] =
useState<StoryTemplateEntity | null>(null);
const [activeRoleIndex, setActiveRoleIndex] = useState<number>(0);
const [isLoading, setIsLoading] = useState(false);
// 使用上传文件Hook
const { uploadFile } = useUploadFile();
/** 模板故事用例实例 */
const templateStoryUseCase = useMemo(() => new TemplateStoryUseCase(), []);
/** 计算属性：当前活跃角色信息 */
const activeRole = useMemo(() => {
if (!selectedTemplate || activeRoleIndex < 0 || activeRoleIndex >= selectedTemplate.storyRole.length) {
if (
!selectedTemplate ||
activeRoleIndex < 0 ||
activeRoleIndex >= selectedTemplate.storyRole.length
) {
return null;
}
return selectedTemplate.storyRole[activeRoleIndex];
@ -64,117 +91,19 @@ export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
try {
setIsLoading(true);
// const templates = await templateStoryUseCase.getTemplateStoryList();
const templates = await new Promise<StoryTemplateEntity[]>((resolve) => {
setTimeout(() => {
resolve([
{
id: '1',
name: '奇幻冒险故事',
image_url: ['/assets/3dr_howlcastle.png', '/assets/3dr_spirited.jpg'],
generateText: '一个关于勇气与友谊的奇幻冒险故事，主角在神秘世界中寻找失落的宝藏，结识了各种奇特的生物和伙伴。',
storyRole: [
{
role_name: '艾莉娅',
role_description: '一个勇敢的女孩，拥有强大的魔法力量，她的冒险旅程充满了危险和挑战。',
photo_url: '/assets/3dr_chihiro.png',
voice_url:""
},
{
role_name: '魔法师梅林',
role_description: '一个智慧的魔法师，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
photo_url: '/assets/3dr_mono.png',
voice_url:""
},
{
role_name: '守护者龙',
role_description: '一个强大的守护者，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
photo_url: '/assets/3dr_howlbg.jpg',
voice_url:""
}
]
},
{
id: '2',
name: '科幻探索之旅',
image_url: ['/assets/3dr_monobg.jpg'],
generateText: '未来世界的太空探索故事，人类在浩瀚宇宙中寻找新的家园，面对未知的挑战和外星文明的接触。',
storyRole: [
{
role_name: '船长凯特',
role_description: '一个勇敢的船长，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
photo_url: '/assets/3dr_chihiro.png',
voice_url:""
},
{
role_name: 'AI助手诺娃',
role_description: '一个强大的AI助手，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
photo_url: '/assets/3dr_mono.png',
voice_url: ''
}
]
},
{
id: '3',
name: '温馨家庭喜剧',
image_url: ['/assets/3dr_spirited.jpg'],
generateText: '一个充满欢笑和温情的家庭故事，讲述家庭成员之间的日常趣事，以及如何一起面对生活中的小挑战。',
storyRole: [
{
role_name: '妈妈莉莉',
role_description: '一个温柔的妈妈，拥有强大的魔法力量，她的冒险旅程充满了危险和挑战。',
photo_url: '/assets/3dr_chihiro.png',
voice_url:""
},
{
role_name: '爸爸汤姆',
role_description: '一个勇敢的爸爸，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
photo_url: '/assets/3dr_mono.png',
voice_url:""
},
{
role_name: '孩子小杰',
role_description: '一个聪明的孩子，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
photo_url: '/assets/3dr_howlbg.jpg',
voice_url:""
}
]
}
]);
}, 3000);
});
const templates = await templateStoryUseCase.getTemplateStoryList();
setTemplateStoryList(templates);
setSelectedTemplate(templates[0]);
setActiveRoleIndex(0);
console.log(selectedTemplate, activeRoleIndex)
} catch (err) {
console.error('获取模板列表失败:', err);
console.error("获取模板列表失败:", err);
} finally {
setIsLoading(false);
}
}, [templateStoryUseCase]);
/**
* action 生成电影函数
*/
const actionStory = useCallback(async (): Promise<string> => {
if (!selectedTemplate) {
throw new Error('请先选择一个故事模板');
}
try {
setIsLoading(true);
console.log('selectedTemplate', selectedTemplate)
// const projectId = await templateStoryUseCase.actionStory(selectedTemplate);
return 'projectId';
} catch (err) {
console.error('生成电影失败:', err);
throw err;
} finally {
setIsLoading(false);
}
}, [selectedTemplate, templateStoryUseCase]);
/**
* 设置活跃角色索引
*/
@ -185,37 +114,120 @@ export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
/**
* 设置当前活跃角色的图片URL
*/
const setActiveRoleImage = useCallback((imageUrl: string): void => {
if (!selectedTemplate || activeRoleIndex < 0 || activeRoleIndex >= selectedTemplate.storyRole.length) {
return;
}
const setActiveRoleData = useCallback(
(imageUrl: string, desc: string): void => {
if (
!selectedTemplate ||
activeRoleIndex < 0 ||
activeRoleIndex >= selectedTemplate.storyRole.length
) {
console.log(selectedTemplate, activeRoleIndex);
return;
}
try {
const updatedTemplate = {
...selectedTemplate,
storyRole: selectedTemplate.storyRole.map((role, index) =>
index === activeRoleIndex ? { ...role, photo_url: imageUrl } : role
),
};
setSelectedTemplate(updatedTemplate);
}, [selectedTemplate, activeRoleIndex]);
const character_briefs = {
name: selectedTemplate.storyRole[activeRoleIndex].role_name,
image_url: imageUrl,
character_analysis: JSON.parse(desc).character_analysis,
};
console.log("character_briefs", character_briefs);
const updatedTemplate = {
...selectedTemplate,
storyRole: selectedTemplate.storyRole.map((role, index) =>
index === activeRoleIndex
? {
...role,
photo_url: imageUrl,
role_description: JSON.stringify(character_briefs),
}
: role
),
};
setSelectedTemplate(updatedTemplate);
} catch (error) {
message.error("Image analysis failed");
console.log("error", error);
}
},
[selectedTemplate, activeRoleIndex]
);
/**
* 设置当前活跃角色的音频URL
*/
const setActiveRoleAudio = useCallback((audioUrl: string): void => {
if (!selectedTemplate || activeRoleIndex < 0 || activeRoleIndex >= selectedTemplate.storyRole.length) {
return;
}
const setActiveRoleAudio = useCallback(
(audioUrl: string): void => {
if (
!selectedTemplate ||
activeRoleIndex < 0 ||
activeRoleIndex >= selectedTemplate.storyRole.length
) {
return;
}
const updatedTemplate = {
...selectedTemplate,
storyRole: selectedTemplate.storyRole.map((role, index) =>
index === activeRoleIndex ? { ...role, voice_url: audioUrl } : role
),
};
setSelectedTemplate(updatedTemplate);
}, [selectedTemplate, activeRoleIndex]);
const updatedTemplate = {
...selectedTemplate,
storyRole: selectedTemplate.storyRole.map((role, index) =>
index === activeRoleIndex ? { ...role, voice_url: audioUrl } : role
),
};
setSelectedTemplate(updatedTemplate);
},
[selectedTemplate, activeRoleIndex]
);
/**
* 上传人物头像并分析特征，替换旧的角色数据
* @param {string} characterName - 角色名称
*/
const AvatarAndAnalyzeFeatures = useCallback(
async (imageUrl: string): Promise<void> => {
try {
setIsLoading(true);
// 调用用例处理人物头像上传和特征分析
const result = await templateStoryUseCase.AvatarAndAnalyzeFeatures(
imageUrl
);
setActiveRoleData(result.crop_url, result.whisk_caption);
console.log("人物头像和特征描述更新成功:", result);
} catch (error) {
console.error("人物头像上传和特征分析失败:", error);
throw error;
} finally {
setIsLoading(false);
}
},
[templateStoryUseCase]
);
const actionStory = useCallback(
async (
user_id: string,
mode: "auto" | "manual" = "auto",
resolution: "720p" | "1080p" | "4k" = "720p",
language: string = "English"
) => {
try {
const params: CreateMovieProjectV3Request = {
user_id,
mode,
resolution,
storyRole: selectedTemplate?.storyRole || [],
language,
template_id: selectedTemplate?.template_id || "",
};
const result = await createMovieProjectV3(params);
return result.data.project_id as string;
} catch (error) {
console.error("创建电影项目失败:", error);
}
},
[selectedTemplate]
);
return {
templateStoryList,
selectedTemplate,
@ -226,12 +238,12 @@ export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
actionStory,
setSelectedTemplate,
setActiveRoleIndex: handleSetActiveRoleIndex,
setActiveRoleImage,
setActiveRoleAudio,
AvatarAndAnalyzeFeatures,
clearData: () => {
setTemplateStoryList([]);
setSelectedTemplate(null);
setActiveRoleIndex(0);
}
},
};
};

2
app/service/domain/Entities.ts
View File

@ -140,6 +140,8 @@ export interface StoryTemplateEntity {
image_url: string[];
/** 故事模板概览*/
generateText: string;
/** 故事模板ID */
template_id: string;
/**故事角色 */
storyRole: {
/**角色名 */

46
app/service/usecase/templateStoryUseCase.ts
View File

@ -1,5 +1,6 @@
import { generateCharacterBrief } from "@/api/video_flow";
import { StoryTemplateEntity } from "../domain/Entities";
import { getTemplateStoryList, actionTemplateStory } from "@/api/movie_start";
import { getTemplateStoryList } from "@/api/movie_start";
/**
* 模板故事用例
@ -21,35 +22,44 @@ export class TemplateStoryUseCase {
try {
const response = await getTemplateStoryList();
if (response.successful && response.data) {
this.templateStoryList = response.data;
return response.data;
this.templateStoryList = response.data.items;
return response.data.items;
}
throw new Error(response.message || '获取故事模板列表失败');
throw new Error(response.message || "获取故事模板列表失败");
} catch (error) {
console.error('获取故事模板列表失败:', error);
console.error("获取故事模板列表失败:", error);
throw error;
}
}
/**
* 执行故事模板相关操作
* @param {StoryTemplateEntity} template - 选中的故事模板
* @returns {Promise<string>} - 项目id
* 上传人物头像并分析特征，
* @returns {Promise<{crop_url: string, whisk_caption: string}>} 返回新的头像URL和特征描述
*/
async actionStory(template: StoryTemplateEntity): Promise<string> {
async AvatarAndAnalyzeFeatures(
imageUrl: string
): Promise<{ crop_url: string; whisk_caption: string }> {
// 直接在这里处理上传和分析逻辑
try {
if (!template) {
throw new Error('故事模板不能为空');
// 2. 调用AI分析接口获取人物特征描述
const analysisResult = await generateCharacterBrief({
image_url: imageUrl,
});
if (!analysisResult.successful || !analysisResult.data) {
throw new Error("人物特征分析失败");
}
const response = await actionTemplateStory(template);
if (response.successful && response.data) {
this.selectedTemplate = template;
return response.data.projectId;
}
throw new Error(response.message || '执行故事模板操作失败');
// 3. 返回新的头像URL和特征描述，用于替换旧数据
const result = {
crop_url: imageUrl,
whisk_caption: JSON.stringify(analysisResult.data.character_brief),
};
return result;
} catch (error) {
console.error('执行故事模板操作失败:', error);
throw error;
}
}

341
components/ChatInputBox/AudioRecorder.tsx
View File

@ -1,12 +1,24 @@
"use client";
import React, { useState, useRef, useEffect } from "react";
import { Mic, MicOff, Upload, Play, Pause, Trash2, X } from "lucide-react";
import {
Mic,
MicOff,
Upload,
Play,
Pause,
Trash2,
X,
Volume2,
} from "lucide-react";
import { Tooltip, Upload as AntdUpload, message } from "antd";
import { InboxOutlined } from "@ant-design/icons";
import WaveSurfer from "wavesurfer.js";
import { getAudioDuration, useUploadFile } from "../../app/service/domain/service";
import {
getAudioDuration,
useUploadFile,
} from "../../app/service/domain/service";
// 自定义样式
const audioRecorderStyles = `
@ -92,16 +104,35 @@ export function AudioRecorder({
const [isPlaying, setIsPlaying] = useState(false);
const [volume, setVolume] = useState(1);
const [isMuted, setIsMuted] = useState(false);
const [recordingTime, setRecordingTime] = useState(0); // 录制时长（秒）
const [isUploadingRecording, setIsUploadingRecording] = useState(false); // 录制音频上传状态
const { uploadFile, isUploading } = useUploadFile();
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
const chunksRef = useRef<Blob[]>([]);
const recordingTimerRef = useRef<NodeJS.Timeout | null>(null); // 录制计时器引用
const actualRecordingTimeRef = useRef<number>(0); // 实际录制时长引用，用于准确获取时长
// 清理计时器
useEffect(() => {
return () => {
if (recordingTimerRef.current) {
clearInterval(recordingTimerRef.current);
}
};
}, []);
// 开始录制
const startRecording = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
// 检查支持的音频格式，优先使用 webm
const mimeType = MediaRecorder.isTypeSupported("audio/webm")
? "audio/webm"
: "audio/mp4";
const mediaRecorder = new MediaRecorder(stream, { mimeType });
mediaRecorderRef.current = mediaRecorder;
chunksRef.current = [];
@ -112,23 +143,70 @@ export function AudioRecorder({
};
mediaRecorder.onstop = async () => {
const audioBlob = new Blob(chunksRef.current, { type: "audio/wav" });
const audioUrl = URL.createObjectURL(audioBlob);
const duration = await getAudioDuration(audioBlob);
const audioBlob = new Blob(chunksRef.current, { type: mimeType });
// 先停止计时器，然后获取最终时长
if (recordingTimerRef.current) {
clearInterval(recordingTimerRef.current);
recordingTimerRef.current = null;
}
// 使用引用值获取准确的录制时长
const duration = actualRecordingTimeRef.current;
console.log("录制时长:", duration, "秒");
// 无论时长是否符合要求，都要释放麦克风权限
stream.getTracks().forEach((track) => track.stop());
if(duration>20||duration<10){
message.warning("Please keep your audio between 10 and 20 seconds to help us better learn your voice.")
if (duration > 20 || duration < 10) {
message.warning(
"Please keep your audio between 10 and 20 seconds to help us better learn your voice."
);
return;
}
onAudioRecorded(audioBlob, audioUrl);
try {
// 将 Blob 转换为 File 对象，以便上传
const audioFile = new File(
[audioBlob],
`recording_${Date.now()}.webm`,
{ type: mimeType }
);
// 设置上传状态
setIsUploadingRecording(true);
// 使用 uploadFile 上传到服务器
console.log("开始上传录制的音频文件...");
const uploadedUrl = await uploadFile(audioFile);
console.log("音频上传成功，服务器URL:", uploadedUrl);
// 使用服务器返回的真实URL地址
onAudioRecorded(audioBlob, uploadedUrl);
} catch (error) {
console.error("音频上传失败:", error);
message.error("音频上传失败，请重试");
return;
} finally {
setIsUploadingRecording(false);
}
// 重置计时器状态
setRecordingTime(0);
actualRecordingTimeRef.current = 0; // 重置引用值
setIsRecording(false);
};
mediaRecorder.start();
setIsRecording(true);
setRecordingTime(0); // 重置计时器
actualRecordingTimeRef.current = 0; // 重置引用值
// 开始计时
recordingTimerRef.current = setInterval(() => {
setRecordingTime((prev) => prev + 1);
actualRecordingTimeRef.current += 1; // 同时更新引用值
}, 1000);
} catch (error) {
console.error("录制失败:", error);
}
@ -139,6 +217,7 @@ export function AudioRecorder({
if (mediaRecorderRef.current && isRecording) {
mediaRecorderRef.current.stop();
setIsRecording(false);
// 注意：计时器清理现在在 onstop 回调中处理
}
};
@ -184,7 +263,7 @@ export function AudioRecorder({
<div className="flex items-center justify-center min-h-[60px]">
{mode === "upload" ? (
// 上传模式
<div className="text-center w-full">
<div className="text-center w-full flex flex-col justify-center h-32 ">
<Tooltip
title="Please clearly read the story description above and record a 15-second audio file for upload"
placement="top"
@ -193,12 +272,15 @@ export function AudioRecorder({
<div>
<AntdUpload.Dragger
accept="audio/*"
beforeUpload={async(file) => {
beforeUpload={async (file) => {
console.log("beforeUpload 被调用:", file);
// 移除 return false，让文件能够正常进入 customRequest
const duration = await getAudioDuration(file);
if(duration>20||duration<10){
message.warning("Please keep your audio between 10 and 20 seconds to help us better learn your voice.")
console.log("duration", duration);
if (duration > 20 || duration < 10) {
message.warning(
"Please keep your audio between 10 and 20 seconds to help us better learn your voice."
);
return false;
}
return true;
@ -258,7 +340,7 @@ export function AudioRecorder({
</div>
) : (
// 录制模式
<div className="text-center w-full">
<div className="text-center w-full flex flex-col justify-center h-32">
{isRecording ? (
// 录制中状态
<div className="space-y-3">
@ -273,18 +355,33 @@ export function AudioRecorder({
<div className="text-xs text-white/60">Recording...</div>
</div>
{/* 录制状态指示器 */}
{/* 录制状态指示器和计时器 */}
<div className="w-full h-12 bg-white/[0.05] rounded-lg flex items-center justify-center">
<div className="flex items-center gap-2 text-white/60">
<div className="flex items-center gap-3 text-white/60">
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
<span className="text-xs">Recording...</span>
<span className="text-sm font-mono text-red-400">
{Math.floor(recordingTime / 60)
.toString()
.padStart(2, "0")}
:{(recordingTime % 60).toString().padStart(2, "0")}
</span>
</div>
</div>
</div>
) : isUploadingRecording ? (
// 录制音频上传中状态
<div className="text-center">
<div className="text-xs text-white/60 mb-3">
Uploading recorded audio...
</div>
<div className="flex items-center justify-center">
<div className="w-8 h-8 border-2 border-white/20 border-t-white/60 rounded-full animate-spin"></div>
</div>
</div>
) : (
// 录制准备状态
<div className="text-center">
<div className="text-2xl text-white/40 mb-2">🎙️</div>
<div className="text-xs text-white/60 mb-3">
Click to start recording
</div>
@ -314,8 +411,8 @@ export function AudioRecorder({
onClick={() => setMode("upload")}
className={`transition-colors ${
mode === "upload"
? "text-blue-300"
: "text-white/40 hover:text-white/60"
? "text-[rgb(106,244,249)]"
: "text-white/40 hover:text-[rgb(106,244,249)]/60"
}`}
>
<Upload className="w-5 h-5" />
@ -327,8 +424,8 @@ export function AudioRecorder({
onClick={() => setMode("record")}
className={`transition-colors ${
mode === "record"
? "text-green-300"
: "text-white/40 hover:text-white/60"
? "text-[rgb(199,59,255)]"
: "text-white/40 hover:text-[rgb(199,59,255)]/60"
}`}
>
<Mic className="w-5 h-5" />
@ -344,13 +441,99 @@ export function AudioRecorder({
return (
<>
<style>{audioRecorderStyles}</style>
<div className="relative bg-white/[0.05] border border-white/[0.1] rounded-lg p-4">
<div
className="relative bg-white/[0.05] border border-white/[0.1] rounded-lg p-4 h-52 group"
data-alt="audio-player-container"
>
{/* 大旋转的播放圆盘 */}
<div className=" absolute z-1 right-6 top-[50%] translate-y-[-50%] scale-[1.4]">
<div className="relative">
{/* 外层边框 - 唱片边缘 */}
<div
className={`w-28 h-28 rounded-full border-4 border-gray-400/30 ${
isPlaying ? "animate-spin" : ""
}`}
style={{
animationDuration: "6s",
}}
></div>
{/* 唱片主体 - 纯黑色唱片面 */}
<div
className={`absolute inset-2 w-24 h-24 rounded-full bg-black shadow-[inset_0_2px_8px_rgba(0,0,0,0.8)] ${
isPlaying ? "animate-spin" : ""
}`}
style={{ animationDuration: "6s" }}
>
{/* 唱片纹理 - 细密的同心圆 */}
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,transparent_0%,rgba(255,255,255,0.02)_1px,transparent_2px)] bg-[length:4px_4px]"></div>
{/* 中心孔洞 - 透明圆环，显示背景色 */}
<div className="absolute top-1/2 left-1/2 w-8 h-8 rounded-full -translate-x-1/2 -translate-y-1/2 bg-transparent border-2 border-white/20"></div>
{/* MovieFlow 字母 - 环形文本效果 */}
<div className="absolute inset-0">
<svg
viewBox="0 0 96 96"
className="w-full h-full"
style={{
filter: "drop-shadow(0 0 8px rgba(106, 244, 249, 0.3))",
}}
>
{/* 定义渐变 */}
<defs>
<linearGradient
id="movieFlowGradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop offset="30%" stopColor="rgb(106, 244, 249)" />
<stop offset="70%" stopColor="rgb(199, 59, 255)" />
</linearGradient>
</defs>
{/* 圆形路径 - 减小半径让文字更靠近中心 */}
<path
id="movieFlowCircle"
d="M 48,16 a 32,32 0 1,1 0,64 a 32,32 0 1,1 0,-64"
fill="none"
stroke="none"
/>
{/* 环形文本 - 调整起始位置让文字更居中 */}
<text fontSize="12" fontWeight="bold" letterSpacing="1">
<textPath
href="#movieFlowCircle"
startOffset="25%"
textAnchor="middle"
fill="url(#movieFlowGradient)"
>
MovieFlow
</textPath>
</text>
</svg>
</div>
</div>
{/* 唱片光泽效果 */}
<div
className={`absolute inset-2 w-24 h-24 rounded-full bg-gradient-to-br from-transparent via-white/5 to-transparent ${
isPlaying ? "animate-spin" : ""
}`}
style={{ animationDuration: "10s" }}
></div>
</div>
</div>
{/* 头部 - 只显示操作按钮 */}
<div className="flex justify-end gap-2 mb-3">
<div className="relative z-10 flex justify-end gap-2 mb-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<button
onClick={handleDelete}
className="text-white/60 hover:text-red-400 transition-colors"
title="Delete audio"
data-alt="delete-audio-button"
>
<Trash2 className="w-4 h-4" />
</button>
@ -358,15 +541,26 @@ export function AudioRecorder({
<button
onClick={onClose}
className="text-white/60 hover:text-white/80 transition-colors"
data-alt="close-audio-button"
>
<X className="w-4 h-4" />
</button>
)}
</div>
{/* WaveSurfer 波形图区域 */}
<div className="mb-4">
<div className="h-16 bg-white/[0.05] rounded-lg overflow-hidden">
{/* 播放控制 */}
<div className="relative z-10 flex items-center justify-center gap-4 mb-4 mt-12">
<button
onClick={togglePlay}
className="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-[rgb(106,244,249)] to-[rgb(199,59,255)] text-white rounded-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.3),0_4px_12px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.4),0_6px_20px_rgba(106,244,249,0.4)] transition-all duration-300 hover:scale-105 active:scale-95"
>
{isPlaying ? (
<Pause className="w-5 h-5 drop-shadow-sm" />
) : (
<Play className="w-5 h-5 drop-shadow-sm ml-0.5" />
)}
</button>
{/* WaveSurfer 波形图区域 */}
<div className="h-16 flex-1 bg-white/[0.05] rounded-lg overflow-hidden">
<WaveformPlayer
audioUrl={audioUrl}
isPlaying={isPlaying}
@ -377,37 +571,38 @@ export function AudioRecorder({
</div>
</div>
{/* 播放控制 */}
<div className="flex items-center justify-center gap-4 mb-4">
<button
onClick={togglePlay}
className="flex items-center justify-center w-12 h-12 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors"
>
{isPlaying ? (
<Pause className="w-5 h-5" />
) : (
<Play className="w-5 h-5" />
)}
</button>
</div>
{/* 音频设置 */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<input
type="range"
min="0"
max="1"
step="0.1"
value={volume}
onChange={handleVolumeChange}
className="w-16 h-1 !bg-white/20 rounded-lg appearance-none cursor-pointer slider"
/>
<span className="text-xs text-white/60 w-8">
{Math.round(volume * 100)}%
</span>
<div className="flex items-center justify-between px-2">
<div className="flex items-center gap-6">
{/* 音量控制 */}
<div className="flex items-center gap-3">
<div className="w-24 h-3 bg-white/[0.08] rounded-full overflow-hidden shadow-inner border border-white/[0.1] relative">
<div
className="h-full bg-gradient-to-r from-[rgb(106,244,249)] to-[rgb(199,59,255)] rounded-full transition-all duration-300"
style={{ width: `${volume * 100}%` }}
/>
{/* 可拖拽的音量滑块 */}
<input
type="range"
min="0"
max="1"
step="0.01"
value={volume}
onChange={handleVolumeChange}
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
/>
{/* 视觉滑块指示器 */}
<div
className="absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow-lg border-2 border-[rgb(199,59,255)] pointer-events-none transition-all duration-200"
style={{ left: `calc(${volume * 100}% - 8px)` }}
/>
</div>
{/* 音频图标 */}
<div className="text-white/70 hover:text-white/90 transition-colors">
<Volume2 className="w-5 h-5" />
</div>
</div>
</div>
<div className="text-xs text-white/40">1x</div>
</div>
</div>
</>
@ -443,7 +638,7 @@ interface WaveformPlayerProps {
* @param {boolean} [isMuted=false] - 是否静音
* @returns {JSX.Element} 渲染的波形播放器组件
* ```
*/
*/
function WaveformPlayer({
audioUrl,
isPlaying,
@ -463,23 +658,33 @@ function WaveformPlayer({
useEffect(() => {
if (!containerRef.current || !audioUrl) return;
// 创建Canvas渐变
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return;
const gradient = ctx.createLinearGradient(0, 0, 0, 64); // 64是波形高度
gradient.addColorStop(0, "rgb(106, 244, 249)"); // 顶部：青色
gradient.addColorStop(0.5, "rgb(152, 151, 254)"); // 中间：蓝紫色
gradient.addColorStop(1, "rgb(199, 59, 255)"); // 底部：紫色
// 创建WaveSurfer实例并配置样式
const ws = WaveSurfer.create({
container: containerRef.current,
waveColor: "#3b82f6", // 波形颜色
progressColor: "#1d4ed8", // 播放进度颜色
cursorColor: "#1e40af", // 播放光标颜色
height: 64, // 波形高度
barWidth: 2, // 波形条宽度
barGap: 1, // 波形条间距
normalize: true, // 自动标准化波形
url: audioUrl, // 音频文件URL
waveColor: gradient, // 使用渐变作为波形颜色
progressColor: "rgb(152, 151, 254)", // 播放进度颜色 - 半透明白色，更优雅
cursorColor: "rgb(152, 151, 254)", // 播放光标颜色 - 紫色
height: 64, // 波形高度
barWidth: 2, // 波形条宽度
barGap: 1, // 波形条间距
normalize: true, // 自动标准化波形
url: audioUrl, // 音频文件URL
});
// 监听播放状态变化事件，同步到外部状态
ws.on("play", () => onPlayStateChange(true)); // 开始播放
ws.on("pause", () => onPlayStateChange(false)); // 暂停播放
ws.on("finish", () => onPlayStateChange(false)); // 播放结束
ws.on("play", () => onPlayStateChange(true)); // 开始播放
ws.on("pause", () => onPlayStateChange(false)); // 暂停播放
ws.on("finish", () => onPlayStateChange(false)); // 播放结束
wavesurferRef.current = ws;

267
components/ChatInputBox/ChatInputBox.tsx
View File

@ -23,7 +23,6 @@ import {
Modal,
Tooltip,
Upload,
Spin,
Popconfirm,
Image,
} from "antd";
@ -44,9 +43,21 @@ import GlobalLoad from "../common/GlobalLoad";
const RenderTemplateStoryMode = ({
isOpen,
onClose,
configOptions = {
mode: "auto" as "auto" | "manual",
resolution: "720p" as "720p" | "1080p" | "4k",
language: "english",
videoDuration: "1min",
},
}: {
isOpen: boolean;
onClose: () => void;
configOptions: {
mode: "auto" | "manual";
resolution: "720p" | "1080p" | "4k";
language: string;
videoDuration: string;
};
}) => {
// 使用 hook 管理状态
const {
@ -59,17 +70,16 @@ const RenderTemplateStoryMode = ({
actionStory,
setSelectedTemplate,
setActiveRoleIndex,
setActiveRoleImage,
AvatarAndAnalyzeFeatures,
setActiveRoleAudio,
clearData,
} = useTemplateStoryServiceHook();
// 使用上传文件hook
const { uploadFile, isUploading } = useUploadFile();
// 本地加载状态，用于 UI 反馈
const [localLoading, setLocalLoading] = useState(0);
const router = useRouter();
// 组件挂载时获取模板列表
useEffect(() => {
if (isOpen) {
@ -97,9 +107,18 @@ const RenderTemplateStoryMode = ({
}, 100);
try {
setLocalLoading(1);
// 假性的增加进度条
// 获取当前用户信息
const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
const projectId = await actionStory();
if (!User.id) {
console.error("用户未登录");
return;
}
const projectId = await actionStory(String(User.id), configOptions.mode, configOptions.resolution, configOptions.language);
if (projectId) {
// 跳转到电影详情页
router.push(`/create/work-flow?episodeId=${projectId}`);
}
console.log("Story action created:", projectId);
onClose();
// 重置状态
@ -113,31 +132,6 @@ const RenderTemplateStoryMode = ({
clearInterval(timer);
}
};
// 处理角色图片上传 - 已移至customRequest中处理
// const handleRoleImageUpload = async (roleIndex: number, file: File) => {
// if (!file || !selectedTemplate) return;
//
// try {
// // 使用真正的文件上传功能
// const imageUrl = await uploadFile(file, (progress) => {
// console.log(`上传进度: ${progress}%`);
// });
//
// // 上传成功后，更新角色图片
// setActiveRoleImage(imageUrl);
// } catch (error) {
// console.error("图片上传失败:", error);
// // 这里可以添加错误提示
// }
// };
// 删除角色图片
const handleDeleteRoleImage = (roleIndex: number) => {
if (selectedTemplate) {
setActiveRoleImage("");
}
};
// 模板列表渲染
const templateListRender = () => {
return (
@ -172,7 +166,7 @@ const RenderTemplateStoryMode = ({
{/* 模板信息头部 - 增加顶部空间 */}
<div className="flex gap-3 py-4 border-b border-white/[0.1] h-[300px]">
{/* 左侧图片 */}
<div className="w-1/3">
<div className="w-1/4">
<div
data-alt="template-preview-image"
className="relative w-full aspect-square rounded-xl overflow-hidden group cursor-pointer"
@ -180,7 +174,7 @@ const RenderTemplateStoryMode = ({
<img
src={selectedTemplate.image_url[0]}
alt={selectedTemplate.name}
className="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:rotate-1"
className="w-full h-full object-contain transition-all duration-500 group-hover:scale-105 group-hover:rotate-1"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
</div>
@ -194,7 +188,13 @@ const RenderTemplateStoryMode = ({
>
{selectedTemplate.name}
</h2>
<div className="flex-1 overflow-y-auto max-h-96 pr-3">
<div
className="flex-1 overflow-y-auto max-h-96 pr-3"
style={{
scrollbarWidth: "thin",
scrollbarColor: "rgba(156,163,175,0.2) rgba(0,0,0,0)",
}}
>
<p
data-alt="template-description"
className="text-gray-300 text-sm leading-relaxed"
@ -216,19 +216,53 @@ const RenderTemplateStoryMode = ({
{/* 紧凑布局 */}
<div className="mb-6 flex gap-4">
{/* 左侧：当前选中角色的音频与照片更改 - 精简版本 */}
{/* 左侧：音频部分 */}
<div className="flex-1 space-y-4">
{/* 图片上传部分 - 精简 */}
<div className="space-y-2 mb-8 mt-4">
<div className="flex justify-center">
<Tooltip
title="Upload a portrait photo to replace this character's appearance in the movie."
placement="top"
>
{/* 音频操作区域 - 使用新的 AudioRecorder 组件 */}
<div className="">
<AudioRecorder
audioUrl={activeRole?.voice_url || ""}
onAudioRecorded={(audioBlob, audioUrl) => {
setActiveRoleAudio(audioUrl);
}}
onAudioDeleted={() => {
setActiveRoleAudio("");
}}
/>
</div>
</div>
{/* 右侧：角色图片缩略图列表 - 精简 */}
<div className="w-24 flex flex-col gap-y-[.6rem] ">
{selectedTemplate.storyRole.map((role, index: number) => (
<div key={index} className="relative group">
<Tooltip title={role.role_name} placement="left">
<button
data-alt={`character-thumbnail-${index}`}
className={`w-full aspect-square rounded-lg overflow-hidden border-2 transition-all duration-200 hover:scale-105 ${
activeRoleIndex === index
? "border-blue-500 shadow-lg shadow-blue-500/30"
: "border-white/20 hover:border-white/40"
}`}
onClick={() => setActiveRoleIndex(index)}
>
<Image
src={role.photo_url}
alt={role.role_name}
className="w-full h-full object-cover"
preview={{
mask: null,
maskClassName: "hidden",
}}
fallback="/assets/empty_video.png"
/>
</button>
</Tooltip>
{/* 上传按钮 - 右上角 */}
<Tooltip title="更换角色头像" placement="top">
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader [&_.ant-upload-select]:!w-32 [&_.ant-upload-select]:!h-32"
showUploadList={false}
beforeUpload={(file) => {
// 验证文件类型
@ -238,14 +272,14 @@ const RenderTemplateStoryMode = ({
return false;
}
// 验证文件大小 (5MB)
const isLt5M = file.size / 1024 / 1024 < 10;
if (!isLt5M) {
// 验证文件大小 (10MB)
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isLt10M) {
console.error("图片大小不能超过10MB");
return false;
}
return true; // 允许文件通过验证
return true;
}}
customRequest={async ({ file, onSuccess, onError }) => {
try {
@ -264,13 +298,10 @@ const RenderTemplateStoryMode = ({
console.log(`上传进度: ${progress}%`);
}
);
console.log("图片上传成功，URL:", uploadedUrl);
// 上传成功后，更新角色图片
setActiveRoleImage(uploadedUrl);
// 调用成功回调
await AvatarAndAnalyzeFeatures(uploadedUrl);
onSuccess?.(uploadedUrl);
} catch (error) {
console.error("图片上传失败:", error);
@ -278,100 +309,16 @@ const RenderTemplateStoryMode = ({
}
}}
>
{activeRole?.photo_url ? (
<div className="relative w-32 h-32 rounded-lg overflow-hidden">
<Image
src={activeRole.photo_url}
alt="Character Portrait"
className="w-full h-full object-cover"
preview={{
mask: null,
maskClassName: "hidden",
}}
fallback="/assets/empty_video.png"
/>
{/* <button
onClick={(e) => {
e.stopPropagation();
handleDeleteRoleImage(activeRoleIndex);
}}
className="absolute top-1 right-1 w-5 h-5 bg-red-500/80 hover:bg-red-500 text-white rounded-full flex items-center justify-center transition-colors"
title="Delete Photo"
>
<Trash2 className="w-2.5 h-2.5" />
</button> */}
<div className="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity duration-200 flex items-center justify-center">
<div className="text-white text-center">
<UploadOutlined className="w-4 h-4 mb-1" />
<div className="text-xs">Change Photo</div>
</div>
</div>
</div>
) : (
<div className="w-32 h-32 flex flex-col items-center justify-center text-white/50 bg-white/[0.05] border border-white/[0.1] rounded-lg hover:bg-white/[0.08] transition-colors">
{isUploading ? (
<>
<Loader2 className="w-6 h-6 mb-1 animate-spin" />
<span className="text-xs">上传中...</span>
</>
) : (
<>
<UploadOutlined className="w-6 h-6 mb-1" />
<span className="text-xs">Upload Photo</span>
</>
)}
</div>
)}
<button
data-alt={`upload-button-${index}`}
className="absolute -top-1 -right-1 w-6 h-6 bg-blue-500 hover:bg-blue-600 text-white rounded-full flex items-center justify-center transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110 shadow-lg"
title="更换角色头像"
>
<UploadOutlined className="w-3 h-3" />
</button>
</Upload>
</Tooltip>
</div>
</div>
{/* 音频部分 - 精简版本 */}
<div className="space-y-2">
{/* 音频操作区域 - 使用新的 AudioRecorder 组件 */}
<div className="space-y-2">
<AudioRecorder
audioUrl={activeRole?.voice_url || ""}
onAudioRecorded={(audioBlob, audioUrl) => {
setActiveRoleAudio(audioUrl);
}}
onAudioDeleted={() => {
setActiveRoleAudio("");
}}
/>
</div>
</div>
</div>
{/* 右侧：角色图片缩略图列表 - 精简 */}
<div className="w-24 space-y-2">
<h4 className="text-white/70 text-xs font-medium mb-2">
Characters
</h4>
{selectedTemplate.storyRole.map((role, index: number) => (
<Tooltip key={index} title={role.role_name} placement="left">
<button
data-alt={`character-thumbnail-${index}`}
className={`w-full aspect-square rounded-lg overflow-hidden border-2 transition-all duration-200 hover:scale-105 ${
activeRoleIndex === index
? "border-blue-500 shadow-lg shadow-blue-500/30"
: "border-white/20 hover:border-white/40"
}`}
onClick={() => setActiveRoleIndex(index)}
>
<Image
src={role.photo_url}
alt={role.role_name}
className="w-full h-full object-cover"
preview={{
mask: null,
maskClassName: "hidden",
}}
fallback="/assets/empty_video.png"
/>
</button>
</Tooltip>
))}
</div>
</div>
@ -415,20 +362,21 @@ const RenderTemplateStoryMode = ({
</div>
}
>
<div className="rounded-2xl min-h-min transition-all duration-700 ease-out">
{/* 弹窗头部 */}
<div className="flex gap-4 p-4 border-b border-white/[0.1]">
<h2 className="text-2xl font-bold text-white">
Template Story Selection
</h2>
</div>
<GlobalLoad show={isLoading} progress={0}>
<GlobalLoad show={isLoading} progress={0}>
<div className="rounded-2xl min-h-min transition-all duration-700 ease-out">
{/* 弹窗头部 */}
<div className="flex gap-4 p-4 border-b border-white/[0.1]">
<h2 className="text-2xl font-bold text-white">
Template Story Selection
</h2>
</div>
<div className="flex gap-4 pb-4 ">
{templateListRender()}
<div className="flex-1">{storyEditorRender()}</div>
</div>
</GlobalLoad>
</div>
</div>
</GlobalLoad>
</Modal>
</>
);
@ -681,6 +629,7 @@ export function ChatInputBox() {
{/* 模板故事弹窗 */}
<RenderTemplateStoryMode
configOptions={configOptions}
isOpen={isTemplateModalOpen}
onClose={() => setIsTemplateModalOpen(false)}
/>
@ -840,11 +789,11 @@ const PhotoStoryModal = ({
onClose();
};
const router = useRouter();
const taskProgressRef = useRef(taskProgress);
const taskProgressRef = useRef(taskProgress);
useEffect(() => {
taskProgressRef.current = taskProgress;
}, [taskProgress]);
useEffect(() => {
taskProgressRef.current = taskProgress;
}, [taskProgress]);
// 处理图片上传
const handleImageUpload = async (e: any) => {
const target = e.target as HTMLImageElement;
@ -954,7 +903,7 @@ const PhotoStoryModal = ({
<img
src={activeImageUrl}
alt="Story inspiration"
className="w-full h-full object-cover rounded-lg bg-white/[0.05]"
className="w-full h-full object-contain rounded-lg bg-white/[0.05]"
/>
<Popconfirm
title="Clear all content"
@ -1005,7 +954,7 @@ const PhotoStoryModal = ({
<img
src={avatar.url}
alt={avatar.name}
className="w-full h-full object-cover bg-white/[0.05]"
className="w-full h-full object-contain bg-white/[0.05]"
onError={(e) => {
// 如果裁剪的头像加载失败，回退到原图
const target = e.target as HTMLImageElement;

3
components/common/GlobalLoad.tsx
View File

@ -43,10 +43,9 @@ export default function GlobalLoad({
{Boolean(progress) && <TailwindLinearLoader progress={progress as number} width={progressWidth} />}
</div>
);
return (
<div data-alt="loading-container" className="relative">
<Spin spinning={true} tip="" indicator={customIndicator}>
<Spin spinning={true} tip="" indicator={customIndicator}>
{children}
</Spin>
</div>

2
components/pages/create-to-video2.tsx
View File

@ -12,7 +12,7 @@ import { ChatInputBox } from '@/components/ChatInputBox/ChatInputBox';
// ideaText已迁移到ChatInputBox组件中
export function CreateToVideo2() {
export default function CreateToVideo2() {
const router = useRouter();
const searchParams = useSearchParams();
const projectId = searchParams.get('projectId') ? parseInt(searchParams.get('projectId')!) : 0;