first commit
This commit is contained in:
		
							parent
							
								
									54cdeb14ec
								
							
						
					
					
						commit
						66f3a4e9e3
					
				| 
						 | 
				
			
			@ -232,6 +232,9 @@ const PointBlurImageComponent = ({ imageSrc, blurredRegions, loaded, setLoaded,
 | 
			
		|||
			<canvas ref={canvasRef} />
 | 
			
		||||
			{isOpen && (
 | 
			
		||||
				<div style={{ backgroundColor: "#FFF", position: "absolute", top: info?.value[0].y - 200, left: info?.value[0].x, zIndex: 10 }}>
 | 
			
		||||
					<div>
 | 
			
		||||
						<span style={{ color: "#000", fontSize: "18px", fontWeight: "bold" }}>Select label</span>
 | 
			
		||||
					</div>
 | 
			
		||||
					{listLabel?.map((el, i) => (
 | 
			
		||||
						<div key={i}>
 | 
			
		||||
							<button
 | 
			
		||||
| 
						 | 
				
			
			@ -242,7 +245,7 @@ const PointBlurImageComponent = ({ imageSrc, blurredRegions, loaded, setLoaded,
 | 
			
		|||
									setIsOpen(false);
 | 
			
		||||
									redrawCanvas();
 | 
			
		||||
								}}
 | 
			
		||||
								style={{ backgroundColor: "#ccc", marginTop: "5px", marginBottom: "5px", width: "150px", color: "#000" }}>
 | 
			
		||||
								style={{ backgroundColor: "#ccc", width: "150px", color: "#000" }}>
 | 
			
		||||
								{el?.name}
 | 
			
		||||
							</button>
 | 
			
		||||
						</div>
 | 
			
		||||
| 
						 | 
				
			
			@ -255,7 +258,7 @@ const PointBlurImageComponent = ({ imageSrc, blurredRegions, loaded, setLoaded,
 | 
			
		|||
								setIsOpen(false);
 | 
			
		||||
								redrawCanvas();
 | 
			
		||||
							}}
 | 
			
		||||
							style={{ backgroundColor: "#ff0000", marginTop: "5px", marginBottom: "5px", width: "150px", color: "#000" }}>
 | 
			
		||||
							style={{ backgroundColor: "#ff0000", marginBottom: "10px", width: "150px", color: "#fff" }}>
 | 
			
		||||
							Delete
 | 
			
		||||
						</button>
 | 
			
		||||
					</div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -11,13 +11,11 @@ const Main = () => {
 | 
			
		|||
	const [imageName, setImageName] = useState("");
 | 
			
		||||
 | 
			
		||||
	const handleFileChange = async (event) => {
 | 
			
		||||
		console.log(event.target.files);
 | 
			
		||||
		const file = event.target.files[0];
 | 
			
		||||
		if (!file) return;
 | 
			
		||||
 | 
			
		||||
		const formData = new FormData();
 | 
			
		||||
		formData.append("image", file);
 | 
			
		||||
		// setImageSrc(URL.createObjectURL(file));
 | 
			
		||||
		blurredRegions.current = [];
 | 
			
		||||
		setLoaded(false);
 | 
			
		||||
		try {
 | 
			
		||||
| 
						 | 
				
			
			@ -56,37 +54,39 @@ const Main = () => {
 | 
			
		|||
	};
 | 
			
		||||
 | 
			
		||||
	const handleSave = async () => {
 | 
			
		||||
		let arrPoints = "";
 | 
			
		||||
		blurredRegions.current?.forEach((points) => {
 | 
			
		||||
			const img_w = infoImage?.width;
 | 
			
		||||
			const img_h = infoImage?.height;
 | 
			
		||||
		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));
 | 
			
		||||
				// 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;
 | 
			
		||||
				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";
 | 
			
		||||
				// 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)}`;
 | 
			
		||||
				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,
 | 
			
		||||
		});
 | 
			
		||||
				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 (
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 262 KiB  | 
| 
						 | 
				
			
			@ -0,0 +1,20 @@
 | 
			
		|||
1 0.846875 0.679733 0.102500 0.046706
 | 
			
		||||
1 0.399687 0.411593 0.091875 0.032527
 | 
			
		||||
1 0.394375 0.494579 0.096250 0.036697
 | 
			
		||||
1 0.380000 0.703086 0.107500 0.041701
 | 
			
		||||
1 0.384062 0.592160 0.104375 0.041701
 | 
			
		||||
0 0.751563 0.582152 0.038125 0.031693
 | 
			
		||||
0 0.302187 0.718098 0.043125 0.031693
 | 
			
		||||
0 0.324688 0.505421 0.038125 0.028357
 | 
			
		||||
0 0.725938 0.486239 0.036875 0.028357
 | 
			
		||||
0 0.334375 0.416597 0.035000 0.025855
 | 
			
		||||
0 0.774687 0.688907 0.039375 0.036697
 | 
			
		||||
1 0.399375 0.333194 0.090000 0.032527
 | 
			
		||||
0 0.310000 0.603003 0.038750 0.031693
 | 
			
		||||
0 0.697187 0.325271 0.033125 0.020017
 | 
			
		||||
0 0.703125 0.401168 0.032500 0.025021
 | 
			
		||||
0 0.336875 0.337364 0.035000 0.022519
 | 
			
		||||
1 0.792500 0.481234 0.092500 0.033361
 | 
			
		||||
1 0.820937 0.572560 0.100625 0.040867
 | 
			
		||||
1 0.759687 0.325271 0.080000 0.028357
 | 
			
		||||
1 0.766250 0.399917 0.076875 0.032527
 | 
			
		||||
| 
						 | 
				
			
			@ -73,8 +73,8 @@ def get_image(filename):
 | 
			
		|||
@app.route('/save', methods=['POST'])
 | 
			
		||||
def save_data():
 | 
			
		||||
    # Get form data
 | 
			
		||||
    arr_points = request.form.get("list")  # This will be a string
 | 
			
		||||
    image_name = request.form.get("imageName")  # This will be a string
 | 
			
		||||
    arr_points = request.form.get("list")
 | 
			
		||||
    image_name = request.form.get("imageName")
 | 
			
		||||
 | 
			
		||||
    if not arr_points or not image_name:
 | 
			
		||||
        return jsonify({"error": "Missing required fields"}), 400
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue