Flutter × ChatGPTを使ってみよう

＼スニダンを開発している SODA inc.の Advent Calendar 13 日目の記事です!!!／

はじめに

初めまして、Flutterアプリエンジニアの一木です。
みなさんChatGPT使ってますか？めちゃくちゃ便利ですよね？自分のアプリに組み込んでみたいですか？組み込んでみたいですよね！

この記事では、ChatGPTのAPIを用いてFlutter製アプリ内でどのように実装するかの手順を紹介します。

流れはシンプル

1. OpenAI公式でAPIシークレットキーを取得する
2. Flutterにchat_gpt_sdkを組み込む
3. FlutterでOpenAIのAPIを叩く

となります。

OpenAI公式でシークレットキーを取得する

OpenAI公式
https://platform.openai.com/docs/overview

APIシークレットキーを発行する
現時点ではサインイン後するに発行できるようになってます
https://platform.openai.com/api-keys

[Create new secret key]をクリック

任意の名前をつけて、[Create secret key]をクリック

sk-で始まるシークレットキーをコピーする
このキーは２度と表示できないので必ずメモること！
もしコピーを忘れたら削除してもう一度作り直してくださいね

コピーは完了しましたか？
これでOpenAI側の準備はOK!!

Flutter側の実装に入ろう

今回の開発環境

flutter: 3.16.0-stable
dart: 3.2.0

導入パッケージ
非公式のSDKですがとても使いやすいです

https://pub.dev/packages/chat_gpt_sdk

chat_gpt_sdk: ^2.2.5

まずはchat_gpt_sdkをインポートし

import 'package:chat_gpt_sdk/chat_gpt_sdk.dart';

つづいてOpenAIのインスタンスを取得する
ここで先ほどコピーしたシークレットキーをtokenにセットします
下記の例は、baseOptionに20秒のタイムアウトを設定しました

const token = 'sk-xxxx-secret-key';
final openAI = OpenAI.instance.build(
  token: token,
  baseOption: HttpSetup(receiveTimeout: const Duration(seconds: 20)),
);

今回は、コスパのいいchatGPT3.5を使って実装し、
シンプルにメッセージを送ったら、ChatGPTがその結果を返す処理を書いてみます。

String content = 'Flutterでテキストに色をつける方法を簡単に教えて';

final response = await openAI.onChatCompletion(
  request: ChatCompleteText(
    model: GptTurboChatModel(),
    messages: [
      Messages(
        role: Role.system,
        content: content,
      )
    ],
    maxToken: 100,
  ),
);

String text1 = response?.choices.last.message?.content ?? '';

print(text1);
// テキストに色をつけるには、...

responseはこのようなものが帰ってきました

{
	id: chatcmpl-1UZtgWLgiMs4red2p4Gqy4sq0Clfa,
	object: chat.completion, 
	created: 1702298513, 
	choices: [
		{
			index: 0,
			message: {
				role: assistant, 
				content: テキストに色をつけるには、, // 省略
				function_call: null
			}, 
			finish_reason: length
		}
	], 
	usage: {
		prompt_tokens: 30, 
		completion_tokens: 100, 
		total_tokens: 130
	}
}

response?.choices.last.message?.content の値だけ欲しいのでここを出力

すこし解説
onChatCompletion()とは、Future型のChatGPTの結果を返す関数
GptTurboChatModel()とは、指定するとchatGPT3.5を使うよというクラス
maxTokenとは、簡単に言うとAPIの最大リソース消費量で、数字が大きければ１度に長文が返せる（らしい）

実際にFlutter画面で実行した様子がこれ

うーん、意外と通信が長いですね・・・

次はStream型にして、通信速度を早めてみます。
onChatCompletionの代わりにonChatCompletionSSEを使用して単語ごとに結果を受け取ることができるようになります

String content2 = 'Flutterで端末サイズを取得する方法を簡単に教えて';
String text2 = '';

Stream<ChatResponseSSE> stream = openAI.onChatCompletionSSE(
  request: ChatCompleteText(
    model: GptTurboChatModel(),
    messages: [
      Messages(
        role: Role.system,
        content: content2,
      )
    ],
    maxToken: 100,
  ),
);
stream.listen((event) {
  final text = event.choices?.last.message?.content ?? '';
  text2 = text2 + text;
});

単語ごとに通知されるため、結果の出が早くユーザを待たせにくい特徴があります。

実際にFlutter画面で実行した様子がこれ

ChatGPTの公式アプリのような挙動になり、レスポンスが速くなりました！

おわり

今回は簡単にChatGPTをFlutterに導入する方法を紹介させていただきました。
ほかにもこのパッケージでChatGPTアシスタントや開発者が学習させたデータで返答する方法などもあります。

アプリに手軽に導入できるとても良いきっかけになれば幸いです！