ChatGPTをFlutterで使う方法をChatGPTに聞いた結果

本記事はFlutter大学アドベントカレンダー24日目の記事です！

https://qiita.com/advent-calendar/2022/flutteruniv

話題のChatGPTをFlutterで使いたいなと思って、そのやり方をChatGPTに聞いてみました。

結論としては、違うAPIになっちゃったんですが、結果勉強になったので、その結果を共有します。

ChatGPTを期待された方すみませんw

ChatGPTに聞いてみた

dio packageを指定した理由は、私たちFlutter大学が公開しているFlutterの教科書というzenn本の教材でAPIを叩く時にdioというpackageを使っていて、それに合わせたいなと思ったからです。

一応返ってきた内容を全部貼ります。

ChatGPTの回答

To call the GPT API from a Flutter app using the dio package, you will need to import the package and create an instance of the Dio class. Here is an example of how you can do this:

import 'package:dio/dio.dart';

String apiKey = "YOUR_API_KEY";
String model = "text-davinci-002";
String prompt = "The quick brown fox jumps over the lazy dog.";

Dio dio = Dio();
dio.options.headers = {
  "Content-Type": "application/json",
  "Authorization": "Bearer $apiKey"
};

try {
  // Make a request to the GPT API
  Response response = await dio.post(
    "https://api.openai.com/v1/completions",
    data: {
      "model": model,
      "prompt": prompt,
      "max_tokens": 1024,
      "n": 1,
      "stop": null,
      "temperature": 0.5,
    },
  );

  // Parse the response
  String message = response.data["choices"][0]["text"];
  print(message);
} catch (e) {
  print(e);
}

This code will create an instance of the Dio class and set the appropriate headers for the request. It will then make a POST request to the GPT API using the dio.post() method, passing in the request body as data. The response from the API will be a JSON object containing the generated text, which will be parsed and stored in the message variable. You can then use the message variable in your Flutter app as desired.

I hope this helps! Let me know if you have any questions or need further assistance.

もう一つ聞いてみた

なんかいい感じのFlutterでdioを使ってAPIを叩くコードが出てきました。この回答を見ると、API Keyが必要そうだったので、その方法も聞いてみました。

ChatGPTの回答

To get an API key for OpenAI, you will need to sign up for an account on the OpenAI API website. Here is a step-by-step guide on how to do this:

Visit the OpenAI API website at https://beta.openai.com/signup.
Click the "Sign up for free" button.
Fill out the form with your email address, password, and any other required information.
Click the "Create account" button.
Check your email for a message from OpenAI with the subject "Welcome to OpenAI API Beta".
Click the "Activate your account" button in the email.
Follow the instructions to set up your account and activate your API key.
Once you have created your account and activated your API key, you can use it to access the OpenAI API. Be sure to keep your API key private and secure, as it allows access to your OpenAI API account.

I hope this helps! Let me know if you have any questions or need further assistance.

ChatGPTに従ってAPI Keyを取得してみた

ChatGPTが https://beta.openai.com/signup に行けと言っていたので、そこに行ってサインインすると以下のような画面になりました。

しかし急に雑になるChatGPT

Follow the instructions to set up your account and activate your API key.
Once you have created your account and activated your API key, you can use it to access the OpenAI API. Be sure to keep your API key private and secure, as it allows access to your OpenAI API account.

↑サインアップまでは丁寧だったのに、肝心のAPIKeyの取得方法は書いてないというw

結局右上のプロフィールアイコンのところ押したら、APIKeyの取得できそうなところがあったので、取得できました。

完成系がこちら

結局、ChatGPTに教えてもらったコードを参考に、自分で書いてみたら以下みたいになりました。全部のコードを教えてくれたわけではないから、やっぱFlutterを分かってないとキツそう。

コード

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

class OpenAPIPage extends StatefulWidget {
  const OpenAPIPage({Key? key}) : super(key: key);

  @override
  _OpenAPIPageState createState() => _OpenAPIPageState();
}

class _OpenAPIPageState extends State<OpenAPIPage> {
  String answerText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextFormField(
          decoration: const InputDecoration(
            fillColor: Colors.white,
            filled: true,
            hintText: 'テキストを入力',
          ),
          onFieldSubmitted: (text) {
            print(text);
            requestChatGPT(text);
          },
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(answerText),
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
  }

  void requestChatGPT(String text) async {
    String apiKey = "あなたのAPIKey";
    String model = "text-davinci-002";
    Dio dio = Dio();
    dio.options.headers = {"Content-Type": "application/json", "Authorization": "Bearer $apiKey"};

    try {
      // Make a request to the GPT API
      Response response = await dio.post(
        "https://api.openai.com/v1/completions",
        data: {
          "model": model,
          "prompt": text,
          "max_tokens": 1024,
          "n": 1,
          "stop": null,
          "temperature": 0.5,
        },
      );

      // Parse the response
      String message = response.data["choices"][0]["text"];
      print(message);
      setState(() {
        answerText = message;
      });
    } catch (e) {
      print(e);
    }
  }
}

スクショ

サンプルコード

こちらに入ってます！

https://github.com/kboy-silvergym/pixabay

結論

結局叩いたAPIはテキスト補完をしてくれるものでした。

期待してたAIがなんでも答えてくれるみたいなやつではなかったのですが、OpenAIが提供しているText系のAPIの1つを使うことができたので勉強になりました。

詳しくは、以下のOpenAPIのドキュメントをご覧ください。

https://beta.openai.com/docs/guides/completion/introduction

もうちょっと色々試して可能性を模索したいと思います！