FLUX.2-Tutorial: Erstelle einen Capsule-Wardrobe-Visualizer mit Gradio

Schritt 1: Umgebung einrichten

Installiere zuerst die aktuelle diffusers-Bibliothek von GitHub und die weiteren Abhängigkeiten.

!pip install -q "git+https://github.com/huggingface/diffusers.git@main" \
               "transformers>=4.44.0" accelerate safetensors bitsandbytes gradio pillowBereitgestellt von

Melde dich dann bei Hugging Face an, um die 4‑Bit-FLUX.2-dev-Gewichte zu laden:

from huggingface_hub import login
login() Bereitgestellt von

Gib bei Aufforderung dein HF-Token ein und logge dich bei HF ein, um das Modell zu beziehen. Prüfe danach kurz, ob CUDA verfügbar ist und welche GPU genutzt wird:

import torch, diffusers, bitsandbytes as bnb
print("diffusers:", diffusers.__version__)
print("CUDA available:", torch.cuda.is_available())
!nvidia-smiBereitgestellt von

Wenn in der nvidia-smi-Ausgabe deine GPU erscheint und CUDA available: True steht, kannst du loslegen.

Schritt 2: FLUX.2-dev (4‑Bit) Modell

Jetzt laden wir die 4‑Bit-FLUX.2-dev-Komponenten aus dem Repo diffusers/FLUX.2-dev-bnb-4bit.

from diffusers import Flux2Pipeline, Flux2Transformer2DModel
from transformers import Mistral3ForConditionalGeneration
import torch
bnb_repo = "diffusers/FLUX.2-dev-bnb-4bit"   
torch_dtype = torch.bfloat16
device = "cuda"
print("Loading 4-bit transformer...")
transformer = Flux2Transformer2DModel.from_pretrained(
    bnb_repo,
    subfolder="transformer",
    torch_dtype=torch_dtype,
    device_map="auto",          
)
print("Loading 4-bit text encoder...")
text_encoder = Mistral3ForConditionalGeneration.from_pretrained(
    bnb_repo,
    subfolder="text_encoder",
    torch_dtype=torch_dtype,
    device_map="auto",
)
print("Building Flux2 pipeline...")
pipe = Flux2Pipeline.from_pretrained(
    bnb_repo,
    transformer=transformer,
    text_encoder=text_encoder,
    torch_dtype=torch_dtype,
).to(device)
pipe.set_progress_bar_config(disable=False)
print("Loaded. Example param device:", next(pipe.transformer.parameters()).device)Bereitgestellt von

Sobald die Abhängigkeiten installiert sind, können wir FLUX.2 mit der diffusers-Bibliothek laden und mit einem Mistral 3 Text-Encoder aus transformers kombinieren. So sieht das im Code aus:

• Flux2Transformer2DModel: Der U‑Net‑ähnliche Kern-Transformer für den Denoising-Prozess – hier in 4‑Bit-quantisierter Form geladen.
• Mistral3ForConditionalGeneration: Dient als Text-Encoder und wandelt deinen Textprompt in Konditionierungssignale für den Diffusionsprozess um.
• Flux2Pipeline: Fügt Transformer, Text-Encoder und Hilfskomponenten zu einer einzigen, aufrufbaren Schnittstelle für die Bildgenerierung zusammen.

Mit device_map="auto" und torch_dtype=torch.bfloat16 bleiben wir über verschiedene GPU-Setups hinweg flexibel und speichereffizient.

Schritt 3: Bilder vorverarbeiten

Die App lässt Nutzer mehrere Kleiderschrankbilder hochladen. Dafür brauchen wir ein paar Utilities:

• Gradio-Dateiobjekte in PIL-Images umwandeln
• Für die Konditionierung auf eine handhabbare Größe skalieren

import gradio as gr
import random, json
from typing import List, Union
from PIL import Image
MAX_REFS = 10
def files_to_pil(files: List[Union[str, dict]]) -> List[Image.Image]:
    images = []
    for f in files:
        path = f.get("name") if isinstance(f, dict) else f
        if not path:
            continue
        img = Image.open(path).convert("RGB")
        images.append(img)
    return images
def preprocess_refs(refs: List[Image.Image], max_size: int = 512) -> List[Image.Image]:
    processed = []
    for img in refs:
        img = img.convert("RGB")
        img.thumbnail((max_size, max_size), Image.LANCZOS)
        processed.append(img)
    return processedBereitgestellt von

Der obige Code definiert zwei zentrale Helferfunktionen.

• files_to_pil() nimmt die von Gradio zurückgegebenen Dateiobjekte, extrahiert ihre Pfade und öffnet jede Datei als RGB-PIL.Image.
• preprocess_refs() skaliert diese Bilder auf maximal 512 × 512 bei Erhalt des Seitenverhältnisses – wichtig für Geschwindigkeit und Speicher.

Außerdem begrenzen wir die Referenzbilder mit MAX_REFS = 10, damit die Konditionierung nicht überladen wird.

Schritt 4: Outfit-Prompt

Statt eines einzigen flachen Textprompts verwende ich einen strukturierten, JSON-ähnlichen Prompt, der Folgendes beschreibt:

• Das Studiosetting
• Motiv und Pose
• Die Outfit-Teile (verlinkt zu Referenzbildern)
• Licht, Stimmung und Kamera-Infos

def build_outfit_prompt(outfit_indices: List[int], labels: List[str]) -> str:
    item_phrases = [
        f"{labels[idx]} from reference image {idx+1}" for idx in outfit_indices
    ]
    outfit_items_str = ", ".join(item_phrases)
    mistral_prompt = """A professional full-body studio photograph of a high-end fashion editorial shoot, set against a flawless seamless neutral gray backdrop (#f5f5f5) in a controlled studio environment. The scene is bathed in soft, diffused three-point lighting (key, fill, and subtle rim) that eliminates harsh shadows, ensuring even illumination across the subject while preserving dimensionality and texture.
At the center of the frame stands a full-body adult model, exuding quiet confidence in a relaxed yet poised stance—one foot slightly forward, weight balanced, body angled subtly to the right. The model’s expression is natural, with a neutral gaze directed just off-camera, evoking a modern, minimalist lookbook aesthetic.
The outfit—meticulously styled and tailored—is the focal point, captured with ultra-realistic 8K resolution and razor-sharp detail. Fabrics display tactile depth: the weave of knits, the drape of silks, the sheen of leathers, and the crispness of cotton are all rendered with commercial-grade precision. The shallow depth of field (50mm prime lens, f/2.8) keeps the subject in crystalline focus while softly blurring the backdrop, emphasizing the outfit’s textures and proportions.
The composition adheres to classic fashion photography rules: vertical framing, ample headroom, and a slightly dynamic angle (eye-level) that flatters the model’s posture. The color palette is controlled and sophisticated, dominated by the outfit’s hues against the neutral gray, with subtle tonal contrasts to highlight layers and accessories.
Every element—from the studio-quality lighting to the catalog-ready styling—conveys luxury, clarity, and commercial appeal, designed to showcase the outfit as a covetable, high-end ensemble."""
    prompt_dict = {
        "scene": mistral_prompt,
        "subjects": [
            {
                "description": (
                    "The model is styled in an outfit composed of: "
                    + outfit_items_str
                    + ". Each garment should closely match the color, fabric, and key design details of its reference image."
                )
            }
        ]
    }
    return json.dumps(prompt_dict)Bereitgestellt von

Die Funktion build_outfit_prompt() erledigt drei wichtige Dinge:

• Sie nutzt outfit_indices und labels, um Phrasen wie „wardrobe piece 1 from reference image 1“ zu erzeugen, die zu einer Beschreibung der ausgewählten Teile für dieses Outfit zusammengeführt werden.
• Sie bettet diese Teile in einen natürlich formulierten mistral_prompt ein, der Studio-Umgebung, Licht-Setup, Objektiv, Schärfentiefe etc. definiert.
• Am Ende packen wir alles in ein prompt_dict mit scene- und subjects-Feld und serialisieren es zu JSON, damit es als ein einzelner Prompt-String in die Pipeline geht.

Konzeptionell behandeln wir jedes hochgeladene Kleiderschrankbild als „wardrobe piece i“ und bitten das Modell, „ein Outfit mit wardrobe piece 1, wardrobe piece 3 und wardrobe piece 4“ zu komponieren – wobei Farbe, Stoff und zentrale Designdetails jedes Teils erhalten bleiben.

Hinweis: Da wir in dieser Pipeline ein Mistral-Modell als Text-Encoder nutzen, habe ich auch Mistral per Meta-Prompting beim Formulieren des langen Studio-Prompts (mistral_prompt) eingesetzt. So bleibt der Stil im Einklang mit dem, was der Encoder „erwartet“, und das Wording lässt sich direkt im Code anpassen.

Schritt 5: Das Wardrobe-Grid generieren

Das Herz der Demo ist capsule_fn. Diese Funktion:

• Nimmt die hochgeladenen Bilder und UI-Parameter entgegen
• Wählt pro Kachel zufällig Untersets von Teilen aus
• Ruft die FLUX.2-dev-Pipeline zur Generierung mehrerer Bilder auf
• Setzt am Ende alles zu einem einzigen Grid zusammen

def make_grid(images: List[Image.Image], rows: int, cols: int) -> Image.Image:
    w, h = images[0].size
    grid = Image.new("RGB", (cols * w, rows * h), (255, 255, 255))
    for idx, img in enumerate(images):
        r, c = divmod(idx, cols)
        grid.paste(img, (c * w, r * h))
    return grid
def capsule_fn(files, rows, cols, height, width, steps, guidance, seed):
    if not files or len(files) < 2:
        return None
    images = files_to_pil(files)
    images = images[:MAX_REFS]
    refs = preprocess_refs(images, max_size=512)
    labels = [f"wardrobe piece {i+1}" for i in range(len(refs))]
    random.seed(int(seed))
    tiles = []
    num_tiles = rows * cols
    for i in range(num_tiles):
        k = min(len(refs), random.randint(2, 3))
        outfit_idxs = random.sample(range(len(refs)), k=k)
        prompt = build_outfit_prompt(outfit_idxs, labels)
        generator = torch.Generator(device=device).manual_seed(int(seed) + i)
        out = pipe(
            prompt=prompt,
            image=refs,   
            height=height,
            width=width,
            num_inference_steps=steps,
            guidance_scale=guidance,
            generator=generator,
        )
        tiles.append(out.images[0])
    grid = make_grid(tiles, rows, cols)
    return gridBereitgestellt von

Die beiden Funktionen oben bilden den Kernmotor der Capsule-Wardrobe-Demo.

• make_grid() erstellt eine leere Leinwand für ein Layout aus Zeilen × Spalten und fügt jede generierte Outfit-Kachel an der richtigen Position ein – das Ergebnis ist ein einzelnes Grid-Bild.
• capsule_fn() bereitet die Bilder als Referenzen auf, wählt pro Kachel zufällig 2–3 Teile, baut einen strukturierten Outfit-Prompt und ruft die FLUX.2-Pipeline mit gewählter Auflösung, Schrittzahl, Guidance und Seed auf. Alle Kacheln gehen dann an make_grid(), sodass die Nutzer ein finales Mix-and-Match-Grid sehen.

Schritt 6: Gradio-UI

Hier verbinden wir den Capsule-Wardrobe-Engine-Teil mit der Gradio-App. Nutzer laden Bilder hoch, wählen Grid- und Generierungseinstellungen und erhalten ein zusammengesetztes Outfit-Grid zurück.

inputs = [
    gr.File(file_types=["image"], file_count="multiple", label="Wardrobe pieces (2–10 images)"),
    gr.Slider(1, 4, value=2, step=1, label="Grid rows"),
    gr.Slider(1, 4, value=2, step=1, label="Grid cols"),
    gr.Slider(384, 896, value=512, step=64, label="Image height"),
    gr.Slider(256, 640, value=384, step=64, label="Image width"),
    gr.Slider(10, 30, value=16, step=2, label="Diffusion steps"),
    gr.Slider(1.0, 7.0, value=2.5, step=0.5, label="Guidance scale"),
    gr.Number(value=42, precision=0, label="Seed")
]
iface = gr.Interface(
    fn=capsule_fn,
    inputs=inputs,
    outputs=gr.Image(type="pil", label="Capsule wardrobe grid"),
    title="Capsule Wardrobe Visualizer – FLUX.2-dev (4-bit)",
    description="Upload 2–10 product images; mix & match outfits using FLUX.2-dev with multi-image reference.",
)
iface.launch(share=True, debug = True)Bereitgestellt von

So bauen wir die Gradio-App:

• Die Inputs-Liste definiert alle interaktiven Steuerungen. Der Wardrobe-Upload erlaubt 2–10 Produkt- oder Kleidungsfotos; die Slider für Zeilen und Spalten bestimmen die Grid-Form – und damit, wie viele Outfits pro Batch entstehen.
• Die Slider für Bildhöhe und -breite steuern die Kachelauflösung – höhere Werte benötigen mehr VRAM und Zeit.
• Der Diffusionsschritte-Slider legt fest, wie viele Denoising-Schritte laufen (16–24 ist ein guter Standard). Die Guidance-Scale steuert, wie stark das Modell dem Textprompt gegenüber den Referenzen folgt.
• Der Aufruf gr.Interface verbindet diese Inputs mit capsule_fn und deklariert ein einzelnes gr.Image als Output. Mit launch(share=True, debug=True) startest du den Gradio-Server, erhältst einen öffentlichen Demolink und aktivierst Debug-Logs zur Fehleranalyse.

Sobald das Interface läuft:

• Lade eine kleine Auswahl an Teilen hoch (z. B. 2 Shirts, 2 Hosen, 1 Jacke, 1 Paar Schuhe).
• Wähle ein 3×3- oder 2×2-Grid, 512×384 Auflösung, ~20 Schritte und eine Guidance von 2,5.
• Klicke auf Submit und sieh zu, wie sich das Grid mit Editorial-Style-Bildern füllt.

Flux 2 Beispiele und Beobachtungen

Um zu verstehen, wie sich FLUX.2-dev in der Praxis verhält, habe ich mit der finalen App einige kleine Experimente durchgeführt. Ich habe Diffusionsschritte und Guidance-Scale variiert und sowohl mehrere Bilder desselben Kleidungsteils als auch je ein Bild pro unterschiedlichem Teil getestet, um zu sehen, wie viel Varianz das Modell erzeugt.

• Diffusionsschritte und Guidance beeinflussen vor allem Geschwindigkeit und Schärfe, nicht den Speicher. Eine Erhöhung von 28 auf 30 Schritte und Guidance von 2,5 auf 5,0 hält den VRAM-Bedarf etwa gleich, macht jede Batch aber etwas langsamer – bei knackigeren Outfits. Sehr hohe Schrittzahlen (z. B. 50) können den Look sichtbar verändern und die Latenz erhöhen – oft mit höherer Qualität.
• Auf einer A100 wirkt 4‑Bit als sehr komfortabler Standard. Mit dem 4‑Bit-FLUX.2-dev-Checkpoint fühlen sich 3×3 Grids bei 512×384 und ~20–28 Schritten schnell und sicher für Single-GPU-Demos an. Wenn du Zugang zu einer H100 hast und den originalen (nicht quantisierten) Checkpoint laden kannst, erreichst du häufig höhere Bildqualität bei ähnlicher Latenz. Natürlich hängt die tatsächliche Performance von VRAM und Batchgröße ab.

Beispiel 1: Standardeinstellungen mit mehreren Ansichten desselben Teils

Ich habe zunächst mehrere Bilder desselben Outfits aus unterschiedlichen Winkeln hochgeladen, die Standard-Schrittzahl beibehalten und moderate Guidance genutzt. Das Modell erzeugte konsistentes Studiolicht und detailreiche Stoffe – die Outfits wirkten wie Variationen eines einzigen Capsule-Sets.

Beispiel 2: Mehr Diffusionsschritte mit denselben Referenzen

Als Nächstes habe ich die gleichen Referenzen genutzt, die Diffusionsschritte auf 28 erhöht (und die Guidance leicht angepasst). Das Grid wurde etwas schärfer und polierter, blieb aber bei der Rekombination derselben Kernteile. Der Trade-off: eine spürbar längere Generationszeit pro Batch.

Experiment 3: Ein Bild pro einzigartigem Teil

Schließlich habe ich je ein Produktfoto pro unterschiedlichem Kleidungsstück hochgeladen und erneut ein 3×3 Grid generiert. Die Outfits variierten deutlich stärker zwischen den Zellen und kombinierten unterschiedliche Tops und Bottoms auf interessante Weise. Etwas Wiederholung blieb, aber insgesamt fühlte sich das Grid näher an einer echten Capsule Wardrobe an – mit vielfältigeren Kombinationen bei gleichem Seed und gleichen Einstellungen.

Fazit

FLUX.2-dev in 4‑Bit ist ein starkes Modell für Bildanwendungen. In diesem Tutorial haben wir eine 4‑Bit-FLUX.2-dev-Pipeline mit diffusers aufgesetzt, einen Mehrbild-Referenz-Workflow gebaut, der Kleidungsstücke als Konditionierung nutzt, und alles in eine Gradio-App gepackt.

Das Ergebnis ist ein leistungsfähiger Capsule-Wardrobe-Visualizer – als Prototyp für Fashion-E-Commerce-Tools oder als spielerischer Weg, den eigenen Kleiderschrank neu zu mixen. Von hier aus kannst du die Pipeline in größere agentische Systeme integrieren, etwa ein LLM, das Outfits nach Dresscode oder Wetter vorschlägt, oder sie an ein echtes Produktkatalog-Backend anbinden.