🎨 Mockup Master

Aplicación web interactiva para la generación de mockups profesionales a partir de imágenes propias o diseños creados con inteligencia artificial.

Desarrollada por Juan Guillermo Rivera Berrío, esta herramienta permite transformar logos o imágenes en escenarios realistas como camisetas, mugs, dispositivos, publicidad exterior y más.

---

🚀 Características principales

• 📤 Carga de imágenes

  • Arrastrar y soltar (drag & drop)
  • Subida desde archivo local
  • Carga mediante URL

• 🤖 Generación de imágenes con IA

  • Creación de diseños desde texto (prompt)
  • Selección de estilos visuales
  • Uso de múltiples modelos de IA (Pollinations)

• 🧩 Creación de mockups

  • Amplia variedad de plantillas (ropa, objetos, publicidad, etc.)
  • Integración automática del diseño en el escenario
  • Personalización adicional mediante prompts

• 🔍 Comparador interactivo

  • Vista tipo slider (antes vs después)
  • Comparación visual en tiempo real

• 💾 Exportación

  • Descarga de imagen original
  • Descarga del mockup generado

• 🌗 Interfaz adaptable

  • Modo claro / oscuro
  • Diseño responsive

• 🔄 Reinicio completo

  • Limpieza del estado de la aplicación con un solo clic

---

🧱 Estructura del proyecto

📁 mockup-master/ ├── index.html # Estructura principal de la aplicación ├── style.css # Estilos y temas (light/dark) └── script.js # Lógica de la aplicación

---

⚙️ Funcionamiento

1. Autenticación

• El usuario introduce una API Key de Pollinations.
• También puede obtenerla mediante el botón integrado.

2. Entrada de diseño

Se puede:

• Subir una imagen
• Pegar una URL
• Generar un diseño con IA

3. Visualización

• La imagen se muestra en pantalla
• Se habilitan acciones de descarga y edición

4. Generación de mockup

• Selección de plantilla (ej: camiseta, mug, laptop, etc.)
• Selección de modelo de IA
• Prompt adicional opcional
• Generación del mockup final

5. Comparación

• Vista interactiva con slider:
  • Imagen original vs mockup generado

---

🧠 Tecnologías utilizadas

• HTML5 – estructura semántica
• CSS3 – diseño moderno con variables y tema dinámico
• JavaScript (Vanilla) – lógica completa sin frameworks
• Pollinations API – generación de imágenes con IA
• Catbox (Litterbox API) – hosting temporal de imágenes

---

🖼️ Tipos de mockups disponibles

Incluye múltiples categorías como:

• 👕 Ropa (camisetas, hoodies)
• ☕ Objetos (mugs, botellas, tarjetas)
• 💻 Dispositivos (laptops, smartphones)
• 🏢 Publicidad (vallas, buses, paraderos)
• 🏠 Decoración (cuadros, almohadas, mantas)
• 🌴 Escenarios exteriores (playa, picnic, mobiliario)