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-18 19:10:45 +08:00
parent 6c32afbe73
commit daf9ca126c
11 changed files with 93 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/service/Interaction/ShotService.ts
View File

@ -6,7 +6,7 @@ import {
MatchedPerson,
RoleRecognitionResponse
} from "@/api/DTO/movieEdit";
import { VideoSegmentEntity } from "../domain/Entities";
import { ScriptRoleEntity, VideoSegmentEntity } from "../domain/Entities";
import { LensType, SimpleCharacter } from "../domain/valueObject";
import { getUploadToken, uploadToQiniu } from "@/api/common";
import { SaveEditUseCase } from "../usecase/SaveEditUseCase";
@ -21,6 +21,8 @@ export interface UseShotService {
loading: boolean;
/** 视频片段列表 */
videoSegments: VideoSegmentEntity[];
/** 剧本中角色列表 */
scriptRoles: ScriptRoleEntity[];
/** 当前选中的视频片段 */
selectedSegment: VideoSegmentEntity | null;
/** 识别出的人物信息 */
@ -69,6 +71,7 @@ export const useShotService = (): UseShotService => {
// 响应式状态
const [loading, setLoading] = useState<boolean>(false);
const [videoSegments, setVideoSegments] = useState<VideoSegmentEntity[]>([]);
const [scriptRoles, setScriptRoles] = useState<ScriptRoleEntity[]>([]);
const [selectedSegment, setSelectedSegment] =
useState<VideoSegmentEntity | null>(null);
const [projectId, setProjectId] = useState<string>("");
@ -90,9 +93,10 @@ export const useShotService = (): UseShotService => {
try {
setLoading(true);
const segments = await vidoEditUseCase.getVideoSegmentList(projectId);
const { segments, roles } = await vidoEditUseCase.getVideoSegmentList(projectId);
setProjectId(projectId);
setVideoSegments(segments);
setScriptRoles(roles);
setIntervalIdHandler(projectId);
} catch (error) {
console.error("获取视频片段列表失败:", error);
@ -112,7 +116,7 @@ export const useShotService = (): UseShotService => {
// 定义定时任务，每5秒执行一次
const newIntervalId = setInterval(async () => {
try {
const segments = await vidoEditUseCase.getVideoSegmentList(projectId,()=>{
const { segments } = await vidoEditUseCase.getVideoSegmentList(projectId,()=>{
if (intervalId) {
clearInterval(intervalId);
setIntervalId(null);
@ -474,6 +478,7 @@ export const useShotService = (): UseShotService => {
// 响应式状态
loading,
videoSegments,
scriptRoles,
selectedSegment,
matched_persons,
// 操作方法

7
app/service/adapter/oldErrAdapter.ts
View File

@ -1,7 +1,7 @@
/**============因协同任务开发流程没有明确管理，导致的必要的适配=================**/
import { VideoSegmentEntity } from "../domain/Entities";
import { ScriptRoleEntity, VideoSegmentEntity } from "../domain/Entities";
import { LensType, ContentItem } from "../domain/valueObject";
@ -73,6 +73,7 @@ export class VideoSegmentEntityAdapter {
video_status: number|null;
}>;
}> = [];
project_characters: ScriptRoleEntity[] = [];
/**
* @description 解析shotContent，分离镜头描述和对话内容
@ -208,7 +209,7 @@ export class VideoSegmentEntityAdapter {
// 如果有对话内容，添加到镜头描述后面
if (lensItem.content && lensItem.content.length > 0) {
const dialogueLines = lensItem.content.map(dialogue =>
`${dialogue.roleName} [CH-01]: ${dialogue.content}`
`${dialogue.roleName} : ${dialogue.content}`
);
fullContent += '\n' + dialogueLines.join('\n');
}
@ -312,7 +313,7 @@ export class VideoSegmentEntityAdapter {
// 如果有对话内容，添加到镜头描述后面
if (lensType.content && lensType.content.length > 0) {
const dialogueLines = lensType.content.map(dialogue =>
`${dialogue.roleName} [CH-01]: ${dialogue.content}`
`${dialogue.roleName} : ${dialogue.content}`
);
fullContent += '\n' + dialogueLines.join('\n');
}

47
app/service/adapter/textToShot.ts
View File

@ -1,12 +1,5 @@
import { ContentItem, LensType, SimpleCharacter, TagValueObject } from '../domain/valueObject';
// 定义角色属性接口
interface CharacterAttributes {
name: string;
// gender: string;
// age: string;
avatar: string;
}
import { ScriptRoleEntity } from '../domain/Entities';
// 定义高亮属性接口
interface HighlightAttributes {
@ -23,7 +16,7 @@ interface TextNode {
// 定义角色标记节点接口
interface CharacterTokenNode {
type: 'characterToken';
attrs: CharacterAttributes;
attrs: ScriptRoleEntity;
}
// 定义高亮节点接口
@ -55,7 +48,7 @@ export class TextToShotAdapter {
* @param roles 角色列表
* @returns ContentNode[] 节点数组
*/
public static parseText(text: string, roles: SimpleCharacter[]): ContentNode[] {
public static parseText(text: string, roles: ScriptRoleEntity[]): ContentNode[] {
const nodes: ContentNode[] = [];
let currentText = text;
@ -63,31 +56,32 @@ export class TextToShotAdapter {
// 既要兼容 每个单词 首字母大写 其余小写、还要兼容 全部大写
const sortedRoles = [...roles].sort((a, b) => b.name.length - a.name.length).map(role => ({
...role,
name: role.name.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ')
match_name: role.name.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ') + ' [' + role.id + ']'
})).concat([...roles].map(role => ({
...role,
name: role.name.toUpperCase()
match_name: role.name.toUpperCase() + ' [' + role.id + ']'
})));
console.log('shots-匹配角色', text, sortedRoles);
while (currentText.length > 0) {
let matchFound = false;
// 尝试匹配角色
for (const role of sortedRoles) {
if (currentText.startsWith(role.name)) {
if (currentText.startsWith(role.match_name)) {
// 如果当前文本以角色名开头
if (currentText.length > role.name.length) {
if (currentText.length > role.match_name.length) {
// 添加角色标记节点
nodes.push({
type: 'characterToken',
attrs: {
name: role.name,
avatar: role.imageUrl
...role
}
});
// 移除已处理的角色名
currentText = currentText.slice(role.name.length);
currentText = currentText.slice(role.match_name.length);
matchFound = true;
break;
}
@ -99,7 +93,7 @@ export class TextToShotAdapter {
// 查找下一个可能的角色名位置
let nextRoleIndex = currentText.length;
for (const role of sortedRoles) {
const index = currentText.indexOf(role.name);
const index = currentText.indexOf(role.match_name);
if (index !== -1 && index < nextRoleIndex) {
nextRoleIndex = index;
}
@ -196,7 +190,7 @@ export class TextToShotAdapter {
* @param lensType LensType 实例
* @returns Paragraph 格式的数据
*/
public static fromLensType(lensType: LensType, roles: SimpleCharacter[]): Shot {
public static fromLensType(lensType: LensType, roles: ScriptRoleEntity[]): Shot {
const shotDescContent: Paragraph[] = [];
const shotDialogsContent: Paragraph[] = [];
@ -213,16 +207,15 @@ export class TextToShotAdapter {
lensType.content.forEach(item => {
const dialogNodes = TextToShotAdapter.parseText(item.content, roles);
// 确保对话内容以角色标记开始
const roleMatch = roles.find(role => role.name === item.roleName);
// 确保对话内容以角色标记开始 角色名都大写再匹配
const roleMatch = roles.find(role => role.name.toUpperCase().includes(item.roleName.toUpperCase()));
if (roleMatch) {
const dialogContent: Paragraph = {
type: 'paragraph',
content: [{
type: 'characterToken',
attrs: {
name: roleMatch.name,
avatar: roleMatch.imageUrl
...roleMatch
}},
...dialogNodes
]
@ -263,7 +256,7 @@ export class TextToShotAdapter {
currentScript += node.text;
}
if (node.type === 'characterToken') {
currentScript += node.attrs.name;
currentScript = currentScript + node.attrs.name + ' ' + node.attrs.id;
}
});
}
@ -282,10 +275,10 @@ export class TextToShotAdapter {
if (node.type === 'characterToken') {
// 记录说话角色的名称
if (!firstFindRole) {
dialogRoleName = node.attrs.name;
dialogRoleName = node.attrs.name + ' [' + node.attrs.id + ']';
firstFindRole = true;
} else {
dialogContent += node.attrs.name;
dialogContent += node.attrs.name + ' [' + node.attrs.id + ']';
}
} else if (node.type === 'text') {
// 累积对话内容
@ -329,7 +322,7 @@ export class TextToShotAdapter {
} else if (node.type === 'text') {
text += node.text;
} else if (node.type === 'characterToken') {
text += node.attrs.name;
text += node.attrs.name + ' ' + node.attrs.id;
}
});
}

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

@ -43,6 +43,18 @@ export interface RoleEntity {
isChangeRole: boolean;
}
/**
* 剧本中角色实体接口
*/
export interface ScriptRoleEntity {
/** 唯一标识 */
readonly id: string;
/** 角色名称 */
name: string;
/** 角色照片 */
image_url: string;
}
/**
* 场景实体接口
*/

12
app/service/usecase/ShotEditUsecase.ts
View File

@ -1,6 +1,6 @@
import { VideoFlowProjectResponse } from "@/api/DTO/movieEdit";
import { task_item, VideoSegmentEntityAdapter } from "../adapter/oldErrAdapter";
import { VideoSegmentEntity } from "../domain/Entities";
import { ScriptRoleEntity, VideoSegmentEntity } from "../domain/Entities";
import { LensType } from "../domain/valueObject";
import {
getShotList,
@ -24,7 +24,7 @@ export class VideoSegmentEditUseCase {
* @param projectId 项目ID
* @returns Promise<VideoSegmentEntity[]> 视频片段列表
*/
async getVideoSegmentList(projectId: string,callback?:()=>void): Promise<VideoSegmentEntity[]> {
async getVideoSegmentList(projectId: string,callback?:()=>void): Promise<{ segments: VideoSegmentEntity[], roles: ScriptRoleEntity[] }> {
try {
this.loading = true;
@ -35,7 +35,6 @@ export class VideoSegmentEditUseCase {
}
if(response.data.task_status=="COMPLETED"){
callback?.();
}
const Segments = VideoSegmentEntityAdapter.toVideoSegmentEntity(response.data) || [];
const detail = await detailScriptEpisodeNew({ project_id: projectId });
@ -43,7 +42,10 @@ export class VideoSegmentEditUseCase {
throw new Error(detail.message || "获取视频片段列表失败");
}
// 匹配视频片段ID
return this.matchVideoSegmentsWithIds(Segments, detail.data);
return {
segments: this.matchVideoSegmentsWithIds(Segments, detail.data),
roles: response.data.project_characters
};
} catch (error) {
console.error("获取视频片段列表失败:", error);
throw error;
@ -265,7 +267,7 @@ export class VideoSegmentEditUseCase {
this.loading = true;
// 获取当前项目的视频片段列表
const segments = await this.getVideoSegmentList(projectId);
const { segments } = await this.getVideoSegmentList(projectId);
// 过滤出除当前选中片段外的所有片段
const otherSegments = segments.filter(segment => segment.id !== currentSegmentId);

7
components/pages/work-flow/use-edit-data.tsx
View File

@ -24,6 +24,7 @@ export const useEditData = (tabType: string, originalText?: string) => {
const {
videoSegments,
scriptRoles,
getVideoSegmentList,
setSelectedSegment,
regenerateVideoSegment,
@ -104,9 +105,10 @@ export const useEditData = (tabType: string, originalText?: string) => {
}, [scriptBlocksMemo]);
useEffect(() => {
console.log('useEditData-----videoSegments', videoSegments);
console.log('useEditData-----videoSegments', videoSegments, scriptRoles);
setShotData(videoSegments);
}, [videoSegments]);
setRoleData(scriptRoles);
}, [videoSegments, scriptRoles]);
useEffect(() => {
setRoleData(roleList);
@ -121,6 +123,7 @@ export const useEditData = (tabType: string, originalText?: string) => {
applyScript,
// shot
shotData,
scriptRoles,
setSelectedSegment,
regenerateVideoSegment,
filterRole,

2
components/ui/character-tab-content.tsx
View File

@ -165,8 +165,8 @@ CharacterTabContentProps
// 处理替换确认逻辑
console.log('Selected shots:', selectedShots);
console.log('Add to library:', addToLibrary);
await applyRoleToSelectedShots(selectedRole || {} as RoleEntity);
setIsReplacePanelOpen(false);
await applyRoleToSelectedShots(selectedRole || {} as RoleEntity);
if(addToLibrary){
await saveRoleToLibrary();
}

11
components/ui/edit-modal.tsx
View File

@ -56,7 +56,8 @@ export function EditModal({
const scriptTabContentRef = useRef<any>(null);
const characterTabContentRef = useRef<any>(null);
// 添加一个状态来标记是否是从切换tab触发的提醒
const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null);
const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null);
const [disabledBtn, setDisabledBtn] = useState(false);
useEffect(() => {
setCurrentIndex(currentSketchIndex);
@ -129,6 +130,7 @@ const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null
}
const handleConfirmGotoFallback = () => {
setDisabledBtn(true);
console.log('handleConfirmGotoFallback');
SaveEditUseCase.saveData();
if (activeTab === '0') {
@ -140,6 +142,7 @@ const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null
setIsRemindFallbackOpen(false);
// 关闭弹窗
onClose();
setDisabledBtn(false);
}
const handleCloseRemindFallbackPanel = () => {
if (pendingSwitchTabId) {
@ -316,18 +319,20 @@ const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null
<div className="p-4 border-t border-white/10 bg-black/20">
<div className="flex justify-end gap-3">
<motion.button
className="px-4 py-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors"
className="px-4 py-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={handleReset}
disabled={disabledBtn}
>
Reset
</motion.button>
<motion.button
className="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors"
className="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => {handleSave()}}
disabled={disabledBtn}
>
Apply
</motion.button>

17
components/ui/replace-panel.tsx
View File

@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
import { motion } from 'framer-motion';
import { Check, X, CircleAlert, ArrowLeft, ArrowRight } from 'lucide-react';
import { cn } from '@/public/lib/utils';
import { throttle } from 'lodash';
interface ReplacePanelProps {
isLoading: boolean;
@ -84,8 +85,22 @@ export function ReplacePanel({
}
};
const throttledConfirm = React.useCallback(
throttle(() => {
onConfirm(selectedShots, addToLibrary);
}, 1000, { trailing: false }), // 1秒内只能触发一次，不要执行最后一次调用
[selectedShots, addToLibrary, onConfirm]
);
// 在组件卸载时取消节流函数中的定时器
React.useEffect(() => {
return () => {
throttledConfirm.cancel();
};
}, [throttledConfirm]);
const handleConfirm = () => {
onConfirm(selectedShots, addToLibrary);
throttledConfirm();
};
const handleLeftArrowClick = () => {

27
components/ui/shot-editor/CharacterToken.tsx
View File

@ -3,28 +3,16 @@ import { ReactNodeViewRenderer, NodeViewWrapper, ReactNodeViewProps } from '@tip
import { motion, AnimatePresence } from 'framer-motion'
import { useState, useRef, useEffect } from 'react'
import { Check, CircleUserRound } from 'lucide-react'
interface CharacterAttributes {
id: string | null;
name: string;
avatar: string;
gender: string;
age: string;
}
interface Role {
name: string;
url: string;
}
import { ScriptRoleEntity } from '@/app/service/domain/Entities';
interface CharacterTokenOptions {
roles?: Role[];
roles?: ScriptRoleEntity[];
}
export function CharacterToken(props: ReactNodeViewProps) {
const [showRoleList, setShowRoleList] = useState(false);
const [listPosition, setListPosition] = useState({ top: 0, left: 0 });
const { name, avatar } = props.node.attrs as CharacterAttributes;
const { name } = props.node.attrs as ScriptRoleEntity;
const extension = props.extension as Node<CharacterTokenOptions>;
const roles = extension.options.roles || [];
@ -76,7 +64,7 @@ export function CharacterToken(props: ReactNodeViewProps) {
}
}, [showRoleList]);
const handleRoleSelect = (role: Role) => {
const handleRoleSelect = (role: ScriptRoleEntity) => {
const { editor } = props;
const pos = props.getPos();
@ -84,8 +72,9 @@ export function CharacterToken(props: ReactNodeViewProps) {
const { tr } = editor.state;
tr.setNodeMarkup(pos, undefined, {
...props.node.attrs,
id: role.id,
name: role.name,
avatar: role.url,
image_url: role.image_url,
});
editor.view.dispatch(tr);
}
@ -137,7 +126,7 @@ export function CharacterToken(props: ReactNodeViewProps) {
>
<div className="relative">
<img
src={role.url}
src={role.image_url}
alt={role.name}
className={`w-10 h-10 rounded-full border transition-all duration-200
${isSelected ? 'border-blue-400 border-2' : 'border-white/20'}`}
@ -158,7 +147,7 @@ export function CharacterToken(props: ReactNodeViewProps) {
data-alt="role-item"
className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors duration-200
${name === 'Voiceover' ? 'bg-blue-500/20 text-blue-400' : 'hover:bg-white/5 text-gray-200'}`}
onClick={() => handleRoleSelect({ name: 'Voiceover', url: '' })}
onClick={() => handleRoleSelect({ name: 'Voiceover', image_url: '', id: 'voiceover' } as ScriptRoleEntity)}
>
<div className="relative">
<CircleUserRound

7
components/ui/shot-tab-content.tsx
View File

@ -23,6 +23,7 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
const {
loading,
shotData,
scriptRoles,
setSelectedSegment,
regenerateVideoSegment,
filterRole,
@ -50,8 +51,8 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
const [pendingRegeneration, setPendingRegeneration] = useState(false);
useEffect(() => {
console.log('shotTabContent-----roles', roles);
}, [roles]);
console.log('shotTabContent-----scriptRoles', scriptRoles);
}, [scriptRoles]);
useEffect(() => {
if (pendingRegeneration) {
@ -395,7 +396,7 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
<div className='space-y-4 col-span-1' key={selectedIndex}>
<ShotsEditor
ref={shotsEditorRef}
roles={roles}
roles={scriptRoles}
shotInfo={shotData[selectedIndex].lens}
style={{height: 'calc(100% - 4rem)'}}
/>