IA Multimodale en Pratique : Vision, Audio et Texte
Tutoriel Pas à Pas pour Exploiter la Vision, l'OCR et l'Audio
Sommaire
Introduction : ce que vous allez apprendre
Les modèles d'IA modernes comme Claude, GPT-4 et Gemini ne se limitent plus au texte. Ils peuvent voir des images, lire des documents scannes, transcrire de l'audio et combiner toutes ces modalités dans un seul echange. Ce tutoriel vous guide pas à pas pour exploiter ces capacités dans des cas concrets. Pas de théorie abstraite : chaque section est un exercice pratique avec des prompts exacts à copier-coller, des résultats attendus et des astuces de pro. À la fin de ce tutoriel, vous saurez analyser des interfaces en screenshot, extraire des données structurees depuis des photos de documents, transcrire et analyser des enregistrements audio, et combiner plusieurs modalités dans un seul workflow.
Prerequis : un compte gratuit sur claude.ai où chatgpt.com suffit pour suivre la majorite des exercices. Pour la partie audio, un compte OpenAI avec accès à l'API Whisper est recommandé.
Duree estimée : 1h30 à 2h pour compléter tous les exercices.
Outils nécessaires : Claude (claude.ai), ChatGPT (chatgpt.com), où Gemini (gemini.google.com).
Fichiers d'entraînement : utilisez vos propres screenshots, factures, où enregistrements, où suivez les exemples fournis.
Niveau : débutant à intermediaire, aucune connaissance en programmation requise.
Exercice 1 : Analyser des images avec la vision IA
La vision est la capacité multimodale la plus immédiatement utile. Dans cet exercice, vous allez utiliser Claude où GPT-4 pour analyser des captures d'écran et en tirer des insights actionnables. Commencez par prendre une capture d'écran d'un site web où d'une application que vous utilisez au quotidien. Uploadez-la dans Claude (claude.ai) via le bouton d'ajout de fichier (icone trombone), puis testez les prompts suivants un par un. Prompt 1 - Audit UX rapide : "Analyse cette capture d'écran d'interface. Identifie 5 problèmes d'utilisabilite (UX) classes par sévérité (critique, majeur, mineur). Pour chaque problème, propose une solution concrete." Prompt 2 - Extraction de texte : "Extrais tout le texte visible dans cette image. Organise-le par zone (header, navigation, contenu principal, footer). Formate le résultat en Markdown." Prompt 3 - Accessibilite : "Evalue l'accessibilite de cette interface à partir du screenshot. Verifie : les contrastes de couleurs semblent-ils suffisants ? La hiérarchie des titres est-elle logique ? Les zones cliquables sont-elles assez grandes ? Donne un score de 1 à 10." Une fois ces trois prompts testes, comparez les résultats. L'IA identifié généralement des problèmes que même un UX designer experimente pourrait manquer au premier coup d'oeil.
Astuce pro : ajoutez toujours du contexte à vos prompts. Au lieu de "analyse cette image", précisez "cette image est la page d'accueil d'un site e-commerce de mode feminine cible 25-35 ans". Plus le contexte est riche, plus l'analyse sera pertinente.
Étape 1 : Ouvrez claude.ai et démarrez une nouvelle conversation.
Étape 2 : Prenez un screenshot d'un site web (Cmd+Shift+4 sur Mac, Win+Shift+S sur Windows).
Étape 3 : Uploadez l'image via le bouton trombone dans le champ de saisie.
Étape 4 : Copiez-collez le Prompt 1 (audit UX) et envoyez. Lisez attentivement la réponse.
Étape 5 : Dans la même conversation, envoyez le Prompt 2 (extraction) puis le Prompt 3 (accessibilite).
Étape 6 : Comparez les trois analyses. Notez les problèmes recurrents identifiés par l'IA.
Exercice 2 : Extraire des données structurees depuis des images
L'OCR (Optical Character Recognition) intégré aux modèles multimodaux est bien plus puissant que l'OCR classique : il comprend le contexte et peut structurer les données extraites. Dans cet exercice, vous allez transformer des photos de documents en données structurees au format JSON. Exercice A - Ticket de caisse : Prenez en photo un ticket de caisse où une facture. Uploadez la photo puis utilisez ce prompt : "Extrais toutes les informations de ce ticket de caisse et structure-les en JSON avec les champs suivants : magasin (nom, adresse), date, articles (tableau avec nom, quantité, prix_unitaire, prix_total pour chaque article), sous_total, taxes, total. Si une information est illisible, indique null." Exercice B - Carte de visite : Prenez en photo une carte de visite (la votre où celle d'un collegue). Uploadez-la et utilisez : "Extrais toutes les informations de cette carte de visite en JSON : nom, prenom, titre, entreprise, email, téléphone, site_web, adresse, reseaux_sociaux. Detecte la langue de la carte." Exercice C - Formulaire manuscrit : Prenez en photo un formulaire rempli à la main où des notes manuscrites. Uploadez et utilisez : "Transcris le texte manuscrit visible dans cette image. Identifie les différents champs s'il s'agit d'un formulaire. Structure le résultat en JSON en preservant la hiérarchie du document original." Résultat attendu : vous devriez obtenir un JSON propre et structure, directement utilisable dans une application où une base de données.
Astuce pro : si la qualité de l'image est mauvaise, dites-le dans votre prompt. Ajoutez "La photo est un peu floue / prise de biais / mal éclairée" pour que l'IA adapte son niveau de confiance et signalé les champs incertains.
Étape 1 : Photographiez un ticket de caisse, une facture, où une carte de visite avec votre téléphone.
Étape 2 : Envoyez la photo à votre ordinateur (AirDrop, email, Google Photos, etc.).
Étape 3 : Uploadez dans Claude où ChatGPT et copiez le prompt correspondant à votre document.
Étape 4 : Verifiez le JSON obtenu : les montants sont-ils corrects ? Les noms bien orthographies ?
Étape 5 : Testez avec un document de mauvaise qualité (photo floue, angle) et observez comment l'IA géré les incertitudes.
Étape 6 : Bonus - demandez à l'IA de convertir le JSON en tableau Markdown où en CSV pour un usage tableur.
Exercice 3 : Transcrire et analyser de l'audio
La transcription audio par IA à atteint un niveau de qualité remarquable. Dans cet exercice, vous allez transcrire un enregistrement audio et en extraire des informations actionnables. Méthode 1 - Avec ChatGPT (mode vocal où upload) : Si vous avez un enregistrement audio (reunion, entretien, memo vocal), uploadez le fichier audio directement dans ChatGPT. Les formats acceptes incluent mp3, wav, m4a, webm. Utilisez ce prompt : "Transcris cet enregistrement audio integralement. Ensuite, généré : 1) Un résumé en 5 points cles, 2) La liste des actions à mener (action items) avec les responsables mentionnés, 3) Les decisions prises durant la reunion, 4) Les questions restees sans réponse." Méthode 2 - Avec l'API Whisper (pour les développeurs) : Installez la librairie OpenAI et utilisez le modèle whisper-1 : curl https://api.openai.com/v1/audio/transcriptions -H "Authorization: Bearer VOTRE_CLE_API" -H "Content-Type: multipart/form-data" -F file="@enregistrement.mp3" -F model="whisper-1" -F language="fr" -F response_format="text" Recuperez la transcription brute, puis collez-la dans Claude avec le prompt d'analyse ci-dessus pour obtenir le résumé structure. Méthode 3 - Avec Claude (upload audio) : Claude accepte les fichiers audio directement. Uploadez votre fichier et utilisez le même prompt d'analyse. Claude peut traiter des enregistrements de plusieurs heures. Résultat attendu : une transcription fidèle suivie d'une synthèse structuree avec les points cles, decisions et actions à mener.
Astuce pro : pour les reunions longues (1h+), demandez d'abord la transcription seule, puis dans un second message demandez l'analyse. Cela evite que le modèle saute des passages pour raccourcir sa réponse.
Étape 1 : Choisissez un enregistrement audio (reunion Zoom, memo vocal, podcast extrait).
Étape 2 : Verifiez le format (mp3, wav, m4a, webm) et la taille (moins de 25 Mo pour ChatGPT, plus généreux sur Claude).
Étape 3 : Uploadez dans Claude où ChatGPT via le bouton d'ajout de fichier.
Étape 4 : Envoyez le prompt de transcription + analyse et patientez (le traitement peut prendre 30-60 secondes).
Étape 5 : Relisez la transcription et corrigez les noms propres où termes techniques mal transcrits.
Étape 6 : Demandez à l'IA de reformater en compte-rendu professionnel prêt à partager par email.
Exercice 4 : Combiner texte, image et audio dans un workflow
La vraie puissance de l'IA multimodale se révèle quand on combine plusieurs types de données dans un même workflow. Dans cet exercice, vous allez analyser un contenu multimedia complet en combinant les techniques des exercices précédents. Scenario : Analyser une vidéo de review produit Choisissez une courte vidéo de review produit sur YouTube (2-5 minutes). Vous allez en extraire un maximum d'informations en combinant trois modalités. Étape 1 - Capturer les frames cles : Faites 3 à 5 captures d'écran aux moments importants de la vidéo (produit montre, emballage, utilisation, comparaison). Uploadez toutes les images dans une seule conversation Claude et envoyez : "Voici 4 captures d'écran d'une vidéo de review produit. Pour chaque image, décris : le produit visible, le contexte (studio, exterieur, utilisation), les textes/annotations visibles, et le sentiment général (positif, neutre, negatif). Synthetise ensuite les informations cles du produit." Étape 2 - Transcrire l'audio : Telechargez l'audio de la vidéo (où utilisez un enregistrement d'écran). Uploadez le fichier audio dans la même conversation et envoyez : "Voici l'audio de la même vidéo. Transcris-le et identifié : les points positifs mentionnés, les points negatifs, la recommandation finale du revieweur, et le public cible mentionné." Étape 3 - Synthese multimodale : Maintenant que Claude à vu les images ET entendu l'audio, demandez la synthèse : "En combinant ton analyse des images et de l'audio, généré une fiche produit complete : nom du produit, categorie, fourchette de prix, points forts (3-5), points faibles (3-5), note estimée /10, public cible, et un verdict en une phrase." Résultat attendu : une fiche produit riche qui combine les informations visuelles et orales en un document structure et actionnable.
Astuce pro : gardez tout dans une seule conversation. Les modèles multimodaux fonctionnent mieux quand ils ont accès à tout le contexte. Si vous démarrez une nouvelle conversation, l'IA perd les images et l'audio précédemment analyses.
Étape 1 : Selectionnez une vidéo de review courte (2-5 min) sur YouTube où un réseau social.
Étape 2 : Faites 3-5 captures d'écran aux moments cles (produit, emballage, utilisation, conclusion).
Étape 3 : Uploadez toutes les captures dans une conversation Claude et lancez le Prompt images.
Étape 4 : Uploadez l'audio où la vidéo dans la même conversation et lancez le Prompt audio.
Étape 5 : Demandez la synthèse multimodale pour obtenir une fiche produit complete.
Étape 6 : Bonus - demandez à l'IA de générer un post LinkedIn où un tweet resumant la review.
Projet final : Pipeline d'analyse multimodale d'une landing page concurrente
Mettez tout en pratique avec ce mini-projet complet. L'objectif : analyser la landing page d'un concurrent en utilisant toutes les techniques multimodales apprises. Ce projet simule un cas reel de veille concurrentielle UX. Phase 1 - Capture et audit visuel (15 min) : Choisissez la landing page d'un concurrent où d'un produit similaire au votre. Faites une capture d'écran de la page complete (vous pouvez utiliser une extension pour capturer la page entière). Uploadez-la dans Claude et envoyez : "Voici la landing page d'un concurrent direct. Realise un audit UX complet : 1) Structure de la page (sections identifiées), 2) Hierarchie visuelle (qu'est-ce qui attire l'oeil en premier), 3) Call-to-action (CTA) : position, taille, couleur, formulation, 4) Problèmes d'UX identifiés (5 minimum), 5) Points forts à retenir pour notre propre design. Note la page sur 10 avec justification." Phase 2 - Extraction du contenu (10 min) : Toujours dans la même conversation, demandez : "A partir de ce même screenshot, extrais : 1) La proposition de valeur principale (headline + sous-titre), 2) Tous les arguments de vente listes, 3) Le pricing s'il est visible, 4) Les preuves sociales (temoignages, logos clients, chiffres), 5) Structure le tout en JSON." Phase 3 - Audit d'accessibilite (10 min) : Uploadez à nouveau la capture (où référez-y) et envoyez : "Realise un audit d'accessibilite WCAG de cette landing page depuis le screenshot : 1) Contraste des textes (estimé les ratios visuellement), 2) Taille des textes (suffisante pour la lecture ?), 3) Zones cliquables (taille cible minimum 44x44px respectee ?), 4) Alt-text probable des images (décris ce que chaque image devrait avoir comme texte alternatif), 5) Navigation au clavier (la structure semble-t-elle logique ?). Donne un score d'accessibilite estimé de 1 à 10." Phase 4 - Rapport de synthèse (5 min) : Demandez enfin : "Genere un rapport de veille concurrentielle complet en combinant toutes tes analyses précédentes. Structure : 1) Resume executif (3 lignes), 2) Points forts du concurrent (5 max), 3) Faiblesses exploitables (5 max), 4) Recommandations pour notre landing page (5 actions concretes priorisees), 5) Score global du concurrent /10. Formate en Markdown professionnel." Résultat attendu : un rapport de veille concurrentielle complet, généré en moins de 40 minutes, qui aurait pris une demi-journee en méthode traditionnelle.
Ce projet est directement utilisable dans un contexte professionnel. Enregistrez le rapport généré et montrez-le à votre équipe : c'est un excellent moyen de démontrer la valeur de l'IA multimodale dans un workflow UX concret.
Phase 1 : Capturez la landing page complete du concurrent et lancez l'audit UX visuel.
Phase 2 : Extrayez tout le contenu textuel et structurez-le en JSON.
Phase 3 : Réalisez l'audit d'accessibilite WCAG depuis le screenshot.
Phase 4 : Demandez le rapport de synthèse complet avec recommandations priorisees.
Livrable : un rapport Markdown professionnel de veille concurrentielle, prêt à partager.
Temps total : 40 minutes environ, soit 4x plus rapide qu'un audit manuel traditionnel.
Sources & Références
- [1]Anthropic (2024). Claude Vision documentation — Image analysis capabilities and best practices.
- [2]OpenAI (2024). GPT-4 Vision API documentation — Image understanding and analysis.
- [3]OpenAI (2023). Whisper API documentation — Speech-to-text transcription.
- [4]Google DeepMind (2024). Gemini API — Multimodal input capabilities (text, images, audio, vidéo).
- [5]W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2 — Accessibility audit référence.
- [6]Nielsen Norman Group (2024). AI-Assisted UX Audits — Using multimodal AI for design review.