もっと
Firebase Vertex AIを使用してFlutterアプリに生成AIを統合する方法

11min
はじめに
生成AIは、今日のアプリで急速に一般的なものになりつつあります。これにより、開発者はスマートでインタラクティブな体験を作成できます。テキスト生成、コンテンツ分析、メディア作成など、Firebase Vertex AIはFlutterアプリ内でこれらの機能を実現するための非常に強力なツールセットを提供します。このチュートリアルでは、firebase_vertexaiパッケージを使用して、生成AIをFlutterアプリに取り入れる方法を説明します。このチュートリアルの終わりまでには、少なくとも、GeminiのAPIを利用してさまざまな生成AIタスクを実行できる機能的なアプリケーションを持つことができるでしょう。
前提条件
このチュートリアルを完了するには、次のものが必要です:
FirebaseアカウントとFirebaseプロジェクトが設定されていること。無料でサインアップできるのは Firebaseです。
ローカルマシンにFlutter開発環境が設定されていること。まだ設定していない場合は、Flutterインストールガイドを参照してください。
FirebaseとFlutterの基本的な知識。Firebaseが初めての場合は、Flutter用Firebaseガイドを確認してください。
ステップ1 – FirebaseとVertex AIの設定
Firebaseプロジェクトを作成する: Firebaseコンソール, 新しいプロジェクトを作成し、Vertex AIに必要なAPIを有効にします。
Firebase App Checkを有効にする: Firebaseのプロジェクト設定に移動し、すべてのAPI呼び出しがアプリから来ていることを確認するためにFirebase App Checkを有効にします。
FirebaseをFlutterアプリに追加する: FlutterアプリをFirebaseプロジェクトに接続するための指示に従います。通常、これはAndroid用のgoogle-services.jsonファイルまたはiOS用のGoogleService-Info.plistファイルをダウンロードし、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パッケージ を使用してFlutterアプリに生成AIを組み込む方法を学びました。Geminiを使用して、テキスト生成、コンテンツデータの分析、その他多くのAI駆動機能を持つアプリに優れた人工知能機能を提供できます。Firebase Vertex AIの柔軟性により、AIの応答を自由に変更できるため、インテリジェントでインタラクティブなアプリの開発に最適です。

 pub.dev でFirebase Vertex AI、FlutterFire、その他のFlutterパッケージを確認してください。コーディングを楽しんでください！
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterでBack4appを使用してデータ処理を行う方法：List.generateの利用
FlutterのCompletersをBack4appのバックエンドと一緒に使用する方法