使用Flutter和OpenAI构建ChatGPT移动应用程序 | 轻松集成Flutter和OpenAI的ChatGPT

在本文中，我们将讨论如何使用OpenAI API将chatGPT集成到Flutter中。

? 视频教程

⚒️ 依赖关系

? 实施

为了使用OpenAI的所有服务，他们已经提供了API访问权限给开发者。因此，通过在OpenAI上创建一个账户，我们可以访问大部分公共API，包括聊天模型、语音转文字、图片处理等。

在本文中，我们将尝试使用一个名为“/completions API”的API，帮助我们在flutter应用程序中本地构建ChatGPT。

→ #1在OpenAI上创建一个账户

为了使用OpenAI的任何API，我们都需要在API调用期间进行授权的秘密钥匙。因此，为了获取这些密钥，我们需要在OpenAI中创建一个帐户。

因此，让我们前往https://openai.com/，通过注册来创建一个帐户。

→ #2生成秘密密钥

创建账户后，我们需要生成密钥。我们可以在OpenAI账户的个人资料部分找到生成密钥的选项。

→ #3构建UI组件

我们的应用程序界面将更像下面所示?。我们有一个简单的应用栏和一个包含画布的主体，用于显示从AI模型中获取的数据，以及位于底部中心的textformfield。

Scaffold(
      backgroundColor: const Color(0xff343541),
      appBar: AppBar(
        title: const Text(
          'Flutter and ChatGPT',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: const Color(0xff343541),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          PromptBldr(responseTxt: responseTxt),
          TextFormFieldBldr(
              promptController: promptController, btnFun: completionFun),
        ],
      ),
    );

在TextFormFieldBldr中，我们将btnFun作为completionFun传递，这将对openai API进行真正的http调用，函数如下。

  completionFun() async {
    setState(() => responseTxt = 'Loading...');

    final response = await http.post(
      Uri.parse('https://api.openai.com/v1/completions'),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ${dotenv.env['token']}'
      },
      body: jsonEncode(
        {
          "model": "text-davinci-003",
          "prompt": promptController.text,
          "max_tokens": 250,
          "temperature": 0,
          "top_p": 1,
        },
      ),
    );

    setState(() {
      _responseModel = ResponseModel.fromJson(response.body);
      responseTxt = _responseModel.choices[0]['text'];
      debugPrint(responseTxt);
    });
  }
}