🧑🏻💻 Comment j'ai hacké des panneaux publicitaires ? 🖼️
Vincent Ogloblinsky - @vogloblinsky
Vincent Ogloblinsky
Compodoc maintainer
Web software architect
Indie hacker on side-projects
Agenda
1.
Le problème
2.
Trouver les 4 coins
3.
Le temps réel
4.
La précision
5.
Le rendu et l'art
6.
Développer avec une IA
7.
Ce que j'en retiens
Le problème
Le but : poser une œuvre à la place de la pub
Il faut savoir exactement où est la surface d'affichage, au pixel près.
De face : un rectangle
De biais : un quadrilatère
Dans les deux cas : 4 côtés, 4 coins.
Et vous, vous chercheriez quoi dans l'image ?
- un rectangle englobant, « comme YOLO »
- les pixels du panneau
- les 4 bords
- les 4 coins
Toutes ces idées, je les ai testées
Le fil rouge
1. Trouver les coinsCNN heatmaps
→
2. Les suivreflot optique
→
3. Les affineredge-fitting
→
4. Homographiewarp WebGL
→
5. Une œuvreWikidata
- Navigateur mobile : ONNX dans un worker, OpenCV.js, WebGL
- De vrais téléphones : iPhone 13 mini, Galaxy A52, TCL 403
- Une surface plate : 4 coins suffisent pour tout reconstruire
Déjà fait ?
No Ad (2011) : œuvres pré-assignées à des panneaux connus.
Ici, n'importe quel panneau.
Trouver
les 4 coins
Ce qui existe : des CNN… pour une autre question
1. Trouver les coinsCNN heatmaps
→
2. Les suivreflot optique
→
3. Les affineredge-fitting
→
4. Homographiewarp WebGL
→
5. Une œuvreWikidata
- CNN entraînés sur des millions d'images : ImageNet, COCO, Open Images
- Un détecteur (YOLO) répond par une bbox : un rectangle droit, jamais en perspective
- Aucun dataset de panneaux pub annotés par leurs 4 coins
Donc : fabriquer mon propre dataset
~900panneaux annotés à la main
4clics par image, avec une loupe
Photos du web, d'Open Images, et de terrain à Rennes.
+ des images sans panneau, pour apprendre à ne rien voir
Deux mots : backbone et tête
image
→
BACKBONE
regarde et décrit
gros · pré-entraîné sur ImageNet
→
regarde et décrit
gros · pré-entraîné sur ImageNet
TÊTE
répond dans un format
petite · entraînée sur mes panneaux
→
répond dans un format
petite · entraînée sur mes panneaux
réponse
Analogie · le backbone est un expert à l'œil exercé ; la tête, le formulaire qu'on lui fait remplir.
Vos 4 réponses ? Même œil, formulaires différents.
Vos réponses, mesurées
| Votre réponse | Ce que j'ai entraîné | Erreur / coin |
|---|---|---|
| « Un rectangle, comme YOLO » | bbox, puis les coins dedans | 12,5 px |
| « Les pixels du panneau » | segmentation, puis coins du masque | 12,0 px |
| « Les 4 coins » | régression directe : 8 nombres | 11,7 px |
| « Les 4 bords » | une carte par côté, coins aux croisements | 7,7 px |
| « Les 4 coins » | une carte par coin (heatmaps) | 7,2 px |
Même jeu de test fixe de 119 images, même backbone.
Même cible, 11,7 px contre 7,2 px
Régression : une seule réponse
Heatmap : une carte par coin
Analogie · « Où sont tes clés ? » Cuisine ou entrée… Une seule réponse : « dans le couloir ». Une carte : on entoure les deux, on va voir la plus probable.
À quoi ressemblent ces cartes
L'image, puis une carte par coin : haut-gauche, haut-droit, bas-droit, bas-gauche.
Et l'œil ?
Même formulaire (heatmaps), une dizaine de backbones testés.
5,1 pxEfficientNet-Lite0, le plus précis
5,7 pxMnasNet-A1 : retenu, meilleur compromis sur téléphone
11,1 pxMobileNetV3-Small : aussi mauvais que la régression
Le plus gros gain est venu du formulaire (−4,5 px), puis de l'expert (−1,5 px).
Le temps réel
De la photo à la vidéo
1. Trouver les coinsCNN heatmaps
→
2. Les suivreflot optique
→
3. Les affineredge-fitting
→
4. Homographiewarp WebGL
→
5. Une œuvreWikidata
Jusqu'ici : des photos. Maintenant : une vidéo, à ~25 images par seconde.
Budget par frame
40 ms
CNN sur téléphone
~200 ms · 5× trop lent
Un détective et un suiveur
CNNflotflotflotflotflotflotflotflotflot
CNNflotflotflotflotflotflotflotflotflot
CNN : 1 frame sur 10 flot optique + homographie : les autres
Entre deux images, un panneau plat bouge un peu, et de façon prévisible.
Analogie · on cherche un ami une fois dans la foule, puis on le suit des yeux.
Le « pipeline hybride » : un réseau de neurones + de la vision classique sans apprentissage.
Le moment « ah ! »
Le pipeline hybride, censé être plus léger, était 7× plus lent sur iPhone que le CNN seul.
- L'indice : initialiser et suivre coûtaient pareil
- Le goulot : pas l'algorithme de suivi, mais la préparation de l'image, en niveaux de gris sur la frame entière
- Le correctif : ne traiter que la zone du panneau
758 → 40 mstemps du suivi par frame
Profiler avant de juger une architecture.
Et encore…
- Gels sur téléphone lent (~430 ms) → ré-ancrage asynchrone, recalé par le flot
- Tremblements → une moyenne glissante (EMA) : −41 à −47 % de jitter, gratuit
- Limite : panneau déroulant, le flot suit l'affiche… pas le panneau (jusqu'à 150 px)
La précision
Pourquoi maintenant ?
1. Trouver les coinsCNN heatmaps
→
2. Les suivreflot optique
→
3. Les affineredge-fitting
→
4. Homographiewarp WebGL
→
5. Une œuvreWikidata
Dans la rue : l'œuvre déborde du cadre, un liseré de pub dépasse.
7 pxdans la vignette du modèle
~15 pxsur la vraie vidéo, à l'écran
24 pxde vidéo par case de heatmap
Analogie · un point juste sur une carte au 1/100 000 devient une erreur de plusieurs maisons sur le plan du quartier.
Fausse bonne idée : « augmente la résolution »
Au-delà de 448 px, des coins partent sur un mât, un kiosque.
Les 4 cartes deviennent identiques : le backbone a appris à voir à une certaine échelle.
Un premier correctif « marchait » sur 3 exemples… et échouait sur les 119.
Ce qui marche : l'edge-fitting
- Partir du quadrilatère du CNN
- 16 points par côté, on cherche de part et d'autre (±18 px)
- Là où la luminosité change le plus : le vrai bord, en pleine résolution
- Une droite par côté ; coins = croisements
Résultat
15,0 → 6,7 pxerreur moyenne, 84 frames de vraies vidéos
Coût : ~90 ms sur iPhone… mais seulement 1 frame sur 10. Fluidité quasi intacte.
Analogie · le CNN montre du doigt le coin du tableau, de loin. L'edge-fitting s'approche et pose une règle le long de chaque bord.
Le CNN dit « à peu près où », la géométrie dit « exactement où ».
Puis la rue complique tout
Cadre noir épais
Deux bords candidats, la droite sautait de l'un à l'autre.
→ ne garder que les bords qui s'éclaircissent vers l'intérieur.
Affiche sombre
Noir sur noir : plus de bord, la droite s'accroche à l'affiche.
→ grande correction acceptée seulement si le contraste confirme un vrai bord.
Le rendu
et l'art
4 coins → une œuvre
1. Trouver les coinsCNN heatmaps
→
2. Les suivreflot optique
→
3. Les affineredge-fitting
→
4. Homographiewarp WebGL
→
5. Une œuvreWikidata
Homographie : 4 coins source → 4 coins panneau, un warp WebGL
- Wikidata (SPARQL) : peintures du domaine public, musées français
- Choix par ratio d'aspect du panneau
- Seulement 25 à 32 % des peintures ont le bon ratio
Développer
avec une IA
10× moins de temps qu'il y a 1 ou 2 ans
Ce qui a changé : pas la quantité de code, la vitesse d'itération.
L'IA
- l'outillage : annotation, banc de test sur téléphone, évaluation
- l'exploration large : 5 têtes, ~10 backbones
- Python → JS, mêmes paramètres
- l'analyse des résultats, l'expérience suivante
Moi
- le terrain : filmer, tester dans la rue
- l'annotation
- « il y a un truc qui cloche »
- les arbitrages
Le nouveau problème : piloter
5 hypothèses et 3 expériences par jour : qu'est-ce qui est prouvé ? écarté ? pourquoi ?
knowledge/ : un mini graphe de connaissances en Markdown, dans le repo.
terrain
(moi)
→
(moi)
IA : analyse
+ hypothèse
→
+ hypothèse
expérience
mesurée
→
mesurée
IA : verdict
→
décision
(moi)
(moi)
41affirmations
35expériences
17décisions, en 2 semaines
Deux règles contre l'enthousiasme
« L'auteur n'est pas une preuve. »
Une hypothèse reste une opinion tant qu'aucune expérience ne l'a testée.
On ne supprime pas une hypothèse réfutée.
Elle explique pourquoi on n'a pas pris ce chemin.
Ce que j'en retiens
- Le plaisir de donner vie à une idée folle
celle qu'on ne lance jamais : vision, deep learning, mobile, web, données d'art - On va encore plus vite qu'avant
investiguer → prototyper → déployer → mesurer → améliorer → livrer - Mais attention
au « yes man » de l'IA, aux super-pouvoirs qu'on croit avoir…
les utilisateurs finaux auront le dernier mot
Thanks for your attention !
Any questions ?
Slides : https://bit.ly/4svoJNz
Crédit photos - Unsplash.com
🧑🏻💻 Comment j'ai hacké des panneaux publicitaires ? 🖼️
By Vincent Ogloblinsky
🧑🏻💻 Comment j'ai hacké des panneaux publicitaires ? 🖼️
Remplacer en direct toute la pollution visuelle des panneaux publicitaires par un chef-d'œuvre du domaine public, directement depuis votre téléphone, c'est pas cool ? Moi je trouvais l'idée fun, alors j'ai récemment fabriqué un pipeline de computer vision capable de repérer un panneau dans une vidéo, d'en suivre les 4 coins en temps réel, et d'y projeter une œuvre d'art, le tout dans un simple navigateur web, sur votre téléphone. Venez découvrir la sorcellerie derrière ce joli hack, entre réseau de neurones à convolution (CNN), suivi optique, homographie et API d'œuvres d'art, je vous raconte les galères, les fausses bonnes idées et ce que j'en ai appris pour faire du temps réel sur mobile sans un datacenter derrière.
