117 lines
3.2 KiB
JavaScript
117 lines
3.2 KiB
JavaScript
import React, { useRef, useState } from "react";
|
|
import PointsBlur from "./components/PointsBlur";
|
|
|
|
const Main = () => {
|
|
const [imageSrc, setImageSrc] = useState(null);
|
|
const blurredRegions = useRef([]);
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [reloading, setReloading] = useState(false);
|
|
const [listLabel, setListLabel] = useState([]);
|
|
const [infoImage, setInfoImage] = useState({});
|
|
const [imageName, setImageName] = useState("");
|
|
|
|
const handleFileChange = async (event) => {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append("image", file);
|
|
blurredRegions.current = [];
|
|
setLoaded(false);
|
|
try {
|
|
const url = "http://localhost:5000/detect_image";
|
|
const response = await fetch(url, {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.error) {
|
|
alert(data.error);
|
|
} else {
|
|
if (data?.points) {
|
|
blurredRegions.current = data?.points?.map((pre) => [
|
|
{ x: pre.x1, y: pre.y1, label: pre.label },
|
|
{ x: pre.x2, y: pre.y1, label: pre.label },
|
|
{ x: pre.x2, y: pre.y2, label: pre.label },
|
|
{ x: pre.x1, y: pre.y2, label: pre.label },
|
|
]);
|
|
}
|
|
setListLabel(
|
|
Object.entries(data?.labels).map(([id, name]) => ({
|
|
id: Number(id),
|
|
name,
|
|
}))
|
|
);
|
|
setImageSrc("http://localhost:5000/" + data?.image_path);
|
|
setImageName(data?.image_name);
|
|
setTimeout(() => setReloading((pre) => !pre), 1000);
|
|
console.log(data);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error detecting QR code:", error);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (blurredRegions.current?.length > 0) {
|
|
let arrPoints = "";
|
|
blurredRegions.current?.forEach((points) => {
|
|
const img_w = infoImage?.width;
|
|
const img_h = infoImage?.height;
|
|
|
|
// Get bounding box
|
|
const x_min = Math.min(...points.map((p) => p.x));
|
|
const y_min = Math.min(...points.map((p) => p.y));
|
|
const x_max = Math.max(...points.map((p) => p.x));
|
|
const y_max = Math.max(...points.map((p) => p.y));
|
|
|
|
const x_center = (x_min + x_max) / 2 / img_w;
|
|
const y_center = (y_min + y_max) / 2 / img_h;
|
|
const width = (x_max - x_min) / img_w;
|
|
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 yolo_label = `${class_id} ${x_center.toFixed(6)} ${y_center.toFixed(6)} ${width.toFixed(6)} ${height.toFixed(6)}`;
|
|
|
|
arrPoints += yolo_label + "\n";
|
|
});
|
|
const url = "http://localhost:5000/save";
|
|
const formData = new FormData();
|
|
formData.append("list", arrPoints);
|
|
formData.append("imageName", imageName);
|
|
await fetch(url, {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div>
|
|
<input type="file" accept="image/*" onChange={handleFileChange} />
|
|
<button style={{}} onClick={handleSave}>
|
|
Save
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<PointsBlur
|
|
imageSrc={imageSrc}
|
|
blurredRegions={blurredRegions}
|
|
loaded={loaded}
|
|
setLoaded={setLoaded}
|
|
reloading={reloading}
|
|
setReloading={setReloading}
|
|
setInfoImage={setInfoImage}
|
|
listLabel={listLabel}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Main;
|