forked from 77media/video-flow
更新ShotService,修改calculateRecognitionBoxes函数以接收matched_persons参数,并在ShotTabContent中集成该函数以优化识别框计算逻辑。同时,在PersonDetectionScene中添加未识别出人像的提示信息,提升用户体验。
This commit is contained in:
parent
26006bde15
commit
91a06ec432
@ -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
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -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([]);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user