我正在参加「掘金·启航计划」

🐄

ChatGPT现在是真火呀，只听别人说ChatGPT怎么怎么滴！怎么怎么🐄，

咱也紧跟潮流注册一个玩玩，体验了一番下来确实不错，虽然说过程有一点小曲折，但是确实强大，不仅能联系上下文，还能及时纠错更正

我问它：js有几种数据类型

后面我再问他第七种，第八种，它也能答出来

还有一个最大的痛点就是限制国内访问，注册个账号就够麻烦的了，而且还时不时的限制ip登录

前几天尝试着把它接入到微信，看网上很多人的微信都被封了，当天晚上我就赶紧把它从微信上撤下来了

于是我根据OpenAI的官方文档，徒手撸了一个简单的 人工智障AI机器人🤖

前期规划

准备使用极其先进的 Vite+React+TypeScript+Ant+Less 技术栈搭建我的智能项目

页面我也不准备设计多复杂，采用和ChatGPT一样的UI风格和思路

⚓ 有一个输入框

⚓ 一个提问按钮

⚓一个显示回答的地方

开始搭建项目

用Vite创建React项目,再选择下TypeScript

npm create vite@latest

再安装一下Less

npm i less -D

安装运行

// 安装
npm install

// 运行
npm run dev

内容也不多直接再App.tsx里写结构和逻辑，在App.less里写样式

开干

定义一个inputValue值用于接收输入的值；answerList用于存储提问和回答的内容

const [inputValue, setInputValue] = useState<string>("")
const [answerList, setAnswerList] = useState<answerListType[]>([])

点击按钮时调用 openai的方法，我们先安装一下 openai

npm install openai

声明一个 quize 方法用于请求接口

const { Configuration, OpenAIApi } = require("openai");
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const response = await openai.createCompletion({
  model: "text-davinci-003",
  prompt: "JS有几种数据类型？",
  max_tokens: 600,
  temperature: 0.5,
});

// 打印 API 返回的结果
console.log(response.data.choices[0].text);

OPENAI_API_KEY 需要通过View API keys 页面生成。

其中的参数也可以自定义

createCompletion: 是自动完成，它跟官网的回话方式一致；
max_tokens: 表示最大的令牌数量，可以理解为返回的字符数量，大多数内容 2048 内，当然 max_tokens 返回接口的速度越慢。
temperature: 0-1 之间，参数表示生成文本中的随机性或不可预测性程度。较高的值将产生更具创造性和多样性的输出，而较低的值会产生更可预测和重复的文本。

这样就可以获取到问题的答案，把问题和问题的答案放到 answerList数组里，然后在页面上遍历显示

可以看出来我们打印的结果

回答的问题也没有换行，可以在样式上添加一个

white-space: pre-wrap

这个时候还有一个问题：请求答案时会有一定的延时，这个时候页面是空白的

我们可以给它一个loading和提示，等答案请求回来再重新渲染页面

/*
* type:是类型 用于分辨是问题还是答案
* content:是内容，用于显示的内容
* isFished：1代表请求完成，0代表内容还没有完成
*/
setAnswerList([...answerList,{
    type:'question',
    content:inputValue,
    isFinshed: 1,
},{
    type: 'answer',
    content: '正在思考',
    isFinshed: 0,
}])

好了这就算基本完成了，一个人工智障机器人🤖算是完成了，完整的代码放到GitHub上了

GitHub地址：这里有完整的代码

徒手撸了一个ChatGPT人工智障机器人🤖免登录、免注册、免代理

🐄

前期规划

开始搭建项目

开干