更新ShotService,修改calculateRecognitionBoxes函数以接收matched_persons参数,并在ShotTabContent中集成该函数以优化识别框计算逻辑。同时,在PersonDetectionScene中添加未识别出人像的提示信息,提升用户体验。

This commit is contained in:
北枳 2025-08-13 02:59:09 +08:00
parent 26006bde15
commit 91a06ec432
4 changed files with 25 additions and 12 deletions

View File

@ -50,7 +50,7 @@ export interface UseShotService {
/** 设置角色简单数据 */ /** 设置角色简单数据 */
setSimpleCharacter: (characters: SimpleCharacter[]) => void; setSimpleCharacter: (characters: SimpleCharacter[]) => void;
/** 计算识别框 */ /** 计算识别框 */
calculateRecognitionBoxes: (containerElement: HTMLElement) => Array<{ calculateRecognitionBoxes: (containerElement: HTMLElement, matched_persons: MatchedPerson[]) => Array<{
left: number; left: number;
top: number; top: number;
width: number; width: number;
@ -405,7 +405,8 @@ export const useShotService = (): UseShotService => {
* @returns * @returns
*/ */
const calculateRecognitionBoxes = ( const calculateRecognitionBoxes = (
containerElement: HTMLElement containerElement: HTMLElement,
matched_persons: MatchedPerson[] = []
): Array<{ ): Array<{
/** 横向定位坐标 */ /** 横向定位坐标 */
left: number; left: number;
@ -422,6 +423,7 @@ export const useShotService = (): UseShotService => {
const containerRect = containerElement.getBoundingClientRect(); const containerRect = containerElement.getBoundingClientRect();
const containerWidth = containerRect.width; const containerWidth = containerRect.width;
const containerHeight = containerRect.height; const containerHeight = containerRect.height;
console.log('recognitionBoxes-width-height', containerWidth, containerHeight);
// 计算识别框属性 // 计算识别框属性
return matched_persons return matched_persons

View File

@ -27,7 +27,8 @@ export const useEditData = (tabType: string, originalText?: string) => {
getVideoSegmentList, getVideoSegmentList,
setSelectedSegment, setSelectedSegment,
regenerateVideoSegment, regenerateVideoSegment,
filterRole filterRole,
calculateRecognitionBoxes
} = useShotService(); } = useShotService();
const { const {
@ -121,6 +122,7 @@ export const useEditData = (tabType: string, originalText?: string) => {
setSelectedSegment, setSelectedSegment,
regenerateVideoSegment, regenerateVideoSegment,
filterRole, filterRole,
calculateRecognitionBoxes,
// role // role
roleData, roleData,
selectRole, selectRole,

View File

@ -375,8 +375,12 @@ export const PersonDetectionScene: React.FC<Props> = ({
{/* 人物识别框和浮签 */} {/* 人物识别框和浮签 */}
<AnimatePresence> <AnimatePresence>
{detections.length === 0 && (
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-white text-sm"></span>
</div>
)}
{detections.map((person, index) => { {detections.map((person, index) => {
return ( return (
<div key={person.id} className="cursor-pointer" onClick={() => { <div key={person.id} className="cursor-pointer" onClick={() => {
onPersonClick?.(person); onPersonClick?.(person);

View File

@ -11,7 +11,6 @@ import FloatingGlassPanel from './FloatingGlassPanel';
import { ReplaceCharacterPanel } from './replace-character-panel'; import { ReplaceCharacterPanel } from './replace-character-panel';
import HorizontalScroller from './HorizontalScroller'; import HorizontalScroller from './HorizontalScroller';
import { useEditData } from '@/components/pages/work-flow/use-edit-data'; import { useEditData } from '@/components/pages/work-flow/use-edit-data';
import { roleRecognitionResponse } from '@/app/service/usecase/ShotEditUsecase';
interface ShotTabContentProps { interface ShotTabContentProps {
currentSketchIndex: number; currentSketchIndex: number;
@ -32,7 +31,8 @@ export function ShotTabContent({
userRoleLibrary, userRoleLibrary,
fetchRoleShots, fetchRoleShots,
shotSelectionList, shotSelectionList,
applyRoleToSelectedShots applyRoleToSelectedShots,
calculateRecognitionBoxes
} = useEditData('shot'); } = useEditData('shot');
const [selectedIndex, setSelectedIndex] = useState(currentSketchIndex); const [selectedIndex, setSelectedIndex] = useState(currentSketchIndex);
@ -65,14 +65,18 @@ export function ShotTabContent({
return; return;
} }
setScanState('scanning'); setScanState('scanning');
await filterRole(document.getElementById('person-detection-video') as HTMLVideoElement); const containerElement = document.getElementById('person-detection-video') as HTMLVideoElement;
const roleRecognitionResponse = await filterRole(containerElement);
if (roleRecognitionResponse.recognition_result.code === 200) { console.log('roleRecognitionResponse', roleRecognitionResponse);
setDetections(roleRecognitionResponse.recognition_result.data.matched_persons.map((person) => ({ if (roleRecognitionResponse && roleRecognitionResponse.recognition_result.code === 200) {
const recognitionBoxes = calculateRecognitionBoxes(containerElement, roleRecognitionResponse.recognition_result.data.matched_persons);
console.log('recognitionBoxes', recognitionBoxes);
setDetections(recognitionBoxes.map((person: any) => ({
id: person.person_id, id: person.person_id,
name: person.person_id, name: person.person_id,
position: { top: person.bbox.y, left: person.bbox.x, width: person.bbox.width, height: person.bbox.height } position: { top: person.top, left: person.left, width: person.width, height: person.height }
}))); })));
setScanState('detected');
} else { } else {
setIsScanFailed(true); setIsScanFailed(true);
} }
@ -80,7 +84,8 @@ export function ShotTabContent({
// 处理扫描超时/失败 // 处理扫描超时/失败
const handleScanTimeout = () => { const handleScanTimeout = () => {
setScanState('idle'); setIsScanFailed(true);
setScanState('detected');
setDetections([]); setDetections([]);
}; };