🧑🏻💻 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
- 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
- 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
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
regarde et décrit
gros · pré-entraîné sur ImageNet
répond dans un format
petite · entraînée sur mes panneaux
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.
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
Jusqu'ici : des photos. Maintenant : une vidéo, à ~25 images par seconde.
Un détective et un suiveur
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
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 ?
Dans la rue : l'œuvre déborde du cadre, un liseré de pub dépasse.
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
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
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.
(moi)
+ hypothèse
mesurée
(moi)
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