Integración de Gemini Nano con Angular: IA Local en el Navegador
Tiempo estimado de lectura: 5 min
Ideas clave
- Gemini Nano puede ejecutarse on-device en Chrome mediante la Prompt API / LanguageModel API experimental, evitando enviar datos a la nube.
- Recomienda abstraer el acceso a window.LanguageModel en un servicio Angular inyectable y exponer estados reactivos con Signals.
- Implementa fallback a la nube (Vertex AI, OpenAI, etc.) si el modelo on-device no está disponible.
- Prepárate para descargas iniciales de pesos, impacto en recursos del cliente y cambios en la API; ofrece métricas y UX claras.
Tabla de contenidos
- Integración de Gemini Nano con Angular: IA Local en el Navegador
- Ideas clave
- Resumen rápido (lectores con prisa)
- Qué necesitas activar y por qué importa
- Arquitectura recomendada en Angular
- Patrones de uso: Resúmenes y Smart Paste
- Estrategia híbrida: fallback a la nube
- Limitaciones y decisiones técnicas
- Buenas prácticas de implementación
- FAQ
Resumen rápido (lectores con prisa)
Gemini Nano permite ejecutar modelos de lenguaje on-device en Chrome mediante una Prompt API experimental. Úsalo para operaciones sensibles a la privacidad y bajas latencias; diseña un servicio Angular que abstraiga window.LanguageModel, exponga estados con Signals y ofrezca fallback a la nube.
Qué necesitas activar y por qué importa
Gemini Nano llega al frontend vía la Prompt API / LanguageModel API que Chrome está probando. Es experimental: hay que habilitar flags y aceptar descargas iniciales del modelo en el cliente. Hazlo solo en entornos controlados.
Puntos prácticos
- Abre chrome://flags y habilita las flags relacionadas con Prompt API (busca “Prompt API” / “on-device model”).
- Revisa chrome://components y chrome://on-device-internals para estado y métricas.
- La primera ejecución puede descargar pesos (depende de la build). Avisa al usuario con un estado de “descarga en progreso”.
Referencias útiles
- Documentación de Prompt API (Chrome)
- chrome://flags | chrome://components | chrome://on-device-internals
Arquitectura recomendada en Angular
Regla número uno: no uses window directamente en componentes. Abstrae todo en un servicio inyectable que gestione disponibilidad, descarga y sesión. Usa Signals para exponer estados reactivos y facilitar la integración con componentes.
global.d.ts (tipos mínimos)
declare global {
interface Window {
LanguageModel?: {
availability(options?: any): Promise;
create(options?: any): Promise;
};
}
}
export {}; Servicio Angular (esqueleto)
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class GeminiNanoService {
isAvailable = signal<'checking'|'available'|'unavailable'>('checking');
isReady = signal(false);
private session: any = null;
constructor() {
this.checkAvailability();
}
async checkAvailability() {
if (!window.LanguageModel) {
this.isAvailable.set('unavailable');
return;
}
try {
const status = await window.LanguageModel.availability({
expectedInputs:[{type:'text'}], expectedOutputs:[{type:'text'}]
});
this.isAvailable.set(status === 'available' ? 'available' : 'unavailable');
if (this.isAvailable() === 'available') await this.init();
} catch {
this.isAvailable.set('unavailable');
}
}
private async init() {
this.session = await window.LanguageModel!.create({
// monitor: callback para progreso de descarga si aplica
});
this.isReady.set(true);
}
async prompt(text: string, opts?: any) {
if (!this.session || !this.isReady()) throw new Error('Gemini Nano no listo');
return await this.session.prompt(text, opts);
}
}Usa APP_INITIALIZER si quieres bloquear rutas hasta que la disponibilidad esté verificada.
Patrones de uso: Resúmenes y Smart Paste
Dos patrones repetibles son útiles: resúmenes client-side y Smart Paste para estructurar texto del portapapeles. Úsalos cuando la privacidad y la latencia local sean prioritarias.
1) Resúmenes client-side
- Ideal para emails, tickets y documentación sensible.
- Prompt corto, instrucciones claras y límites (p. ej. “tres bullets”).
const prompt = `Resume en 3 viñetas técnicas, sin ejemplos ni explicaciones: ${longText}`;
const summary = await geminiService.prompt(prompt);2) Smart Paste (estructurar texto del portapapeles)
Intercepta ClipboardEvent, manda el texto al modelo y pide JSON estricto. Valida con JSON.parse y aplica patchValue en FormGroup.
Ejemplo de prompt:
Extrae nombre, cargo, empresa y teléfono del texto y responde SOLO con JSON válido.
Texto: "..."Consejo: limpia la respuesta de bloques de código (“`json) antes de parsear.
Estrategia híbrida: fallback a la nube
La API es experimental y puede no estar disponible en todos los usuarios. Diseña un fallback:
- Servicio expone promptLocal() y promptCloud().
- Lógica: si isReady() → local; si no → cloud (Vertex AI, OpenAI, etc.).
- Mantén la misma interfaz para consumidores.
async prompt(input:string){
return this.isReady() ? this.promptLocal(input) : this.promptCloud(input);
}Limitaciones y decisiones técnicas
No es magia. Decide por criterios claros:
- Privacidad vs Capacidad: on-device evita enviar datos, pero modelos locales suelen ser más limitados en razonamiento y factualidad.
- Recursos del cliente: descarga inicial y uso de RAM/GPU. Ofrece UI de progreso y posibilidad de desactivar la característica.
- Inestabilidad: la API puede cambiar; encapsula y prueba en Canary/Dev builds.
Buenas prácticas de implementación
- Aisla feature flags para habilitar/deshabilitar en producción.
- Expón métricas de adopción y errores (no datos sensibles).
- Documenta UX: indica cuándo la funcionalidad requiere descarga y ofrece opción “Usar IA en la nube”.
- Testea en dispositivos representativos de tus usuarios (PCs y Chromebooks, no asumas móviles).
La integración de Gemini Nano con Angular no es un truco de marketing: es una arquitectura pragmática para reducir latencia, mejorar privacidad y sacar tareas concretas del backend. Implementa la abstracción, prevé el fallback y deja el modelo decidir cuándo merece la pena correr on-device. Esto apenas comienza: prueba en controlado, mide impacto y ajusta el balance on-device / cloud.
Dominicode Labs ofrece un espacio para experimentar con integraciones de IA aplicada y workflows relacionados; puede servir como referencia para pruebas controladas y métricas de adopción.
FAQ
- ¿Qué es Gemini Nano en el contexto del navegador?
- ¿Qué flags y páginas de Chrome debo revisar?
- ¿Cómo debo abstraer la API en Angular?
- ¿Cuándo usar fallback a la nube?
- ¿Qué impacto tiene en recursos del cliente?
- ¿Cómo validar respuestas estructuradas como JSON?
Es una implementación on-device de modelos de lenguaje accesible mediante la Prompt API / LanguageModel API experimental de Chrome, que permite ejecutar inferencia local en el navegador sin enviar datos a la nube.
Habilita las flags relacionadas con Prompt API en chrome://flags y revisa estado y métricas en chrome://components y chrome://on-device-internals.
Crea un servicio inyectable que gestione disponibilidad, descarga y sesión; no uses window directamente en componentes. Exponer estados con Signals facilita la integración reactiva y el bloqueo de rutas con APP_INITIALIZER si es necesario.
Implementa fallback cuando isReady() sea false o cuando el dispositivo no soporte la ejecución on-device. Mantén la misma interfaz para que consumidores no distingan origen (local vs cloud).
Puede requerir descarga inicial de pesos y uso adicional de RAM/GPU. Ofrece UI de progreso, opción para desactivar la característica y prueba en dispositivos representativos.
Pide al modelo que responda SOLO con JSON válido, limpia posibles bloqueos de código (“`json) y usa JSON.parse para validar antes de aplicar patchValue en formularios.
