Tutorial de FLUX.2: crea un visualizador de armario cápsula con Gradio

Paso 1: configuración del entorno

Primero, instala la última librería diffusers desde GitHub y el resto de dependencias.

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

Luego inicia sesión en Hugging Face para poder descargar los pesos de FLUX.2-dev a 4 bits:

from huggingface_hub import login
login() 

Introduce tu token de HF cuando se te pida e inicia sesión para descargar el modelo. A continuación, haz una comprobación rápida para ver si CUDA está disponible y qué GPU tienes:

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

Si ves tu GPU en la salida de nvidia-smi y CUDA available: True, ya puedes continuar.

Paso 2: modelo FLUX.2-dev (4 bits)

Ahora cargamos los componentes de FLUX.2-dev a 4 bits desde el repositorio 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)

Una vez instaladas las dependencias, podemos cargar FLUX.2 con la librería diffusers y emparejarlo con un codificador de texto Mistral 3 de transformers. Así queda en código:

• Flux2Transformer2DModel: el transformador tipo U-Net responsable del desruido, cargado en forma cuantizada a 4 bits.
• Mistral3ForConditionalGeneration: se usa como codificador de texto, convirtiendo tu prompt en señales de acondicionamiento para la difusión.
• Flux2Pipeline: compone el transformador, el codificador de texto y otros componentes en una interfaz única invocable para generar imágenes.

Usar device_map="auto" y torch_dtype=torch.bfloat16 lo hace flexible en distintas GPUs y eficiente en memoria.

Paso 3: preprocesar imágenes

La app permite subir varias imágenes del armario. Necesitamos unas utilidades para:

• Convertir archivos de Gradio a imágenes de PIL
• Redimensionarlas a un tamaño manejable para el condicionamiento

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 processed

El código anterior define dos funciones clave.

• La función files_to_pil() toma los objetos de archivo que devuelve Gradio, extrae sus rutas y abre cada archivo como PIL.Image en RGB.
• La función preprocess_refs() redimensiona estas imágenes a un máximo de 512 × 512 manteniendo la relación de aspecto, importante para la velocidad y el uso de memoria.

Además, limitamos el número de imágenes de referencia con MAX_REFS = 10 para no sobrecargar el conjunto de condicionamiento.

Paso 4: prompt del conjunto

En lugar de enviar un prompt de texto plano, construí un prompt estructurado tipo JSON que describe:

• El set de estudio
• El sujeto y la pose
• Las prendas (vinculadas a las imágenes de referencia)
• Iluminación, ambiente e información de cámara

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)

La función build_outfit_prompt() hace tres cosas importantes:

• Primero, usa outfit_indices y labels para generar frases como «pieza del armario 1 from reference image 1», que se unen en una sola cadena describiendo las prendas seleccionadas para ese conjunto.
• Después, inserta estas prendas en un mistral_prompt en lenguaje natural que define el entorno de estudio, la iluminación, el objetivo, la profundidad de campo, etc.
• Por último, envolvemos todo en un prompt_dict con campos scene y subjects, y lo serializamos a JSON para pasarlo como un único prompt a la pipeline.

Conceptualmente, tratamos cada imagen subida como «pieza del armario i» y pedimos al modelo «compón un look usando la pieza 1, la 3 y la 4», preservando color, tejido y detalles clave de cada prenda.

Nota: como usamos un modelo Mistral como codificador de texto en esta pipeline, también utilicé Mistral para ayudar a redactar el prompt largo de estudio (mistral_prompt) mediante Meta prompting. Así mantenemos el estilo alineado con lo que el codificador «espera» y es fácil ajustar el texto directamente en código.

Paso 5: generar la rejilla de conjuntos

El corazón de la demo es capsule_fn, que:

• Toma las imágenes subidas y los parámetros de la interfaz
• Selecciona aleatoriamente subconjuntos de piezas para cada celda
• Llama a la pipeline de FLUX.2-dev para generar múltiples imágenes
• Y por último las compone en una única rejilla

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 grid

Estas dos funciones forman el motor central de la demo.

• La función make_grid() crea un lienzo en blanco del tamaño filas × columnas y pega cada imagen generada en su posición, produciendo una única imagen en rejilla.
• La función capsule_fn() prepara las referencias, selecciona aleatoriamente 2–3 piezas por celda, construye un prompt estructurado y llama a la pipeline de FLUX.2 con la resolución, pasos, guidance y semilla elegidos. Recoge todas las celdas y las pasa a make_grid() para mostrar la rejilla final de looks combinables.

Paso 6: interfaz en Gradio

Este paso conecta el motor del armario cápsula con la app de Gradio. El usuario sube imágenes, elige los ajustes de rejilla y generación, y recibe una rejilla compuesta de conjuntos.

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)

Así construimos la app de Gradio:

• La lista de inputs define todos los controles interactivos. El input de piezas del armario admite entre 2 y 10 fotos de prendas o productos; los deslizadores de filas y columnas fijan la forma de la rejilla y, por tanto, cuántos looks se generan por lote.
• Los deslizadores de alto y ancho controlan la resolución de cada celda: cuanto mayor, más VRAM y tiempo.
• El deslizador de pasos de difusión determina cuántos pasos de desruido ejecuta el modelo (16–24 es un buen valor por defecto), y guidance scale controla cuánto sigue el modelo el prompt de texto frente a las referencias.
• La llamada a gr.Interface conecta estos inputs con capsule_fn y declara una única salida gr.Image. launch(share=True, debug=True) inicia el servidor de Gradio, expone un enlace público para demos y activa el log de depuración en consola para diagnosticar problemas.

Cuando la interfaz esté activa:

• Sube un conjunto pequeño de prendas (p. ej., 2 camisetas, 2 pantalones, 1 chaqueta, 1 par de zapatos).
• Elige una rejilla 3x3 o 2x2, resolución 512x384, ~20 pasos y guidance de 2.5.
• Pulsa Submit y verás cómo la rejilla se llena con imágenes de estilo editorial.

Ejemplos y observaciones de Flux 2

Para entender cómo se comporta FLUX.2-dev en la práctica, probé varios experimentos con la app final. Varié los pasos de difusión y el guidance, y probé tanto múltiples imágenes de la misma prenda como una imagen por prenda distinta para ver cuánta variedad produce el modelo.

• Los pasos de difusión y el guidance afectan sobre todo a la velocidad y nitidez, no a la memoria. Subir de 28 a 30 pasos y de 2.5 a 5.0 en guidance mantiene la VRAM similar, pero hace cada lote algo más lento y produce conjuntos más nítidos. No obstante, teóricamente, conteos altos de pasos (como 50) pueden cambiar apreciablemente el aspecto de la rejilla e incrementar la latencia con mayor calidad.
• En una A100, 4 bits es un valor por defecto muy cómodo. Con el checkpoint de FLUX.2-dev a 4 bits, rejillas 3x3 a 512x384 con ~20–28 pasos se sienten rápidas y seguras para demos en una sola GPU. Si tienes acceso a una H100 y puedes cargar el checkpoint original (no cuantizado), a menudo obtendrás más calidad con latencia similar. Como siempre, depende de tu VRAM y tamaño de lote.

Ejemplo 1: ajustes por defecto con varias vistas de la misma prenda

Primero subí varias imágenes del mismo conjunto desde distintos ángulos, dejé los pasos por defecto y guidance moderado. El modelo produjo iluminación de estudio consistente y detalles de tejido cuidados, con looks que parecían variaciones de un mismo armario cápsula.

Ejemplo 2: más pasos de difusión con varias vistas de la misma prenda

Después mantuve las mismas referencias pero subí los pasos de difusión a 28 (y ajusté ligeramente el guidance). La rejilla quedó algo más nítida y pulida, pero siguió recombinando las mismas prendas. A cambio, el tiempo por lote aumentó un poco.

Experimento 3: una imagen por prenda única

Por último, subí una foto de producto por prenda distinta y generé otra rejilla 3x3. Los conjuntos resultantes fueron mucho más variados entre celdas, combinando diferentes partes de arriba y abajo de formas interesantes. Hubo algo de repetición, pero en general la rejilla se sintió más cercana a un verdadero armario cápsula, con más combinaciones para la misma semilla y ajustes.

Conclusión

FLUX.2-dev en formato de 4 bits es un gran modelo para aplicaciones de imagen. En este tutorial configuramos una pipeline FLUX.2-dev a 4 bits con diffusers, creamos un flujo de referencias multiimagen que trata las prendas como señales de condicionamiento y lo envolvimos todo en una app de Gradio.

El resultado es un potente visualizador de armario cápsula que puede servir como prototipo para e-commerce de moda o, simplemente, como una forma divertida de remezclar tu propio armario. A partir de aquí, puedes conectar la misma pipeline con sistemas más amplios, como un LLM que sugiera looks según el código de vestimenta o el tiempo, o enlazarla con un catálogo real de productos.