Skip to content

polofgrs/Computer-Vision-Emergency-Response-Toolkit

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Where is the Missing Person Computer Vision Contest

Please visit the contest website for more information.

Introduction

I basically first thought that C# code from the initial repository was not a great idea, for the following reasons :

  • Not really user-friendly,
  • Limited only to Windows Platforms,
  • Python packages and .NET framework need to be installed (almost) manually.

(Also, I'm very bad at C# coding...)
That is why I decided to take an other direction :

My idea

I am IN LOVE with a particular HTML / CSS / Javascript (Typescript) framework, Angular, for the following reasons :

  • Web-based frameworks are extremely user-friendly,
  • NPM is full of AMAZING copyright-free libraries,
  • Electron enables you to compile ANY Angular project into desktop apps for all Windows, Mac and Linux platforms with Electron-builder, (just like Ionic for mobile app versions),
  • Typescript as a GREAT web-based language that enables you to interface your app with any running server (see below).

Software architecture

Right now :

I decided to use the following architecture for my software :

                  SINGLE executable file
+------------------------------------------------------+
|              +-------------------------+             |
|              |        FRONT-END        |             |
|              |       Angular app       |             |
|              |        (Electron)       |             |
|              +-------------------------+             |
|              |      User Interface     |             |
|              | +---------------------+ |             |
|              | |Category 1|Category 2| |             |
|              | |          |          | |             |
|              | |          |   HTML   | |             |
|              | |   JIMP   |  canvas  | |             |
|              | |          |processing| |             |
|              | |          |          | |             |
|              | +---------------------+ |             |
|              +-------------------------+             |
|              |        Category 3       |             |
|              |                         |             |
|              |     HTTP Connexion      |==========++ |
|              +-------+--------+--------+          || |
|                      |        ^                   || |
+----------------------|--------|-------------------||-+
|  Processing request: |        | Algorithm results:|| |
|  * source image,     |        | * result image,   || |
|  * algorithm,        |        | * time,           || |
|  * parameters        |        | * percentage      || |
+----------------------|--------|-------------------||-+
|                      v        |                   || |
|               +------+--------+-------+           || |
|               |        BACK-END       |<==========++ |
|               |     Python server     |   launched   |
|               |     HTTP connexion    |   through    |
|               +-----------------------+  subprocess  |
|               |Algorithm 1|Algorithm 2|              |
|               +-----------------------+              |
|               |Algorithm 3|Algorithm 4|              |
|               +-----------------------+              |
+------------------------------------------------------+
  • Front-end : Angular App (compiled into a single executable using Electron & Electron-builder),
  • Back-end : Python server (compiled into a single executable using PyInstaller).

NO FRAMEWORK INSTALLATION IS NECESSARY !
THE WHOLE APP RESIDES IN A SINGLE EXECUTABLE FILE !

Indeed, PyInstaller compiles the server into a single executable file (platform-specific), then that executable is compiled into the Electron app with the ExtraResources directory.

That will enable me to reuse all of the original CVERT Python algorithms, but also simplify the process of adding a new algorithm by simply adding the Python file, and linking it to the front end. The rest will be handled during compilation.

This way, the final user doesn't have to install ANYTHING, just launch the executable file. (He can also install the software just like any other software, through an installer, then find it later on, on his OS).

Used libraries and packages

Front-end:
Node & npm, with the following dev libraries:

And the following prod libraries:

You can find all of the npm libraries in package.json.

Back-end:
Python 3.6 running a web server to handle image processing requests.
It uses the following dev libraries:

And the following prod libraries:

For developers :

NOTE: I am a Linux user. You might need to look around for equivalent Windows or Mac commands and installation processes...

Front-end

Install NodeJS (that will automatically install npm), and Angular. Then:

git clone https://github.com/polofgrs/Computer-Vision-Emergency-Response-Toolkit.git
cd CVERT-ng
npm i
npm run electron

Then, if you want to compile the Electron project into an executable file on your OS :

./node_modules/.bin/electron-builder

Back-end

Install Python 3.6, then the packages in requirements.txt with pip3, then run the server:

sudo apt-get install pyhton3-pip
cd python-server
pip3 install -r requirements.txt
python3 server.py

And to compile it :

pyinstaller server.spec

Additional notes for developers

  • NOTE 1: You HAVE to run npm run electron before running electron-builder, otherwise you will not have the updated files in /dist.

  • NOTE 2: In case you want to compile the electron-builder app, you HAVE to have the compiled executable server files in /python-server/dist/ (by running PyInstaller) for the OS you are developing on/for.

  • NOTE 3: In case you are developing a Python function and would like to try it out without using npm run electron for the front-end, you can still launch the front-end compiled app, and set up the server to communicate with your local python development server on an other port (bottom left panel). The other server (default port 5000) will still be running, but should not cause any trouble. (just make sure to change your server port in server.py, and to launch it manually).

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 47.4%
  • Python 35.4%
  • HTML 11.7%
  • CSS 4.3%
  • JavaScript 1.2%