今天一觉醒来收到了邮件，OpenAI 释出了 ChatGPT 模型的 API。
之前开放的只有 GPT-3 的模型，它只能完成 Completion 式的会话，现在，我们终于可以进行 Chat 式会话了！
接口使用
首先马上去学习了一下如何通过 API 使用这个模型，发现他对于会话式只需要使用你自己的 APIKey 来调用接口，同时携带上下文的数据即可。
一个请求消息体的例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
{
"model": "gpt-3.5-turbo-0301",
"messages": [
{
"role": "user",
"content": "你好，我在使用 API 调用你！"
},
{
"role": "assistant",
"content": "\n\n您好，我是 AI 语言模型，很高兴能够为您服务！请问您需要哪些 API 调用呢？"
},
{
"role": "user",
"content": "我想问问你可以调用网络 API 吗？"
}
]
}
|
接口调用结果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
{
"id": "chatcmpl-6pogkJ74asx7oUZHuWN6SxxbGHN1o",
"object": "chat.completion",
"created": 1677807594,
"model": "gpt-3.5-turbo-0301",
"usage": {
"prompt_tokens": 84,
"completion_tokens": 78,
"total_tokens": 162
},
"choices": [
{
"message": {
"role": "assistant",
"content": "是的，我可以调用网络 API。网络 API 是通过互联网提供服务的接口，可以让您的应用程序访问和处理远程服务器上的数据或功能。请告诉我您想要调用哪个网络 API，我会尽力帮助您。"
},
"finish_reason": "stop",
"index": 0
}
]
}
|
是不是很清晰？
实际调用还是类似于单次会话调用，只是需要把上下文的消息都传递进去，上下文模拟了一次对话，使用 role 来标识出不同的角色，content 来标识出不同的内容。
然后就可以得到 ChatGPT 根据上下文给出的结果了。
搭建一个简易的 ChatGPT
那么，知道了如何使用 API，我们就可以开始搭建一个简易的 ChatGPT 了。
技术选型
首先，我们需要选择一下技术栈，这里我选择了 Next.js + TypeScript。
因为调用 API 需要个人的 APIKey，为了保护这个 APIKey，我们需要在服务端进行调用，所以我们需要一个服务端渲染的框架。用户调用服务端的接口，服务端使用 APIKey 调用 OpenAI 的接口，然后把结果返回给用户。
搭建项目
首先，我们需要创建一个 Next.js 项目，这里我使用的是 Next.js 13 版本，因为并不是生产环境，所以体验一下最新技术。
根据 Next.js Beta 官网 说明使用脚手架创建项目：
1
|
npx create-next-app@latest --experimental-app
|
然后根据提示一步一步创建好项目，然后使用 IDE 打开项目。
开始开发
首先 pnpm i 安装依赖，然后 pnpm dev 启动项目，会发现模版里面已经写了一些东西了。
这里我们可以保留原先的框架内容，做几件事情就好：
/app/globals.css 中仅保留 html 和 body 的样式/app/pages.tsx 中 Home 组件中 main 中的所有内容删掉/app/api/ 目录清空
然后就可以进行我们的应用开发了。
创建 API
我们在 /app/api/ 目录下创建一个 postMsg 文件夹，然后在 postMsg 文件夹下创建 route.ts 文件，这个文件就是我们的 API。在 url 中访问 http://127.0.0.1:3000/api/postMsg 就会访问到这个文件内的逻辑。
在 route.ts 中写入如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
export async function POST(request: Request) {
// 解析出请求体中的 messages 字段
const { messages } = await request.json();
// 按照 OpenAI 要求构造请求体
const data = {
messages,
model: 'gpt-3.5-turbo-0301', // 使用 ChatGPT 模型
};
// 使用你的 API_KEY 调用 OpenAI 的接口
const response = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `YOUR_API_KEY`,
},
body: JSON.stringify(data),
});
// 解析出 OpenAI 返回的结果并返回给应用
const json = await response.json();
return new Response(JSON.stringify(json));
}
|
这样我们就完成了一个简单的 API 了。在这个简易的应用里也只需要这一个 API。
创建页面
这里我们创建一个简单的页面，用来展示我们的应用。这个就比较简单了，写写样式就好了。这里我主要说一下逻辑。
有一个点需要注意一下，因为做得很简单，交互都在 Home 组件中，所以我们需要使用客户端组件，需要在文件顶部添加 'use client'。
本地会话缓存
因为简易应用，自己使用，所以我们需要在前端保存会话的数据，这里我保存在了 localStorage 中。如果要实现 ChatGPT 的多会话功能，那么我们肯定需要同时存储多组会话数据，这里给出我的数据结构：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// localStorage 中保存两个数据，一个是会话列表，一个是当前会话的 key
// 当前会话的 key
currentKey: string;
// 会话列表
type RecordItem = {
content: string;
role: Role;
};
type RecordList = {
[key: string]: RecordItem[];
};
|
这里就可以通过 currentKey 来获取当前会话的数据，然后通过 RecordList 来获取所有会话的数据了。
初始化会话
在页面初始化的时候，我们需要初始化会话，这里我们需要判断 localStorage 中是否有会话数据，如果没有，那么我们就创建一个新会话，如果有，那么我们就使用 localStorage 中的数据。
为了统一管理 localStorage 中的数据，我们需要定义一些常量：
1
2
3
|
// 会话列表的 key
const currentKeyKey = 'currentKey';
const recordListKey = 'recordList';
|
这里开始所有代码都在 Home 组件中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
// 声明两个变量接收 localStorage 中的数据
let lsCurrentKey = '';
let lsRecordList: RecordList = {};
// 这里是为了防止打包时在服务端渲染时报错，需要放在这个判断中
if (typeof window != 'undefined') {
// 如果是第一次使用，那么我们就创建一个新的会话，生成一个随机的 key 并存入 localStorage
lsCurrentKey = window.localStorage.getItem(currentKeyKey) ?? '';
if (!lsCurrentKey) {
lsCurrentKey = `${new Date().toLocaleString().split(' ')[0]}_${String(Math.random()).slice(2, 6)}`;
window.localStorage.setItem(currentKeyKey, lsCurrentKey);
}
lsRecordList = JSON.parse(window.localStorage.getItem(recordListKey) || '{}');
if (!lsRecordList[lsCurrentKey]) {
lsRecordList[lsCurrentKey] = [];
window.localStorage.setItem(recordListKey, JSON.stringify(lsRecordList));
}
}
// 然后将数据保存到 state 中进行响应式管理
const [currentKey, setCurrentKey] = useState<string>(lsCurrentKey);
const [recordList, setRecordList] = useState<RecordList>(lsRecordList);
// 这里创建了一个当前会话的 state，方便我们在渲染时使用
const [record, setRecord] = useState<RecordItem[]>(recordList[currentKey]);
|
主要逻辑
这里我们需要实现两个功能，发送消息和接收消息，同时更新 localStorage：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
// 保存到 localStorage 中的方法
const saveToLocalStorage = () => {
console.log('存入最新的记录');
window.localStorage.setItem(currentKeyKey, currentKey);
window.localStorage.setItem(recordListKey, JSON.stringify(recordList));
};
// 发送消息方法
const sendMsg = async (msg: string) => {
if (msg) {
setRecordList((prev) => {
return {
...prev,
[currentKey]: [...prev[currentKey], { role: 'user', content: msg }],
};
});
} else {
alert('请输入内容');
}
};
// 当 recordList 或者 currentKey 发生变化时，更新 record 使页面重新渲染
useEffect(() => {
saveToLocalStorage();
setRecord(recordList[currentKey]);
}, [recordList, currentKey]);
// 当 record 发生变化时，判断情况进行请求
useEffect(() => {
// 如果当前列表最后一条记录是用户发送的，就发送请求
if (record[record.length - 1]?.role === 'user') {
// 这里我实现了一个简单的 loading 效果，机器人会先展示一个思考中，然后再展示回复
setLoading(true);
console.log('请求了 ChatGPT');
// 这里为了防止在请求过程中，用户切换了会话，所以这里需要保存一下当前的 key 以便请求返回结果后存入正确的会话中
const key = currentKey;
// 发送请求，消息列表放在 body 的 messages 字段中，与 API 中的解析方法一致
fetch('/api/postMsg', {
method: 'POST',
body: JSON.stringify({ messages: record }),
cache: 'no-store',
})
.then(async (data) => {
// 根据上面提到过的 API 响应格式解析 ChatGPT 的回复数据
const json = await data.json();
const newMessage = json.choices[0].message;
// 将新的消息存入会话中
setRecordList((prev) => {
return {
...prev,
[key]: [
...prev[key],
{ role: newMessage.role, content: newMessage.content },
],
};
});
// 关闭 loading
setLoading(false);
})
.catch((err) => {
console.log(err);
});
}
}, [record]);
|
其他功能
这里还有一些其他的功能，比如切换会话，删除会话等，简单放一下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
// 生成一个随机的 key，确保当前会话列表中没有重复的 key
const generateKey = (): string => {
const key = `${new Date().toLocaleString().split(' ')[0]}_${String(
Math.random()
).slice(2, 6)}`;
if (recordList[key]) {
return generateKey();
}
return key;
};
// 创建新会话并切换到新会话
const newChat = () => {
const key = generateKey();
setRecordList((prev) => ({ ...prev, [key]: [] }));
setCurrentKey(key);
};
// 删除会话
// 这里我在会话列表中没有给当前会话提供关闭按钮，所以这里只是删除了会话，没有切换到其他会话
// 如果你给当前会话提供删除按钮，那么这里需要对 key === currentKey 的情况进行处理
const closeChat = (key: string) => {
const newRecordList = { ...recordList };
delete newRecordList[key];
setRecordList(newRecordList);
};
// 切换会话
const switchChat = (key: string) => {
setCurrentKey(key);
};
|
界面展示
以上已经实现了所有的功能，下面我们来看一下效果，相信你可以根据上面的示例和下面的效果图，很快就能实现一个聊天机器人。
当然还有不少细节我实现了但没有提，比如：
- 机器人响应是 markdown 格式，如何像上面展示出格式化数据
- 聊天室中新消息自动滚动到底部
- 会话列表适配移动端展开收起
- 机器人响应的 loading 效果（下图）
总结
因为我是给公司内部搭建的自用项目，对于样式我并没有进行太多的处理，也没有办法提供 demo 给大家试用。
但是相信你现在已经可以自己基于 ChatGPT 实现一个聊天机器人了，样式也可以根据自己的需求进行调整。
就这，拜拜～
