¿Cómo crear un generador de imágenes de IA desde cero? 🤔
Veamos paso a paso cómo crear tu propia aplicación web que convertirá una descripción de texto en imágenes usando la API de Hugging Face. Todo lo que necesitas es un poco de conocimiento de HTML, CSS y JavaScript. Este es un gran proyecto para principiantes: ¡fácil de implementar y con resultados impresionantes!
Puedes descargar todos los códigos de los proyectos al final del artículo
📚 Contenido
🚀 ¿Por qué hacer un proyecto así?
🛠️ ¿Qué vamos a hacer?
📁 Estructura del proyecto
1️⃣ HTML (index.html)
2️⃣ CSS (style.css)
3️⃣ JavaScript (script.js)
💡 Resultado
📌 Consejos e ideas para mejorar
🙋 Preguntas frecuentes (FAQ)
✅ Conclusión
🚀 ¿Por qué hacer un proyecto así?
Imagina que en solo un par de horas creas una aplicación web que convierte el texto en imágenes con la ayuda de la inteligencia artificial. ¿Suena a magia? Es solo una combinación de HTML, CSS, JavaScript y una API externa. 🤖✨
Por eso, este proyecto es un verdadero hallazgo para un principiante:
Práctica con API — aprenderás a enviar solicitudes a un servidor externo y procesar respuestas. ¡Esta es una habilidad clave de un desarrollador web moderno!
Visuales geniales — el resultado de tu trabajo será visible de inmediato. Introduces el texto y obtienes una imagen brillante. Es muy emocionante e inspirador.
Fijación de conocimientos — HTML, CSS, JS — todo en un solo lugar. Y no en ejemplos abstractos, sino en una miniaplicación real.
Tema claro y oscuro — tendencia de los últimos años. Haremos un botón de conmutación entre ellos y aprenderás cómo se implementa en la práctica.
Portafolio - un proyecto así no pasará desapercibido. Demuestra que sabes trabajar con API, crear interfaces y pensar en el usuario.
Si estabas buscando un proyecto que fuera útil, bonito y realmente interesante, lo has encontrado.
🛠️ ¿Qué vamos a hacer?
Imaginemos: abres una página, escribes una frase como «castillo en las nubes al atardecer», pulsas un botón y, en un par de segundos, obtienes imágenes únicas creadas por la IA. ¡Eso es exactamente lo que vamos a hacer!
Crearemos una aplicación web completa en la que el usuario podrá:
Introducir una descripción de texto (prompt) que describa una escena imaginaria
Elegir un modelo de generación de imágenes (por ejemplo, Stable Diffusion)
Ajustar el número de imágenes de una a cuatro
Establecer la relación de aspecto deseada: cuadrado, horizontal o vertical
Pulsa el botón «Generar» y verás el resultado al instante
Guardar imágenes en tu ordenador 💾
Y también cambiar el tema entre claro y oscuro. Cómodo, moderno y bonito.
Este proyecto te ayudará a dominar las habilidades reales de desarrollo web y comprender cómo funcionan las herramientas modernas de IA.
📁 Estructura del proyecto
Antes de escribir el código, debes organizar el proyecto correctamente. Este es un paso importante: una estructura clara te ayudará a navegar y hacer cambios más fácilmente en el futuro.
Crea una carpeta separada y asígnale un nombre, por ejemplo, ai-image-generator. Dentro de esta carpeta, crea 3 archivos principales:
index.html— aquí estará el marcado principal: estructura de la página, botones, campos de entrada y listas desplegablesstyle.css: archivo de estilos en el que crearemos un diseño moderno y adaptable, e implementaremos un tema oscuro y claroscript.jses un archivo JavaScript que se encarga de la lógica: procesamiento de datos, conexión a la API, generación de imágenes e interacción con la interfaz
Todo es simple y claro. ¡En pocos minutos tendrás una base con la que empezar a crear!
1️⃣ HTML (index.html)
Empecemos por lo más importante: el marco de nuestra aplicación. Es HTML el responsable de la estructura de la página: cómo se ve todo, dónde se encuentran los botones, campos, encabezados. Aquí describiremos lo que el usuario verá en el navegador.
HTML es la base sobre la que luego se «ponen» los estilos (CSS) y la lógica (JavaScript).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Image Generator Kodik APP</title>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<div class="logo-wrapper">
<div class="logo">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<h1>AI Image Generator</h1>
</div>
<button class="theme-toggle">
<i class="fa-solid fa-moon"></i>
</button>
</header>
<div class="main-content">
<form action="#" class="prompt-form">
<!-- Prompt Textarea Container -->
<div class="prompt-container">
<textarea class="prompt-input" placeholder="Describe your imagination in detail..." spellcheck="false" autofocus required></textarea>
<button type="button" class="prompt-btn" title="Get Random Prompt">
<i class="fa-solid fa-dice"></i>
</button>
</div>
<!-- Prompt Actions / Buttons -->
<div class="prompt-actions">
<div class="select-wrapper">
<select class="custom-select" id="model-select" required>
<option value="" selected disabled>Select Model</option>
<option value="black-forest-labs/FLUX.1-dev">FLUX.1-dev</option>
<option value="black-forest-labs/FLUX.1-schnell">FLUX.1-schnell</option>
<option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion XL</option>
<option value="runwayml/stable-diffusion-v1-5">Stable Diffusion v1.5</option>
<option value="stabilityai/stable-diffusion-3-medium-diffusers">Stable Diffusion 3</option>
</select>
</div>
<div class="select-wrapper">
<select class="custom-select" id="count-select" required>
<option value="" selected disabled>Image Count</option>
<option value="1">1 Image</option>
<option value="2">2 Images</option>
<option value="3">3 Images</option>
<option value="4">4 Images</option>
</select>
</div>
<div class="select-wrapper">
<select class="custom-select" id="ratio-select" required>
<option value="" selected disabled>Aspect Ratio</option>
<option value="1/1">Square (1:1)</option>
<option value="16/9">Landscape (16:9)</option>
<option value="9/16">Portrait (9:16)</option>
</select>
</div>
<button type="submit" class="generate-btn">
<i class="fa-solid fa-wand-sparkles"></i>
Generate
</button>
</div>
</form>
<!-- Result Gallery Grid -->
<div class="gallery-grid"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>2️⃣ CSS (style.css)
Ahora que tenemos la estructura, es hora de hacer que la aplicación sea realmente bonita y agradable a la vista. Es CSS el que se encarga de la apariencia de todos los elementos: desde los botones hasta el fondo.
En nuestro caso, crearemos un diseño moderno con:
Animaciones fluidas
Diseño adaptable para que todo se vea bien tanto en la computadora como en el teléfono
Tema claro y oscuro, entre los cuales el usuario puede cambiar con un solo clic
Botones elegantes, campos de entrada y tarjetas con imágenes
También conectaremos la fuente Inter con Google Fonts: se ve moderno y legible.
¡Esta interfaz es agradable de usar y no es inferior a los servicios externos en Internet!
/* Importing Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
:root {
--color-primary: #5C56E1;
--color-primary-dark: #5b21b6;
--color-accent: #8B5CF6;
--color-card: #FFFFFF;
--color-input: #F1F1FF;
--color-text: #09090E;
--color-placeholder: #5C5A87;
--color-border: #D4D4ED;
--color-gradient: linear-gradient(135deg, #5C56E1, #8B5CF6);
}
body.dark-theme {
--color-card: #1E293B;
--color-input: #141B2D;
--color-text: #F3F4F6;
--color-placeholder: #A3B6DC;
--color-border: #334155;
background: var(--color-card);
background-image: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 35%), radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 35%), radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 40%);
}(El código completo se puede obtener en github. El enlace al final del artículo, solo tienes que insertarlo en style.css)
3️⃣ JavaScript (script.js)
HTML es responsable de la estructura, CSS de la apariencia, pero JavaScript dará vida a nuestra aplicación.
Con su ayuda, nosotros:
Procesamos la entrada del usuario: descripción de texto, modelo seleccionado y parámetros de generación
Enviamos una solicitud a la API de Hugging Face para obtener imágenes
Mostrar las imágenes en una bonita cuadrícula con efectos de carga
Añadiremos la funcionalidad del botón "pista aleatoria", que introduce automáticamente ideas interesantes
Implementamos el cambio entre el tema claro y el oscuro
Aquí trabajarás con DOM, eventos, solicitudes asíncronas (fetch) y mucho más. ¡Este es un gran entrenamiento para desarrollar habilidades reales de desarrollo de JavaScript!
👉 Inserta tu clave API de Hugging Face en lugar de PASTE-YOUR-API-KEY:
const promptForm = document.querySelector(".prompt-form");
const themeToggle = document.querySelector(".theme-toggle");
const promptBtn = document.querySelector(".prompt-btn");
const promptInput = document.querySelector(".prompt-input");
const generateBtn = document.querySelector(".generate-btn");
const galleryGrid = document.querySelector(".gallery-grid");
const modelSelect = document.getElementById("model-select");
const countSelect = document.getElementById("count-select");
const ratioSelect = document.getElementById("ratio-select");
const API_KEY = "PASTE-YOUR-API-KEY"; // Hugging Face API Key
// Example prompts
const examplePrompts = [
"A magic forest with glowing plants and fairy homes among giant mushrooms",
"An old steampunk airship floating through golden clouds at sunset",
"A future Mars colony with glass domes and gardens against red mountains",
"A dragon sleeping on gold coins in a crystal cave",
"An underwater kingdom with merpeople and glowing coral buildings",
"A floating island with waterfalls pouring into clouds below",
"A witch's cottage in fall with magic herbs in the garden",
"A robot painting in a sunny studio with art supplies around it",
"A magical library with floating glowing books and spiral staircases",
"A Japanese shrine during cherry blossom season with lanterns and misty mountains",
"A cosmic beach with glowing sand and an aurora in the night sky",
"A medieval marketplace with colorful tents and street performers",
"A cyberpunk city with neon signs and flying cars at night",
"A peaceful bamboo forest with a hidden ancient temple",
"A giant turtle carrying a village on its back in the ocean",
];Si no tienes la clave, regístrate gratis en huggingface.co y consíguelo en la sección Access Tokens
(El código completo se puede encontrar en github. Enlace al final del artículo)
💡 Resultado
Cuando termines este proyecto, no solo tendrás un conjunto de archivos, sino una verdadera miniaplicación que se ve profesional y funciona con inteligencia artificial real.
Podrás:
Introduce cualquier descripción imaginaria y obtén una imagen generada como si fuera de fantasía
Utilizar diferentes modelos para la generación, incluidas las versiones populares de Stable Diffusion
Guarda tus imágenes favoritas y compártelas con tus amigos
Cambia el tema de diseño según la hora del día o tu estado de ánimo 🌞🌙
Y lo más importante: lo has hecho tú mismo. De principio a fin. ¡Este resultado te da una poderosa carga de confianza en ti mismo y motivación para seguir adelante!
📌 Consejos e ideas para mejorar
El proyecto ya está listo, pero no tienes por qué detenerte ahí. Así es como puedes mejorarlo aún más:
Favoritos — haz posible añadir las mejores imágenes a una galería separada
Edición de consultas — añadir un botón de regeneración donde se pueda cambiar el prompt sin reiniciar completamente el formulario
Historia — guarda las consultas e imágenes anteriores en
localStoragepara que el usuario pueda volver a ellas más tardeComentarios — permitir al usuario evaluar el resultado o dejar un comentario
Compartir — añadir la posibilidad de compartir la imagen a través de un enlace o exportarla a las redes sociales
¡Es una forma estupenda de desarrollar un proyecto y mejorar tus habilidades al mismo tiempo!
🙋 Preguntas frecuentes (FAQ)
🔑 ¿Dónde puedo obtener una clave API de Hugging Face?
Ir al sitio web huggingface.co, crea una cuenta (si aún no la tienes), luego ve a la sección Settings > Access Tokens y genera una nueva clave. Insértala en la variable API_KEY en script.js.
🖼️ ¿Cuántas imágenes se pueden generar a la vez?
Puedes elegir de 1 a 4 imágenes. Este valor se configura en la lista desplegable de la página.
⚠️ ¿Por qué no se carga la imagen?
Posibles causas:
Clave API no válida
Conexión a Internet inestable
Error en el lado del modelo (se pueden ver los detalles en los registros de la consola del navegador)
🌗 ¿Cómo funciona el cambio de tema?
El sitio recuerda el tema seleccionado (claro u oscuro) y lo guarda en localStorage, y también tiene en cuenta la configuración del sistema del navegador.
📱 ¿Funciona en dispositivos móviles?
Sí, la interfaz está adaptada para dispositivos móviles. Todos los elementos se escalan y la galería de imágenes se reconstruye para adaptarse a la pantalla.
📤 ¿Puedo compartir los resultados?
¡Por supuesto! Haz clic en el icono de descarga debajo de la imagen: el archivo se guardará y podrás enviarlo a tus amigos o publicarlo en las redes sociales.
✅ Conclusión
Eso es todo: acabas de pasar de una carpeta vacía a una aplicación de IA lista para usar que genera imágenes a partir de texto. 🔥
Has aprendido a:
usar HTML para construir la interfaz
aplicar CSS para crear un diseño adaptable y moderno
habilitar JavaScript e interactuar con una API externa
Este proyecto no es solo educativo. Se ve decente, funciona de manera estable y demuestra que sabes cómo construir herramientas web reales.
Sigue experimentando:
prueba nuevos modelos
cambia la interfaz
añade nuevas funciones
Cada mejora te hará más fuerte como desarrollador. ¡Buena suerte en tu viaje! 🚀
Puedes descargar el código fuente desde nuestro GitHub