Skip to content

Commit d88ff99

Browse files
authored
Merge pull request #6 from bbsaclay/master
v0.5.0
2 parents 486f435 + 56ad141 commit d88ff99

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+731
-540
lines changed

Dockerfile

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
FROM ubuntu:18.04
1+
FROM ubuntu:20.04
22

33
# Install Node.js
4-
RUN apt update && apt install -y --reinstall ca-certificates curl build-essential
4+
RUN apt-get update && apt-get install -y --reinstall ca-certificates curl build-essential
55
RUN curl --silent --location https://deb.nodesource.com/setup_12.x | bash -
6-
RUN apt install -y nodejs && apt install -y python-requests
6+
RUN apt-get install -y nodejs
77
RUN npm install -g [email protected]
88

99
# Copy files for the frontend
@@ -15,10 +15,14 @@ COPY server server
1515
COPY .logo-ascii .logo-ascii
1616

1717
# Build frontend and install backend dependencies
18-
RUN npm i && cd frontend/ && npm i && npm run build && rm -rf src frontend && cd ..
18+
RUN npm deps && npm run build && rm -rf frontend
1919

2020
EXPOSE 3000
2121

22+
# default files and folders (usefull when no volume can be mounted with this image)
23+
RUN mkdir -p /data
24+
25+
2226
# ENTRYPOINT ["node", "server/server.js"]
2327
RUN echo 'cat .logo-ascii && node server/server.js "$@"' > entrypoint.sh
2428
ENTRYPOINT ["sh", "entrypoint.sh" ]

Dockerfile-local

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Build Docker image
2-
FROM ubuntu:18.04
1+
FROM ubuntu:20.04
32

43
# Install Node.js
54
RUN apt-get update && apt-get install -y --reinstall ca-certificates curl build-essential
6-
RUN curl --silent --location https://deb.nodesource.com/setup_10.x | bash -
7-
RUN apt install -y nodejs && apt install -y python-requests
5+
RUN curl --silent --location https://deb.nodesource.com/setup_12.x | bash -
6+
RUN apt-get install -y nodejs
7+
RUN npm install -g [email protected]
88

99
# Copy bundled frontend
1010
COPY build build
@@ -18,6 +18,10 @@ COPY .logo-ascii .logo-ascii
1818
RUN npm install
1919
EXPOSE 3000
2020

21+
# default files and folders (usefull when no volume can be mounted with this image)
22+
RUN mkdir -p /data
23+
24+
2125
# ENTRYPOINT ["node", "server/server.js"]
2226
RUN echo 'cat .logo-ascii && node server/server.js "$@"' > entrypoint.sh
2327
ENTRYPOINT ["sh", "entrypoint.sh" ]

README.md

Lines changed: 134 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,52 @@
11
# <img src="frontend/images/pixano_logo.png" alt="Pixano" height="100"/>
22

3+
[![License](https://img.shields.io/badge/license-CeCILL--C-blue.svg)](LICENSE) [![Live Demo](https://img.shields.io/badge/demo-online-green.svg)](http://pixano.cea.fr/smart-annotation/) [![License](https://img.shields.io/docker/pulls/pixano/pixano-app.svg)](Docker)
4+
5+
## What is PIXANO ?
6+
[Pixano](https://pixano.cea.fr/) is a web-based smart-annotation tool for computer vision applications. The modules are driven by artificial intelligence, which assists the human user with annotation tasks and accelerate the annotation process. Try some of our features [online](https://pixano.github.io/demo/demo.html)!
7+
8+
[![pixano.gif](documentation/pixano.gif)](https://www.youtube.com/watch?v=z5T2HhnugJo)
9+
310
Pixano App
411
===============
5-
[![License](https://img.shields.io/badge/license-CeCILL--C-blue.svg)](LICENSE) [![Live Demo](https://img.shields.io/badge/demo-online-green.svg)](http://pixano.cea.fr/smart-annotation/) [![License](https://img.shields.io/docker/pulls/pixano/pixano-app.svg)](Docker)
612

7-
Pixano App is a web-based annotation tool. It relies on web components dedicated to annotation [pixano-elements](https://github.com/pixano/pixano-elements). This document explains how to run it.
13+
## Table of Contents
14+
* [Installation](#1-installation)
15+
- [Using Docker Image](#using-docker-image)
16+
- [From source (for developers)](#install-from-source-for-developers)
17+
* [Usage](#2-usage)
18+
- [Configure your first annotation project](#configure-your-first-annotation-project)
19+
- [Start annotating](#start-annotating)
20+
- [Export your annotations](#export-your-annotations)
21+
- [Standalone vs distributed usage](#standalone-vs-distributed-usage)
22+
* [Advanced usage](#3-advanced-usage)
23+
- [Import predictions](#import-predictions)
24+
- [Import/Export annotation format](#importexport-annotation-format)
25+
- [Build docker from sources](#build-docker-from-sources)
26+
* [Contributing](#4-contributing)
27+
- [Pixano architecture: Pixano-app and Pixano-elements](#pixano-architecture-pixano-app-and-pixano-elements)
28+
- [Some documentation to get started](#some-documentation-to-get-started)
829

930

10-
## 1. Installation & Setup
31+
## 1. Installation
1132

12-
### 1.a) Using Docker Image [recommended]
33+
### Using Docker Image
1334

1435
The easiest way to get up-and-running is to install [Docker](https://www.docker.com/). Then, you should be able to download and run the pre-built image using the docker command line tool. Find out more about the `pixano` image on its [Docker Hub](https://hub.docker.com/r/pixano/pixano-app/) page.
1536

16-
Here's the simplest way you can run the Pixano application using docker, assuming you're familiar with using -v argument to mount folders:
37+
Here's the simplest way you can run the Pixano application using docker:
1738

1839
```bash
1940
sudo docker run -it --rm -v "$PWD":/data -p 3000:3000 pixano/pixano-app
2041
```
2142

22-
The path where you run this command must contain your folder of images.
43+
The path where you run this command must contain the data you want to annotate.
44+
45+
*NB: This path is defined as your workspace.*
46+
47+
#### Optional: create an alias
48+
In practice, we suggest you setup an alias called `pixano` to automatically expose the folder containing your specified image, so the script can read it and store results where you can access them. This is how you can do it in your terminal console on OSX or Linux:
2349

24-
[Optional] In practice, we suggest you setup an alias called `pixano` to automatically expose the folder containing your specified image, so the script can read it and store results where you can access them. This is how you can do it in your terminal console on OSX or Linux:
2550
```bash
2651
# Setup the alias. Put this in your .bashrc file so it's available at startup.
2752
# Note that the --network host works only on Linux, use explicit port mapping for Windows and Mac
@@ -33,71 +58,31 @@ pixano ./data-test --port 3001
3358
# pixano
3459
```
3560

36-
You’ll see something similar to this.
37-
38-
```bash
39-
┌────────────────────────────────────────────────────────────────────────┐
40-
│ │
41-
│ Serving /path/to/your/workspace │
42-
│ │
43-
│ - Local: http://localhost:3000 │
44-
│ - On Your Network: http://xxx.xxx.x.xx:3000 │
45-
│ │
46-
└────────────────────────────────────────────────────────────────────────┘
47-
```
48-
49-
Open your browser and hit `localhost:3000`. You should see the login page of the application.
5061

51-
![pixano-elements](./frontend/images/login.png)
62+
### Install from source (for developers)
5263

53-
First authentification is: `username: admin` `password: admin`.
64+
#### Install global dependencies
5465

55-
You can then create your annotation project in the `Tasks` tab or update your login in the `Users` tab.
66+
- NodeJS (>=12)
67+
To install on ubuntu:
5668

57-
If your `data-test` folder has the following structure:
58-
```
59-
data-test
60-
61-
└───images
62-
│ xxx.jpg
63-
│ yyy.jpg
64-
65-
│ ...
69+
```bash
70+
# Make sure you have curl installed
71+
sudo apt install curl
72+
# Then download and execute the Node.js 10.x installer
73+
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
74+
# Once the installer is done doing its thing, you will need to install (or upgrade) Node.js
75+
sudo apt install nodejs
76+
# Make sure the version is now correct
77+
nodejs --version
78+
npm install -g [email protected]
6679
```
67-
You can fill the task configuration as follows, which will create as many annotation jobs as there are images in your `image` folder:
68-
![task-creation](./frontend/images/task-creation.png)
69-
70-
*Update 2020.12.04: Make sure your image extensions are either `png` or `jpg`.
71-
72-
*Update 2021.03.05: Videos are not directly handled: extract the video frames beforehand. For every plugin taking a sequence as input (e.g. `sequence-rectangle`, `sequence-polygon`, `tracking`, etc), each subfolder containing images will be considered as a sequence.
73-
74-
### 1.b) Manual Installation [developers]
75-
76-
#### Global dependencies
80+
You can read this nice [introduction](https://codeburst.io/the-only-nodejs-introduction-youll-ever-need-d969a47ef219) to NodeJS in case you're curious on how it works.
7781

78-
- NodeJS (>=12)
79-
To install on ubuntu:
80-
```bash
81-
# Make sure you have curl installed
82-
sudo apt install curl
83-
# Then download and execute the Node.js 10.x installer
84-
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
85-
# Once the installer is done doing its thing, you will need to install (or upgrade) Node.js
86-
sudo apt install nodejs
87-
# Make sure the version is now correct
88-
nodejs --version
89-
npm install -g [email protected]
90-
```
91-
You can read this nice [introduction](https://codeburst.io/the-only-nodejs-introduction-youll-ever-need-d969a47ef219) to NodeJS in case you're curious on how it works:
92-
93-
#### Application dependencies
82+
#### Install application dependencies
9483

9584
```bash
96-
# Install backend dependencies
97-
npm i
98-
# Install frontend dependencies
99-
cd frontend/
100-
npm i
85+
npm run deps
10186
```
10287

10388
##### Using a local pixano-element
@@ -119,7 +104,14 @@ npm run build
119104

120105
#### Run the application
121106

122-
In the command prompt, type in `node server/server.js /path/to/workspace/` from the root folder and hit enter. You’ll see something similar to this.
107+
In the command prompt, type in `node server/server.js /path/to/your/workspace` from the root folder and hit enter.
108+
109+
*NB: Make sure when typing this command that the workspace (`/path/to/your/workspace`) contains all of the data you want to use.*
110+
111+
112+
## 2. Usage
113+
114+
After running Pixano-App, you’ll see something similar to this:
123115

124116
```bash
125117
┌────────────────────────────────────────────────────────────────────────┐
@@ -132,35 +124,52 @@ npm run build
132124
└────────────────────────────────────────────────────────────────────────┘
133125
```
134126

135-
E.g: `node server/server.js ./data-test/`.
127+
Open your browser and hit _http://localhost:3000_. You should see the login page of the application.
136128

137-
Open your browser and hit `localhost:3000`. You should see the login page of the application. First authentification is: `username: admin` `password: admin`. You can then create your annotation project in the `Tasks` tab or update your login in the `Users` tab.
129+
![pixano-elements](./documentation/images/page-login.png)
138130

131+
First authentication is: `username: admin` `password: admin`.
139132

140-
*NB: When creating an annotation task, you will refer to the folder containing the images you want to annotate by a relative path from the `workspace` folder. Make sure when typing `node server/server.js /path/to/workspace/` that it contains all of the data you want to use.*
133+
### Configure your first annotation project
141134

135+
Before annotating, configure your project by following our [admin's guide](./admin-guide.md). You will be able to:
142136

143-
## 2. Contributing
137+
- define your datasets
138+
- define your desired annotation tasks
139+
- define your users and their role (annotators, validators, administrators)
144140

145-
If you want to edit the application to your liking, fork this repository.
141+
### Start annotating
146142

147-
- To get familiar with how the app is built from Web Components, read the [LitElement](https://lit-element.polymer-project.org/) documentation.
148-
- To get familiar with how the data is managed in the client, read the [redux](https://redux.js.org/introduction/getting-started) documentation.
149-
- To better understand the Pixano server API, read its [documentation](documentation/rest-api.md)
143+
Once a task is defined, you (or your annotators) will be able to annotate your dataset. See our [annotator's guide](./annotator-guide.md) for your first steps.
144+
Our [plugins' guide](./plugins-guide.md) will help you in the use of your current task's specific plugin.
150145

151-
### Build docker from sources
146+
### Export your annotations
152147

153-
To create a docker image of the application, build the application (step 1.b) and then run:
154-
```bash
155-
# You can change `pixano` by your choosen image name
156-
sudo docker build -t pixano/pixano-app:my-tag .
157-
# You can use the local Dockerfile if the build folder already exists
158-
sudo docker build -t pixano/pixano-app:my-tag -f Dockerfile-local .
159-
```
148+
Get your annotations and use them for any external application easily:
149+
150+
- as an admin, go to the tasks tab
151+
- press the "EXPORT TO FILES" button
152+
- you will find the exported annotations in the root of your workspace (find more information on annotation format [bellow](#importexport-annotation-format))
153+
154+
### Standalone vs distributed usage
155+
156+
Pixano-app can be used standalone on a single machine. In this case, the "admin" can also directly annotate and validate his datasets. See our [admin's guide](./admin-guide.md) for more details.
157+
158+
Pixano-app is also developed to enable a distributed work:
159+
160+
- install Pixano-app on a server and open its ip and port to your annotators inside your network
161+
- define your datasets, tasks and users (See [admin's guide](./admin-guide.md)). The tasks will be automatically distributed between the annotators.
162+
- each annotator can start working immediately from his computer without installing anything by connecting to _http://xxx.xxx.x.xx:3000_
160163

161-
## 3. Import existing annotations / predictions
162164

163-
Create an `annotation` folder as such:
165+
## 3. Advanced usage
166+
167+
### Import predictions
168+
169+
If you want to analyze predictions from your last detector or use these predictions as a pre-annotation, you can import these predictions as existing annotations by using our [annotation format](#importexport-annotation-format).
170+
171+
### Import/Export annotation format
172+
164173
```
165174
data-test
166175
@@ -174,4 +183,45 @@ data-test
174183
│ xxx.json
175184
└─── yyy.json
176185
```
177-
The `task1.json` file contains global task settings (task type, task categories, image folder, etc) and its correspoding `task1` folder contains an annotation file for each image. To prepare those files check the [import documentation](documentation/import-annotations.md).
186+
The `task1.json` file contains global task settings (task type, task categories, image folder, etc) and its corresponding `task1` folder contains an annotation file for each image. To prepare those files check the [import documentation](documentation/import-annotations.md).
187+
188+
### Build docker from sources
189+
190+
To create a docker image of the application, build the application (step 1.b) and then run:
191+
```bash
192+
# You can change `pixano` by your choosen image name
193+
sudo docker build -t pixano/pixano-app:my-tag .
194+
# You can use the local Dockerfile if the build folder already exists
195+
sudo docker build -t pixano/pixano-app:my-tag -f Dockerfile-local .
196+
```
197+
198+
199+
## 4. Contributing
200+
201+
If you tested Pixano and identified some issues or think some useful features are missing, please open an [issue](https://github.com/pixano/pixano-app/issues).
202+
203+
If you want to edit the application to your liking, fork this repository!
204+
205+
If you want to contribute more actively to the project, feel free to write your patches or new features and make a pull request!
206+
207+
### Pixano architecture: Pixano-app and Pixano-elements
208+
209+
![pixano.gif](documentation/Pixano-app_elements_det.png)
210+
211+
**Pixano-app** is a monorepo built on top of web components dedicated to annotation (developed in a separate repo: [pixano-elements](https://github.com/pixano/pixano-elements)):
212+
213+
- the backend manages the data (datasets to be annotated), the tasks (tasks to be performed by annotators) and the users (annotators, validators, admin)
214+
- the frontend implements the web views and calls the elements through plugins
215+
- backend and frontend communicate via a REST api
216+
217+
[**Pixano-elements**](https://github.com/pixano/pixano-elements) provides a wide set of smart and re-usable web components to build highly customizable image and video annotation tools: 2D and 3D bounding boxes, polygons, segmentation masks, customizable labels, label temporal propagation, etc. **Pixano-app** relies on these web components.
218+
219+
### Some documentation to get started
220+
- General documentation:
221+
- To get familiar with how the app is built from Web Components, read the [LitElement](https://lit-element.polymer-project.org/) documentation.
222+
- To get familiar with how the data is managed in the client, read the [redux](https://redux.js.org/introduction/getting-started) documentation.
223+
- Pixano's developers documentation
224+
- To better understand the Pixano server API, read its [documentation](documentation/rest-api.md)
225+
- To get familiar with Pixano's elements, take a look at its [dedicated repository](https://github.com/pixano/pixano-elements) and [modules documentation](https://pixano.github.io/docs/)
226+
227+

0 commit comments

Comments
 (0)