Tutorial Generador DALL-E

DALL-E 3 ha revolucionado la generación de imágenes con su excepcional fidelidad a los prompts y tipografía legible integrada. Aprenderás a construir un frontend que captura una idea, la envía al endpoint de generación y manipula el resultado en HTML5.

Parámetros Clave de la API

La API de OpenAI acepta configuraciones detalladas para la creación de imágenes:

model: Usa dall-e-3 para la máxima calidad y precisión descriptiva.
prompt: Hasta 4000 caracteres describiendo detalladamente la imagen.
n: DALL-E 3 requiere estrictamente n: 1 (para generar múltiples, debes hacerlo secuencialmente o usar DALL-E 2).
size: Soporta 1024x1024, 1024x1792, o 1792x1024.
response_format: Puedes pedir url (expira en 1 hora) o b64_json (ideal para descargas y persistencia profunda).

Construyendo la UI del Generador

Diseñemos un layout que incluya el formulario de input, estados de carga (skeleton loaders) y un canvas para la imagen final:

<!-- Main Tool UI -->
<div class="max-w-3xl mx-auto bg-gray-900 border border-gray-700 rounded-3xl p-8 shadow-2xl">
  <!-- Input -->
  <div class="mb-6">
    <label class="block text-sm font-bold text-gray-400 mb-2 uppercase tracking-wide">Tu Idea a Ilustrar</label>
    <textarea id="promptInput" rows="3" class="w-full bg-gray-800 border border-gray-600 rounded-xl p-4 text-white resize-none" placeholder="Un astronauta cabalgando un caballo fotorealista estilo cinematográfico..."></textarea>
  </div>

  <button id="generateBtn" class="w-full bg-fuchsia-600 hover:bg-fuchsia-500 font-bold py-3 rounded-xl transition text-white shadow-lg flex items-center justify-center gap-2">
    <i class="fas fa-wand-magic-sparkles"></i> Generar Obra Maestra
  </button>

  <!-- Loading State (Oculto) -->
  <div id="loader" class="hidden text-center py-10">
    <div class="w-12 h-12 border-4 border-fuchsia-500/30 border-t-fuchsia-500 rounded-full animate-spin mx-auto mb-4"></div>
    <span class="text-fuchsia-400 font-medium animate-pulse">Procesando píxeles neuro-morficos...</span>
  </div>

  <!-- Image Result Container -->
  <div id="resultContainer" class="hidden mt-8 text-center">
    <canvas id="imageCanvas" width="1024" height="1024" class="w-full h-auto bg-black rounded-xl border border-gray-700 shadow-xl"></canvas>
    
    <div class="flex gap-4 mt-6 justify-center">
      <button id="downloadBtn" class="bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-lg font-medium text-white">
        <i class="fas fa-download"></i> Descargar HD
      </button>
      <button id="saveBtn" class="bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-lg font-medium text-white">
        <i class="fas fa-heart text-red-500"></i> Favorita
      </button>
    </div>
  </div>
</div>

Lógica de Consumo (B64 Format)

Usaremos el formato base64 para poder manipular y descargar la imagen nativamente vía Canvas HTML5:

const btn = document.getElementById('generateBtn');
const loader = document.getElementById('loader');
const container = document.getElementById('resultContainer');
const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');
let currentB64 = "";

btn.addEventListener('click', async () => {
    const prompt = document.getElementById('promptInput').value;
    if(!prompt) return alert("Por favor escribe un prompt válido.");

    // Alternar UI a estado generativo
    btn.disabled = true;
    container.classList.add('hidden');
    loader.classList.remove('hidden');

    try {
        // En un entorno real apuntarías a tu propio Worker/Backend
        const response = await fetch('https://api.openai.com/v1/images/generations', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer TU_API_KEY_SECURE_BACKEND' // CUIDADO!
            },
            body: JSON.stringify({
                model: "dall-e-3",
                prompt: prompt,
                n: 1,
                size: "1024x1024",
                response_format: "b64_json"
            })
        });

        const data = await response.json();
        currentB64 = data.data[0].b64_json;
        
        // Renderizar base64 en Canvas
        const img = new Image();
        img.onload = () => {
             ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
             loader.classList.add('hidden');
             container.classList.remove('hidden');
             btn.disabled = false;
        };
        img.src = "data:image/png;base64," + currentB64;

    } catch(err) {
        console.error(err);
        loader.innerHTML = "<p class='text-red-500'>Error al generar. Intenta otra vez.</p>";
        btn.disabled = false;
    }
});

Descargas Automáticas con Blob Files

Con la imagen dibujada en el Canvas, la descarga es extremadamente limpia convirtiendo el elemento a Blob:

document.getElementById('downloadBtn').addEventListener('click', () => {
    canvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = \`dalle3-\${Date.now()}.png\`;
        document.body.appendChild(a);
        a.click();
        
        // Cleanup para performance
        window.URL.revokeObjectURL(url);
        a.remove();
    }, 'image/png');
});

Nota Experta: localStorage tiene un límite aproximado de 5MB en el navegador, por lo que guardar el `b64` de imágenes enteras puede corromper rápidamente la cuota. Para el botón "Favorita", se recomienda escalar e guardar un thumbnail pequeño en LocalStorage o migrar a una base de datos local como IndexedDB.