基于小程序制作一个ChatGPT聊天机器人

在AI技术日新月异的浪潮中，将ChatGPT与实战开发相结合，制作一个随身携带的聊天机器人，紧贴前沿的同时稳固基础。

一、前言

1.1、什么是ChatGPT

ChatGPT（全名：Chat Generative Pre-trained Transformer），美国OpenAI 研发的聊天机器人程序 ，于2022年11月30日发布。ChatGPT是人工智能技术驱动的自然语言处理工具，它能够通过理解和学习人类的语言来进行对话，还能根据聊天的上下文进行互动，真正像人类一样来聊天交流，甚至能完成撰写邮件、视频脚本、文案、翻译、代码，写论文 等任务。

1.2、什么是文本完成

文本完成是一项语言处理任务，涉及生成部分给定文本序列的缺失部分。这是一种文本生成任务，在该任务中，模型被迅速地给出不完整的文本，并被要求基于上下文生成缺失的文本。例如，如果提示“今天天气真的很好”，文本完成模型可以生成接下来的几句话，例如“我想我要去公园散步。阳光明媚，微风习习。”文本完成的目标是生成连贯、语法正确的文本，并延续原始提示的含义和上下文。文本完成模型使用机器学习算法来学习文本数据中的模式和关系，允许它们生成与给定提示一致的新文本。这些模型可以在大型文本语料库上进行训练，并针对特定任务进行微调，例如生成对话响应和完成句子、段落或文章。文本完成是各种应用程序的宝贵工具，包括聊天机器人、内容生成和具有自动完成功能的文本编辑器。

标注：前言内容引用于百度百科及知乎

二、API

2.1、ChatGPT官网申请API所需要的key

官网地址点此访问
注册的流程是免费的，网上也有很多注册的教程，这里不再一一赘述，当然也可以直接去购物平台购买；
注册并登录后，右上角点击Personal，在菜单中点击Create new sccret key进行创建key的操作，创建成功后将其复制保存。

2.2、搭建API

打开Visual Studio，创建新项目，选择ASP.NET Core Web应用项目模板。

填写项目名称及选择对应的保存位置，框架版本可根据开发习惯来选择。

其他信息配置时根据个人开发习惯选择即可，也可根据默认的配置来

创建一个帮助类，用于向https://api.openai.com发送请求

定义构造函数用于接收ApiKey以及响应客户端HttpClient请求认证及数据传输，这里的apiKey就是在上述步骤中所申请并保存下来的key。

定义一个方法，用于向openai.com发送请求

public async Task SendRequest(string prompt, string model, int maxTokens, bool echo)
        {
            var requestParams = new
            {
                prompt = prompt,
                model = model,
                max_tokens = maxTokens,
                echo = echo,
            };
            var requestJson = JsonSerializer.Serialize(requestParams);
            var requestContent = new StringContent(requestJson, Encoding.UTF8, "application/json");
            var response = await _httpClient.PostAsync("https://api.openai.com/v1/completions", requestContent);
            if (await response.Content.ReadAsStringAsync() is string responseJson)
            {
                return JsonSerializer.Deserialize(responseJson);
            }
            return null;
        }

2.3、创建控制器及动作方法

在Controllers文件夹新建一个控制器，并定义一个动作方法，将用户在小程序输入的文本作为接收参数。

在控制器中调用上述步骤的方法，并将你申请的key和用户参数拼接后进行传输

启动项目后可以通过在地址栏输url的方式进行测试，如果配置了swagger的可以直接在页面测试，如下图。
这里偷懒了，我用的url测试的，所以在网上找了一张图

三、小程序

3.1、页面创建

账号申请以及项目创建的步骤这里不反复啰嗦了，影响各位看官的体验，大家可以移步该专栏的其他文章看
专栏点此访问
创建一个页面样式大体如下

3.2、请求接口

给底部的文本框及按钮绑定对应的bindinput和bindtap点击事件

在点击发送的按钮时调用接口，将文本作为参数进行传输；同时在点击发送后，将用户所输入的数据渲染在页面上，因为聊天是多条的，所以可以创建一个数组进行存储，通过字段标识的方式判断哪边是ChatGPT，哪边是用户

在接口响应成功后，将数据追加到数组中，在等待的期间，可以增加一些加载动画优化用户体验