はじめに
2024年2月16日 (JST)、Googleは、DartやFlutterでGeminiなどを扱えるGoogle AI Dart SDKを発表しました。
早速、このSDKを使ってGeminiとチャットできるアプリを作ってみました！(リリースはしてません。)
Google AI Dart SDKの詳細については、こちらの記事を見てください！
API Keyの取得
Google AI StudioでAPI Keyを取得します。
無料で取得できます。
Flutterプロジェクトの作成
Flutter 3.19以上、Dart 3.3以上が必要になります。
最新のFlutterをインストール後、プロジェクトを作成します。
asdf install flutter 3.19.0
flutter create google_ai_dart_sdk_sample
パッケージの追加
google_generative_aiパッケージを追加します。
flutter pub add google_generative_ai
これで、準備が整いました！
UI無しで試してみる
まずは、UI無しで試してみます。
API Keyは、dart-defineで実行時にセットしています。
import 'package:flutter/material.dart';
import 'package:google_ai_dart_sdk_sample/screens/app.dart';
import 'package:google_generative_ai/google_generative_ai.dart';
void main() async {
const apiKey = String.fromEnvironment('API_KEY');
final model = GenerativeModel(
model: 'gemini-pro',
apiKey: apiKey,
);
const prompt = '猫ミームについて一文で簡潔に教えてください';
final content = [Content.text(prompt)];
final response = await model.generateContent(content);
print('結果: ${response.text}');
runApp(const App());
}
flutter run --dart-define=API_KEY=[YOUR_API_KEY]
以下のような結果が出力されました。
めちゃくちゃ簡単に実装できました！
結果: 猫の面白い行動や表情を捉えた画像や動画で、インターネット上で広く共有され、サブカルチャーや言語の一部となっている。
チャットUIで試してみる
UIを追加して、チャット形式で会話できるようにしていきます。
パッケージの追加
簡単にチャット機能が実装できる以下のパッケージを追加します。
flutter pub add flutter_chat_ui flutter_chat_types
コードを書いていく
import 'package:flutter/material.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:flutter_chat_types/flutter_chat_types.dart';
import 'package:flutter_chat_ui/flutter_chat_ui.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:google_generative_ai/google_generative_ai.dart';
const ai = User(id: 'gemini');
const user = User(id: 'user');
class HomeScreen extends HookWidget {
const HomeScreen({super.key});
Widget build(BuildContext context) {
final chat = useState<ChatSession?>(null);
final messages = useState<List<types.Message>>([]);
void addMessage(User author, String text) {
final timeStamp = DateTime.now().millisecondsSinceEpoch.toString();
final message = types.TextMessage(
author: author,
id: timeStamp,
text: text,
);
messages.value = [message, ...messages.value];
}
Future<void> onSendPressed(PartialText text) async {
addMessage(user, text.text);
final content = Content.text(text.text);
try {
final response = await chat.value?.sendMessage(content);
final message = response?.text ?? 'エラーが発生しました';
addMessage(ai, message);
} on Exception catch (err) {
final isOverloaded = err.toString().contains('overloaded');
final message = isOverloaded
? '混雑しています。しばらくしてからもう一度お試しください。'
: 'エラーが発生しました';
addMessage(ai, message);
}
}
useEffect(() {
const apiKey = String.fromEnvironment('API_KEY');
final model = GenerativeModel(
model: 'gemini-pro',
apiKey: apiKey,
);
chat.value = model.startChat();
return null;
}, [],);
return Scaffold(
body: Chat(
user: user,
messages: messages.value,
onSendPressed: onSendPressed,
),
);
}
}
実行してみる
完成しました🎉
さいごに
SDKを使うことで、とても簡単にGeminiとチャットできるアプリを作ることができました。
みなさんもぜひ試してみてください！
今回実装したコードは以下のリポジトリにあります。
Discussion