Bilder per API erzeugen – direkt in Ihrer IDE

Das Bild landet direkt im Projekt

Ihrer Seite fehlt ein Titelbild. Statt Downloads zwischen Werkzeugen zu verschieben, lassen Sie das Bild im Projektordner speichern. Unser Vorschlag trennt das kreative Briefing, das API-Skript und die Anweisungen für den Assistenten. So lässt sich jeder Teil unabhängig weiterentwickeln.

1. Den Zugang vorbereiten

Dieses Lernbeispiel verwendet das Python-SDK und die Images API von OpenAI: aus einem Prompt ein Bild erzeugen und das Base64-Ergebnis dekodieren. Installieren Sie das SDK mit python -m pip install --upgrade openai. Setzen Sie OPENAI_API_KEY in der Terminalumgebung Ihrer IDE und IMAGE_MODEL auf ein für Ihr Konto verfügbares GPT-Image-Modell, etwa gpt-image-2, falls freigeschaltet. Der Schlüssel gehört weder in den Quellcode noch in Browser-Code oder Git.

2. Ein hilfreiches Briefing schreiben

Legen Sie brief.txt im Projektstamm an. Beschreiben Sie Motiv, Materialien, Licht, Farbpalette und Bildaufbau. Beispiel: „Blog-Titelbild, futuristisches Entwicklerstudio, gebürstetes Metall, schieferblaues Licht, horizontale Komposition, zentrales Motiv, ohne Text.“ Nutzen Sie für weitere Titelbilder dieselbe Struktur. Exakte Abmessungen benötigen vom Modell unterstützte Parameter; ein Prompt allein garantiert sie nicht.

3. Das Bild im Projekt speichern

Speichern Sie diesen Code unter scripts/generate_image.py und starten Sie python scripts/generate_image.py im Projektstamm. Eindeutige Dateinamen erhalten frühere Ergebnisse. Das Beispiel erwartet eine Base64-Antwort eines GPT-Image-Modells; Dienste mit Bild-URL oder abzufragender Job-ID brauchen eine andere Verarbeitung. Der Code wurde für diesen Artikel ohne echten API-Aufruf geprüft.

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. Einen Skill in VS Code ergänzen

Mit einem Assistenten, der Agent Skills unterstützt, etwa GitHub Copilot im Agent-Modus von VS Code, erstellen Sie .github/skills/image-assets/SKILL.md. Ein Skill beschreibt einen Ablauf; er liefert weder Schlüssel noch Modellzugriff. Das Skript bleibt unter scripts/generate_image.py. Diese englische Vorlage lässt sich in mehrsprachigen Teams gemeinsam nutzen.

---
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. Ein konkretes Ergebnis anfordern

Schreiben Sie im IDE-Chat: „Nutze image-assets für ein Titelbild dieses Artikels. Beachte die Farben der Website und integriere eine optimierte Version, ohne vorhandene Bilder zu überschreiben.“ Der Assistent benötigt Terminalzugriff und für eine Sichtprüfung ein Bildwerkzeug. Die Berechtigungen Ihrer IDE gelten weiterhin. Eine weitere Idee: Tutorial-Bilder aus einem Ordner mit Briefings erzeugen, jeweils einzeln.

Von der Bilddatei zur fertigen Seite

Behalten Sie das PNG-Original, erstellen Sie eine WebP-Kopie und prüfen Sie den mobilen Ausschnitt. Reservieren Sie Platz für das Bild, damit das Layout nicht springt. Informative Bilder benötigen einen passenden Alternativtext; reine Dekoration kann ein leeres alt-Attribut haben. Wiederholen Sie einen Aufruf nach einem Timeout nicht blind: Er könnte bereits verarbeitet worden sein.

Und mit CONSTELLO?

Prüfen Sie im Katalog und in der Dokumentation Ihres Kontos, welche Funktionen verfügbar sind. Chat-Kompatibilität garantiert keinen Endpunkt zur Bilderzeugung. Bevor Sie das Skript an CONSTELLO oder einen anderen Dienst anpassen, bestätigen Sie URL, Modell und Antwortformat. Dieser Artikel behauptet keine geprüfte CONSTELLO-Bildintegration. Ziel ist, die Erstellung Ihrer Bilder nah am Code zu halten.