PROJECT: CITYCRAFT AI
Aplicación web impulsada por IA que transforma cualquier ciudad del mundo en un diorama isométrico 3D estilo "clay render", combinando datos meteorológicos en tiempo real con generación de imágenes mediante Google Gemini 3 Pro.
OVERVIEW
Citycraft AI es una experiencia interactiva que fusiona inteligencia artificial generativa con datos del mundo real. El usuario introduce el nombre de cualquier ciudad y la aplicación obtiene automáticamente las condiciones meteorológicas actuales (temperatura, clima, día/noche) a través de OpenWeatherMap. Con esta información, Gemini AI identifica los landmarks icónicos de la ciudad y genera un diorama isométrico 3D único con estética "clay render" al estilo de juegos móviles premium. El resultado es una postal visual interactiva que muestra la ciudad como una miniatura flotante, con efectos visuales que reflejan el clima real: ciudades de noche con ventanas iluminadas, lluvia, nieve, o días soleados. Además, el usuario puede refinar la imagen generada mediante prompts adicionales (ej: "añade flores de cerezo", "hazlo atardecer").
ARCHITECTURE
Frontend: React 19 + TypeScript con Vite como bundler, diseño glassmorphism con Tailwind-like custom CSS. APIs Integradas: OpenWeatherMap API - Obtención de clima en tiempo real (temperatura, condiciones, sunrise/sunset) Google Gemini 2.5 Flash - Identificación de landmarks icónicos de ciudades con Google Search grounding Google Gemini 3 Pro Image Preview - Generación de imágenes isométricas en alta resolución (hasta 4K) Google Gemini 2.5 Flash Image - Edición de imágenes mediante prompts de refinamiento Flujo de datos: Input usuario → API Weather → Gemini (landmarks) → Gemini Image Gen → Display con overlay SVG
STACK
OUTCOME
✅ Generación de arte isométrico único para cualquier ciudad del mundo ✅ Integración multi-modelo con 3 APIs de Gemini diferentes (text, search, image) ✅ Datos meteorológicos en tiempo real que influyen en la generación visual ✅ Sistema de refinamiento iterativo de imágenes mediante IA ✅ UX fluida con estados de carga animados y transiciones suaves ✅ Diseño responsive premium con estética glassmorphism