如何使用 ChatGPT 3.5 API 创建自己的智能应用？
前言
OPEN AI 的开放 API 可以说是前端开发者的福利，我们只需要调用 api，就可以创建一个智能应用， 在上一篇文章中，我们介绍了《基于 ChatGPT API 的划词翻译浏览器脚本实现》，使用的模型是 text-davinci-003 也就是文本补全模型，今天我们将使用 gpt-3.5-turbo 模型来实现一个场景化的智能应用。
OPEN AI API 介绍
自动完成 API
POST https://api.openai.com/v1/completions
以下是自动完成 API，有了 OPENAI_API_KEY 之后，我们只需要传入 prompt
const OPENAI_API_KEY = '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'
const prompt = `Translate this into Chinese:
hello world`
const res = await fetch('https://api.openai.com/v1/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
authorization: `Bearer ${OPENAI_API_KEY}`,
},
body: JSON.stringify({
model: 'text-davinci-003',
prompt,
max_tokens: 1000,
temperature: 0,
}),
})
const response = await res.json()
const result = response.choices[0].text
对话 API
POST https://api.openai.com/v1/chat/completions
由于自动补全 API 只能传入一个参数 prompt，AI 不能够理解上下文的场景，因此 gpt-3.5+ API 是为了让 AI 能够支持基于一组对话来返回数据。
在 Node.js 中可以使用以下代码来实现。
const OPENAI_API_KEY = "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";
const prompt = [...];
const res = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
authorization: `Bearer ${OPENAI_API_KEY}`,
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages,
temperature: 0.7,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
max_tokens: 500
}),
});
const response = await res.json();
const result = response.choices[0].message
以下是官网给出 messages 例子
const messages = [
{ role: 'system', content: 'You are a helpful assistant.' },
{ role: 'user', content: 'Who won the world series in 2020?' },
{ role: 'assistant', content: 'The Los Angeles Dodgers won the World Series in 2020.' },
{ role: 'user', content: 'Where was it played?' },
]
- 每一个 message 由
role和content组成。 role只能是 3 个值，system、user和assistantsystem和assistant是可选的，user是必须的。
官方提供了 playground 帮助我们创建 messages 信息。
assistant 也就是其中一次返回的数据信息。 发送的 messages 如下：
const messages = [
{
role: 'system',
content: '你是一名精通 typescript 的前端工程师，不需要解释',
},
{
role: 'user',
content:
'Convert the following JSON to typescript interface without explanation\n\n{\n "name": "Allen",\n "age": 18\n}',
},
]
比如使用上面的 messages 信息，我们就可以根据它，来创建一个 Tailwind css 代码生成器。
通过右键可以直接拷贝为 Node.js fetch 代码。
再来实现一个 JSON 转 Typescript 的例子
那么我们通过以上截图的 messages，就可以创建一个 JSON 转 Typescript 生成器。
在 Next.js 使用
接下来，我们就在 Next.js 中创建一个全栈应用。
那为什么选择使用 Next.JS 呢？
- 它是一个全栈框架，既可以写接口也可以使用 react 写前端；
- 可以很轻松部署到 verel， 让我们可以直接访问 OPENAI 的接口，摆脱网络限制。
这里我选择使用大圣老师的email-helper模板
点击 GitHub 选择 Use this Template， 创建一个自己的仓库
这个项目很简单，在 pages 目录下 api/generate.ts 用于代理请求接口。
index.tsx 也就是我们的主界面，一个按钮，一个请求，没有其他复杂逻辑。
接下来我们就根据它来创建一个智能的Tailwind CSS 代码生成器
1、首先将 messages 改成以上截图中的 message
2、然后将需要生成的变量存到 state 中，我们就可以实现如下界面
点击生成代码就可以 让 ai 帮我们写代码了。
这个界面，有些单调，可以在这个页面上列一些常用的组件，那么也可以直接使用 chatGPT 来生成。
将 GPT 回答直接转换成 JSON 数据
将数据渲染到页面中，就可以生成快捷标签了
接下来，再将 Tailwind css 的颜色，作为我们的变量，同样使用 GPT 来生成数据
用同样的方式，转化成 JSON，拷贝到我们的代码中。
最后一步，我们需要实现一个预览效果，这样的话，就可以所见即所得，根据效果，直接拷贝想要的代码。
小结
本文介绍了 openai 的 api 使用方法，以及如何使用 openai 的 playground 生成需要的 messages 信息。并且通过一个 Next.js 实战例子，结合 ChatGPT 开发了一个 Tailwind CSS 代码生成器。
最后
贴一下文本的代码仓库和预览地址
代码仓库：https://github.com/maqi1520/openai-helper
如果对你有帮助，记得给个三连，感谢你的阅读。
本文正在参加「金石计划」
