andrew.ng
/
YoLo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix UI, save

This commit is contained in:
nguentrungthat 2025-03-12 14:09:55 +07:00
parent 3c9dfa427b
commit 60a165e9a3
4 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

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

16
src/pages/components/ImageLabel.js
View File

@ -3,12 +3,12 @@ import { Box, LoadingOverlay } from "@mantine/core";
import PointsBlur from "./PointsBlur"; import PointsBlur from "./PointsBlur";
import { generateImageUrl } from "../../ultils"; import { generateImageUrl } from "../../ultils";
const ImageLabel = forwardRef(({ data }, ref) => { const ImageLabel = forwardRef(({ data, listLabel }, ref) => {
const [imageSrc, setImageSrc] = useState(null); const [imageSrc, setImageSrc] = useState(null);
const blurredRegions = useRef([]); const blurredRegions = useRef([]);
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const [reloading, setReloading] = useState(false); const [reloading, setReloading] = useState(false);
const [listLabel, setListLabel] = useState([]); // const [listLabel, setListLabel] = useState([]);
const [infoImage, setInfoImage] = useState({}); const [infoImage, setInfoImage] = useState({});
const [imageName, setImageName] = 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)); setImageSrc(generateImageUrl(data?.image_path));
setImageName(data?.image_name); setImageName(data?.image_name);
setTimeout(() => setReloading((pre) => !pre), 1000); setTimeout(() => setReloading((pre) => !pre), 1000);

6
src/pages/components/PointsBlur.js
View File

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

7
src/pages/components/SaveButton.js
View File

@ -31,7 +31,12 @@ export const SaveButton = ({ currentData, imageLabelRef, onSaved, disabled = fal
const height = (y_max - y_min) / img_h; const height = (y_max - y_min) / img_h;
// Get class ID // 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)}`; const yolo_label = `${class_id} ${x_center.toFixed(6)} ${y_center.toFixed(6)} ${width.toFixed(6)} ${height.toFixed(6)}`;