More
Firebase Vertex AIを使用してFlutterアプリに生成AIを統合する方法
11 分
はじめに 生成aiは、今日のアプリで急速に一般的なものになりつつあります。これにより、開発者はスマートでインタラクティブな体験を作成できます。テキスト生成、コンテンツ分析、メディア作成など、firebase vertex aiはflutterアプリ内でこれらの機能を実現するための非常に強力なツールセットを提供します。このチュートリアルでは、firebase vertexaiパッケージを使用して、生成aiをflutterアプリに取り入れる方法を説明します。このチュートリアルの終わりまでには、少なくとも、geminiのapiを利用してさまざまな生成aiタスクを実行できる機能的なアプリケーションを持つことができるでしょう。 前提条件 このチュートリアルを完了するには、次のものが必要です firebaseアカウントとfirebaseプロジェクトが設定されていること。無料でサインアップできるのは firebase https //firebase google com です。 ローカルマシンにflutter開発環境が設定されていること。まだ設定していない場合は、 flutterインストールガイド https //flutter dev/docs/get started/install を参照してください。 firebaseとflutterの基本的な知識。firebaseが初めての場合は、 flutter用firebaseガイド https //firebase flutter dev/docs/overview を確認してください。 ステップ1 – firebaseとvertex aiの設定 firebaseプロジェクトを作成する firebaseコンソール https //console firebase google com/ , 新しいプロジェクトを作成し、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 」ファイルを開き、次の依存関係を追加します dependencies flutter sdk flutter firebase core latest version firebase vertexai latest version 2\ 「 flutter pub get 」を実行して依存関係をインストールします。 ステップ 3 – firebase と vertex ai の初期化 「 lib/main dart 」で、必要な firebase パッケージをインポートします import 'package\ flutter/material dart'; import 'package\ firebase core/firebase core dart'; import 'package\ firebase vertexai/firebase vertexai dart'; 2\ 「 main 」関数で firebase と vertex ai を初期化します void main() async { widgetsflutterbinding ensureinitialized(); await firebase initializeapp(); runapp(myapp()); } 3\ あなたの myapp ウィジェットで、生成モデルを初期化する関数を作成します 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 – プロンプトの構築とレスポンスの処理 カスタムプロンプトの作成 異なるタイプのデータ(テキスト、画像、音声など)を組み合わせることで、より複雑なプロンプトを作成できます。例えば final prompt = vertexaitextprompt( text 'summarize the following text "the history of ai is fascinating "', ); 2\ 大きなファイルの処理 プロンプトに大きなファイルが含まれる場合は、ファイルをfirebase storageに保存し、リクエストにファイルのcloud storage urlを含めます。 final prompt = vertexaitextprompt( text 'analyze the content of this document', fileurl 'gs\ //your bucket name/your file pdf', ); 3\ ストリーミングレスポンス aiの出力を利用可能になると同時にストリーミングしたい場合は、次の generatecontentstream メソッドを使用できます 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パッケージを確認してください。コーディングを楽しんでください!