Comment créer un générateur d'images IA à partir de zéro ? 🤔
Nous allons voir étape par étape comment créer votre propre application Web qui transformera une description textuelle en images à l'aide de l'API Hugging Face. Tout ce dont vous avez besoin, c'est d'un peu de connaissances en HTML, CSS et JavaScript. C'est un excellent projet pour les débutants : facile à mettre en œuvre et donnant un résultat impressionnant !
Vous pouvez télécharger tous les projets de code à la fin de l'article
📚 Table des matières
🚀 Pourquoi faire un tel projet ?
🛠️ Que ferons-nous ?
📁 Structure du projet
1️⃣ HTML (index.html)
2️⃣ CSS (style.css)
3️⃣ JavaScript (script.js)
💡 Résultat
📌 Conseils et idées d'amélioration
🙋 Foire aux questions (FAQ)
✅ Conclusion
🚀 Pourquoi faire un tel projet ?
Imaginez que vous créez une application Web en quelques heures seulement, qui transforme le texte en images à l'aide de l'intelligence artificielle. Cela ressemble à de la magie ? Il s'agit simplement d'une combinaison de HTML, CSS, JavaScript et d'une API externe. 🤖✨
C'est pourquoi un tel projet est une véritable aubaine pour un débutant :
Pratique avec l'API — tu apprendras à envoyer des requêtes à un serveur externe et à traiter les réponses. C'est une compétence clé pour un développeur web moderne !
Visuel cool - le résultat de votre travail sera immédiatement visible. Vous entrez du texte, vous obtenez une image lumineuse. C'est très passionnant et inspirant.
Consolidation des connaissances — HTML, CSS, JS — tout en un seul endroit. Et pas dans des exemples abstraits, mais dans une véritable mini-application.
Thème clair et sombre - tendance de ces dernières années. Nous allons créer un bouton de commutation entre eux et vous apprendrez comment cela est mis en œuvre dans la pratique.
Portfolio — un tel projet ne passera certainement pas inaperçu. Il montre que vous savez travailler avec les API, créer des interfaces et penser à l'utilisateur.
Si vous cherchiez un projet à la fois utile, beau et vraiment intéressant, vous l'avez trouvé.
🛠️ Que ferons-nous ?
Imaginez : vous ouvrez une page, vous entrez une phrase comme « château sur les nuages au coucher du soleil », vous appuyez sur un bouton et, après quelques secondes, vous obtenez des images uniques créées par l'IA. C'est exactement ce que nous allons réaliser !
Nous créerons une application Web complète dans laquelle l'utilisateur pourra :
Saisir une description textuelle (prompt) décrivant une scène imaginaire
Choisir un modèle de génération d'images (par exemple, Stable Diffusion)
Personnaliser le nombre d'images - de une à quatre
Définissez le rapport d'aspect souhaité : carré, horizontal ou vertical
Appuyez sur le bouton « Générer » et voyez instantanément le résultat
Enregistrer des images sur votre ordinateur 💾
Et aussi, basculer le thème entre clair et sombre. Pratique, moderne et beau.
Ce projet vous aidera à maîtriser de véritables compétences en développement Web et à comprendre le fonctionnement des outils d'IA modernes.
📁 Structure du projet
Avant d'écrire du code, vous devez organiser correctement le projet. C'est une étape importante : une structure claire vous aidera à naviguer et à apporter des changements plus facilement à l'avenir.
Crée un dossier séparé et nomme-le, par exemple, ai-image-generator. À l'intérieur de ce dossier, crée 3 fichiers principaux :
index.html— le balisage principal sera situé ici : structure de la page, boutons, champs de saisie et listes déroulantesstyle.css— fichier de style dans lequel nous allons créer un design moderne et réactif, et implémenter un thème sombre et clairscript.js— fichier JavaScript responsable de la logique : traitement des données, connexion à l'API, génération d'images et interaction avec l'interface
Tout est simple et clair. En quelques minutes, vous aurez une base avec laquelle vous pourrez commencer à créer !
1️⃣ HTML (index.html)
Commençons par le plus important : le cadre de notre application. C'est le HTML qui est responsable de la structure de la page : à quoi ressemble tout, où se trouvent les boutons, les champs, les en-têtes. Ici, nous décrirons ce que l'utilisateur verra dans le navigateur.
HTML est la base sur laquelle les styles (CSS) et la logique (JavaScript) sont ensuite « enfilés ».
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Image Generator Kodik APP</title>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<div class="logo-wrapper">
<div class="logo">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<h1>AI Image Generator</h1>
</div>
<button class="theme-toggle">
<i class="fa-solid fa-moon"></i>
</button>
</header>
<div class="main-content">
<form action="#" class="prompt-form">
<!-- Prompt Textarea Container -->
<div class="prompt-container">
<textarea class="prompt-input" placeholder="Describe your imagination in detail..." spellcheck="false" autofocus required></textarea>
<button type="button" class="prompt-btn" title="Get Random Prompt">
<i class="fa-solid fa-dice"></i>
</button>
</div>
<!-- Prompt Actions / Buttons -->
<div class="prompt-actions">
<div class="select-wrapper">
<select class="custom-select" id="model-select" required>
<option value="" selected disabled>Select Model</option>
<option value="black-forest-labs/FLUX.1-dev">FLUX.1-dev</option>
<option value="black-forest-labs/FLUX.1-schnell">FLUX.1-schnell</option>
<option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion XL</option>
<option value="runwayml/stable-diffusion-v1-5">Stable Diffusion v1.5</option>
<option value="stabilityai/stable-diffusion-3-medium-diffusers">Stable Diffusion 3</option>
</select>
</div>
<div class="select-wrapper">
<select class="custom-select" id="count-select" required>
<option value="" selected disabled>Image Count</option>
<option value="1">1 Image</option>
<option value="2">2 Images</option>
<option value="3">3 Images</option>
<option value="4">4 Images</option>
</select>
</div>
<div class="select-wrapper">
<select class="custom-select" id="ratio-select" required>
<option value="" selected disabled>Aspect Ratio</option>
<option value="1/1">Square (1:1)</option>
<option value="16/9">Landscape (16:9)</option>
<option value="9/16">Portrait (9:16)</option>
</select>
</div>
<button type="submit" class="generate-btn">
<i class="fa-solid fa-wand-sparkles"></i>
Generate
</button>
</div>
</form>
<!-- Result Gallery Grid -->
<div class="gallery-grid"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>2️⃣ CSS (style.css)
Maintenant que nous avons la structure, il est temps de rendre l'application vraiment belle et agréable à regarder. C'est le CSS qui est responsable de l'apparence de tous les éléments : des boutons à l'arrière-plan.
Dans notre cas, nous allons créer un design moderne avec :
Animations fluides
Mise en page adaptative pour que tout soit beau sur l'ordinateur et sur le téléphone
Thème clair et sombre, entre lesquels l'utilisateur peut basculer en un clic
Boutons élégants, champs de saisie et cartes avec images
Nous allons également connecter la police Inter avec Google Fonts, il a l'air moderne et lisible.
Cette interface est agréable à utiliser, et elle n'a rien à envier aux services externes prêts à l'emploi sur Internet !
/* Importing Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
:root {
--color-primary: #5C56E1;
--color-primary-dark: #5b21b6;
--color-accent: #8B5CF6;
--color-card: #FFFFFF;
--color-input: #F1F1FF;
--color-text: #09090E;
--color-placeholder: #5C5A87;
--color-border: #D4D4ED;
--color-gradient: linear-gradient(135deg, #5C56E1, #8B5CF6);
}
body.dark-theme {
--color-card: #1E293B;
--color-input: #141B2D;
--color-text: #F3F4F6;
--color-placeholder: #A3B6DC;
--color-border: #334155;
background: var(--color-card);
background-image: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 35%), radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 35%), radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 40%);
}(Le code complet peut être obtenu sur github. Le lien à la fin de l'article - il suffit de le coller dans style.css)
3️⃣ JavaScript (script.js)
HTML est responsable de la structure, CSS est responsable de l'apparence, mais JavaScript donnera vie à notre application.
Avec son aide, nous :
Nous traiterons l'entrée de l'utilisateur — la description textuelle, le modèle sélectionné et les paramètres de génération
Nous enverrons une demande à l'API Hugging Face pour obtenir des images
Afficher les images dans une belle grille avec des effets de chargement
Ajoutons la fonctionnalité du bouton « indice aléatoire », qui introduit automatiquement des idées intéressantes
Nous implémentons le basculement entre le thème clair et le thème sombre
Ici, vous travaillerez avec le DOM, les événements, les requêtes asynchrones (fetch) et bien plus encore. C'est un excellent entraînement pour développer de véritables compétences en développement JavaScript !
👉 Insérez votre clé API Hugging Face à la place de PASTE-YOUR-API-KEY :
const promptForm = document.querySelector(".prompt-form");
const themeToggle = document.querySelector(".theme-toggle");
const promptBtn = document.querySelector(".prompt-btn");
const promptInput = document.querySelector(".prompt-input");
const generateBtn = document.querySelector(".generate-btn");
const galleryGrid = document.querySelector(".gallery-grid");
const modelSelect = document.getElementById("model-select");
const countSelect = document.getElementById("count-select");
const ratioSelect = document.getElementById("ratio-select");
const API_KEY = "PASTE-YOUR-API-KEY"; // Hugging Face API Key
// Example prompts
const examplePrompts = [
"A magic forest with glowing plants and fairy homes among giant mushrooms",
"An old steampunk airship floating through golden clouds at sunset",
"A future Mars colony with glass domes and gardens against red mountains",
"A dragon sleeping on gold coins in a crystal cave",
"An underwater kingdom with merpeople and glowing coral buildings",
"A floating island with waterfalls pouring into clouds below",
"A witch's cottage in fall with magic herbs in the garden",
"A robot painting in a sunny studio with art supplies around it",
"A magical library with floating glowing books and spiral staircases",
"A Japanese shrine during cherry blossom season with lanterns and misty mountains",
"A cosmic beach with glowing sand and an aurora in the night sky",
"A medieval marketplace with colorful tents and street performers",
"A cyberpunk city with neon signs and flying cars at night",
"A peaceful bamboo forest with a hidden ancient temple",
"A giant turtle carrying a village on its back in the ocean",
];Si vous n'avez pas de clé, inscrivez-vous gratuitement sur huggingface.co et obtenez-le dans la section Access Tokens
(Le code complet peut être obtenu sur github. Lien à la fin de l'article)
💡 Résultat
Lorsque vous aurez terminé ce projet, vous n'aurez pas seulement un ensemble de fichiers, mais une véritable mini-application qui a l'air professionnelle et fonctionne avec une véritable intelligence artificielle.
Vous pourrez :
Entrez n'importe quelle description imaginée et obtenez une image générée, comme si elle venait de la fantaisie
Utiliser différents modèles pour la génération, y compris les versions populaires de Stable Diffusion
Enregistrer les images que vous aimez et les partager avec vos amis
Changer de thème de design, en fonction de l'heure de la journée ou de l'humeur 🌞🌙
Et surtout, vous l'avez fait vous-même. Du début à la fin. Ce résultat donne une puissante confiance en soi et la motivation pour aller de l'avant !
📌 Conseils et idées d'amélioration
Le projet est déjà prêt, mais vous ne pouvez pas vous arrêter là. Voici comment tu peux le faire évoluer :
Favoris - possibilité d'ajouter les meilleures images dans une galerie séparée
Modification des requêtes - ajouter un bouton de régénération, où vous pouvez changer prompt sans recharger complètement le formulaire
Histoire — enregistrez les requêtes et les images précédentes dans
localStorageafin que l'utilisateur puisse y revenir plus tardCommentaires — permettre à l'utilisateur d'évaluer le résultat ou de laisser un commentaire
Partager - ajouter la possibilité de partager l'image via un lien ou de l'exporter vers les réseaux sociaux
C'est un excellent moyen de développer un projet et d'améliorer vos compétences en même temps !
🙋 Foire aux questions (FAQ)
🔑 Où obtenir une clé API Hugging Face ?
Accéder au site huggingface.co, créez un compte (si vous n'en avez pas encore), puis rendez-vous dans la section Settings > Access Tokens et génère une nouvelle clé. Insérez-la dans la variable API_KEY dans script.js.
🖼️ Combien d'images peuvent être générées à la fois ?
Vous pouvez choisir de 1 à 4 images. Cette valeur est définie dans la liste déroulante de la page.
⚠️ Pourquoi l'image ne se charge-t-elle pas ?
Causes possibles :
Clé API invalide
Connexion Internet instable
Erreur côté modèle (vous pouvez voir les détails dans les journaux de la console du navigateur)
🌗 Comment fonctionne le changement de thème ?
Le site mémorise le thème sélectionné (clair ou foncé) et l'enregistre dans localStorage, et prend également en compte les paramètres système du navigateur.
📱 Est-ce que cela fonctionne sur mobile ?
Oui, l'interface est adaptée aux appareils mobiles. Tous les éléments sont mis à l'échelle et la galerie d'images est reconstruite pour l'écran.
📤 Puis-je partager les résultats ?
Bien sûr ! Cliquez sur l'icône de téléchargement sous l'image, le fichier sera enregistré et vous pourrez l'envoyer à vos amis ou le publier sur les réseaux sociaux.
✅ Conclusion
C'est tout : vous venez de passer d'un dossier vide à une application d'IA prête à l'emploi qui génère des images à partir de texte. 🔥
Vous avez compris comment :
utiliser HTML pour construire l'interface
appliquer CSS pour créer un design réactif et moderne
activer JavaScript et interagir avec l'API externe
Ce projet n'est pas seulement éducatif. Il a l'air décent, fonctionne de manière stable et montre que vous savez comment construire de vrais outils Web.
Continue à expérimenter :
essayez de nouveaux modèles
changez l'interface
ajouter de nouvelles fonctionnalités
Chaque amélioration vous rendra plus fort en tant que développeur. Bonne chance dans votre parcours ! 🚀
Vous pouvez télécharger le code source depuis notre GitHub