Zenn
💎

Gemma2 x Flutter のハンズオンに参加した

2024/12/23に公開
Google
GDG
Gemma
tech

こんにちは。tmassh です。
Google Developers Group Kwansai Advent Calendar 2024 23日目の記事になります。
本当はもっと書くつもりが、多忙にかまけて残すところ3日になってしまいました😇

さて、今日の記事ですが、先日 12/21 に開催された DevFest - Kwansai Developers Day のレポートになります。

グーグル合同会社で Technical Solutions Consultant (AI Developer Relations) を務めていらっしゃる、Jetha Chan さんに、「FlutterでオンデバイスのGemmaにチャレンジせよ！」というハンズオンセッションを持っていただきました。

私は、現地のアシスタントとして参加していました。
本日はそちらの内容について書きたいと思います！

今回のハンズオン

今回のハンズオンは、Flutter を使って Gemma2 を自身のデバイス上で動かすアプリケーションを作ってみようという内容でした。
作ってみようと言っても、60min ですので、すでにあるリポジトリをちょこっと変えるだけです。
完成品を動かしてみた様子が以下になります。

環境の準備

ハンズオンを進める前に以下を完了させる必要があります。

Flutter は、実はほとんど初めてか、前にちょっと CodeLab をやったくらいなのですが、環境設定の楽さに驚きました。
また、今回は一番小さなモデルを使いました。

ハンズオンに使用した Repository

今回はこちらのリポジトリを使用しました。
https://github.com/DenisovAV/flutter_gemma

任意の場所に Clone しておきます。

$ git clone https://github.com/DenisovAV/flutter_gemma.git

Clone したら、example/assets の下にダウンロードしたモデルを置いておきます。

コードの編集

model.bin となっている箇所を、assets フォルダの下に置いたモデル名に書き換えます。
以下が例です。なお、loadAssetModelWithProgress の引数名が fullPath となってますが assets からの相対でした。

chat_screen.dart 
...
  Future<void> _initializeModel() async {
    bool isLoaded = await FlutterGemmaPlugin.instance.isLoaded;
    if (!isLoaded) {
      await for (int progress in FlutterGemmaPlugin.instance
          .loadAssetModelWithProgress(fullPath: 'gemma2-2b-it-gpu-int8.bin')) {
        setState(() {
...
pubspec.yaml
  assets:
    - assets/gemma2-2b-it-gpu-int8.bin
    - assets/

動かしてみる

example/lib/main.dart を VS Code 上で開いて、Run Without Debugging します。
Gemma2 と対話できました！

ハンズオンに参加して

当日は Flutter の環境設定や手順のフォローなどで手一杯だったので、終わってからじっくり楽しみました。イベント会場のスペースがパンパンになるほどの人が、机でパソコンを開いて取り組む様子が印象的でした。
講演を聞くのもよいですが、みんなで手を動かすものあってこその技術イベントだなと感じました。

Flutter は初めてで、動くとやはり達成感ありますね。
もし Gemma2 と Flutter に興味がある方は一度試してみてはいかがでしょうか？

おわりに

今回のイベント、内容が非常に濃くよかったです。ハンズオンも良かったですが、他の講演も内容が濃いものばかりでした。
GDG Kwansai ではおよそ 1-2ヶ月に一回程度でイベントを実施しています。
もしご興味あれば、ぜひ次のイベントに参加してみてください！
https://gdgkwansai.connpass.com/event/334058/

Discussion