Merge pull request #30 from SkalskiP/develop

1.2.0-alpha relese merge

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+node_js:
+  - "stable"
+cache:
+  directories:
+    - node_modules
+script:
+  - npm test
+  - npm run test:coverage
+  - npm run build

README.md

@@ -1,3 +1,7 @@
+[![Build Status](https://travis-ci.org/SkalskiP/make-sense.svg?branch=develop)](https://travis-ci.org/SkalskiP/make-sense)
+![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/SkalskiP/make-sense?include_prereleases)
+[![Gitter](https://badges.gitter.im/make-sense-ai/community.svg)](https://gitter.im/make-sense-ai/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+
 <h1 align="center">makesense.ai</h1>
 
 <p align="center"> 
@@ -8,28 +12,30 @@
 
 [makesense.ai][1] is a free to use online tool for labelling photos. Thanks to the use of a browser it does not require any complicated installation - just visit the website and you are ready to go. It also doesn't matter which operating system you're running on - we do our best to be truly cross-platform. It is perfect for small computer vision deeplearning projects, making the process of preparing a dataset much easier and faster. Prepared labels can be downloaded  in one of multiple supported formats. The application was written in TypeScript and is based on React/Redux duo.
 
-## Road Map
+## Motto
 
-Our application is being actively developed. If you have an idea for a new functionality, please hit us on [Twitter][3] or create an issue where you can describe your concept. In the meantime, see what improvements we are planning for you in the future.
+> For AI to be free we need not just Open Source, but also a strong Open Data movement.  
 
-- [X] Export labels in Pascal VOC XML format
-- [ ] Optimization of the process of loading photos from disk - queuing 
-- [ ] Labelling objects using polygons and Bézier curves
-- [ ] Labelling objects using lines
-- [ ] Export labels in COCO JSON format
-- [ ] Separate tab with settings
-- [ ] Support basic image operations like crop and resize
-- [ ] Converting video to image frames
-- [ ] Keyboard shortcuts to improve productivity 
-- [ ] Automatic detection of objects in a photo - all you have to do is to label them
-- [ ] OCR labelling
-- [ ] Integration with external storage - Amazon S3, Google Drive, Dropbox
-- [ ] Copy annotations from previous image into the next one
+Andrew Ng
 
 ## Sneak Peek
 
+### Bounding boxes
+
+<p align="center"> 
+    <img width="1000" src=".//examples/bbox-demo.gif" alt="bbox">
+</p>
+
+### Points
+
 <p align="center"> 
-    <img width="1000" src=".//examples/alfa-demo.gif" alt="Logo">
+    <img width="1000" src=".//examples/points-demo.gif" alt="points">
+</p>
+
+### Polygons
+
+<p align="center"> 
+    <img width="1000" src=".//examples/polygon-demo.gif" alt="polygon">
 </p>
 
 ## Set Up the Project Locally
@@ -52,7 +58,20 @@ Some Windows 10 users may also have problems with running applications locally.
 
 ## Supported Output Formats
 
-* A .zip package containing files in YOLO format
+|               | CSV | YOLO | VOC XML | VGG JSON | COCO | PIXEL MASK |
+|:-------------:|:---:|:----:|:-------:|:--------:|:----:|:----------:|
+| **Point**     | ☑   | ☒    | ☐       | ☐        | ☐    | ☒          |
+| **Rect**      | ☑   | ☑    | ☑       | ☐        | ☐    | ☒          |
+| **Polygon**   | ☐   | ☒    | ☐       | ☑        | ☐    | ☐          |
+
+**Table 1.** The matrix of supported labels export format, where:
+* ☑ - supported format
+* ☐ - not yet supported format
+* ☒ - format does not make sense for a given label type  
+
+
+
+**A .zip package containing files in YOLO format**
 
 <details><summary><i>example of file in YOLO format</i></summary><p>
 
@@ -77,7 +96,7 @@ Some Windows 10 users may also have problems with running applications locally.
 ```
 </p></details>
 
-* A .zip package containing files in Pascal VOC XML format
+**A .zip package containing files in Pascal VOC XML format**
 
 <details><summary><i>example of file in Pascal VOC XML format</i></summary><p>
 
@@ -166,7 +185,7 @@ Some Windows 10 users may also have problems with running applications locally.
 ```
 </p></details>
 
-* Single CSV file
+**Single CSV file**
 
 <details><summary><i>example of CSV file</i></summary><p>
 
@@ -201,6 +220,27 @@ kiwi,758,360,252,236,000008.jpg,1280,960
 
 We don't store your images, because we don't send them anywhere in the first place.
 
+## Road Map
+
+Our application is being actively developed. If you have an idea for a new functionality, please hit us on [Twitter][3] and [Gitter][5] or create an issue where you can describe your concept. In the meantime, see what improvements we are planning for you in the future.
+
+- [X] Export rect labels in Pascal VOC XML format
+- [X] Labelling objects using polygons 
+- [X] Export polygon labels in VGG JSON format
+- [ ] Optimization of the process of loading photos from disk - queuing 
+- [ ] Labelling objects using lines
+- [ ] Autofill in label selection dropdown
+- [ ] Export labels in COCO JSON format
+- [ ] Export segmentation labels as image mask
+- [ ] Separate tab with settings
+- [ ] Support basic image operations like crop and resize
+- [ ] Converting video to image frames
+- [ ] Keyboard shortcuts to improve productivity 
+- [ ] Automatic detection of objects in a photo - all you have to do is to label them
+- [ ] OCR labelling
+- [ ] Integration with external storage - Amazon S3, Google Drive, Dropbox
+- [ ] Copy annotations from previous image into the next one
+
 ## License
 
 This project is licensed under the GPL-3.0 License - see the [LICENSE][2] file for details
@@ -211,3 +251,4 @@ Copyright (c) 2019-present, Piotr Skalski
 [2]: ./LICENSE
 [3]: https://twitter.com/PiotrSkalski92
 [4]: https://github.com/SkalskiP/make-sense/issues/16
+[5]: https://gitter.im/make-sense-ai/community?utm_source=share-link&utm_medium=link&utm_campaign=share-link

package.json

@@ -29,7 +29,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "CI=true react-scripts test --env=jsdom",
+    "test:coverage": "npm test -- --coverage",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/data/AcceptedFileType.ts

@@ -0,0 +1,4 @@
+export enum AcceptedFileType {
+    IMAGE = 'image/jpeg, image/png',
+    TEXT = 'text/plain'
+}

src/data/Context.ts

@@ -0,0 +1,7 @@
+export enum Context {
+    EDITOR = "EDITOR",
+    LEFT_NAVBAR = "LEFT_NAVBAR",
+    RIGHT_NAVBAR = "RIGHT_NAVBAR",
+    POPUP = "POPUP",
+    DROPDOWN = "DROPDOWN"
+}

src/data/CustomCursorStyle.ts

@@ -1,6 +1,8 @@
 export enum CustomCursorStyle {
     DEFAULT = "DEFAULT",
     MOVE = "MOVE",
-    TRANSFORM = "TRANSFORM",
-    HOVER = "HOVER"
+    RESIZE = "RESIZE",
+    ADD = "ADD",
+    CANCEL = "CANCEL",
+    CLOSE = "CLOSE"
 }

src/data/EditorData.ts

@@ -0,0 +1,11 @@
+import {IPoint} from "../interfaces/IPoint";
+import {IRect} from "../interfaces/IRect";
+import {ISize} from "../interfaces/ISize";
+
+export interface EditorData {
+    mousePositionOnCanvas: IPoint,
+    canvasSize: ISize,
+    activeImageScale: number,
+    activeImageRectOnCanvas: IRect,
+    event?: Event
+}

src/data/EditorFeatureData.ts

@@ -26,7 +26,7 @@ export const EditorFeatureData: IEditorFeature[] = [
         imageAlt: "labels",
     },
     {
-        displayText: "Support output file formats like YOLO, VOC XML, CSV",
+        displayText: "Support output file formats like YOLO, VOC XML, VGG JSON, CSV",
         imageSrc: "img/file.png",
         imageAlt: "file",
     },

src/data/EventType.ts

@@ -0,0 +1,7 @@
+export enum EventType {
+    MOUSE_UP = "mouseup",
+    MOUSE_DOWN = "mousedown",
+    MOUSE_MOVE = "mousemove",
+    KEY_DOWN = "keydown",
+    KEY_UP = "keyup"
+}

src/data/ExportFormatType.ts

@@ -2,5 +2,6 @@ export enum ExportFormatType {
     YOLO = "YOLO",
     COCO = "COCO",
     CSV = "CSV",
-    VOC = "VOC"
+    VOC = "VOC",
+    VGG_JSON = "VGG_JSON"
 }

src/data/HotKeyAction.ts

@@ -0,0 +1,4 @@
+export type HotKeyAction = {
+    keyCombo: string[];
+    action: (event: KeyboardEvent) => any;
+}

src/data/PolygonExportFormatData.ts

@@ -0,0 +1,9 @@
+import {IExportFormat} from "../interfaces/IExportFormat";
+import {ExportFormatType} from "./ExportFormatType";
+
+export const PolygonExportFormatData: IExportFormat[] = [
+    {
+        type: ExportFormatType.VGG_JSON,
+        label: "Single file in VGG JSON format."
+    }
+];

src/data/RectAnchor.ts

@@ -3,5 +3,5 @@ import {IPoint} from "../interfaces/IPoint";
 
 export interface RectAnchor {
     type: AnchorType,
-    middlePosition: IPoint
+    position: IPoint
 }

src/data/VGG/IVGG.ts

@@ -0,0 +1,33 @@
+export interface VGGShape {}
+
+export interface VGGRect extends VGGShape {
+    name: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+}
+
+export interface VGGPolygon extends VGGShape {
+    name: string,
+    all_points_x: number[],
+    all_points_y: number[]
+}
+
+export interface VGGRegion {
+    shape_attributes: VGGShape,
+    region_attributes: { [key:string]:string; }
+}
+
+export type VGGRegionsData = { [key: string]: VGGRegion; }
+
+export type VGGFileData = {
+    fileref: string;
+    size: number;
+    filename: string;
+    base64_img_data: string;
+    file_attributes: object;
+    regions: VGGRegionsData;
+}
+
+export type VGGObject = { [key: string]: VGGFileData; }

src/index.tsx

@@ -5,39 +5,16 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 import configureStore from "./configureStore";
 import {Provider} from "react-redux";
-import {updateMobileDeviceData, updateWindowSize} from "./store/general/actionCreators";
-import MobileDetect from 'mobile-detect'
+import {AppInitializer} from "./logic/initializer/AppInitializer";
 
 export const store = configureStore();
+AppInitializer.inti();
 
-const handleResize = () => {
-    store.dispatch(updateWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-    }));
-
-};
-const detectDeviceParams = () => {
-    const mobileDetect = new MobileDetect(window.navigator.userAgent);
-    store.dispatch(updateMobileDeviceData({
-        manufacturer: mobileDetect.mobile(),
-        browser: mobileDetect.userAgent(),
-        os: mobileDetect.os()
-    }))
-};
-
-handleResize();
-detectDeviceParams();
-window.addEventListener("resize", handleResize);
-
-const startingPoint = (
-    <Provider store={store}>
+ReactDOM.render(
+    (<Provider store={store}>
         <App/>
-    </Provider>
+    </Provider>),
+    document.getElementById('root') || document.createElement('div') // fix for testing purposes
 );
 
-ReactDOM.render(
-    startingPoint,
-    document.getElementById('root') as HTMLElement
-);
 serviceWorker.unregister();

src/interfaces/ILine.ts

@@ -0,0 +1,6 @@
+import {IPoint} from "./IPoint";
+
+export interface ILine {
+    start: IPoint,
+    end: IPoint
+}