feature/151_add_description_about_each_file_type (#185)

* feature/151_add_description_about_each_file_type * gh action update * update documentation structure * initial documentation * initial documentation 2 * initial documentation 3 * initial documentation 4 * initial documentation 5 * initial documentation 6 * initial documentation 7 * initial documentation 8 * initial documentation 9 * initial documentation 10 * initial documentation 11 * initial documentation 12 * initial documentation 13
SkalskiP · Aug 28, 2021 · 02564af · 02564af
1 parent 0380523
commit 02564af
Show file tree

Hide file tree

Showing 11 changed files with 205 additions and 22 deletions.
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -0,0 +1,17 @@
+name: Deploy documantation
+
+on: [push]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-python@v2
+        with:
+          python-version: 3.x
+      - run: pip install mkdocs-material
+      - run: mkdir -p docs/img
+      - run: cp public/make-sense-ico-transparent.png docs/img/logo.png
+      - run: cp public/make-sense-ico.png docs/img/favicon.png
+      - run: mkdocs gh-deploy --force
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,19 @@
+# Contribution Guide
+
+### 💬 Submit Feedback
+The feedback should be submitted by creating an issue on GitHub [issues][1].
+Select the related template (bug report, feature request, or custom) and add the corresponding labels.
+
+### 🐞 Fix Bugs
+You may look through the GitHub [issues][1] for bugs.
+
+### 💡 Implement Features
+You may look through the GitHub [issues][1] for feature requests.
+
+### 🚀 Pull Requests (PR)
+- Fork the repository and create a new branch from the `develop` branch.
+- For bug fixes, add new tests. We use [jest.js][2]  to test our code.
+- Do a PR from your new branch to our `develop` branch of the original make-sense repo.
+
+[1]: https://github.com/SkalskiP/make-sense/issues/
+[2]: https://jestjs.io/
diff --git a/README.md b/README.md
@@ -9,25 +9,27 @@
     <img width="600" src=".//public/ico/main-image-dark_alter.png" alt="Logo">
 </p>
 
-## Description
-
 [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.
 
-## Motto
+## 📄 Documentation
+
+You can find out more about our tool from the newly released [documentation][14].
+
+## 💡 Motto
 
 > For AI to be free we need not just Open Source, but also a strong Open Data movement.  
 
 Andrew Ng
 
-## Sneak Peek
+## 👀 Sneak Peek
 
 <p align="center"> 
     <img width="1000" src=".//examples/demo-base.gif" alt="alfa-demo">
 </p>
 
 **Figure 1.** Basic version of the application - without AI support
 
-## Advanced AI functionalities
+## 🤖 Advanced AI functionalities
 
 [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.
 
@@ -49,7 +51,7 @@ In the future, we also plan to add, among other things, models that classify pho
 
 **Figure 3.** PoseNet model - allows you to detect people's poses in photos, automating point labeling in some usecases
 
-## Set Up the Project Locally
+## 💻 Local Setup
 
 ```bash
 # clone repository
@@ -66,7 +68,7 @@ npm start
 ```
 To ensure proper functionality of the application locally, an npm `6.x.x` and node.js `v11.x.x` versions are required. More information about this problem is available in the [#16][4].
 
-## Set Up Project with Docker
+## 🐳 Docker Setup
 
 ```bash
 # Build Docker Image
@@ -83,7 +85,7 @@ docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' mak
 docker logs make_sense
 ```
 
-## Supported Keyboard Shortcuts
+## ⌨️ Keyboard Shortcuts
 
 | Functionality                      | Context  | Mac | Windows / Linux  |
 |:-----------------------------------|:--------:|:---:|:----------------:|
@@ -100,7 +102,7 @@ docker logs make_sense
 
 **Table 1.** Supported keyboard shortcuts
 
-## Supported Export Formats
+## ⬆️ Export Formats
 
 |               | CSV | YOLO | VOC XML | VGG JSON | COCO JSON | PIXEL MASK |
 |:-------------:|:---:|:----:|:-------:|:--------:|:---------:|:----------:|
@@ -117,7 +119,7 @@ docker logs make_sense
 
 You can find examples of export files along with a description and schema on our [Wiki][7].
 
-## Supported Import Formats
+## ⬇️ Import Formats
 
 |               | CSV | YOLO | VOC XML | VGG JSON | COCO JSON | PIXEL MASK |
 |:-------------:|:---:|:----:|:-------:|:--------:|:---------:|:----------:|
@@ -129,15 +131,15 @@ You can find examples of export files along with a description and schema on our
 
 **Table 3.** The matrix of supported labels import formats
 
-## Privacy
+## 🔐 Privacy
 
 We don't store your images, because we don't send them anywhere in the first place.
 
-## Road Map
+## 📅 Road Map
 
 Our application is being actively developed. Check out our plans for the near future on our [Wiki][6]. 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.
 
-## Tutorials
+## 💪 Tutorials
 
 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.
 
@@ -147,11 +149,11 @@ If you are just starting your adventure with deep learning and would like to lea
 
 **Figure 4.** Detection of players moving around the basketball court, based on <a href="https://research.google.com/youtube8m/">YouTube-8M</a> dataset.
 
-## Contribution
+## 🙋 Contribution
 
 Feel free to file [issues](https://github.com/SkalskiP/make-sense/issues) or [pull requests](https://github.com/SkalskiP/make-sense/pulls).  
 
-## Citation
+## 💬 Citation
 
 Please cite Make Sense in your publications if this is useful for your research. Here is an example BibTeX entry:
 
@@ -164,11 +166,11 @@ Please cite Make Sense in your publications if this is useful for your research.
 }
 ```
 
-## License
+## 🪧 License
 
 This project is licensed under the GPL-3.0 License - see the [LICENSE][2] file for details
 
-Copyright (c) 2019-present, Piotr Skalski
+Copyright &copy; 2019 Piotr Skalski
 
 [1]: http://makesense.ai
 [2]: ./LICENSE
@@ -183,3 +185,4 @@ Copyright (c) 2019-present, Piotr Skalski
 [11]: https://www.tensorflow.org/lite/models/pose_estimation/overview
 [12]: https://towardsdatascience.com/chess-rolls-or-basketball-lets-create-a-custom-object-detection-model-ef53028eac7d
 [13]: https://github.com/SkalskiP/ILearnDeepLearning.py/tree/master/02_data_science_toolkit/02_yolo_object_detection
+[14]: https://skalskip.github.io/make-sense/
diff --git a/docs/export.md b/docs/export.md
@@ -0,0 +1,15 @@
+# Export Formats
+
+|               | CSV | YOLO | VOC XML | VGG JSON | COCO JSON | PIXEL MASK |
+|:-------------:|:---:|:----:|:-------:|:--------:|:---------:|:----------:|
+| **Point**     | ✓   | ✗    | ☐       | ☐        | ☐         | ✗          |
+| **Line**      | ✓   | ✗    | ✗       | ✗        | ✗         | ✗          |
+| **Rect**      | ✓   | ✓    | ✓       | ☐        | ☐         | ✗          |
+| **Polygon**   | ☐   | ✗    | ☐       | ✓        | ✓         | ☐          |
+| **Label**     | ✓   | ✗    | ✗       | ✗        | ✗         | ✗          |
+
+**Table 1.** The matrix of supported labels export formats, where:
+
+- ✓ - supported format
+- ☐ - not yet supported format
+- ✗ - format does not make sense for a given label type  
diff --git a/docs/import.md b/docs/import.md
@@ -0,0 +1,15 @@
+# Import Formats
+
+|               | CSV | YOLO | VOC XML | VGG JSON | COCO JSON | PIXEL MASK |
+|:-------------:|:---:|:----:|:-------:|:--------:|:---------:|:----------:|
+| **Point**     | ☐   | ✗    | ☐       | ☐        | ☐         | ✗          |
+| **Line**      | ☐   | ✗    | ✗       | ✗        | ✗         | ✗          |
+| **Rect**      | ☐   | ✓    | ☐       | ☐        | ✓         | ✗          |
+| **Polygon**   | ☐   | ✗    | ☐       | ☐        | ✓         | ☐          |
+| **Label**     | ☐   | ✗    | ✗       | ✗        | ✗         | ✗          |
+
+**Table 1.** The matrix of supported labels import formats, where:
+
+- ✓ - supported format
+- ☐ - not yet supported format
+- ✗ - format does not make sense for a given label type  
diff --git a/docs/index.md b/docs/index.md
@@ -0,0 +1,24 @@
+<h1 align="center">makesense.ai</h1>
+
+<p align="center"> 
+    <img width="120" src="https://user-images.githubusercontent.com/26109316/131229187-1d93dc42-963c-440e-8f38-53ee72a2260d.png" alt="make-sense">
+</p>
+
+
+[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.
+
+## Advanced AI functionalities
+
+[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.
+
+* [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.
+
+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!
+
+
+[1]: http://makesense.ai
+[8]: https://arxiv.org/abs/1512.02325
+[9]: http://cocodataset.org
+[10]: https://www.tensorflow.org/js
+[11]: https://www.tensorflow.org/lite/models/pose_estimation/overview
diff --git a/docs/local-setup.md b/docs/local-setup.md
@@ -0,0 +1,18 @@
+# Set Up the Project Locally
+
+```bash
+# clone repository
+git clone https://github.com/SkalskiP/make-sense.git
+
+# navigate to main dir
+cd make-sense
+
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:3000
+npm start
+```
+To ensure proper functionality of the application locally, npm `6.x.x` and node.js `v11.x.x` versions are required. More information about this problem is available in the [#16][1].
+
+[1]: https://github.com/SkalskiP/make-sense/issues/16
diff --git a/docs/shortcuts.md b/docs/shortcuts.md
@@ -0,0 +1,14 @@
+# Keyboard Shortcuts
+
+| Functionality                      | Context  | Mac | Windows / Linux  |
+|:-----------------------------------|:--------:|:---:|:----------------:|
+| Polygon autocomplete               | Editor   | <kbd>Enter</kbd> | <kbd>Enter</kbd> |
+| Cancel polygon drawing             | Editor   | <kbd>Escape</kbd> | <kbd>Escape</kbd> |
+| Delete currently selected label    | Editor   | <kbd>Backspace</kbd> | <kbd>Delete</kbd> |
+| Load previous image                | Editor   | <kbd>⌥</kbd> + <kbd>Left</kbd> | <kbd>Ctrl</kbd> + <kbd>Left</kbd> |
+| Load next image                    | Editor   | <kbd>⌥</kbd> + <kbd>Right</kbd> | <kbd>Ctrl</kbd> + <kbd>Right</kbd> |
+| Zoom in                            | Editor   | <kbd>⌥</kbd> + <kbd>+</kbd> | <kbd>Ctrl</kbd> + <kbd>+</kbd> |
+| Zoom out                           | Editor   | <kbd>⌥</kbd> + <kbd>-</kbd> | <kbd>Ctrl</kbd> + <kbd>-</kbd> |
+| Move image                         | Editor   | <kbd>Up</kbd> / <kbd>Down</kbd> / <kbd>Left</kbd> / <kbd>Right</kbd> | <kbd>Up</kbd> / <kbd>Down</kbd> / <kbd>Left</kbd> / <kbd>Right</kbd> |
+| Select Label                       | Editor   | <kbd>⌥</kbd> + <kbd>0-9</kbd> | <kbd>Ctrl</kbd> + <kbd>0-9</kbd> |
+| Exit popup                         | Popup    | <kbd>Escape</kbd> | <kbd>Escape</kbd> |
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -0,0 +1,57 @@
+# Project information
+site_name: Make Sense
+site_url: https://skalskip.github.io/make-sense
+site_author: Piotr Skalski
+site_description: >-
+  Free to use online tool for labelling photos
+
+# Repository
+repo_name: 'SkalskiP/make-sense'
+repo_url: 'https://github.com/SkalskiP/make-sense'
+edit_uri: ""
+
+# Copyright
+copyright: Copyright &copy; 2019 Piotr Skalski
+
+# Customization
+extra:
+  version: 1.7.0-alpha
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/SkalskiP
+    - icon: fontawesome/brands/twitter
+      link: https://twitter.com/PiotrSkalski92
+    - icon: fontawesome/brands/linkedin
+      link: https://www.linkedin.com/in/piotr-skalski-36b5b4122/
+
+# Page tree
+nav:
+  - Home: index.md
+  - Import: import.md
+  - Export: export.md
+  - Shortcuts: shortcuts.md
+  - Local setup: local-setup.md
+
+# Configuration
+theme:
+  name: 'material'
+  palette:
+    primary: 'black'
+    accent: 'indigo'
+  font:
+    text: Roboto
+    code: Roboto Mono
+  logo: 'img/logo.png'
+  favicon: 'img/favicon.png'
+  features:
+    - navigation.expand
+  icon:
+    repo: fontawesome/brands/github
+
+# Extensions
+markdown_extensions:
+  - attr_list
+  - def_list
+  - footnotes
+  - pymdownx.highlight
+  - pymdownx.superfences
diff --git a/src/data/info/DropDownMenuData.ts b/src/data/info/DropDownMenuData.ts
@@ -69,14 +69,15 @@ export const DropDownMenuData: DropDownMenuNode[] = [
         children: [
             {
                 name: "Documentation",
-                description: "Coming soon",
+                description: "Read more about Make Sense",
                 imageSrc: "ico/documentation.png",
                 imageAlt: "documentation",
-                disabled: true
+                disabled: false,
+                onClick: () => window.open("https://skalskip.github.io/make-sense", "_blank")
             },
             {
                 name: "Bugs and Features",
-                description: "Coming soon",
+                description: "Report a bug or propose a new feature",
                 imageSrc: "ico/bug.png",
                 imageAlt: "bug",
                 disabled: false,

diff --git a/src/data/info/SocialMediaData.ts b/src/data/info/SocialMediaData.ts
@@ -28,6 +28,6 @@ export const SocialMediaData: ISocialMedia[] = [
         imageSrc: "/ico/patreon-logo.png",
         imageAlt: "Patreon Logo",
         href: Settings.PATREON_URL,
-        tooltipMessage: "Support MakeSense on Patreon and help it grow"
+        tooltipMessage: "Support Make Sense on Patreon and help it grow"
     },
-];
+];