diff options
Diffstat (limited to 'articles/les-trains-et-la-publicité.md')
| -rw-r--r-- | articles/les-trains-et-la-publicité.md | 431 |
1 files changed, 431 insertions, 0 deletions
diff --git a/articles/les-trains-et-la-publicité.md b/articles/les-trains-et-la-publicité.md new file mode 100644 index 0000000..6017588 --- /dev/null +++ b/articles/les-trains-et-la-publicité.md @@ -0,0 +1,431 @@ +--- + +pubDate = 2023-12-19 13:34:00Z +tags = ['train', 'publicité', 'IA'] + +[author] +name = "ache" +email = "ache@ache.one" + +[[alt_lang]] +lang = "en" +url = "/articles/rail-and-advertising" + +--- + +La publicité pour les trains +=========================== + + + +Parlons trains. Enfin pub. +Enfin ! Vous verrez bien ! +L'idée est d'analyser quelques publicités pour des trains à travers le monde. +Mais c'est surtout un prétexte pour vous présenter l'utilisation de technologies d'intelligence artificielle récentes. 🤖 + + +Sommaire +---------- + + +:::question +Pourquoi des pubs pour le train ? +::: + +Déjà pourquoi pas ? +Ensuite, parce que j'aime analyser la construction et la mise en scène des films. +Ici, on va prendre des publicités, car je ne vais pas analyser un film entier avant de vous parler d'IA. + + +## Une publicité japonaise + +Ce petit clip de 15s a été créé par le studio Ponoc. +Cette publicité est une commande de JR West, l'une des grosses compagnies ferroviaires japonaises. + +<video controls class="big" preload=none poster="res/JR_West-ads-Summer_Train_poster.png"> + <source src="res/JR_West-ads-Summer_Train.webm" type="video/webm" /> + <track kind="captions" srclang="jp" src="res/JR_West-ads-Summer_Train-ja.vtt" default label="日本語"/> + <track kind="subtitles" srclang="fr" src="res/JR_West-ads-Summer_Train-ai_fr.vtt" label="Français (IA)"/> + <track kind="subtitles" srclang="en" src="res/JR_West-ads-Summer_Train-ai_en.vtt" label="English (AI)"/> + <track kind="subtitles" srclang="fr" src="res/JR_West-ads-Summer_Train-gt_fr.vtt" label="Français"/> + <track kind="subtitles" srclang="en" src="res/JR_West-ads-Summer_Train-gt_en.vtt" label="English"/> +</video> + +Dans un style d'animation japonais, l'histoire nous dépeint une famille partant en vacances dans l'ouest du Japon. +L'accent est mis sur le jeune garçon qui est tout d'abord réticent puis qui progressivement s'épanouit avec sa famille. + +Sa réticence est en contraste avec l'excitation ambiante de la famille. +Il est silencieux et peu mobile alors que le reste de la famille bouge beaucoup et tout le monde parle en même temps. +Son changement d'avis sur ce voyage est traduit par son sourire qui passe d'une moue intense à des éclats de joie lorsqu'il découvre la mer. + +Le public visé est la famille en général, pas spécialement les enfants. +Ici la publicité est une mise en scène très habile des souvenirs de vacances et de la nostalgie. +On y voit de très nombreuses références à la réalité comme le Shinkansen série N700 ou la gare Shin-Ōsaka qui est tout à fait reconnaissable. +En particulier, on voit et entend une cigale japonaise, véritable symbole de l'été au Japon. + +Bref, publicité qui réussi à faire passer un message et parle à son public. + +En parlant de publicité qui parle à son public... +Voyons une publicité d'outre-Rhin. + + +## Der Volksgeist (L'esprit du peuple) + +Cette publicité, mini-film, a été commandée par la Deutsch Bahn[^db] et réalisée par [Pantera](https://bwgtbld.tv/pantera/). +Elle décrit de manière humoristique une jeune femme partant en voyage d'affaires et qui se fait _harceler_ par sa cliente. + +<video controls class="big" preload=none poster="res/DB-ad-The_client_poster.png"> + <source src="res/DB-ad-The_client.webm" type="video/webm"/> + <track kind="captions" srclang="de" src="res/DB-ad-The_client-de.vtt" default label="Deutsch"/> + <track kind="subtitles" srclang="fr" src="res/DB-ad-The_client-fr.vtt" label="Français"/> + <track kind="subtitles" srclang="en" src="res/DB-ad-The_client-en.vtt" label="English"/> +</video> + +[^db]: Que l'on pourrait traduit par « Réseau ferré allemand ». + +La publicité insiste sur **la tranquillité et le confort du voyage en train** en la mettant en contraste avec la vigilance et le stress inhérent à la conduite d'une voiture. + +L'humour est typiquement allemand et se base sur le comique de répétition du client insistant. +Les éléments clés de cet humour sont la répétition de la phrase « Frau Fischer » et la mise en scène du client qui essaye de joindre cette M<sup>me</sup> Fischer par des moyens toujours plus improbables les uns que les autres. + +Dans cette mise en scène absurde, le son joue un rôle aussi important que l'image. +Les effets sonores sont très bien sélectionnés et sont mis en exergue par l'utilisation d'une musique de fond style symphonie classique, tout en appuyant l'histoire. + +Dans une interprétation plus réaliste de l'histoire, M<sup>me</sup> Mueller (la cliente) n'apparait pas par magie dans la voiture de M<sup>me</sup> Fischer. +C'est en fait une personnification du stress de M<sup>me</sup> Fischer tout droit sortie de son imagination. +La disparition de ces hallucinations traduit ainsi la disparition du stress de M<sup>me</sup> Fischer, sereine, car elle a pris le train. + +Je vous épargne une description précise de chaque plan, mais chaque élément est sélectionné et peu de choses sont laissés au hasard. + +Sont visés par cette publicité les personnes effectuant des déplacements professionnels. +Une classe de personne assez réduite donc. +Il n'est pas question ici de faire l'ombre de manière générale à la voiture, cœur de l'industrie allemande. 🙄 +Le ou la réalisateur⋅trice Pantera a d'ailleurs ensuite réalisé plusieurs publicités pour la marque de voiture Mercedez Benz. + +Ses autres talentueuses réalisations sont disponibles sur le site [BWGTBLD](https://bwgtbld.tv/). + + +## À la française + +Ce mini-film réalisé pour le groupe français SNCF n'est pas vraiment une pub. +Le but n'est pas de vous vendre quelque chose, mais de travailler l'image de la marque et de promouvoir le nouveau slogan de la SNCF « Pour nous tous ». + +<video controls class="big" preload=none poster="res/SNCF-ad-Hexagonal_poster.png"> + <source src="res/SNCF-ad-Hexagonal.webm"/> + <track kind="captions" srclang="fr" src="res/SNCF-ad-Hexagonal-fr.vtt" default label="Français"/> + <track kind="subtitles" srclang="en" src="res/SNCF-ad-Hexagonal-en.vtt" label="English"/> +</video> + +La vidéo s'articule autour d'un texte en **slam**, chanté par [Gaël Faye](https://fr.wikipedia.org/wiki/Ga%C3%ABl_Faye), et illustrés par de nombreux extraits vidéos très courts et de provenances variées. + +Ce clip fait appel à de nombreux références culturelles françaises et a de nombreuses séquences promotionnelles précédentes, parfois très anciennes, de la SNCF. +Ces séquences, bien que faisant appel à la mémoire du public sont suffisamment peu marquantes pour qu'il soit difficile de se souvenir d'où elles proviennent précisément. +Le but étant de s'effacer fasse à l'élément clé de ce spot, la chanson. + +Rythmée par une quelques notes de piano[^claque], elle décrit la SNCF et ses valeurs. +On y trouve de nombreux jeux de mots et des figures de styles subtiles. +Notamment, la SNCF y décrit ses engagements et son caractère humaniste. + +[^claque]: Bien que simple, la musique n'est ici pas délaissée pour autant. +Le rythme est calqué et introduit par le bruit ferroviaire. +Chaque moment qui détonne est accentué par [le sonal signature de la SNCF](https://youtu.be/NA5MwhuHWLo?t=2) qui s'y prête étonnamment bien ! + +Tous les Français sont invités à aimer la SNCF dans cette vidéo fédératrice. 💕 +Paradoxalement, elle rassemble en insistant sur la diversité de la France et renoue ainsi avec un de ses engagements, **supporter la diversité**. + +Au fur et à mesure, la vidéo qui décrivait la SNCF décrie de plus en plus les Français même, principalement par l'utilisation du pronom impersonnel « on », ambigu depuis le début de la vidéo, qui peut désigner autant la SNCF que les Français. +Par cet amalgame, elle fait appel à la fierté patriotique des citoyens français. + +Le lien étant crée, c'est le moment idéal pour la SNCF d'aborder le sujet de ses défauts et de les partager avec son public, puisque ses défauts sont les défauts clichés des Français. +Ainsi par une certaine empathie on est invité à les excuser, mais pas seulement elle renforce surtout l'idée d'une entreprise française pour les Français, pour la France, « pour nous tous ». + +Cette dernière idée est particulièrement mise en avant avec la phrase choc finale « On est pas carré, on est hexagonal ». +Qui présente ainsi définitivement les faiblesses en qualités à travers un jeu de mot très français. + +:::attention +La SNCF insiste beaucoup sur son caractère humain[^handy] dans cette vidéo. Notamment en présentant des personnes handicapées dans son clip. + +Je note cependant que malgrès ses efforts et tout comme la DB, la SNCF a du chemin à parcourir au niveau de l'accessibilité.[^handy] +::: + +[^handy]: Par exemple, [le service Accès Plus](https://emeraude.my.site.com/aplus/s/demande-prestation?origin=PKhzh3NUh8) destiné a acompagné les voyageurs, bien que gratuit n'est disponible qu'en français. + Aussi, les OuiGo offrent, de manière générale, [un mauvais niveau d'accessibilité](https://www.sncf-voyageurs.com/fr/voyagez-avec-nous/preparez-votre-voyage/accessibilite/equipement-a-bord/). + + + + La volonté de la SNCF de s'améliorer semble lente mais réelle, ainsi le prochain [TGV M](https://fr.wikipedia.org/wiki/TGV_M) annonce être accessibile en complète autonomie. 👍 🚄 + Si le sujet vous intéresse, ARTE a réalisé un très bon documentaire sur [le militentisme et l'accessibilité](https://www.arte.tv/fr/videos/110252-001-A/arte-regards/) qui parle suscintement de l'accessibilité des trains. + + +## Résumé + +Cette étude des publicités montre que ces clips sont culturellement très riches. +On remarque que ces groupes n'hésitent pas à investir de l'argent pour se promouvoir, ou qu'en tout cas qu'ils ont de l'expérience dans leur communication. +Les références sont ancrées dans la culture du pays et je remarque que cela entre en contradiction avec les politiques modernes d'ouverture du marché ferroviaire à la concurrence, notamment étrangère. +On s'attendrait plus à une communication en anglais par exemple avec des références basées sur [la pop culture](https://fr.wikipedia.org/wiki/Culture_populaire). + +Pour finir, sur une note drôle, je vous présente cet ensemble de vidéos de prévention des accidents de la compagnie lettonne LDz. + +<video controls class="big" + preload=none + poster="res/LDz_ads_railway-safety_poster.png"> + <source src="res/LDz_ads_railway-safety.mp4" type="video/mp4; codecs=av01.1.31M.08,Opus; profiles=isom,av01,iso2,mp41" /> + <source src="res/LDz_ads_railway-safety.webm" type="video/webm" /> + <p>Ensemble de vidéos de la LDz métant en scène les personnages d'Avārijas Brigāde dans de le but de sensibilisé la population à la sureté ferroviaire.</p> +</video> + + +## Parlons tech + +Les sous-titres des vidéos ont été créer à partir d'outils basés sur [de grands modèles de langage](https://fr.wikipedia.org/wiki/Grand_mod%C3%A8le_de_langage) (LLM). +La vidéo de LDz a été agrandie et est bien plus agréable à regarder que [la version originale](https://youtu.be/f4HtbPt1DCk). + +Pour créer cet article, j'ai ainsi utilisé : + + - [yt-dlp](https://github.com/yt-dlp/yt-dlp), un logiciel libre permettant de télécharger des vidéos depuis de nombreux sites, pas seulement youtube. + - [Whisper](https://en.wikipedia.org/wiki/Whisper_(speech_recognition_system)): Un modèle d'apprentissage automatisé cette fois-ci dédié à la reconnaissance vocale (S2P pour _Speech to Text_) issue d'OpenAI. + - [Seamless](https://github.com/facebookresearch/seamless_communication): Un modèle d'apprentissage automatisé créé par Meta et dédié à la traduction multimodale (Texte <=> Texte / Audio <=> Texte / Audio <=> Audio). + - [Real-ESRGAN](https://github.com/xinntao/Real-ESRGAN): Un modèle dédié à l'amélioration des images. + - [ffmpeg](https://fr.wikipedia.org/wiki/FFmpeg): Le logiciel référence de manipulation des codecs audio. + +Je vais passer sur `yt-dlp` et sur `ffmpeg` et me concentrer sur les technologies d'intelligence artificielle. + + +### Whisper + +Ok, donc puisque les vidéos ne sont pas forcément dans une langue des lecteurs de ce blog, j'aurais aimé avoir des sous-titres aux vidéos. + +J'ai donc cherché à utiliser Whisper qui permet de faire de la reconnaissance vocale. +J'ai déjà les sous-titres de la vidéo en français, ça tombe bien, c'est une langue que je maîtrise, je vais pouvoir m'en servir pour vérifier la sortie de Whisper. + +J'ai créé un container et installer Whisper d'OpenAI directement. +La qualité des résultats est différente en fonction de la langue. + + +#### Japonais + +En japonais, je peux difficilement évaluer le résultat. +Il me semble cependant que celui-ci est difficilement compréhensible, les phrases sont peu liées entre elles, le sens général n'est pas claire. + +:::note +J'ai également utilisé [insanely-fast-whisper](https://github.com/Vaibhavs10/insanely-fast-whisper) pour retranscrire le japonais. + +Je dois admettre que les résultats sont meilleurs et bien plus rapides qu'avec la version d'OpenAI même si ceux-ci ne sont pas au niveau du traitement des langues latines. +::: + + +#### L'allemand et le français + +Pour l'allemand c'est globalement correct[^v3]. +La vidéo comporte cependant des phrases coupées qui sont mal retranscrites, aussi deux courtes phrases à la fin sont mal retranscrites. +En utilisant le modèle de taille moyen, les résultats sont meilleurs. + +[^v3]: Attention à bien utiliser la dernière version. Auquel cas, le support du français et de l'allemand est médiocre. +En effet, avant la version 3, « Apollinaire » devenait systématiquement « Napoléon », ce qui est tout de suite, beaucoup plus Rome antique que romantique. + +Pour le français, il n'y a qu'une erreur de transcription, mais l'orthographe est parfois à désirer, le lyrisme de la chanson y est certainement pour quelque-chose. + + +J'ai également essayé whispercpp sur l'audio français et allemand. +Les résultats sont très bons et à peu près identique aux versions originales. +Légèrement moins bon dans l'ensemble. +J'ai même essayé [un modèle fine-tuné pour le français](https://huggingface.co/bofenghuang/whisper-large-v3-french/tree/main). +Celui-ci corrige en effet, l'erreur de transcription que Whisper avait, mais en crée une autre ! + +Ainsi, après quelques retouches, j'ai donc les sous-titres originaux des vidéos ! 🥳 +Il me suffit maintenant seulement de les traduire. 🎉 + +Il se trouve que whisper et whispercpp proposent de traduire directement vers l'anglais (uniquement l'anglais). +Cependant, je voudrais avoir aussi la version française. + +:::question +Pourquoi ne pas avoir utilisé d'autres méthodes de transcription ? +::: + +C'est une question intéressante. +En effet, il existe de nombreuses méthodes de transcriptions. +Il existe même un [classement de ces méthodes sur paperswithcode.com](https://paperswithcode.com/sota/speech-recognition-on-common-voice-french). + +Il est difficile de savoir à quel point ces méthodes sont utilisables dans un contexte réel, avec du bruit pas exemple. +Aussi, les performances ne sont pas indiquées, et certaines méthodes sont très gourmandes en ressources. +J'ai essayé d'utiliser par exemple [tevr-asr-tool](https://github.com/DeutscheKI/tevr-asr-tool) mais celui-ci était très consommateur de ressources (⚠️) et n'était pas adapté à un environnement bruyant. + + +### Seamless + +L'idée ici c'est de traduire les sous-titres de whispercpp vers 3 langues, la langue originale, le français et l'anglais. + +:::information +En première version de cet article, j'ai utilisé [NLLB](https://github.com/facebookresearch/fairseq/tree/nllb) qui est un modèle d'apprentissage automatisé créé par Meta et dédié à la traduction textuelle. + +Malgré une traduction rapide, les résultats étaient décevants. +Aussi, l'utilisation même du modèle était, je trouve, trop complexe. +::: + + +Il n'existe pas d'outil CLI disponible avec Seamless. +On doit automatiquement passer par du code Python. +Heureusement, HuggingFace propose tout ce dont on a besoin. + +```python +import srt +from pathlib import Path +from transformers import AutoTokenizer, AutoModelForSeq2SeqLM, pipeline, SeamlessM4TModel, AutoProcessor, SeamlessM4TForTextToText + +def translate(text, processor, model): + text_inputs = processor(text = text, src_lang=langSrc, return_tensors="pt") + output_tokens = model.generate(**text_inputs, tgt_lang=langTrg) + + return processor.decode(output_tokens[0].tolist(), skip_special_tokens=True) + +fileToTranslate = "JR-West-ads-Summer_Train-ja.srt" +langSrc, langTrg = "jpn", "fra" + + +# Must clone the Hugging Face repo with git lfs https://huggingface.co/facebook/hf-seamless-m4t-large +print("Loading processor") +processor = AutoProcessor.from_pretrained("hf-seamless-m4t-large") +print("Loading model") +model = SeamlessM4TForTextToText.from_pretrained("hf-seamless-m4t-large") + + +with open(fileToTranslate) as f: + subs = list(filter(lambda x: x is not None, srt.parse(f.read()))) + +if subs == None or subs == []: + print("No subs available") + exit(0) + +toTranslate = [x.content for x in subs] + +for i in range(len(subs)): + print(f"> {toTranslate[i]}") + subs[i].content = translate(toTranslate[i], processor, model) + print(f">> {subs[i].content}") + +with open(f'{Path(fileToTranslate).stem}_{langTrg}.srt', 'w') as f: + f.write(srt.compose(subs)) + +``` + +Le résultat est globalement bluffant ! 🤯 + +Encore une fois pour le japonais, c'est très difficile d'évaluer la pertinence de la traduction. +Surtout quand on se base sur un texte qui est certainement mal retranscrit. +Par-contre, pour l'allemand et le français, c'est un sans-faute ! 💯 + + +### Real-ESRGAN + +Ici, ça va être très simple, j'ai suivi les instructions du README. +D'abord, je me suis assuré d'avoir Pytorch d'installer et que Python est en version au moins 3.7. +Ensuite, j'ai téléchargé le modèle pré-entrainé conseillé `RealESRGAN_x4plus.pth`. +Je suis d'ailleurs assez étonné de ne pas trouver plus de variantes disponibles sur HuggingFace. + +Ensuite, j'ai agrandi chacune des images de la vidéo initiale avec ce petit script : + +```sh +for i in $(seq 1 14706); do + file=$(printf "png/%04d.png" $i) + python3 inference_realesrgan.py -n RealESRGAN_x4plus -i $file -o train --fp32 + echo $file $(($i * 100 / 14706)) +done +``` + +Le reste est une histoire de ffmpeg, le bon encodeur et les bons paramètres. + +:::note +Il semble qu'il existe un modèle de Real-ESRGAN défié à la vidéo. +Cependant, je n'ai découvert son existence qu'après avoir commencé l'amélioration basée sur les images individuelles. + +Je vous invite à essayer par vous-même le modèle dédié à l'amélioration vidéo et à m'en faire part par e-mail. ;) +::: + + +## Conclusion + + +La conclusion va être rapide, les technologies à base de LLM sont globalement performantes et vont s'améliorer rapidement. 👌 +Ce sont désormais des outils utilisables quotidiennement pour produire des documents de qualités. +Elles sont disponibles en local et à partir de logiciels libérateurs. + +Ce dernier point est important, car on remarque que ces technologies tournent autour des États-Unis et de l'anglais. +L'existence de logiciels libérateurs dans ce domaine nous garanti que d'autres pays puissent se munir de ces technologies sans dépendre de grosses sociétés comme Meta, Microsoft ou Google ([GAFAM](https://fr.wikipedia.org/wiki/GAFAM)). + +L'hégémonie étasunienne sur les outils d'IA n'est concurrencée que par les [BATX](https://fr.wikipedia.org/wiki/BATX) (Baïdu, Alibaba, Tencent et Xiamoi). +Dans un tel contexte, il n'est pas étonnant que ces outils soient américano-centrés. +Outre le fait que la langue par défaut de ces outils soit l'anglais (voir la seule langue disponible !), il est notable que ces modèles sont plus performants en anglais que dans le reste des langues européennes. Ce qui pose bien évidement un problème d'équité entre les peuples et qui est de fait un avantage concurrentiel pour les entreprises étasuniennes. + + +----------------------- + +Pour finir, je vais vous narrer comment en 5 minutes, j'ai animé l'illustration de cet article. + +J'avais déjà une petite idée de ce que je voulais comme animation, un train qui avance, l'idée de vitesse, etc. +Souvent dans mes animations, ce qui me limite est l'illustration SVG de base.[^talent] +Je peux ainsi passer beaucoup de temps à trouver le bon SVG à animer. + +[^talent]: Et bien sûr, mon manque de talent pour réaliser ce type d'illustration moi-même. + +Ici, ça a été au contraire très rapide. +Sur [iconbuddy](https://iconbuddy.app), un site d'icônes vectorielles libres d'utilisation, en cherchant « train » je tombe sur cette illustration créée par IBM. + + + +Dans Inkscape, je sépare l'image en plusieurs composants que je vais animer indépendamment. +Mon but est de rapidement vérifier que l'effet de rail infini que je souhaite créer est possible. +Pour cela, j'agrandis les rails et je rajoute de l'animation avec un élément `animateTransform` + +```xml + <animateTransform + attributeName="transform" + attributeType="XML" + type="translate" + from="0" + to="-12" + dur="0.15s" + repeatCount="indefinite" /> +``` + + + +C'est parfait ! Dans la foulée, j'anime alors le train. +Cette fois-ci, pour une question d'esthétique, je voudrais une animation plus complexe où le train avance, ralentis puis accélère. +Je me tourne donc vers les animations CSS par `keyframe` avec une animation « ease-in-out ». +On peut rajouter du CSS directement dans le SVG, c'est pratique. + +```css +#path1 { + animation: train 4s infinite; + animation-timing-function: ease-in-out; +} + +@keyframes train { + 0% { + transform: translate(-40px); + } + 30% { + transform: translate(-5px); + } + 53% { + transform: translate(-15px); + } + 100% { + transform: translate(220px); + } +} +``` + +Très rapidement, j'ai un résultat convaincant que je présente à ma copine. + +Qui me rétorque sur un ton un peu moqueur : +« C'est pas mal ! Ton train est un peu court par contre. » +😿 + + + + +Je m'empresse de l'agrandir, je rajoute au passage deux petites bandes pour traduire la vitesse et le tour est joué ! + + + |