Merge pull request SkalskiP#300 from SkalskiP/develop

1.11.0-alpha relese

.github/workflows/issue-greetings.yml

@@ -35,5 +35,5 @@ jobs:
             # serve with hot reload at localhost:3000
             npm start
             ```
-            To ensure proper functionality of the application locally, an npm `6.x.x` and node.js `v12.x.x` versions are required. More information about this problem is available in the [#16](https://github.com/SkalskiP/make-sense/issues/16) issue.
+            To ensure proper functionality of the application locally, an npm `8.x.x` and node.js `v16.x.x` versions are required. More information about this problem is available in the [#16](https://github.com/SkalskiP/make-sense/issues/16) issue.
 

README.md

@@ -1,7 +1,8 @@
-[![Build Status](https://travis-ci.org/SkalskiP/make-sense.svg?branch=develop)](https://travis-ci.org/SkalskiP/make-sense)
-[![codecov](https://codecov.io/gh/SkalskiP/make-sense/branch/develop/graph/badge.svg?token=lWsADbAey2)](https://codecov.io/gh/SkalskiP/make-sense)
+[![Github Stars](https://img.shields.io/badge/stars-nominate-brightgreen?logo=github)](https://stars.github.com/nominate/)
 ![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)
+[![codecov](https://codecov.io/gh/SkalskiP/make-sense/branch/develop/graph/badge.svg?token=lWsADbAey2)](https://codecov.io/gh/SkalskiP/make-sense)
+[![Gitter](https://badges.aleen42.com/src/gitter.svg)](https://gitter.im/make-sense-ai/community)
+[![Discord](https://badges.aleen42.com/src/discord.svg)](https://discord.gg/ASCjCrNdA7)
 
 <h1 align="center">makesense.ai</h1>
 
@@ -15,42 +16,19 @@
 
 ## 📄 Documentation
 
-You can find out more about our tool from the newly released [documentation][14].
-
-## 👀 Sneak Peek
-
-<div align="center">
-<p>
-   <img width="850" src=".//examples/demo-base.gif">
-</p>
-</div>
-
-**Figure 1.** Basic version of the application - without AI support
+You can find out more about our tool from the newly released [documentation][14] - still under 🚧 construction. Let us know what topics we should cover first.
 
-## 🤖 Advanced AI functionalities
+## 🤖 Advanced AI integrations
 
-[makesense.ai][1] strives to significantly reduce the time we have to spend on labeling photos. To achieve this, we are going to use many different AI models that will be able to give you recommendations as well as automate repetitive and tedious activities.
+[makesense.ai][1] strives to significantly reduce the time you have to spend on photo labeling. We are doing our best to integrate lates and gratest AI models, that are able to give you recommendations as well as automate repetitive and tedious activities.
 
-* [SSD model][8] pretrained on the [COCO dataset][9], which will do some of the work for you in drawing bboxes on photos and  also (in some cases) suggest a label. 
-* [PoseNet model][11] is a vision model that can be used to estimate the pose of a person in an image or video by estimating where key body joints are.
+* [YOLOv5][16] is our most powerful integration yet. Thanks to the use of [yolov5js][17] you can load not only pretreated models from [yolov5js-zoo](18), but above all your own models trained thanks to YOLOv5 and [exported](19) to tfjs format.
+* [SSD][8] pretrained on the [COCO dataset][9], which will do some of the work for you in drawing bboxes on photos and  also (in some cases) suggest a label. 
+* [PoseNet][11] is a vision model that can be used to estimate the pose of a person in an image or video by estimating where key body joints are.
 
-In the future, we also plan to add, among other things, models that classify photos, detect characteristic features of faces as well as whole faces. The engine that drives our AI functionalities is [TensorFlow.js][10] - JS version of the most popular framework for training neural networks. This choice allows us not only to speed up your work but also to care about the privacy of your data, because unlike with other commercial and open source tools, your photos do not have to be transferred to the server. This time AI comes to your device!
-
-<div align="center">
-<p>
-   <img width="850" src=".//examples/demo-ssd.gif">
-</p>
-</div>
+The engine that drives our AI functionalities is [TensorFlow.js][10] - JS version of the most popular framework for training neural networks. This choice allows us not only to speed up your work but also to care about the privacy of your data, because unlike with other commercial and open source tools, your photos do not have to be transferred to the server. This time AI comes to your device!
 
-**Figure 2.** SSD model - allows you to detect multiple objects, speeding up the bbox labeling process
-
-<div align="center">
-<p>
-   <img width="850" src=".//examples/demo-posenet.gif">
-</p>
-</div>
-
-**Figure 3.** PoseNet model - allows you to detect people's poses in photos, automating point labeling in some usecases
+https://user-images.githubusercontent.com/26109316/193255987-2d01c549-48c3-41ae-87e9-e1b378968966.mov
 
 ## 💻 Local Setup
 
@@ -67,23 +45,21 @@ npm install
 # serve with hot reload at localhost:3000
 npm start
 ```
-To ensure proper functionality of the application locally, an npm `6.x.x` and node.js `v12.x.x` versions are required. More information about this problem is available in the [#16][4].
+To ensure proper functionality of the application locally, npm `8.x.x` and node.js `v16.x.x` versions are required. More information about this problem is available in the [#16][4].
 
 ## 🐳 Docker Setup
 
 ```bash
 # Build Docker Image
-docker build -t make_sense docker/
+docker build -t make-sense -f docker/Dockerfile .
 
 # Run Docker Image as Service
-docker run -dit -p 3000:3000 --restart=always --name=make_sense make_sense
-
-# Get Docker Container IP
-docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' make_sense
-# Go to `<DOCKER_CONTAINER_IP>:3000`
+docker run -dit -p 3000:3000 --restart=always --name=make-sense make-sense
 
 # Get Docker Container Logs
-docker logs make_sense
+docker logs make-sense
+
+# Access make-sense: https://localhost:3000/
 ```
 
 ## ⌨️ Keyboard Shortcuts
@@ -126,7 +102,7 @@ You can find examples of export files along with a description and schema on our
 |:-------------:|:---:|:----:|:-------:|:--------:|:---------:|:----------:|
 | **Point**     | ☐   | ✗    | ☐       | ☐        | ☐         | ✗          |
 | **Line**      | ☐   | ✗    | ✗       | ✗        | ✗         | ✗          |
-| **Rect**      | ☐   | ✓    | ☐       | ☐        | ✓         | ✗          |
+| **Rect**      | ☐   | ✓    | ✓       | ☐        | ✓         | ✗          |
 | **Polygon**   | ☐   | ✗    | ☐       | ☐        | ✓         | ☐          |
 | **Label**     | ☐   | ✗    | ✗       | ✗        | ✗         | ✗          |
 
@@ -143,13 +119,6 @@ We don't store your images, because we don't send them anywhere in the first pla
 
 If you are just starting your adventure with deep learning and would like to learn and create something cool along the way, [makesense.ai][1] can help you with that. Leverage our bounding box labeling functionality to prepare a data set and use it to train your first state-of-the-art object detection model. Follow [instructions][12] and [examples][13] but most importantly, free your creativity.
 
-<div align="center">
-<p>
-   <img width="850" src=".//examples/object_detection_basketball.gif">
-</p>
-</div>
-
-**Figure 4.** Detection of players moving around the basketball court, based on <a href="https://research.google.com/youtube8m/">YouTube-8M</a> dataset.
 
 ## 🏆 Contribution
 
@@ -191,3 +160,7 @@ This project is licensed under the GPL-3.0 License - see the [LICENSE][2] file f
 [13]: https://github.com/SkalskiP/ILearnDeepLearning.py/tree/master/02_data_science_toolkit/02_yolo_object_detection
 [14]: https://skalskip.github.io/make-sense/
 [15]: https://github.com/SkalskiP/make-sense/issues
+[16]: https://github.com/ultralytics/yolov5
+[17]: https://github.com/SkalskiP/yolov5js 
+[18]: https://github.com/SkalskiP/yolov5js-zoo
+[19]: https://github.com/ultralytics/yolov5/blob/master/export.py

docker/Dockerfile

@@ -1,13 +1,12 @@
-FROM node:14.18.0
+FROM node:16.16.0
 
 RUN apt-get update && apt-get -y install git && rm -rf /var/lib/apt/lists/*
 
-RUN mkdir /workspace && \
-  cd /workspace && \ 
-  git clone https://github.com/SkalskiP/make-sense.git && \
-  cd make-sense && \
+COPY ./ /make-sense
+
+RUN cd /make-sense && \
   npm install
 
-WORKDIR /workspace/make-sense
+WORKDIR /make-sense
 
-ENTRYPOINT ["npm", "start"]
+ENTRYPOINT ["npm", "run", "dev"]

mkdocs.yml

@@ -15,7 +15,7 @@ copyright: Copyright © 2019 Piotr Skalski
 
 # Customization
 extra:
-  version: 1.8.0-alpha
+  version: 1.11.0-alpha
   social:
     - icon: fontawesome/brands/github
       link: https://github.com/SkalskiP

package.json

@@ -1,6 +1,6 @@
 {
   "name": "make-sense",
-  "version": "1.0.0",
+  "version": "1.11.0-alpha",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.3",
@@ -14,6 +14,7 @@
     "@tensorflow/tfjs-backend-webgl": "^3.19.0",
     "@tensorflow/tfjs-core": "^3.19.0",
     "@tensorflow/tfjs-node": "^3.19.0",
+    "axios": "^1.1.3",
     "classnames": "^2.3.1",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.0",
@@ -31,10 +32,10 @@
     "yolov5js": "^1.0.0"
   },
   "scripts": {
-    "dev": "vite",
-    "start": "vite",
+    "dev": "vite --host --port 3000",
+    "start": "vite --port 3000",
     "build": "vite build",
-    "preview": "vite preview",
+    "preview": "vite preview --host --port 3000",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "lint": "eslint src/**/*.ts src/**.tsx"

src/App.tsx

@@ -13,18 +13,27 @@ import {SizeItUpView} from './views/SizeItUpView/SizeItUpView';
 import {PlatformModel} from './staticModels/PlatformModel';
 import classNames from 'classnames';
 import NotificationsView from './views/NotificationsView/NotificationsView';
+import { RoboflowAPIDetails } from './store/ai/types';
 
 interface IProps {
     projectType: ProjectType;
     windowSize: ISize;
     isObjectDetectorLoaded: boolean;
     isPoseDetectionLoaded: boolean;
     isYOLOV5ObjectDetectorLoaded: boolean;
+    roboflowAPIDetails: RoboflowAPIDetails;
 }
 
-const App: React.FC<IProps> = ({
-    projectType, windowSize, isObjectDetectorLoaded, isPoseDetectionLoaded, isYOLOV5ObjectDetectorLoaded
-}) => {
+const App: React.FC<IProps> = (
+    {
+        projectType,
+        windowSize,
+        isObjectDetectorLoaded,
+        isPoseDetectionLoaded,
+        isYOLOV5ObjectDetectorLoaded,
+        roboflowAPIDetails
+    }
+) => {
     const selectRoute = () => {
         if (!!PlatformModel.mobileDeviceData.manufacturer && !!PlatformModel.mobileDeviceData.os)
             return <MobileMainView/>;
@@ -38,7 +47,11 @@ const App: React.FC<IProps> = ({
             }
         }
     };
-    const isAILoaded = isObjectDetectorLoaded || isPoseDetectionLoaded || isYOLOV5ObjectDetectorLoaded
+    const isAILoaded = isObjectDetectorLoaded
+        || isPoseDetectionLoaded
+        || isYOLOV5ObjectDetectorLoaded
+        || (roboflowAPIDetails.model !== '' && roboflowAPIDetails.key !== '' && roboflowAPIDetails.status)
+
     return (
         <div className={classNames('App', {'AI': isAILoaded})} draggable={false}
         >
@@ -49,12 +62,14 @@ const App: React.FC<IProps> = ({
     );
 };
 
+
 const mapStateToProps = (state: AppState) => ({
     projectType: state.general.projectData.type,
     windowSize: state.general.windowSize,
     isSSDObjectDetectorLoaded: state.ai.isSSDObjectDetectorLoaded,
     isPoseDetectorLoaded: state.ai.isPoseDetectorLoaded,
-    isYOLOV5ObjectDetectorLoaded: state.ai.isYOLOV5ObjectDetectorLoaded
+    isYOLOV5ObjectDetectorLoaded: state.ai.isYOLOV5ObjectDetectorLoaded,
+    roboflowAPIDetails: state.ai.roboflowAPIDetails
 });
 
 export default connect(