Projet M2 MIAGE

Auteurs

Valentin Bouquet - https://github.com/vbouquet

Rémy Pocquerusse - https://github.com/Remypoc

Oussemo Oulhaci - https://github.com/ooussem

Technologies

• Npm: Javascript package manager.

• Webpack: Javascript module bundler.

• Babel: Transpiling code for new languages features.

• React: MVC Framework for dynamic statefull web pages.

• Redux: State container for Javascript apps.

• Express: Basic nodejs server (for front-end testing).

• Django-rest: Framework for building web API.

• OpenCV: Computer vision and machine learning library.

• Keras: High-level neural networks API written in Python.

• Tenserflow: Open source library specialized in machine learning.

Prérequis

• Git, gestionnaire de version - Télécharger git
• Virtualbox, outil de virtualisation - Télécharger Virtualbox
• Vagrant, gestionnaire de machine virtuelle - Télécharger vagrant

Installation

Lancer un terminal en mode administrateur sous windows (pour éviter les problèmes de symlink)

cd ~/{$project}
vagrant up
vagrant ssh

cd $PROJECT_DIR
sudo mount --bind $HOME_DIR/vagrant_node_modules $PROJECT_DIR/node_modules

# Lancez le serveur sur localhost:8080
node src/server/express/main.js &

# Lancez le serveur REST
python3.5 $DJANGO_DIR/manage.py runserver 0.0.0.0:8000 &

#! Attention: Après une analyse il faut supprimer les fichiers vidéos (qui peuvent être volumineux)
#! dans le dossier $DJANGO_DIR/media
rm -r $DJANGO_DIR/media/*

Developpement

• 

CLI

Vagrant

# Démarrrer la VM
vagrant up

# Eteindre la VM
vagrant halt

# Supprimer la VM
vagrant destroy

# Se connecter en ssh à la VM
vagrant ssh

Front-end

# Lancer webpack avec la configuration pour produire le bundle.js (regroupement des dépendances javascript)

# Option 1
./node_modules/.bin/webpack -d --config webpack-config.js

# Option 2
npm run build

# Option 3, depuis n'importe quel dossier
npm run --prefix /vagrant build

# Lancer webpack pour automatiser la génération à chaque modification
# Attention: problème de synchronisation en dehors de la machine virtuelle

# Option 1
./node_modules/.bin/webpack -d --config webpack-config.js --watch

# Option 2
npm run watch

Server REST

# Lancer le serveur Django depuis l'host
vagrant ssh -c "/usr/bin/python3.5 -u $DJANGO_DIR/manage.py runserver 0.0.0.0:8000"

# Lancer le serveur Django depuis la machine virtuelle
vagrant ssh
python3.5 $DJANGO_DIR/manage.py runserver 0.0.0.0:8000

# Lancer les migrations depuis l'host
vagrant ssh -c "/usr/bin/python3.5 -u $DJANGO_DIR/manage.py makemigrations"
vagrant ssh -c "/usr/bin/python3.5 -u $DJANGO_DIR/manage.py migrate"

# Lancer les migrations depuis la machine virtuelle
vagrant ssh
python3.5 $DJANGO_DIR/manage.py makemigrations
python3.5 $DJANGO_DIR/manager.py migrate

Ressources

• Style de code et conventions pour react et javascript

• Style de code et conventions pep8 pour python

• Opencv - Image processing with python API

• Tutoriel pour utiliser react avec npm, babel et webpack

• Etat des lieux des différentes technologies javascript et de leur utilité

• Bibliothèque recharts pour afficher des graphiques avec React et D3JS

• React props versus state

• Comment accéder à la vidéo et à l'audio d'un ordinateur depuis le navigateur

• Comment gérer le flux video/audio, gérer les formats en enregistrer

• Installation de la librairie OpenCV sur Ubuntu 16.04

• Reconnaissance faciale en python avec la librairie OpenCV

• Utilisation de la librairie TensorFlow pour le ré entrainement et de la classification des images

• Apprentissage des réseaux de neurones et d’autres technique de machine learning

• Classification des émotions

• Documentation sur les API Keras

Anciennes ressources

• Tutorial for using react with D3js (fork adapté pour la version 4 de D3JS)

• Alternative à recharts, plus dynamique