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

Fix UI, save #6

Merged
andrew.ng merged 1 commits from that into main 2025-03-12 18:10:22 +11:00
Conversation 0 Commits 1 Files Changed 4 +18 -13
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>
</AppShell.Navbar>
<AppShell.Main style={{ position: "relative" }}>
{clickData && <ImageLabel ref={imageLabelRef} data={clickData} />}
{clickData && <ImageLabel ref={imageLabelRef} data={clickData} listLabel={listLabel} />}
<Box
style={{

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

@ -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(
Object.entries(data?.labels).map(([id, name]) => ({
id: Number(id),
name,
}))
);
// setListLabel(
// Object.entries(data?.labels).map(([id, name]) => ({
// id: Number(id),
// name,
// }))
// );
setImageSrc(generateImageUrl(data?.image_path));
setImageName(data?.image_name);
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++) {
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);

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;
// 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)}`;