Générer des images par API, directement depuis votre IDE

Une image qui arrive au bon endroit

Vous développez une page et il vous manque sa couverture. Au lieu de multiplier les téléchargements et les copier-coller, faites produire le visuel dans le dossier du projet. Notre proposition : séparer le brief créatif, le script qui appelle le service et les instructions données à votre assistant. Vous pourrez faire évoluer chaque partie sans refaire tout le parcours.

1. Préparer l’accès au service

Cet exemple pédagogique utilise le SDK Python OpenAI et son API Images : génération à partir d’un prompt, puis décodage du résultat Base64. Installez le SDK avec python -m pip install --upgrade openai. Dans l’environnement du terminal de votre IDE, définissez OPENAI_API_KEY avec votre clé et IMAGE_MODEL avec un modèle GPT Image accessible à votre compte, par exemple gpt-image-2 si disponible. Ne mettez jamais la clé dans le code, le navigateur ou Git.

2. Écrire un brief utile

Créez brief.txt à la racine du projet. Décrivez le sujet, les matières, la lumière, la palette et le cadrage. Exemple : « Couverture de blog, atelier de développement futuriste, métal brossé, lumière bleu ardoise, composition horizontale, sujet central, sans texte. » Notre conseil : conservez la même structure pour toutes les couvertures et changez seulement le sujet. Les dimensions exactes se règlent avec les paramètres acceptés par le modèle ; le prompt seul ne les garantit pas.

3. Enregistrer l’image dans le projet

Créez scripts/generate_image.py avec ce code et lancez python scripts/generate_image.py depuis la racine. Le nom unique préserve les créations précédentes. Cet exemple vise une réponse GPT Image au format Base64 ; il ne couvre pas les services qui retournent une URL ou un identifiant de tâche à interroger. Le code a été contrôlé sans appel API réel dans ce tutoriel.

import base64
import os
from pathlib import Path
from uuid import uuid4
from openai import OpenAI

client = OpenAI(timeout=180.0, max_retries=0)
prompt = Path("brief.txt").read_text(encoding="utf-8")
result = client.images.generate(
    model=os.environ["IMAGE_MODEL"],
    prompt=prompt,
    n=1,
    output_format="png",
)
if not result.data or not result.data[0].b64_json:
    raise RuntimeError("No image returned")
image = base64.b64decode(result.data[0].b64_json, validate=True)
folder = Path("assets/generated")
folder.mkdir(parents=True, exist_ok=True)
target = folder / f"image-{uuid4().hex[:12]}.png"
target.write_bytes(image)
print(target)

4. Ajouter une compétence à VS Code

Avec un assistant compatible Agent Skills, comme GitHub Copilot en mode agent dans VS Code, créez .github/skills/image-assets/SKILL.md. Une compétence décrit une procédure ; elle ne fournit ni clé ni accès au modèle. Le script reste dans scripts/generate_image.py. Voici une base à adapter à votre projet, rédigée en anglais pour être réutilisable dans une équipe multilingue.

---
name: image-assets
description: Generate an original image asset from a brief using the project's image API script.
---
Use for an explicit request to create an image for this project.
1. Read the design guidelines. Define subject, palette, crop and intended use.
2. Write the agreed visual brief to brief.txt in the project root.
3. Check that OPENAI_API_KEY and IMAGE_MODEL are set without printing them.
4. Run python scripts/generate_image.py from the project root once.
5. If generation fails or times out, report it; do not retry automatically.
6. Open the saved image if an image-viewing tool is available. Otherwise
   state that visual inspection remains outstanding.
7. Keep the original. Create a web-optimized copy and use it in the page.
8. Check the path, layout, crop and alternative text. Report the saved file.
Never expose API keys, overwrite an existing image or invent a successful result.

5. Demander un résultat concret

Dans le chat de l’IDE : « Utilise image-assets pour créer une couverture pour cet article, respecte les couleurs du site et intègre une version optimisée sans écraser les images existantes. » Vérifiez que votre assistant a accès au terminal et, pour contrôler le rendu, à un outil de lecture d’images. Les permissions de votre IDE continuent de s’appliquer. Une variante utile consiste à produire les visuels d’un tutoriel à partir d’un dossier de briefs, une image à la fois.

Du fichier généré à une page prête à publier

Gardez le PNG original, préparez une copie WebP et contrôlez le recadrage sur mobile. Réservez l’espace de l’image pour éviter les sauts de mise en page. Rédigez un texte alternatif si elle apporte une information ; une décoration pure peut avoir un attribut alt vide. Ne relancez pas aveuglément après un délai dépassé : une requête peut avoir été traitée malgré l’absence de réponse.

Et avec CONSTELLO ?

Consultez le catalogue et la documentation de votre compte pour connaître les capacités effectivement disponibles. Une API compatible avec le chat ne garantit pas un endpoint de génération d’images. Avant d’adapter ce script à CONSTELLO ou à un autre service, confirmez l’URL, le modèle et le format de réponse. Ce tutoriel ne prétend pas valider une intégration image CONSTELLO. L’objectif reste le même : garder la création de vos assets au plus près de votre code.