Más
Cómo integrar la IA generativa en tu aplicación Flutter usando Firebase Vertex AI

11min
Introducción
La IA generativa se está convirtiendo rápidamente en algo normal en las aplicaciones de hoy; permite a los desarrolladores crear experiencias inteligentes e interactivas. Ya sea generación de texto, análisis de contenido o creación de medios, Firebase Vertex AI ofrece un conjunto de herramientas bastante poderoso para realizar estas funcionalidades dentro de tu aplicación Flutter. Te guiaremos sobre cómo llevar la IA generativa a tu aplicación Flutter utilizando el paquete firebase_vertexai en este tutorial. Al final de este tutorial, al menos, tendrás una aplicación funcional que puede acceder a la API de Gemini para realizar todo tipo de tareas de IA generativa.
Requisitos previos
Para completar este tutorial, necesitarás:
Una cuenta de Firebase y un proyecto de Firebase configurados. Puedes registrarte gratis en Firebase.
Un entorno de desarrollo Flutter configurado en tu máquina local. Sigue la guía de instalación de Flutter si aún no lo has configurado.
Conocimientos básicos de Firebase y Flutter. Si eres nuevo en Firebase, consulta la guía de Firebase para Flutter.
Paso 1 – Configuración de Firebase y Vertex AI
Crea un proyecto de Firebase: Inicia sesión en la Consola de Firebase, crea un nuevo proyecto y habilita las APIs necesarias para Vertex AI.
Habilita Firebase App Check: Navega a la configuración de tu proyecto en Firebase y habilita Firebase App Check para asegurarte de que todas las llamadas a la API provengan de tu aplicación.
Agrega Firebase a tu aplicación Flutter: Sigue las instrucciones para conectar tu aplicación Flutter a tu proyecto de Firebase. Esto generalmente implica descargar el google-services.json archivo para Android o GoogleService-Info.plist para iOS y colocarlo en el directorio correcto de tu proyecto Flutter.
Paso 2 – Agregar dependencias requeridas
Abre tu pubspec.yaml archivo y agrega las siguientes dependencias:
YAML
dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_vertexai: latest_version
dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_vertexai: latest_version
﻿
    2. Ejecuta flutter pub get para instalar las dependencias.
Paso 3 – Inicializando Firebase y Vertex AI
En lib/main.dart, importa los paquetes necesarios de Firebase:
Dart
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_vertexai/firebase_vertexai.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_vertexai/firebase_vertexai.dart';
﻿
    2. Inicializa Firebase y Vertex AI en la main función:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}
﻿
    3. En tu MyApp widget, crea una función para inicializar el modelo generativo:
Dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Generative AI with Firebase')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final result = await generateContent();
              print(result);
            },
            child: Text('Generate Content'),
          ),
        ),
      ),
    );
  }

  Future<String> generateContent() async {
    // Initialize the generative model
    final vertexAI = FirebaseVertexAI.instance;
    final generativeModel = vertexAI.getGenerativeModel(
      modelName: 'projects/YOUR_PROJECT_ID/locations/YOUR_LOCATION/models/YOUR_MODEL_NAME',
    );

    // Construct your prompt
    final prompt = VertexAITextPrompt(text: 'Write a story about a magic backpack');

    // Optionally, you can set generation configurations
    final generationConfig = VertexAIGenerationConfig(
      temperature: 0.7,
      responseMimeType: 'application/json',
    );

    // Generate content
    final response = await generativeModel.generateContent(
      prompt: prompt,
      generationConfig: generationConfig,
    );

    return response.generatedText;
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Generative AI with Firebase')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final result = await generateContent();
              print(result);
            },
            child: Text('Generate Content'),
          ),
        ),
      ),
    );
  }

  Future<String> generateContent() async {
    // Initialize the generative model
    final vertexAI = FirebaseVertexAI.instance;
    final generativeModel = vertexAI.getGenerativeModel(
      modelName: 'projects/YOUR_PROJECT_ID/locations/YOUR_LOCATION/models/YOUR_MODEL_NAME',
    );

    // Construct your prompt
    final prompt = VertexAITextPrompt(text: 'Write a story about a magic backpack');

    // Optionally, you can set generation configurations
    final generationConfig = VertexAIGenerationConfig(
      temperature: 0.7,
      responseMimeType: 'application/json',
    );

    // Generate content
    final response = await generativeModel.generateContent(
      prompt: prompt,
      generationConfig: generationConfig,
    );

    return response.generatedText;
  }
}
﻿
Reemplaza 'YOUR_PROJECT_ID', 'YOUR_LOCATION', y 'YOUR_MODEL_NAME' con los detalles reales de tu proyecto. La generateContent función construye un prompt, lo envía al modelo de Vertex AI y devuelve el contenido generado.
Paso 4 – Construcción de Prompts y Manejo de Respuestas
Creando un Prompt Personalizado: Puedes crear prompts más complejos combinando diferentes tipos de datos (texto, imágenes, audio, etc.). Por ejemplo:
Dart
final prompt = VertexAITextPrompt(
  text: 'Summarize the following text: "The history of AI is fascinating..."',
);
final prompt = VertexAITextPrompt(
  text: 'Summarize the following text: "The history of AI is fascinating..."',
);
﻿
    2. Manejo de Archivos Grandes: Si tu prompt involucra archivos grandes, almacena los archivos en Firebase Storage e incluye la URL de Cloud Storage del archivo en tu solicitud.
Dart
final prompt = VertexAITextPrompt(
  text: 'Analyze the content of this document',
  fileUrl: 'gs://your-bucket-name/your-file.pdf',
);
final prompt = VertexAITextPrompt(
  text: 'Analyze the content of this document',
  fileUrl: 'gs://your-bucket-name/your-file.pdf',
);
﻿
    3. Respuestas en Streaming: Si deseas transmitir la salida de la IA a medida que esté disponible, puedes usar el generateContentStream método:
Dart
await for (final partialResponse in generativeModel.generateContentStream(prompt: prompt)) {
  print(partialResponse.generatedText);
}
await for (final partialResponse in generativeModel.generateContentStream(prompt: prompt)) {
  print(partialResponse.generatedText);
}
﻿
Paso 5 – Pruebas y Despliegue de la Aplicación
Ejecuta tu aplicación usando flutter run y prueba las características de generación de IA. Deberías ver el contenido generado impreso en la consola.
Una vez que hayas confirmado que todo funciona, puedes desplegar tu aplicación o continuar mejorándola con características adicionales.
Conclusión
En este tutorial, aprendiste cómo incluir IA Generativa en tu Aplicación Flutter usando el Paquete Firebase Vertex AI. Puedes usar Gemini para potenciar excelentes capacidades de Inteligencia Artificial en una aplicación para generación de texto, análisis de datos de contenido y muchas más características impulsadas por IA. Debido a la flexibilidad de Firebase Vertex AI, puedes cambiar a voluntad las respuestas de la IA, lo que lo hace perfecto para desarrollar aplicaciones inteligentes e interactivas.

Consulta pub.dev para Firebase Vertex AI, FlutterFire y otros paquetes de Flutter. ¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Cómo utilizar el manejo de datos en Flutter usando List.generate con Back4app
Cómo usar Completers de Flutter con un backend en Back4app