Lovable IA Confrontation

Créer avec les meilleurs : mon expérience à The AI Showdown sur Lovable.dev

Lors du week-end des 14 et 15 juin 2025lovable.dev (souvent simplement appelé Lovable), une plateforme de « vibe‑coding » pilotée par l’IA, a invité les utilisateurs du monde entier à créer des applications web gratuitement — sans aucune compétence de codage. Lovable permet de concevoir des applications full‑stack via des instructions en langage naturel, directement dans le navigateur.

En partenariat avec OpenAIAnthropic et Google, Lovable a organisé The AI Showdown, un événement public de benchmarking comparant les capacités des principaux modèles d’IA générateurs de code. Pendant 48 heures, les participants ont bénéficié d’un accès gratuit et illimité à tous les outils et modèles de Lovable.


🚧 Mon expérience : trois modèles,deux apps, un seul prompt

Pour évaluer chaque modèle, j’ai conçu deux applications en soumettant les mêmes instructions aux trois IA. Voici ce que j’ai réalisé :

🔊 1. Lux‑ASR‑Trial

Une application de reconnaissance vocale permettant à l’utilisateur d’enregistrer un message vocal sur smartphone ou ordinateur, puis d’envoyer le fichier audio via API au système Lux‑ASR, développé par l’Université du Luxembourg.
Lux‑ASR prend en charge automatiquement le luxembourgeois, le français, l’allemand, l’anglais, le portugais et l’espagnol. La transcription est affichée immédiatement à l’écran.

Captures d’écran et liens de test :

🛑 2. Access‑Brake‑to‑API

Un proof of concept visant à limiter l’utilisation abusive des services GenAI gratuits. L’application utilise randomuser.mepour récupérer des profils fictifs (photo, nom, âge, adresse). Un délai progressif ralentit chaque requête successive dans la même session, afin de freiner les abus.

Captures d’écran et liens de test :

🌐 Défi bonus : Visionneuse WordPress Mobile-First

Pour aller plus loin et démontrer les capacités de Lovable avec un contenu réel, j’ai soumis l’invite suivante — initialement à Anthropic, mais j’ai dû passer à OpenAI en raison d’une surcharge du serveur.

Prompt:

Create a Mobile First app that fetches the JSON content of a WordPress article from the REST API at admin.ki-leierbud.lu/?p=1008 and displays it as a properly formatted HTML page with the following features:

  1. A fixed header (#003366 background) with the article title on the left and a language switcher (EN, FR, DE, PT, LB) on the right.
  2. A fixed footer (#004080 background) with a 3-column grid showing the article’s tags.
  3. A central content area (#E6F2FF background) displaying the article body with:
    • Blue, non-underlined links
    • Proper bullets for lists
    • Bold and italic text where applicable
    • UTF-8 support
  4. All links should open in a new tab/window.
  5. On language change, load the corresponding article:
    • EN > ?p=1008
    • FR > ?p=1012
    • DE > ?p=1017
    • PT > ?p=1014
    • LB > ?p=1020

À ma grande surprise, l’application a parfaitement fonctionné — sans nécessiter la moindre modification du code. Le code généré a été téléchargé sur mon compte GitHub (lien à venir) et la version en ligne est accessible publiquement à l’adresse suivante :

🔗  https://github.com/mbarnig/leierbud-article-viewer

et la version en ligne est accessible publiquement à l’adresse suivante :

🔗  https://the-ai-showdown.lovable.app

Le lendemain, j’ai remarqué quelques petits problèmes HTML concernant les puces de liste et les balises de titres <h1> à <h6>. J’ai demandé à lovable.dev de vérifier le code. Voici la réponse :

Looking at your code, I can see the issue. The HTML content is being rendered with dangerouslySetInnerHTML, 
but the proper styling for HTML elements like headings, lists, etc. is not being applied correctly.

The problem is in the ArticleContent component. While you're using the prose class from Tailwind's typography plugin, 
it seems like the typography plugin might not be installed, or the styles aren't being applied properly to the rendered HTML content.

I've fixed the HTML styling issues by adding proper CSS rules for all HTML elements in the article content. 
Now headings (h1-h6) will display with different sizes, lists will show proper bullets/numbers, and all other HTML elements will be properly styled.

Voici le lien vers l’application révisée :

🔗 https://the-ai-showdown-rev1.lovable.app

📊 Et maintenant ?

Je suis en train d’analyser les performances des trois modèles sur ces deux projets. Je prévois de publier une comparaison détaillée sur les réseaux sociaux, ainsi que de soumettre mes résultats au Lovable Content Challenge.

Restez connecté·e·s pour en savoir plus !

Carburant de l’IA

📌 Les données sont le carburant de l’IA

L’IA apprend à partir de données : textes, images, sons, vidéos…
Mais l’IA ne comprend que les 0 et 1. Donc, tout doit être converti dans un format binaire :

Type de donnéesFormat utilisé avant d’être traité par l’IA
TexteCodé en bytes avec des systèmes comme UTF-8
ImagesPixels avec des valeurs RGB codées en binaire
AudioÉchantillons numériques (souvent en .wav ou .mp3)
VidéoSéquence d’images + audio, souvent compressée

Sans codage binaire, l’IA n’aurait rien à analyser.

🤖  Le traitement de l’information en IA

Les modèles d’IA sont des programmes mathématiques qui traitent des suites de nombres.
Quand l’IA voit une image ou lit un texte, elle ne voit ni couleurs ni lettres, mais :

  • Des nombres représentant chaque pixel (images),
  • Des vecteurs représentant chaque mot (textes),
  • Des ondes transformées en chiffres (sons).

Et tout cela, au fond, ce sont des bits !

🧠  Apprentissage automatique (Machine Learning)

Dans le machine learning, l’IA apprend en analysant de grands ensembles de données codées numériquement.

Par exemple :

  • Pour reconnaître des chats, elle traite des milliers d’images où chaque pixel est un nombre codé en RGB.
  • Pour faire de la traduction, elle lit des textes en UTF-8, les transforme en vecteurs, puis apprend à associer des phrases.

Donc : plus le codage est clair et précis, mieux l’IA apprend.

🔄  Compression et IA

L’IA est aussi utilisée pour :

  • améliorer la compression (comme dans les nouveaux formats vidéo),
  • restaurer des fichiers abîmés (par exemple, améliorer le son ou l’image),
  • traduire ou générer du contenu (voix IA, images, textes…).

Mais tout cela dépend d’un bon codage binaire à la base.

🌐 En résumé

Élément de baseRôle dans l’IA
Bit/ByteFormat fondamental des données
UTF-8Codage des textes lus par l’IA
RGBReprésentation des images analysées par l’IA
ÉchantillonnageBase du son compris ou produit par l’IA
CompressionPrépare les données pour un traitement plus rapide

Codage de données

Résumé nombres

……

Résumé textes

……

Résumé audio/vidéo

ÉlémentExplication simple
ÉchantillonnageDécoupe du son en petits morceaux (samples)
MP3, AAC, FLACFormats audio compressés (avec ou sans perte)
FPS (images/s)Nombre d’images par seconde dans une vidéo
CodecOutil qui compresse/décompresse l’audio ou la vidéo
ConteneurFichier qui regroupe vidéo, audio, sous-titres, etc.

Conclusion générale

Tout ce que vous voyez ou entendez sur un ordinateur — texte, couleur, son, vidéo — est traduit en 0 et 1 grâce à des règles et des formats comme :

  • ASCII et UTF-8 pour le texte,
  • RGB pour les images,
  • MP3AAC pour l’audio,
  • MP4MKV pour la vidéo.

Les ordinateurs utilisent donc des langages numériques invisibles pour rendre la technologie aussi facile et fluide qu’une conversation humaine.

Codage Vidéo

Une vidéo, c’est une suite d’images (appelées images par seconde ou frames per second, fps) accompagnée de son.

Par exemple :

  • Une vidéo à 30 fps = 30 images affichées chaque seconde.
  • Chaque image est comme une photo, codée en pixels (et chaque pixel a des valeurs RGB).

a) Compression vidéo

Les vidéos brutes sont énormes. Pour les rendre plus légères, on utilise des codecs (COdeur/DECodeur) qui compressent les vidéos :

  • H.264 (ou AVC) : très courant, utilisé dans YouTube, MP4, etc.
  • H.265 (ou HEVC) : plus récent, meilleure compression.
  • VP9AV1 : codecs libres, utilisés par YouTube, Netflix, etc.

b) Conteneurs vidéo

Un fichier vidéo contient :

  • la vidéo compressée,
  • l’audio compressé,
  • parfois des sous-titres,
  • et des métadonnées (titre, durée…).

Ces éléments sont mis ensemble dans un conteneur. Exemples :

  • .mp4 (le plus courant)
  • .mkv (plus flexible)
  • .avi.mov, etc.

Codage Audio

Comment sont codés les fichiers audio ?

Le son, c’est une vibration de l’air. Pour qu’un ordinateur le comprenne, il faut transformer cette vibration en nombres.

a) Échantillonnage

Le son est enregistré en le coupant en petites tranches, appelées échantillons (en anglais : samples).

Par exemple :

  • Un CD audio utilise 44 100 échantillons par seconde (on dit : 44,1 kHz).
  • Chaque échantillon est souvent codé sur 16 bits.

Donc chaque seconde de son stéréo (2 canaux) = 44 100 × 2 × 16 bits = beaucoup de données !

b) Compression audio

Les fichiers audio bruts (non compressés) sont très gros. On utilise donc des formats compressés, qui réduisent la taille sans trop perdre de qualité :

  • MP3 : format populaire, avec perte de qualité.
  • AAC : utilisé par Apple, meilleure qualité à taille égale.
  • FLAC : compression sans perte, donc son de haute qualité.

Système binaire

Le système binaire expliqué simplement

1. C’est quoi le binaire ?

Le binaire, c’est un système qui n’utilise que deux chiffres :

  • 0
  • 1

Contrairement à notre système habituel (le décimal) qui utilise dix chiffres (de 0 à 9), le binaire ne travaille qu’avec des 0 et 1. C’est le langage que les ordinateurs comprennent.


2. Bit et Byte : les briques de base

  • Un bit (abréviation de binary digit) est la plus petite unité d’information en informatique. Il vaut soit 0, soit 1.
  • Un byte (ou octet en français) est un groupe de 8 bits. Par exemple :
    01001101 est un byte.

Pourquoi 8 bits ? Parce qu’avec 8 bits, on peut représenter 256 valeurs différentes (de 0 à 255).


3. ASCII : comment représenter du texte ?

Les ordinateurs ne comprennent pas directement les lettres comme A ou B. Ils ont besoin de traductions en chiffres.
C’est là qu’intervient ASCII (prononcé « aski »).

ASCII est un code qui associe chaque caractère à un nombre.
Par exemple :

  • A = 65
  • B = 66
  • espace = 32

En binaire, A devient donc : 01000001 (la version binaire de 65).


4. RGB : comment représenter des couleurs ?

Pour les images ou les écrans, on utilise souvent le système RGB (Rouge, Vert, Bleu).
Chaque couleur est composée de trois chiffres, chacun allant de 0 à 255 :

  • R (rouge)
  • G (vert)
  • B (bleu)

Par exemple :

  • Rouge pur = (255, 0, 0)
  • Blanc = (255, 255, 255)
  • Noir = (0, 0, 0)

Chaque valeur est aussi un byte, donc la couleur complète est codée sur 3 bytes.


5. UTF-8 : pour toutes les langues du monde

ASCII est pratique, mais il ne permet pas d’écrire des lettres accentuées ou des caractères d’autres alphabets (comme le chinois ou l’arabe).
C’est pourquoi on utilise UTF-8.

UTF-8 est un système de codage universel. Il peut représenter tous les caractères du monde (lettres, symboles, emojis…).

Il est basé sur ASCII, mais peut utiliser 1 à 4 bytes pour représenter un caractère.

Par exemple :

  • A = 1 byte (comme en ASCII)
  • é = 2 bytes
  • 😊 = 4 bytes

Résumé rapide

TermeDéfinition simple
Bit0 ou 1, plus petite unité de données
ByteGroupe de 8 bits
ASCIICode pour les lettres de base (A-Z, etc.)
RGBCode couleur avec Rouge, Vert, Bleu
UTF-8Code pour toutes les langues et symboles

Bienvenue au Quiz sur les Styles d’Images

Testez votre capacité à reconnaître les styles d’images générées par l’IA. Les images sont basées sur une photo du champion d’Alsace 2025 de judo. Cliquez sur un lien ci-après pour ouvrir une galerie et sélectionnez un style dans la liste en haut. Utilisez les flèches ou faites glisser l’écran pour naviguer sur les prochaines images. Une fois toutes les images étiquetées, vous pouvez soumettre vos réponses pour voir les résultats. Vous pouvez modifier vos choix avant de les valider. Utilisez les boutons du bas pour revenir ici ou accéder à la table des matières.

  • Quiz Facile : 13 images
  • Quiz Modéré : 13 images
  • Quiz Difficile : 13 images

KI-Léierbud. Quand ?

KI-Léierbud. Quand ?

KI-Léierbud est conçu pour être accessible à tout momentà votre rythmequand cela vous convient.

Que vous ayez cinq minutes ou une heure devant vous, vous pouvez explorer librement les contenus, découvrir des démonstrations interactives ou approfondir vos connaissances.
Le portail s’adapte à votre emploi du temps et à votre curiosité, sans pression ni contrainte.

KI-Léierbud. Comment ?

KI-Léierbud. Comment ?

Le portail sera développé en combinant plusieurs approches :

  • Collaboration avec des experts : pour garantir l’exactitude scientifique.
  • Design pédagogique interactif : contenus modulaires (textes, vidéos, jeux interactifs).
  • Langage clair et accessible : sans jargon technique, avec des analogies simples.
  • Outils interactifs : simulateurs de réseaux neuronaux, démonstrations d’algorithmes (reconnaissance d’images, traitement du langage, etc.).
  • Inclusivité linguistique : contenu multilingue (français, luxembourgeois, allemand, anglais, portugais).

KI-Léierbud. Pourquoi ?

KI-Léierbud. Pourquoi ?

L’IA joue un rôle croissant dans notre quotidien, mais reste souvent perçue comme complexe ou obscure. Le projet vise à :

  • Stimuler la curiosité scientifique et peut-être susciter des vocations.
  • Démystifier l’IA pour le citoyen lambda.
  • Favoriser une culture numérique critique.
  • Donner les moyens à chacun de comprendre les impacts de l’IA sur la société, l’emploi, la vie privée, etc.