make README.md

fix some bugs

src/components/AnnotationMain.js

@@ -42,7 +42,7 @@ function AnnotationMain() {
 
     const handleAnnotationSave = () => {
         const containerRef = { current: { offsetWidth: videoRef.current.videoWidth, offsetHeight: videoRef.current.videoHeight } };
-        const imageData = AnnotationService.createAnnotationImage(videoRef, detections, null, annotationSelectedClass, containerRef);
+        const imageData = AnnotationService.createAnnotationImage(videoRef, detections, null, selectedClass, containerRef);
         if (imageData) {
             setAnnotations(prevAnnotations => ({
                 ...prevAnnotations,

src/components/DetectionClassList.js

@@ -4,7 +4,7 @@ import DetectionClass from '../models/DetectionClass';
 
 function DetectionClassList({ onClassSelect }) {
     const [detectionClasses, setDetectionClasses] = useState([]);
-    const [selectedClassId, setSelectedClassId] = useState(null); // Use an ID for selection
+    const [selectedClass, setSelectedClass] = useState(null);
 
     const colors = [  // Define colors *inside* the component
         "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "#000000",
@@ -30,21 +30,21 @@ function DetectionClassList({ onClassSelect }) {
         fetch('config.json') // Make sure this path is correct
             .then(response => response.json())
             .then(data => {
-                const classObjects = data.classes.map(cls => {
+                const detectionClasses = data.classes.map(cls => {
                     const color = calculateColor(cls.Id,  '1'); // Full opacity for border
                     return new DetectionClass(cls.Id, cls.Name, color);
                 });
-                setDetectionClasses(classObjects);
+                setDetectionClasses(detectionClasses);
 
-                if (classObjects.length > 0 && onClassSelect) {
-                    onClassSelect(classObjects[0]); // Select the first class by default
+                if (detectionClasses.length > 0 && onClassSelect) {
+                    onClassSelect(detectionClasses[0]); // Select the first class by default
                 }
             })
             .catch(error => console.error("Error loading detection classes:", error));
-    }, [onClassSelect]);
+    });
 
     const handleClassClick = (cls) => {
-        setSelectedClassId(cls.Id); // Update the selected ID
+        setSelectedClass(cls); // Update the selected ID
         onClassSelect && onClassSelect(cls);
     };
 
@@ -55,7 +55,7 @@ function DetectionClassList({ onClassSelect }) {
                 {detectionClasses.map((cls) => {
                     const backgroundColor = calculateColor(cls.Id); // Calculate background color (0.2 opacity)
                     const darkBg = calculateColor(cls.Id, '0.8'); // Calculate selected background color (0.4 opacity)
-                    const isSelected = selectedClassId === cls.Id;
+                    const isSelected = selectedClass.Id === cls.Id;
 
                     return (
                         <li