muhdaliyan/zeer

Objectif

Générer des images professionnelles et de haute qualité en utilisant les modèles Imagen 4 de Google et les intégrer de manière transparente dans des projets web, applications ou flux de travail créatifs. Sauvegarder automatiquement les images générées dans le répertoire approprié du projet.

Capacités

Génération d'images

• Générer des images photoréalistes à partir de descriptions textuelles
• Créer des logos, illustrations et graphismes pour sites web
• Générer des images hero, fonds et actifs visuels
• Prise en charge de plusieurs ratios d'aspect (1:1, 4:3, 16:9, 9:16)
• Générer 1 à 4 images par requête
• Sortie haute résolution avec filigrane SynthID

Intégration

• Sauvegarder automatiquement les images dans les répertoires de projet
• Générer des noms de fichiers appropriés en fonction du contenu
• Créer des actifs d'image pour les projets web (HTML, React, etc.)
• Organiser les images dans des structures de dossiers logiques

Styles pris en charge

• Photographie (portraits, paysages, photos de produits)
• Illustrations (art numérique, croquis, peintures)
• Logos et supports de marque
• Éléments d'interface utilisateur et fonds
• Styles artistiques historiques (impressionnisme, art déco, etc.)

Procédure

Lorsque l'utilisateur demande un site web/projet avec des images

1. Identifier les besoins en images

   • Analyser les exigences du projet
   • Déterminer les images nécessaires (hero, logo, icônes, fonds)
   • Demander à l'utilisateur s'il souhaite des images générées par IA avec Imagen

2. Confirmer la génération d'images

   • Présenter l'option : « Souhaitez-vous que je génère des images personnalisées avec le modèle IA Imagen de Google ? »
   • Si l'utilisateur accepte, procéder à la génération
   • Si l'utilisateur refuse, utiliser des images factices ou passer

3. Générer les images

   • Créer des prompts détaillés et spécifiques basés sur le contexte du projet
   • Utiliser les ratios d'aspect appropriés pour chaque cas d'usage
   • Générer les images à l'aide de l'outil generate_image

4. Sauvegarder et intégrer

   • Sauvegarder les images dans le répertoire du projet (par ex. nom-site/images/)
   • Utiliser des noms de fichiers descriptifs (par ex. hero-background.png, logo.png)
   • Mettre à jour le code HTML/CSS/React pour référencer les images générées
   • Fournir les chemins d'accès aux images dans le code

Demandes directes de génération d'image

Lorsque l'utilisateur demande directement de générer une image :

1. Comprendre les exigences

   • Extraire le sujet, le style et le contexte de la demande utilisateur
   • Déterminer le ratio d'aspect approprié
   • Clarifier les détails ambigus

2. Créer un prompt détaillé

   • Construire un prompt complet suivant les bonnes pratiques d'Imagen
   • Inclure le sujet, le contexte, le style et les modificateurs de qualité
   • Garder les prompts clairs et descriptifs

3. Générer et sauvegarder

   • Utiliser l'outil generate_image avec le prompt élaboré
   • Sauvegarder dans le répertoire approprié
   • Afficher le chemin de l'image sauvegardée à l'utilisateur

Directives pour les prompts Imagen

Structure du prompt

[Style] de [Sujet] [Contexte/Fond] [Détails supplémentaires]

Prompts photographiques

• Commencer par « Une photo de... » ou « Une photographie de... »
• Ajouter des détails sur l'appareil : « portrait 35 mm », « grand-angle 10 mm », « objectif macro 60 mm »
• Inclure l'éclairage : « heure dorée », « éclairage dramatique », « lumière naturelle »
• Ajouter des types de pellicule : « film noir et blanc », « film noir », « polaroid »

Prompts d'illustration

• Spécifier le style artistique : « art numérique », « aquarelle », « croquis au crayon »
• Référencer des mouvements artistiques : « style impressionniste », « art déco », « minimaliste »
• Ajouter des modificateurs de qualité : « très détaillé », « professionnel », « primé »

Prompts de logo

• Utiliser le format : « Un logo [style] pour une entreprise [secteur] sur fond de couleur unie. Inclure le texte [nom]. »
• Styles : minimaliste, moderne, traditionnel, géométrique, abstrait
• Limiter le texte à 25 caractères

Modificateurs de qualité

Ajouter ces modificateurs pour de meilleurs résultats :

• « très détaillé »
• « professionnel »
• « primé »
• « haute résolution »
• « photoréaliste »
• « qualité 4K »

Ratios d'aspect

Choisir en fonction du cas d'usage :

• 1:1 (Carré) - Médias sociaux, images de profil, icônes
• 4:3 (Plein écran) - Photographie générale, photos de produits
• 3:4 (Portrait) - Dispositions verticales, écrans mobiles
• 16:9 (Grand écran) - Images hero, bannières, paysages
• 9:16 (Portrait) - Designs mobiles-first, stories

Outil : generate_image

IMPORTANT : Il s'agit d'un outil SIMULÉ à des fins de démonstration. L'implémentation réelle nécessite :

1. Une clé API Google Cloud avec accès à Imagen
2. L'intégration avec la bibliothèque Python google.genai
3. Une configuration API appropriée

Utilisation

generate_image(
    prompt="Un logo minimaliste moderne pour une startup tech sur fond bleu uni",
    aspect_ratio="1:1",
    number_of_images=1,
    output_dir="site/images",
    filename="logo.png"
)

Paramètres

• prompt (obligatoire) : Description textuelle détaillée de l'image
• aspect_ratio (optionnel) : "1:1", "4:3", "3:4", "16:9", "9:16" (par défaut : "1:1")
• number_of_images (optionnel) : 1-4 (par défaut : 1)
• output_dir (optionnel) : Répertoire de sauvegarde des images (par défaut : "generated_images")
• filename (optionnel) : Nom de fichier personnalisé (par défaut : généré automatiquement)

Exemples

Exemple 1 : Image hero de site web

Utilisateur : « Crée une page d'atterrissage pour un café »

IA : « Je vais créer une page d'atterrissage pour votre café. Souhaitez-vous que je génère une image hero personnalisée avec l'IA Imagen de Google ? »

Utilisateur : « Oui, s'il vous plaît »

IA : [Génère l'image avec le prompt]
"Une photographie professionnelle de l'intérieur d'un café cosy, éclairage chaleureux, tables en bois, machine à espresso en fond, atmosphère invitante, ratio 16:9"

[Sauvegarde dans coffee-shop/images/hero-background.jpg]
[Mise à jour du HTML pour utiliser l'image]

Exemple 2 : Génération de logo

Utilisateur : « Génère un logo pour mon application fitness appelée FitTrack »

IA : [Génère avec le prompt]
"Un logo minimaliste moderne pour une entreprise de fitness sur fond de couleur unie. Inclure le texte FitTrack. Formes géométriques, énergique, professionnel"

[Sauvegarde dans generated_images/fittrack-logo.png]

Exemple 3 : Actifs multiples

Utilisateur : « Construis un site portfolio et génère des images pour celui-ci »

IA : « Je vais créer votre site portfolio. Souhaitez-vous que je génère des images personnalisées (fond hero, placeholder photo de profil, vignettes de projets) avec l'IA Imagen ? »

Utilisateur : « Oui, génère-les »

IA : [Génère plusieurs images]
1. Fond hero : "Motif géométrique abstrait, moderne, professionnel, couleurs douces, 16:9"
2. Vignette projet 1 : "Illustration tech minimaliste, lignes épurées, bleu et blanc, 4:3"
3. Vignette projet 2 : "Maquette de design créatif, interface moderne, professionnel, 4:3"

[Sauvegarde tout dans portfolio/images/]
[Mise à jour du HTML/CSS avec les références aux images]

Bonnes pratiques

1. Toujours demander la permission - Avant de générer des images, demander si l'utilisateur souhaite des images générées par IA
2. Prompts contextuels - Adapter les prompts au style et à l'objectif du projet
3. Ratios d'aspect appropriés - Choisir des ratios adaptés au cas d'usage
4. Noms de fichiers descriptifs - Utiliser des noms clairs et sémantiques (hero-bg.png, pas image1.png)
5. Structure organisée - Sauvegarder les images dans des répertoires logiques (images/, assets/, etc.)
6. Qualité d'abord - Utiliser des modificateurs de qualité pour des résultats professionnels
7. Itérer si nécessaire - Si l'utilisateur n'est pas satisfait, affiner le prompt et régénérer

Intégration avec les projets frontend

Lors de la création de sites web avec cette compétence :

1. Créer d'abord le répertoire d'images
2. Générer les images avant d'écrire le HTML/CSS
3. Utiliser des chemins relatifs dans le code : <img src="images/hero.jpg">
4. Ajouter un texte alternatif décrivant l'image générée
5. Envisager des images responsives avec plusieurs tailles

Limitations

• Imagen ne prend en charge que les prompts en anglais
• Le texte dans les images est limité à 25 caractères
• Les images générées incluent le filigrane SynthID
• Nécessite un accès à l'API Google Cloud
• Des limites de débit s'appliquent selon le niveau d'API

Notes

Cette compétence fonctionne mieux lorsqu'elle est combinée avec :

• La compétence frontend-design pour la création complète de sites web
• La compétence code-helper pour la configuration du projet
• La compétence file-operations pour l'organisation des actifs