Merge pull request 'Fix UI, save' (#6) from that into main

Reviewed-on: #6

src/App.js

@@ -379,7 +379,7 @@ function App() {
 							</Box>
 						</AppShell.Navbar>
 						<AppShell.Main style={{ position: "relative" }}>
-							{clickData && <ImageLabel ref={imageLabelRef} data={clickData} />}
+							{clickData && <ImageLabel ref={imageLabelRef} data={clickData} listLabel={listLabel} />}
 
 							<Box
 								style={{

src/pages/components/ImageLabel.js

@@ -3,12 +3,12 @@ import { Box, LoadingOverlay } from "@mantine/core";
 import PointsBlur from "./PointsBlur";
 import { generateImageUrl } from "../../ultils";
 
-const ImageLabel = forwardRef(({ data }, ref) => {
+const ImageLabel = forwardRef(({ data, listLabel }, ref) => {
 	const [imageSrc, setImageSrc] = useState(null);
 	const blurredRegions = useRef([]);
 	const [loaded, setLoaded] = useState(false);
 	const [reloading, setReloading] = useState(false);
-	const [listLabel, setListLabel] = useState([]);
+	// const [listLabel, setListLabel] = useState([]);
 	const [infoImage, setInfoImage] = useState({});
 	const [imageName, setImageName] = useState("");
 
@@ -45,12 +45,12 @@ const ImageLabel = forwardRef(({ data }, ref) => {
 					];
 				});
 			}
-			setListLabel(
+			// setListLabel(
-				Object.entries(data?.labels).map(([id, name]) => ({
+			// 	Object.entries(data?.labels).map(([id, name]) => ({
-					id: Number(id),
+			// 		id: Number(id),
-					name,
+			// 		name,
-				}))
+			// 	}))
-			);
+			// );
 			setImageSrc(generateImageUrl(data?.image_path));
 			setImageName(data?.image_name);
 			setTimeout(() => setReloading((pre) => !pre), 1000);

src/pages/components/PointsBlur.js

@@ -49,7 +49,7 @@ const PointBlurImageComponent = ({ imageSrc, blurredRegions, loaded, setLoaded,
 			for (let i = 0; i < blurredRegions.current.length; i++) {
 				const region = blurredRegions.current[i];
 				const buttonX = (region[0].x + region[1].x) / 2;
-				const buttonY = Math.min(region[0].y, region[1].y, region[2].y, region[3].y) - 20;
+				const buttonY = Math.min(region[0].y, region[1].y, region[2].y, region[3].y) - 17;
 				if (Math.abs(buttonX - x) < 30 && Math.abs(buttonY - y) < 10) {
 					// blurredRegions.current.splice(i, 1);
 					if (info?.index === i) {
@@ -226,11 +226,11 @@ const PointBlurImageComponent = ({ imageSrc, blurredRegions, loaded, setLoaded,
 
 		ctx.save();
 		ctx.fillStyle = isSelected ? "rgb(196, 194, 61, 0.5)" : "rgb(2, 101, 182, 0.5)";
-		ctx.fillRect(buttonX - 30, buttonY - 10, Math.max(region[0]?.label?.length * 6 + 20, region[0]?.subLabel?.length * 5 + 10), 25);
+		ctx.fillRect(buttonX - 30, buttonY - 10, Math.max(region[0]?.label?.length * 6 + 20, (region[0]?.subLabel || "")?.length * 3 + 30), 25);
 		ctx.fillStyle = "rgb(255, 255, 255)";
 		ctx.font = "9px Arial";
 		ctx.textAlign = "center";
-		ctx.fillText(region[0]?.subLabel, buttonX - 10, buttonY);
+		ctx.fillText(region[0]?.subLabel || "", buttonX - 10, buttonY);
 		ctx.font = "11px Arial";
 		ctx.textAlign = "center";
 		ctx.fillText(region[0]?.label, buttonX, buttonY + 10);

src/pages/components/SaveButton.js

@@ -31,7 +31,12 @@ export const SaveButton = ({ currentData, imageLabelRef, onSaved, disabled = fal
 					const height = (y_max - y_min) / img_h;
 
 					// Get class ID
-					const class_id = listLabel.find((label) => label?.name === points[0].label)?.id || "0";
+					const class_id =
+						listLabel.find((value) => {
+							const arrLabel = value?.name?.split(".");
+							const label = arrLabel?.length > 1 ? arrLabel[1] : arrLabel[0];
+							return label === points[0].label;
+						})?.code || "0";
 
 					const yolo_label = `${class_id} ${x_center.toFixed(6)} ${y_center.toFixed(6)} ${width.toFixed(6)} ${height.toFixed(6)}`;