fr en it fr fr en it fr en fr fr id es en fr en fr fr fr fr en fr fr fr es es en fr fr fr fr de fr fr fr fr fr fr fr fr fr fr fr fr fr fr fr fr fr fr en fr fr it fr fr fr en en fr fr fr fr en en ru fr fr en fr fr fr fr fr en fr fr fr fr en en fr fr fr fr fr es es en fr en fr fr en fr fr en fr fr fr fr fr fr fr en en en en en fr fr fr fr fr fr fr fr fr fr fr fr fr en it fr fr fr fr fr fr fr en it fr fr fr fr fr en it fr fr fr fr en it fr fr fr pt
La technologie et la recherche sont au coeur des projets Pilot® développés à l'interne chez Locomotive. Au printemps 2019, on a entamé les discussions sur un nouveau concept à développer pour succéder à Moment Zero, un projet d'expérimentation dans le cadre de Pilot® utilisant des données ouvertes et la réalité augmentée.
Cette fois-ci, on s’organise différemment. On pose d’abord notre base de concept et une première équipe est sélectionnée pour délimiter le périmètre des premières fonctionnalités à tester. Comme le but de Pilot® est d'apprendre et repousser nos limites techniques, on débute par un prototype (MVP) de chaque fonctionnalité, pour ensuite travailler sur le user-flow, l’expérience utilisateur, le scénario et la direction artistique.
Analyse d’image et machine learning
La première fonctionnalité que l'on voulait tester concernait l’analyse d’image. L’idée d'un produit final sera de demander à l’utilisateur de prendre en photo un objet donné (par exemple: une tasse) et de valider l'objet en question.
Le premier prototype est simple. Il s'agit d'une interface de base demandant à l'utilisateur de prendre une photo d'un objet. Le résultat retourne tous les mots-clés que l'API d'analyse d’image a identifié par pourcentage de probabilité.
On a d’abord testé une solution avec Tensorflow.js. Le résultat était satisfaisant mais l’essai en ligne de Google Vision API nous donnait davantage d’informations. Cette première méthode est toutefois plus pratique pour détecter des objets en temps réel, avec une webcam par exemple.
On décide donc de commencer à tester Google Vision API et d'utiliser Node.js comme serveur pour communiquer.
Initialisation de Google Vision API
Pour l’étape 5, vous pouvez récupérer le fichier json et le mettre à la racine de votre projet. Dans votre terminal, il faudra exporter la variable d’environnement.
Mise en place du serveur Nodejs avec express et socket.io
Pour faciliter la gestion du serveur node, on utilise nodemon. Il faudra aussi installer expressjs et socketIO pour créer une communication entre le côté client (l'application) et le serveur node qui communiquera avec la Google Vision API.
npm install nodemon -g npm install express --save npm install socket.io --save
À la racine du projet, vous pouvez créer un fichier index.js qui sera le fichier exécuté pour le lancement du serveur nodejs.
// Express server setup const express = require('express') var app = express(); var http = require('http').createServer(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); http.listen(2222, function(){ console.log('listening on *:2222'); }); io.on('connection', function (socket) { console.log(‘User connected’); });
On peut maintenant lancer le serveur dans le terminal via localhost:2222 et la console devrait vous indiquer qu'un utilisateur est connecté.
Pour la partie client, nous utilisons locomotive-boilerplate.
Dans le fichier index.html, on peut ajouter notre markup et le lier à notre module. Ensuite, on pourra créer notre fichier Detection.js dans assets/scripts/modules/ puis l'ajouter à la liste de modules dans modules.js
export {default as Detection} from './modules/Detection';
Pour la gestion du fichier et du champs, on utilise filepond. Cette librairie flexible permet de gérer des uploads temporaires, ainsi que l’upload de plusieurs fichiers à la suite. Elle propose des plugins utiles pour crop/resize une image, pour corriger l’orientation lors d’une prise de photo depuis un smartphone, ou encore valider et gérer les différents types et tailles de fichiers avant le chargement sur le serveur. Filepond nous sera aussi utile dans la projection future du projet.
Pour les plugins on aura besoin du plugin de preview et le plugin d’orientation.
Côté client il faudra installer les packages suivant, puis initialiser filepond dans notre fichier Detection.js
npm install filepond --save npm install filepond-plugin-image-preview --save npm install filepond-plugin-image-exif-orientation --save
import { module } from 'modujs'; import * as FilePond from 'filepond'; import FilePondPluginImagePreview from 'filepond-plugin-image-preview'; import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'; export default class extends module { constructor(m) { super(m); } init() { this.$input = this.$('input')[0]; this.socket = io(); // Add plugins to Filepond FilePond.registerPlugin(FilePondPluginImagePreview); FilePond.registerPlugin(FilePondPluginImageExifOrientation); const pond = FilePond.create(this.$input,{ multiple: false, name: 'filepond', allowImageExifOrientation: true, labelIdle: 'Take a picture' }); } }
Maintenant, on va ajouter Socket.IO côté client. Il est possible de placer le fichier source dans notre dossier assets/scripts/vendors ou l'installer avec un gestionnaire de package.
À la fin de notre fonction init() nous allons créer notre socket.
Récupération et envoi de l'image à Google Vision API
Côté serveur on peut maintenant installer le package de Google Vision API.
Ensuite, dans le fichier serveur index.js on peut créer une fonction fetch pour l'appel à Google Vision API qui prendra en paramètre l’url d’une image. Puis on va simplement suivre les informations de la documentation.
On va aussi créer un écouteur de changement d’image pour socket.IO, qui va récupérer l’url d’une image et l’envoyer. À la fin de cette fonction fetch, on enverra à notre module un tableau des labels que la détection nous aura retourné grâce à un .emit() sur le socket.
npm install --save @google-cloud/vision
io.on('connection', function(socket){ async function fetch(imageUrl) { // Imports the Google Cloud client library const vision = require('@google-cloud/vision'); // Creates a client const client = new vision.ImageAnnotatorClient(); // Performs label detection on the image file const [result] = await client.labelDetection({ "image" : { "content" : imageUrl } }); const labels = result.labelAnnotations; // Send all labels to my Detection module socket.emit('updatePredictions', labels); } socket.on('updateImage', function(imageUrl){ fetch(imageUrl).catch(console.error); }); });
Note: l’envoi d’un base64 à Google Vision API fonctionne, mais il faudra retirer le préfixe et l’envoyer comme un objet “image” comme ci-dessus.
Récupération de la liste des labels côté client
De retour dans le module Detection.js, il est maintenant temps de gérer l’envoi de l’url de notre image à notre serveur node, et la réception de la liste des labels.
À la fin de notre fonction init() on va donc avoir: l’écoute de l’ajout d’un fichier à filepond avec un FileReader pour avoir un base64 de notre image, qui sera notre url envoyé à notre serveur.
this.reader = new FileReader(); pond.on('addfile',(error, file) => { // get a base64 and remove the prefix this.reader.onload = (e) => { this.socket.emit('updateImage', e.target.result.split(',')[1]); } //read file to get a base64 this.reader.readAsDataURL(file.source); }); this.socket.on('updatePredictions',(labels) => { // Enjoy console.log(labels) })
Voilà, le prototype fonctionne et notre première capsule pour notre second projet Pilot® est prête. On réfléchira sans doute à gérer l’API de Google Vision avec PHP grâce à notre CMS Charcoal pour le projet final, mais pour l'instant, on passe à la prochaine étape avec l'assurance que Google Vision pourra répondre à nos besoins pour ce projet.
Réalité augmentée sur le web, wut?
Analyse d'image et machine learning avec Google Vision API 05.02.2020 Locomotive Scroll, le bon outil pour mon projet? 12.01.2022 C'est hot, 2ieme édition 01.10.2021 500 jours plus tard, My Better Normal 24.09.2021 6 piliers de la culture de travail chez Locomotive 12.08.2021 Pourquoi nous n’utilisons pas de frameworks front-end à Locomotive? 22.07.2021 7 façons d'améliorer la communication avec le client 08.07.2021 C'est hot, 1re édition 17.06.2021 3 choses que votre concepteur UX peut apprendre de votre psy, style Locomotive 10.06.2021 Trois fois de suite, Locomotive est couronnée l'agence de l'année 23.02.2021 Locomotive prend d'assaut le stade IGA et remporte les honneurs au concours Idéa 24.09.2020 La révolution de l'espace de travail tel que nous le connaissons 03.09.2020 Puis-je te dire bravo? 15.04.2020 Locomotive couronnée Agence de l'année pour une deuxième année consécutive 21.02.2020 Réalité augmentée sur le web, wut? 15.01.2020 L’évolution du scroll chez Locomotive 09.12.2019 Revivez le Parté of the Year de Locomotive 03.06.2019 Les p'tits déjs Loco 11.05.2019 La zoothérapie au bureau 18.04.2019 Locomotive remporte le prix Agence de l'année 25.02.2019 Journée tempête et ski de fond 12.02.2019 Locomotive en mode avion 02.02.2019 Comment bâtir une équipe de rêve et la garder? 15.11.2018 Un bureau haut en couleurs saisonnières 18.10.2018 Les vendredis sous le soleil d'été 24.08.2018 Une équipe de rêve pour Locomotive 04.06.2018
Commencer un projet Commencer un projet Rejoindre l’équipe Rejoindre l’équipe Demander un stage Demander un stage Laisser un mot Laisser un mot À propos de Locomotive À propos de Locomotive
Site web complet Site web complet UX & design web UX & design web Image de marque Image de marque Image de marque & web Image de marque & web Campagne digitale Campagne digitale
50-75K50-75K 75-100K75-100K 100-150K100-150K 150K +150K + 1 million de dollars1 million de dollars
25-50K25-50K 50-75K50-75K 75-100K75-100K 100K +100K + 1 million de dollars1 million de dollars
15-30K15-30K 30-50K30-50K 50K +50K + 1 million de dollars1 million de dollars
50-75K50-75K 75-100K75-100K 100K +100K + 1 million de dollars1 million de dollars
30-50K30-50K 50-75K50-75K 75-100K75-100K 100K +100K + 1 million de dollars1 million de dollars
Stratège numérique Stratège numérique Gestionnaire de projets numériques Gestionnaire de projets numériques Stratège UX Stratège UX Directeur(trice) artistique Directeur(trice) artistique Développeur créatif front-end Développeur créatif front-end
Site web de prix Site web de prix Un projet à nous Un projet à nous Un article Un article Un ami Un ami Mot sur la rue Mot sur la rue
Choisir un ou plusieurs fichiers * Choisir un fichier
Vous pouvez téléverser jusqu'à 3 fichiers (ZIP, PDF, DOC ou DOCX). Chaque fichier doit peser moins de 12 Mo.
CV * Choisir un fichier
Stratège numérique Gestionnaire de projets numériques Stratège UX Directeur(trice) artistique Développeur créatif front-end