如何在您的 Flutter 应用中使用 Firebase Vertex AI 集成生成式人工智能

11min
介绍
生成性人工智能正在迅速成为当今应用程序中的常态；它允许开发人员创建智能和互动的体验。无论是文本生成、内容分析还是媒体创作，Firebase Vertex AI 提供了一套相当强大的工具，用于在您的 Flutter 应用中实现这些功能。在本教程中，我们将引导您如何使用 firebase_vertexai 包将生成性人工智能引入您的 Flutter 应用。到本教程结束时，至少您将拥有一个可以利用 Gemini 的 API 执行各种生成性人工智能任务的功能应用程序。
先决条件
要完成本教程，您需要：
一个 Firebase 账户和一个设置好的 Firebase 项目。您可以在 Firebase 注册免费账户。
在您的本地机器上设置 Flutter 开发环境。如果您还没有设置，请按照 Flutter 安装指南。
对 Firebase 和 Flutter 的基本知识。如果您是 Firebase 新手，请查看 Firebase for Flutter 指南。
步骤 1 – 设置 Firebase 和 Vertex AI
创建 Firebase 项目: 登录到 Firebase 控制台, 创建一个新项目，并启用 Vertex AI 所需的 API。
启用 Firebase 应用检查: 在 Firebase 中导航到您的项目设置，启用 Firebase 应用检查，以确保所有 API 调用都来自您的应用。
将 Firebase 添加到您的 Flutter 应用: 按照说明将您的 Flutter 应用连接到您的 Firebase 项目。这通常涉及下载 google-services.json 文件用于 Android 或 GoogleService-Info.plist 文件用于 iOS，并将其放置在 Flutter 项目的正确目录中。
步骤 2 – 添加所需的依赖项
打开你的 pubspec.yaml 文件并添加以下依赖项：
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. 运行 flutter pub get 来安装依赖项。
步骤 3 – 初始化 Firebase 和 Vertex AI
在 lib/main.dart, 导入必要的 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. 在 main 函数中初始化 Firebase 和 Vertex AI：
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

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

  runApp(MyApp());
}
﻿
    3. 在你的 MyApp 小部件中，创建一个函数来初始化生成模型：
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;
  }
}
﻿
将 'YOUR_PROJECT_ID', 'YOUR_LOCATION', 和 'YOUR_MODEL_NAME' 替换为你的实际项目细节。 generateContent 函数构建一个提示，将其发送到 Vertex AI 模型，并返回生成的内容。
步骤 4 – 构建提示和处理响应
创建自定义提示: 你可以通过组合不同类型的数据（文本、图像、音频等）来创建更复杂的提示。例如：
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. 处理大文件: 如果你的提示涉及大文件，请将文件存储在 Firebase Storage 中，并在请求中包含文件的 Cloud Storage URL。
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. 流式响应: 如果您想在AI的输出可用时进行流式传输，可以使用 generateContentStream 方法:
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);
}
﻿
步骤 5 – 测试和部署应用程序
使用 flutter run 运行您的应用程序并测试AI生成特性。您应该在控制台中看到生成的内容打印出来。
一旦您确认一切正常，您可以部署您的应用程序或继续增强其附加功能。
结论
在本教程中，您学习了如何使用 Firebase Vertex AI Package 在您的Flutter应用程序中包含生成性AI。您可以使用Gemini为文本生成、内容数据分析和许多其他AI驱动的功能提供出色的人工智能能力。由于Firebase Vertex AI的灵活性，您可以随意更改AI响应，使其非常适合开发智能和互动的应用程序。

请查看 pub.dev 以获取Firebase Vertex AI、FlutterFire和其他Flutter包。祝您编码愉快！
上一个
如何在 Flutter 中使用 List.generate 进行数据处理（Data Handling），并与 Back4app 配合使用
下一个
如何在 Back4app 上使用 Flutter Completers 与后端结合