Added support for YOLO OBB format (import/export/drawing)

docker/Dockerfile

@@ -1,12 +1,27 @@
 FROM node:16.16.0
 
-RUN apt-get update && apt-get -y install git && rm -rf /var/lib/apt/lists/*
+# Accept build arguments for user creation
+ARG USRNM=developer
+ARG USRUID=1000
+ARG USRGID=1000
 
-COPY ./ /make-sense
+# Create group and user with specified UID/GID
+RUN groupadd --gid ${USRGID} ${USRNM} || true && \
+    useradd --uid ${USRUID} --gid ${USRGID} -m -s /bin/bash ${USRNM} || true
 
-RUN cd /make-sense && \
-  npm install
+# Create app directory
+RUN mkdir -p /app && chown ${USRUID}:${USRGID} /app
 
-WORKDIR /make-sense
+# Copy package files and install dependencies as root
+COPY package.json package-lock.json* /app/
+RUN cd /app && npm install && chown -R ${USRUID}:${USRGID} /app/node_modules
 
-ENTRYPOINT ["npm", "run", "dev"]
+# Switch to non-root user
+USER ${USRNM}
+
+WORKDIR /app
+
+# Expose development server port
+EXPOSE 3000
+
+CMD ["/bin/bash"]

docker/build.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+# Determine script location
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+# Navigate to project root (parent directory)
+cd "$SCRIPT_DIR/.."
+
+echo "Building make-sense Docker image..."
+echo "Current directory: $(pwd)"
+echo "User: $(whoami) (UID: $(id -u), GID: $(id -g))"
+
+# Build the Docker image with user arguments
+docker build \
+  --build-arg USRNM=$(whoami) \
+  --build-arg USRUID=$(id -u) \
+  --build-arg USRGID=$(id -g) \
+  -t make-sense:dev \
+  -f docker/Dockerfile \
+  .
+
+if [ $? -eq 0 ]; then
+    echo "✅ Build successful! Image: make-sense:dev"
+    echo ""
+    echo "To run the container, use: ./docker/run.sh"
+else
+    echo "❌ Build failed!"
+    exit 1
+fi

docker/run.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+# Determine script location
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+# Navigate to project root
+cd "$SCRIPT_DIR/.."
+
+echo "Starting make-sense development container..."
+echo "Project directory: $(pwd)"
+echo "Container will be accessible at: http://localhost:9500"
+echo ""
+echo "Volume mount: $(pwd) -> /app"
+echo "Running as: $(whoami) (UID: $(id -u), GID: $(id -g))"
+echo ""
+echo "Inside the container, run:"
+echo "  npm run dev     - Start development server"
+echo "  npm run build   - Build for production"
+echo "  npm test        - Run tests"
+echo ""
+
+# Run the container
+docker run -it \
+  --name make-sense-dev \
+  --rm \
+  -p 9500:3000 \
+  -v "$(pwd)":/app \
+  -w /app \
+  --user $(id -u):$(id -g) \
+  make-sense:dev
+
+# Note: The container will be removed when stopped due to --rm flag
+# If you want it to persist, remove the --rm flag above

src/data/ExportFormatData.ts

@@ -34,13 +34,19 @@ export const ExportFormatData: ExportFormatDataMap = {
     [LabelType.POLYGON]: [
         {
             type: AnnotationFormatType.VGG,
-            label: 'Single file in VGG JSON format.'
+            label: 'A .zip package containing files in VGG JSON format.'
         },
         {
             type: AnnotationFormatType.COCO,
             label: 'Single file in COCO JSON format.'
         }
     ],
+    [LabelType.OBB]: [
+        {
+            type: AnnotationFormatType.YOLO,
+            label: 'A .zip package containing files in YOLO OBB format.'
+        }
+    ],
     [LabelType.IMAGE_RECOGNITION]: [
         {
             type: AnnotationFormatType.CSV,

src/data/ImportFormatData.ts

@@ -27,5 +27,11 @@ export const ImportFormatData: ImportFormatDataMap = {
             label: 'Single file in COCO JSON format.'
         }
     ],
+    [LabelType.OBB]: [
+        {
+            type: AnnotationFormatType.YOLO,
+            label: 'Multiple files in YOLO OBB format along with labels names definition - labels.txt file.'
+        }
+    ],
     [LabelType.IMAGE_RECOGNITION]: []
 }

src/data/enums/LabelType.ts

@@ -3,5 +3,6 @@ export enum LabelType {
     POINT = 'POINT',
     RECT = 'RECT',
     POLYGON = 'POLYGON',
-    LINE = 'LINE'
+    LINE = 'LINE',
+    OBB = 'OBB'
 }

src/data/info/LabelToolkitData.ts

@@ -45,4 +45,11 @@ export const LabelToolkitData: ILabelToolkit[] = [
         imageAlt: 'polygon',
         projectType: ProjectType.OBJECT_DETECTION,
     },
+    {
+        labelType: LabelType.OBB,
+        headerText: 'OBB',
+        imageSrc: 'ico/polygon.png',
+        imageAlt: 'obb',
+        projectType: ProjectType.OBJECT_DETECTION,
+    },
 ];

src/logic/actions/EditorActions.ts

@@ -3,6 +3,7 @@ import {EditorModel} from "../../staticModels/EditorModel";
 import {RectRenderEngine} from "../render/RectRenderEngine";
 import {PointRenderEngine} from "../render/PointRenderEngine";
 import {PolygonRenderEngine} from "../render/PolygonRenderEngine";
+import {OBBRenderEngine} from "../render/OBBRenderEngine";
 import {IRect} from "../../interfaces/IRect";
 import {RectUtil} from "../../utils/RectUtil";
 import {EditorData} from "../../data/EditorData";
@@ -41,6 +42,9 @@ export class EditorActions {
             case LabelType.POLYGON:
                 EditorModel.supportRenderingEngine = new PolygonRenderEngine(EditorModel.canvas);
                 break;
+            case LabelType.OBB:
+                EditorModel.supportRenderingEngine = new OBBRenderEngine(EditorModel.canvas);
+                break;
             default:
                 EditorModel.supportRenderingEngine = null;
                 break;

src/logic/actions/LabelActions.ts

@@ -1,5 +1,5 @@
 import {LabelsSelector} from '../../store/selectors/LabelsSelector';
-import {ImageData, LabelLine, LabelName, LabelPoint, LabelPolygon, LabelRect} from '../../store/labels/types';
+import {ImageData, LabelLine, LabelName, LabelPoint, LabelPolygon, LabelRect, LabelOBB} from '../../store/labels/types';
 import {filter} from 'lodash';
 import {store} from '../../index';
 import {updateImageData, updateImageDataById} from '../../store/labels/actionCreators';
@@ -24,6 +24,9 @@ export class LabelActions {
             case LabelType.POLYGON:
                 LabelActions.deletePolygonLabelById(imageId, labelId);
                 break;
+            case LabelType.OBB:
+                LabelActions.deleteOBBLabelById(imageId, labelId);
+                break;
         }
     }
 
@@ -71,6 +74,17 @@ export class LabelActions {
         store.dispatch(updateImageDataById(imageData.id, newImageData));
     }
 
+    public static deleteOBBLabelById(imageId: string, labelOBBId: string) {
+        const imageData: ImageData = LabelsSelector.getImageDataById(imageId);
+        const newImageData = {
+            ...imageData,
+            labelOBBs: filter(imageData.labelOBBs || [], (currentLabel: LabelOBB) => {
+                return currentLabel.id !== labelOBBId;
+            })
+        };
+        store.dispatch(updateImageDataById(imageData.id, newImageData));
+    }
+
     public static toggleLabelVisibilityById(imageId: string, labelId: string) {
         const imageData: ImageData = LabelsSelector.getImageDataById(imageId);
         const newImageData = {
@@ -87,6 +101,9 @@ export class LabelActions {
             labelLines: imageData.labelLines.map((labelLine: LabelLine) => {
                 return labelLine.id === labelId ? LabelUtil.toggleAnnotationVisibility(labelLine) : labelLine
             }),
+            labelOBBs: (imageData.labelOBBs || []).map((labelOBB: LabelOBB) => {
+                return labelOBB.id === labelId ? LabelUtil.toggleAnnotationVisibility(labelOBB) : labelOBB
+            }),
         };
         store.dispatch(updateImageDataById(imageData.id, newImageData));
     }

src/logic/context/EditorContext.ts

@@ -11,6 +11,7 @@ import {Direction} from "../../data/enums/Direction";
 import {PlatformUtil} from "../../utils/PlatformUtil";
 import {LabelActions} from "../actions/LabelActions";
 import {LineRenderEngine} from "../render/LineRenderEngine";
+import {OBBRenderEngine} from "../render/OBBRenderEngine";
 
 export class EditorContext extends BaseContext {
     public static actions: HotKeyAction[] = [
@@ -35,6 +36,9 @@ export class EditorContext extends BaseContext {
                         case LabelType.LINE:
                             (EditorModel.supportRenderingEngine as LineRenderEngine).cancelLabelCreation();
                             break;
+                        case LabelType.OBB:
+                            (EditorModel.supportRenderingEngine as OBBRenderEngine).cancelLabelCreation();
+                            break;
                     }
                 }
                 EditorActions.fullRender();

src/logic/export/OBBLabelsExporter.ts

@@ -0,0 +1,93 @@
+import {AnnotationFormatType} from '../../data/enums/AnnotationFormatType';
+import {ImageData, LabelName, LabelOBB} from '../../store/labels/types';
+import {ImageRepository} from '../imageRepository/ImageRepository';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+import {LabelsSelector} from '../../store/selectors/LabelsSelector';
+import {ExporterUtil} from '../../utils/ExporterUtil';
+import {findIndex} from 'lodash';
+import {ISize} from '../../interfaces/ISize';
+import {NumberUtil} from '../../utils/NumberUtil';
+
+export class OBBLabelsExporter {
+    public static export(exportFormatType: AnnotationFormatType): void {
+        switch (exportFormatType) {
+            case AnnotationFormatType.YOLO:
+                OBBLabelsExporter.exportAsYOLO();
+                break;
+            default:
+                return;
+        }
+    }
+
+    private static exportAsYOLO(): void {
+        const zip = new JSZip();
+
+        // Add labels.txt file with label names
+        const labelNames: LabelName[] = LabelsSelector.getLabelNames();
+        const labelsContent: string = labelNames.map((label: LabelName) => label.name).join('\n');
+        try {
+            zip.file('labels.txt', labelsContent);
+        } catch (error) {
+            throw new Error(error as string);
+        }
+
+        // Add annotation files for each image
+        LabelsSelector.getImagesData()
+            .forEach((imageData: ImageData) => {
+                const fileContent: string = OBBLabelsExporter.wrapOBBLabelsIntoYOLO(imageData);
+                if (fileContent) {
+                    const fileName : string = imageData.fileData.name.replace(/\.[^/.]+$/, '.txt');
+                    try {
+                        zip.file(fileName, fileContent);
+                    } catch (error) {
+                        throw new Error(error as string);
+                    }
+                }
+            });
+
+        try {
+            zip.generateAsync({type:'blob'})
+                .then((content: Blob) => {
+                    saveAs(content, `${ExporterUtil.getExportFileName()}.zip`);
+                });
+        } catch (error) {
+            throw new Error(error as string);
+        }
+    }
+
+    public static wrapOBBLabelIntoYOLO(labelOBB: LabelOBB, labelNames: LabelName[], imageSize: ISize): string {
+        const snapAndFix = (value: number) => NumberUtil.snapValueToRange(value, 0, 1).toFixed(6);
+        const classIdx: string = findIndex(labelNames, {id: labelOBB.labelId}).toString();
+
+        // YOLO OBB format: class_index x1 y1 x2 y2 x3 y3 x4 y4
+        // All coordinates normalized to [0, 1]
+        const normalizedCoords: number[] = [];
+
+        labelOBB.vertices.forEach((vertex) => {
+            normalizedCoords.push(vertex.x / imageSize.width);
+            normalizedCoords.push(vertex.y / imageSize.height);
+        });
+
+        // Snap all coordinates to [0, 1] range
+        const processedCoords = normalizedCoords.map((value: number) => snapAndFix(value));
+
+        return [classIdx, ...processedCoords].join(' ');
+    }
+
+    private static wrapOBBLabelsIntoYOLO(imageData: ImageData): string {
+        if (!imageData.labelOBBs || imageData.labelOBBs.length === 0 || !imageData.loadStatus)
+            return null;
+
+        const labelNames: LabelName[] = LabelsSelector.getLabelNames();
+        const image: HTMLImageElement = ImageRepository.getById(imageData.id);
+        const imageSize: ISize = {width: image.width, height: image.height};
+
+        const labelOBBsString: string[] = imageData.labelOBBs
+            .filter((labelOBB: LabelOBB) => labelOBB.labelId !== null)
+            .map((labelOBB: LabelOBB) => {
+                return OBBLabelsExporter.wrapOBBLabelIntoYOLO(labelOBB, labelNames, imageSize);
+            });
+        return labelOBBsString.join('\n');
+    }
+}

src/logic/export/RectLabelsExporter.ts

@@ -32,6 +32,18 @@ export class RectLabelsExporter {
 
     private static exportAsYOLO(): void {
         const zip = new JSZip();
+
+        // Add labels.txt file with label names
+        const labelNames: LabelName[] = LabelsSelector.getLabelNames();
+        const labelsContent: string = labelNames.map((label: LabelName) => label.name).join('\n');
+        try {
+            zip.file('labels.txt', labelsContent);
+        } catch (error) {
+            // TODO
+            throw new Error(error as string);
+        }
+
+        // Add annotation files for each image
         LabelsSelector.getImagesData()
             .forEach((imageData: ImageData) => {
                 const fileContent: string = RectLabelsExporter.wrapRectLabelsIntoYOLO(imageData);

src/logic/import/yolo/YOLOImporter.ts

@@ -78,12 +78,30 @@ export class YOLOImporter extends AnnotationImporter {
 
     public static applyAnnotations(imageData: ImageData, rawAnnotations: string, labelNames: LabelName[]): ImageData {
         const image: HTMLImageElement = ImageRepository.getById(imageData.id);
-        imageData.labelRects = YOLOUtils.parseYOLOAnnotationsFromString(
-            rawAnnotations,
-            labelNames,
-            {width: image.width, height: image.height},
-            imageData.fileData.name
-        );
+
+        // Check if this is OBB format by looking at the first line
+        const firstLine = rawAnnotations.split(/[\r\n]/)[0];
+        if (firstLine) {
+            const components = firstLine.trim().split(' ');
+            const isOBB = components.length === 9;
+
+            if (isOBB) {
+                imageData.labelOBBs = YOLOUtils.parseYOLOOBBAnnotationsFromString(
+                    rawAnnotations,
+                    labelNames,
+                    {width: image.width, height: image.height},
+                    imageData.fileData.name
+                );
+            } else {
+                imageData.labelRects = YOLOUtils.parseYOLOAnnotationsFromString(
+                    rawAnnotations,
+                    labelNames,
+                    {width: image.width, height: image.height},
+                    imageData.fileData.name
+                );
+            }
+        }
+
         return imageData;
     }