🤖

Gemini APIなるものを使ってみた

2024/03/09に公開

Flutter

📕Overview

そもそもGeminiとはなんだ?

Gemini エコシステムは、
Google の最も有能な AIを表します。
当社の Gemini モデルは、テキスト、画像、オーディオ、ビデオ、コード全体でシームレスに推論できるマルチモダリティ向けにゼロから構築されています。

Geminiとアプリが対話することができるAPIが提供されていて、Chatができるアプリを作ることもできます。

こちらのサイトで、API KEYを取得しておいてください。
https://ai.google.dev/

ルビーDogさんの動画が参考になりましたね。

🧷summary

使用するには、DartのSDKが必要らしい!

https://ai.google.dev/tutorials/dart_quickstart?hl=ja&_gl=111nojyk_upMQ.._gaMTEwMDE2NzAwLjE3MDk5ODM3MzQ._ga_P1DBVKWT6V*MTcwOTk4MzczNC4xLjAuMTcwOTk4MzczNC4wLjAuMA..

私は公式ドキュメントを見てこのソースコードって、スコープ {} の中にないと使えないのだなと気づいて、メソッドの中に書いたりして、プロンプトを入力できるアプリを作りましたね。
Future<void>が今の所適切かな。

Viewとロジックを切り分けようと思ったが、View側で状態の管理もしないといい感じにできないなと思って、StatefulWidgetにしました。AsyncNotifierの方が良かったかな....

全体のコード:

import 'package:flutter/material.dart';
import 'package:google_generative_ai/google_generative_ai.dart';

const apiKey = "-ここにAPIキーを貼り付ける-";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // リクエスト送信に必要なモデルとAPIキーを指定
  final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey);

  // レスポンスとして渡されたテキストを入れる変数
  var responseText = "";

  // プロンプトを入力するためのコントローラー
  final promptController = TextEditingController();

  // レスポンスが返ってくるまでローディングを表示するための変数
  bool isLoading = false;

  // リクエストを送信するメソッド
  Future<void> _request() async {
    // レスポンスが返ってくる前は、ローディングを表示する
    setState(() {
      isLoading = true;
    });
    // プロンプトを取得
    final prompt = promptController.text;
    final content = [Content.text(prompt)];
    final response = await model.generateContent(content);
    if (response.text != null) {
      responseText = response.text ?? "response.textがnullです";
    } else {
      responseText = "エラーが発生しました!";
    }
    // レスポンスが返ってきたら、ローディングを非表示にする
    setState(() {
      isLoading = false;
    });
  }

  // コントローラーを破棄
  @override
  void dispose() {
    promptController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const SizedBox(height: 20),
            SizedBox(
              width: 300,
              height: 50,
              child: TextField(
                controller: promptController,
                decoration: InputDecoration(
                  labelText: 'プロンプトを入力してください',
                  // 角丸にする
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: _request,
              child: const Text('送信'),
            ),
            const SizedBox(height: 40),
            isLoading
                ? const CircularProgressIndicator()
                : Expanded(
                    child: SingleChildScrollView(
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(responseText),
                      ),
                    ),
                  ),
          ],
        ),
      ),
    );
  }
}

ジャコウネコのフンについて聞いてみますか笑

🧑‍🎓thoughts

今回は、GeminiというGoogleのAIを使って、プロンプトを入力して対話するアプリを作ってみました。最近こんなアプリ多いですよね。僕も気になってついつい試してみました。皆さんもGemini使ってみてください。

ブラック企業ってプロンプトを入力すると例外処理が発生してアプリがクラッシュしたことありますね。なんでだろう。聞いちゃいけないのかな😇

📕Overview

🧷summary

🧑‍🎓thoughts

Discussion