Currently developing an Object Recognition app and aiming to add a border around the object along with a cross that indicates the center. The border has been successfully implemented, but having trouble creating the cross. The plan is to add two more boxes inside, each split in half to form the cross shape. Seeking ideas on how to simplify the process? Utilizing tfjs-models/coco-ssd/ The approach involves dividing the values by 2 for the logic to work
const TargetBox = styled.div`
position: absolute;
left: ${({ x }) => x + "px"};
top: ${({ y }) => y + "px"};
width: ${({ width }) => width + "px"};
height: ${({ height }) => height + "px"};
left2: ${({ x2 }) => x2 / 2+ "px"};
top2: ${({ y2 }) => y2 / 2 + "px"};
width2: ${({ width2 }) => width2 / 2 + "px"};
height2: ${({ height2 }) => height2 / 2 + "px"};
Within the logical calculation section
const normalizePredictions = (predictions, imgSize) => {
if (!predictions || !imgSize || !imageRef) return predictions || [];
return predictions.map((prediction) => {
const { bbox } = prediction;
const oldX = bbox[0];
const oldY = bbox[1];
const oldWidth = bbox[2];
const oldHeight = bbox[3];
const imgWidth = imageRef.current.width;
const imgHeight = imageRef.current.height;
const x = (oldX * imgWidth) / imgSize.width;
const y = (oldY * imgHeight) / imgSize.height;
const width = (oldWidth * imgWidth) / imgSize.width;
const height = (oldHeight * imgHeight) / imgSize.height;
const x2 = (oldX * imgWidth / 2) / imgSize.width;
const y2 = (oldY * imgHeight / 2) / imgSize.heigh;
const width2 = (oldWidth * imgWidth / 2) / imgSize.width;
const height2 = (oldHeight * imgHeight / 2) / imgSize.height;
return { ...prediction, bbox: [x, y, width, height, x2, y2, width2, height2]
The reference to x2, y2... signifies the box that will be halved. Additional references such as x3, y3... will also be created for another half box. However, currently facing issues with the halves not functioning correctly
What modifications can be made?
Current appearance https://i.sstatic.net/YypwP.png
Desired outcome https://i.sstatic.net/TH1qP.png