muhdaliyan/zeer

Objetivo

Generar imágenes profesionales y de alta calidad utilizando los modelos Imagen 4 de Google e integrarlas sin problemas en proyectos web, aplicaciones o flujos de trabajo creativos. Guarda automáticamente las imágenes generadas en el directorio adecuado del proyecto.

Capacidades

Generación de Imágenes

• Generar imágenes fotorrealistas a partir de descripciones de texto
• Crear logotipos, ilustraciones y gráficos para sitios web
• Generar hero images, fondos y activos visuales
• Soporte para múltiples relaciones de aspecto (1:1, 4:3, 16:9, 9:16)
• Generar de 1 a 4 imágenes por solicitud
• Salida de alta resolución con marca de agua SynthID

Integración

• Guardar imágenes automáticamente en directorios del proyecto
• Generar nombres de archivo adecuados según el contenido
• Crear activos de imagen para proyectos web (HTML, React, etc.)
• Organizar imágenes en estructuras de carpetas lógicas

Estilos Soportados

• Fotografía (retratos, paisajes, fotos de productos)
• Ilustraciones (arte digital, bocetos, pinturas)
• Logotipos y materiales de marca
• Elementos de UI y fondos
• Estilos artísticos históricos (impresionismo, art déco, etc.)

Procedimiento

Cuando el Usuario Solicita un Sitio Web/Proyecto con Imágenes

1. Identificar Necesidades de Imagen

   • Analizar los requisitos del proyecto
   • Determinar qué imágenes se necesitan (hero, logo, iconos, fondos)
   • Preguntar al usuario si desea imágenes generadas por IA usando Imagen

2. Confirmar la Generación de Imágenes

   • Presentar la opción: "¿Te gustaría que genere imágenes personalizadas usando el modelo Imagen AI de Google?"
   • Si el usuario acepta, proceder con la generación
   • Si el usuario rechaza, usar imágenes de marcador de posición u omitir

3. Generar Imágenes

   • Crear prompts detallados y específicos basados en el contexto del proyecto
   • Usar relaciones de aspecto adecuadas para cada caso de uso
   • Generar imágenes usando la herramienta generate_image

4. Guardar e Integrar

   • Guardar imágenes en el directorio del proyecto (ej.: nombre-sitio-web/imagenes/)
   • Usar nombres de archivo descriptivos (ej.: hero-background.png, logo.png)
   • Actualizar el código HTML/CSS/React para que haga referencia a las imágenes generadas
   • Proporcionar las rutas de las imágenes en el código

Solicitudes Directas de Generación de Imágenes

Cuando el usuario solicita directamente generar una imagen:

1. Entender los Requisitos

   • Extraer el tema, estilo y contexto de la solicitud del usuario
   • Determinar la relación de aspecto adecuada
   • Aclarar cualquier detalle ambiguo

2. Crear un Prompt Detallado

   • Construir un prompt exhaustivo siguiendo las mejores prácticas de Imagen
   • Incluir tema, contexto, estilo y modificadores de calidad
   • Mantener los prompts claros y descriptivos

3. Generar y Guardar

   • Usar la herramienta generate_image con el prompt elaborado
   • Guardar en el directorio adecuado
   • Mostrar al usuario la ruta de la imagen guardada

Guías de Prompt para Imagen

Estructura del Prompt

[Estilo] de [Tema] [Contexto/Fondo] [Detalles Adicionales]

Prompts de Fotografía

• Comenzar con "Una foto de..." o "Una fotografía de..."
• Agregar detalles de cámara: "retrato 35mm", "gran angular 10mm", "lente macro 60mm"
• Incluir iluminación: "hora dorada", "iluminación dramática", "luz natural"
• Agregar tipos de película: "película blanco y negro", "film noir", "polaroid"

Prompts de Ilustración

• Especificar el estilo artístico: "arte digital", "pintura a la acuarela", "boceto a lápiz"
• Hacer referencia a movimientos artísticos: "estilo impresionista", "art déco", "minimalista"
• Agregar modificadores de calidad: "altamente detallado", "profesional", "galardonado"

Prompts de Logotipos

• Usar formato: "Un logotipo [estilo] para una empresa [industria] sobre un fondo de color sólido. Incluye el texto [nombre]."
• Estilos: minimalista, moderno, tradicional, geométrico, abstracto
• Mantener el texto en menos de 25 caracteres

Modificadores de Calidad

Agrega estos para mejores resultados:

• "altamente detallado"
• "profesional"
• "galardonado"
• "alta resolución"
• "fotorrealista"
• "calidad 4K"

Relaciones de Aspecto

Elige según el caso de uso:

• 1:1 (Cuadrado) - Redes sociales, imágenes de perfil, iconos
• 4:3 (Pantalla completa) - Fotografía general, fotos de productos
• 3:4 (Retrato) - Diseños verticales, pantallas móviles
• 16:9 (Panorámico) - Hero images, banners, paisajes
• 9:16 (Retrato) - Diseños first-mobile, stories

Herramienta: generate_image

IMPORTANTE: Esta es una herramienta SIMULADA para demostración. La implementación real requiere:

1. Clave API de Google Cloud con acceso a Imagen
2. Integración con la biblioteca Python google.genai
3. Configuración adecuada de la API

Uso

generate_image(
    prompt="Un logotipo minimalista moderno para una startup tecnológica sobre un fondo azul sólido",
    aspect_ratio="1:1",
    number_of_images=1,
    output_dir="sitio-web/imagenes",
    filename="logo.png"
)

Parámetros

• prompt (obligatorio): Descripción textual detallada de la imagen
• aspect_ratio (opcional): "1:1", "4:3", "3:4", "16:9", "9:16" (por defecto: "1:1")
• number_of_images (opcional): 1-4 (por defecto: 1)
• output_dir (opcional): Directorio donde guardar las imágenes (por defecto: "generated_images")
• filename (opcional): Nombre de archivo personalizado (por defecto: generado automáticamente)

Ejemplos

Ejemplo 1: Hero Image de un Sitio Web

Usuario: "Crea una landing page para una cafetería"

IA: "Crearé una landing page para tu cafetería. ¿Te gustaría que genere una hero image personalizada usando Imagen AI de Google?"

Usuario: "Sí, por favor"

IA: [Genera imagen con prompt]
"Una fotografía profesional de un interior acogedor de cafetería, iluminación cálida, mesas de madera, máquina de espresso al fondo, atmósfera acogedora, relación de aspecto 16:9"

[Guarda en cafeteria/imagenes/hero-background.jpg]
[Actualiza HTML para usar la imagen]

Ejemplo 2: Generación de Logotipo

Usuario: "Genera un logotipo para mi aplicación de fitness llamada FitTrack"

IA: [Genera con prompt]
"Un logotipo minimalista moderno para una empresa de fitness sobre un fondo de color sólido. Incluye el texto FitTrack. Formas geométricas, enérgico, profesional"

[Guarda en generated_images/fittrack-logo.png]

Ejemplo 3: Múltiples Activos

Usuario: "Construye un sitio web de portafolio y genera imágenes para él"

IA: "Crearé tu sitio web de portafolio. ¿Te gustaría que genere imágenes personalizadas (fondo hero, marcador de posición de foto de perfil, miniaturas de proyectos) usando Imagen AI?"

Usuario: "Sí, genéralas"

IA: [Genera múltiples imágenes]
1. Fondo hero: "Patrón geométrico abstracto, moderno, profesional, colores apagados, 16:9"
2. Miniatura de proyecto 1: "Ilustración tecnológica minimalista, líneas limpias, azul y blanco, 4:3"
3. Miniatura de proyecto 2: "Mockup de diseño creativo, interfaz moderna, profesional, 4:3"

[Guarda todas en portafolio/imagenes/]
[Actualiza HTML/CSS con referencias a las imágenes]

Mejores Prácticas

1. Siempre Pedir Permiso - Antes de generar imágenes, preguntar si el usuario desea imágenes generadas por IA
2. Prompts Contextualizados - Adaptar los prompts al estilo y propósito del proyecto
3. Relaciones de Aspecto Adecuadas - Elegir relaciones que se ajusten al caso de uso
4. Nombres de Archivo Descriptivos - Usar nombres claros y semánticos (hero-bg.png, no image1.png)
5. Estructura Organizada - Guardar imágenes en directorios lógicos (imagenes/, activos/, etc.)
6. Calidad Ante Todo - Usar modificadores de calidad para resultados profesionales
7. Iterar si es Necesario - Si el usuario no está satisfecho, refinar el prompt y regenerar

Integración con Proyectos Frontend

Al construir sitios web con esta habilidad:

1. Crear primero el directorio de imágenes
2. Generar imágenes antes de escribir HTML/CSS
3. Usar rutas relativas en el código: <img src="imagenes/hero.jpg">
4. Agregar texto alternativo describiendo la imagen generada
5. Considerar imágenes responsivas con múltiples tamaños

Limitaciones

• Imagen solo admite prompts en inglés
• El texto en las imágenes está limitado a 25 caracteres
• Las imágenes generadas incluyen la marca de agua SynthID
• Requiere acceso a la API de Google Cloud
• Se aplican límites de velocidad según el nivel de API

Notas

Esta habilidad funciona mejor cuando se combina con:

• Habilidad frontend-design para la creación completa de sitios web
• Habilidad code-helper para la configuración del proyecto
• Habilidad file-operations para organizar activos