Este artículo técnico describe la migración de una aplicación de edición de fotos desde el modelo Gemini 2.5 Flash Image al modelo Gemini 3 Pro Image, conocido como Nano Banana Pro, integrando una arquitectura segura basada en Firebase y aprovechando las nuevas capacidades de Gemini 3 Pro Image como el pensamiento interno y la herramienta Google Search para grounding.
Beneficios principales de la migración: mejores renders de imagen, soporte de datos en tiempo real, compatibilidad con múltiples idiomas y renderizado correcto de caracteres como chino tradicional, además de acceso a procesos de razonamiento interno y grounding web para mejorar la fidelidad y trazabilidad de los resultados.
Requisitos previos tecnologicos: Angular 21, TailwindCSS, Node 24, modelo Gemini 3 Pro Image, servicios Firebase incluyendo Firebase AI Logic, Cloud Functions, Remote Config y Firebase Local Emulator Suite, y las herramientas firebase-tools instaladas globalmente.
Uso de Firebase Remote Config: Remote Config sirve para alojar dinámicamente la metadata del modelo evitando hardcodear valores en el cliente. Parámetros como el nombre del modelo, thinkingBudget, includeThoughts y la región de Vertex AI se almacenan en Remote Config. Al cambiar valores en Remote Config la app no requiere redeploy, solo reinicio o nueva activación tras fetchAndActivate. Remote Config ofrece métodos para convertir cadenas a números y booleanos, por ejemplo asNumber y asBoolean.
Construcción del Firebase Config y reCAPTCHA Site Key mediante Cloud Functions: en lugar de empaquetar variables de entorno en la build cliente, una Cloud Function publica el Firebase Config y la reCAPTCHA site key. La función valida variables del entorno, usa restricciones de referrer y origen, aplica CORS y cachea la respuesta por una hora para reducir latencia. App Check es la primera línea de defensa mientras que las restricciones de referrer y CORS añaden una capa adicional contra uso indebido de las claves públicas.
Validación y carga de variables: la función comprueba apiKey, appId, messagingSenderId, recaptchaSiteKey, projectId y storageBucket, y responde con un objeto que contiene la configuración necesaria para inicializar Firebase en el cliente. En Node 24 se puede usar process.loadEnvFile para cargar .env en entorno de funciones, y en versiones anteriores se recurre a dotenv.
Inicialización en Angular: la app realiza un fetch al endpoint de la función para obtener el Firebase Config y la reCAPTCHA site key antes del arranque usando provideAppInitializer. Con esos datos se inicializa el Firebase App, se configura App Check con ReCaptchaEnterpriseProvider, y se hace fetchAndActivate de Remote Config para activar parámetros dinámicos.
Servicio de configuración: un ConfigService inyectable almacena firebaseApp y remoteConfig en memoria para que otros proveedores y servicios los reutilicen sin volver a inicializar.
Proveedor del modelo Gemini 3 Pro Image: mediante un provider Angular se construye el modelo generativo leyendo valores dinámicos desde Remote Config como geminiImageModelName, vertexAILocation, includeThoughts y thinkingBudget. Se crean los modelParams incluyendo generationConfig con thinkingConfig y la herramienta googleSearch para grounding, y se instancia el backend Vertex AI para obtener el GenerativeModel listo para generar contenido de imagen.
Lógica de servicio para generación de imágenes: un FirebaseService gestiona la comunicación con el modelo. El flujo típico consiste en resolver las partes de imagen, enviar prompt y partes al modelo, recibir la respuesta generada y extraer inlineDataParts con la imagen en base64, el resumen del pensamiento, uso de tokens y metadata de grounding.
Post procesamiento y extracción de imagen: las respuestas incluyen inlineData con mimeType y data base64 que se convierten en cadenas data URL para render en la UI. El servicio también construye un resumen del pensamiento generado por el modelo y recopila las citaciones y consultas web obtenidas por el grounding.
Construcción de citaciones y grounding: la metadata de grounding contiene groundingSupports y groundingChunks que permiten extraer fuentes web en formato URL, consultas de búsqueda web y contenido renderizado que puede servir como sugerencias de Google Search para validar o enriquecer la salida del modelo.
Control y métricas de tokens: se calcula el uso de tokens con totalTokenCount, promptTokenCount, outputTokenCount y thoughtTokenCount. En Gemini 3 Pro el pensamiento está activado por defecto por lo que thoughtTokenCount suele ser distinto de cero, mientras que en modelos anteriores este valor podía faltar y se normaliza a cero para evitar errores.
Componentes de Angular para UI: se implementan componentes para mostrar token usage, grounding y thought summary. TokenUsageComponent muestra Input Tokens, Output Tokens, Thought Tokens y Total Tokens. GroundingComponent renderiza citaciones, search queries y sugerencias de Google Search, aplicando DomSanitizer para contenido HTML seguro. ThoughtSummaryComponent presenta los pensamientos del modelo como HTML marcado y permite seleccionar diferentes resúmenes si existen varias alternativas.
Buenas prácticas de seguridad y despliegue: proteger las claves públicas con restricciones de origen, usar App Check, validar entradas en Cloud Functions y ejecutar las funciones en una región cercana para reducir latencia. Emplear Remote Config para cambiar parámetros en caliente y mantener la build cliente libre de valores sensibles que requieran redeploy.
Conclusión: la migración a Gemini 3 Pro Image con Firebase permite mejorar calidad de imagen, soporte multilingüe, capacidades de razonamiento y grounding web, y facilita la mantenibilidad mediante Remote Config y Cloud Functions. El coste en latencia por obtener la configuración desde la función es generalmente mínimo frente a las ventajas operativas y de seguridad.
Sobre Q2BSTUDIO: en Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en inteligencia artificial, ciberseguridad, servicios cloud y soluciones de inteligencia de negocio. Ofrecemos desarrollo de software a medida y aplicaciones multiplataforma adaptadas a las necesidades de cada cliente, y ponemos a disposición experiencia en agentes IA, ia para empresas y automatización de procesos. Si buscas potenciar tus proyectos con inteligencia artificial visita nuestros servicios de Inteligencia Artificial y para soluciones de software a medida revisa nuestros servicios de desarrollo de aplicaciones y software a medida.
Palabras clave y servicios: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi son áreas que dominamos para ofrecer soluciones completas que integran AI, seguridad y escalabilidad en la nube.
Recursos recomendados y siguientes pasos: integrar Remote Config y Cloud Functions para manejar configuración dinámicamente, habilitar App Check con reCAPTCHA Enterprise para proteger el uso del modelo, instrumentar métricas de token y grounding para observabilidad, y diseñar componentes UI que presenten pensamiento y citaciones de forma transparente para el usuario final.
.jpg)
.jpg)
.jpg)