人工智能(AI)最近一直在掀起波澜,ChatGPT的Chat completions彻底改变了互联网。
你可以用它做很多事情:起草电子邮件或其他文章,回答关于一组文件的问题,创建对话代理,给你的软件一个自然语言界面,辅导各种科目,翻译语言,等等。本教程使用Chat completions功能建立一个AI聊天应用程序的基本知识,使每个程序员都能轻松上手。它并不像看起来那样艰难。在你跟随本教程时,你会看到这一点。
您将学到以下内容:
本教程将以 gpt-3.5-turbo
模型为基础。
前提条件
本教程需要JavaScript、CSS、React和Node.js的基本知识。你还需要一个OpenAI平台的账户,chatGPT就在这个平台上。它是免费的,所以你可以在这里创建一个。
如何用Node.js创建一个CLI聊天AI应用程序
本节将重点介绍创建一个只在终端使用Node.js运行的聊天应用程序。
首先,为该项目创建一个目录:
mkdir nodejs-chatgpt-tutorial
导航到该文件夹:
cd nodejs-chatgpt-tutorial
初始化该项目:
npm init -y
这将创建一个 package.json
文件来跟踪项目的细节
在该文件中添加以下一行代码:
"type": "module"
这将使你能够使用ES6模块的导入语句。用以下命令安装OpenAI:
npm i openai
创建一个文件,所有的代码都在其中。命名为 index.js
:
touch index.js
从OpenAI模块导入 Configuration
和 OpenAIApi
,从 readline
模块导入readline:
import { Configuration, OpenAIApi } from "openai"; import readline from "readline";
像这样建立OpenAI的配置:
const configuration = new Configuration({ organization: "org-0nmrFWw6wSm6xIJXSbx4FpTw", apiKey: "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", });
这段代码创建了一个 Configuration
对象的新实例。在它里面,你将输入你的 organization
和 apiKey
的值。你可以在设置中找到你的组织的详细信息,在API密钥中找到你的apiKey信息。如果你没有现有的API Key,你可以创建它。在配置后输入以下代码,创建一个新的OpenAI API实例:
const openai = new OpenAIApi(configuration);
你将在整个项目中使用它。
输入下面的代码来测试 createChatCompletion
函数:
openai .createChatCompletion({ model: "gpt-3.5-turbo", messages: [{ role: "user", content: "Hello" }], }) .then((res) => { console.log(res.data.choices[0].message.content); }) .catch((e) => { console.log(e); });
这段代码调用 createChatCompletion
函数,触发一个端点( https://api.openai.com/v1/chat/completions
)。该函数接受一个参数对象(使用中的chatGPT model
和用户与AI之间的 messages
数组。我们将在下一节中研究如何使用 messages
数组来保存聊天历史并改进应用程序)。每个消息都是一个对象,包含 role
(即谁发送了该消息。如果是来自人工智能,该值可以是助理,如果是来自人类的消息,该值可以是用户)和 content
(发送的信息)。最后,代码打印了来自人工智能的响应( res.data.choice[0].message.content
)。用这个命令在终端运行该文件:
node index
这将在几秒钟后返回人工智能的响应。这就是创建聊天机器人的全部内容!但通过请求用户输入信息而不是将信息内容硬编码到代码中,使应用程序更具互动性将是很有帮助的。readline模块将在这方面帮助我们。要使其具有互动性,请删除你最后输入的代码,并添加以下内容:
const userInterface = readline.createInterface({ input: process.stdin, output: process.stdout, });
这段代码在终端创建了一个用户界面,允许用户输入他们的问题。
接下来,用下面的代码提示用户输入一个信息:
userInterface.prompt();
最后,输入以下代码:
userInterface.on("line", async (input) => { await openai .createChatCompletion({ model: "gpt-3.5-turbo", messages: [{ role: "user", content: input }], }) .then((res) => { console.log(res.data.choices[0].message.content); userInterface.prompt(); }) .catch((e) => { console.log(e); }); });
在上面的代码中
- 当用户输入东西并点击
Enter
时,上面的代码会触发一个回调函数。 - 它将用户输入的任何内容作为
input
。 -
input
的内容现在被用作content
。 - 在显示人工智能的响应后,在
then
块中提示用户输入另一条信息。
查看GitHub上的所有代码。运行该文件并与人工智能进行对话。它将看起来像下面的图片:
与AI的CLI聊天
很好! 这是一个交互式CLI聊天。这对少数人(如工程师)很有用,但它有很好的安全性,因为它是在服务器端。但其他可能不了解如何使用CLI应用程序的人呢?他们将需要一些更容易使用的、具有更好的用户界面(UI)和用户体验(UX)的东西。下一节将重点介绍使用React构建这种应用程序。
如何使用React创建一个聊天应用程序
本节旨在帮助前端开发者快速掌握ChatGPT API,以创建一个聊天应用程序,并构建一个更好的用户界面,给用户带来更好的体验。你可以把在这里获得的知识应用于其他前端框架或库。
首先要做的是设置一个基本的React模板。我将使用Vite来实现这一目的。你可以用Vite来搭建任何现代JavaScript前端项目的脚手架。使用下面的命令:
npm create vite@latest
该命令将提示你为你的项目创建一个名称和文件夹,并选择一个框架或库(本教程使用React)。之后,你将导航到该文件夹,并运行以下命令:
npm install npm run dev
这些命令将安装必要的依赖性,并在 5173
端口启动本地服务器,接下来,用以下命令安装OpenAI:
npm i openai
这个模块提供了我们创建聊天应用程序所需的所有权限。现在我们准备开始写代码了!导航到 src/App.jsx
文件,删除其所有内容。然后添加以下导入语句:
import { useState } from "react"; import { Configuration, OpenAIApi } from "openai";
上面的代码导入了用于设置配置值的 Configuration
和用于让我们访问Chat completions的 OpenAIApi
。之后,像这样建立配置:
const configuration = new Configuration({ organization: "org-0nmrFWw6wSm6xIJXSbx4FpTw", apiKey: "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", });
这段代码创建了一个 Configuration
对象的新实例。在它里面,你输入你的 organization
和 apiKey
的值。你可以在设置中找到你的组织的详细信息,你的apiKey信息在API密钥中。如果你没有现有的API密钥,你可以创建它。在配置后输入以下代码,创建一个新的OpenAI API实例:
const openai = new OpenAIApi(configuration);
我们将在整个项目中使用它。创建并导出一个默认函数:
这个函数将容纳其余的代码。在 return
语句之前设置以下状态:
const [message, setMessage] = useState(""); const [chats, setChats] = useState([]); const [isTyping, setIsTyping] = useState(false);
message
将保存从应用程序发送至人工智能的信息。chats
数组将记录双方(用户和人工智能)发送的所有信息。isTyping
变量将通知用户,机器人是否正在打字。
在h1标签下输入以下几行代码
上面的代码将显示 Typing
,只要用户在等待AI的响应。创建一个表单,用户可以在其中输入信息,将下面的代码添加到 main
元素中:
这段代码创建了一个有一个输入的表单。每当点击 Enter
键提交表单时,就会触发 chat
函数。聊天函数将接受两(2)个参数(e
和 message
),像这样:
const chat = async (e, message) => { }
在该函数中输入以下几行:
e.preventDefault(); if (!message) return; setIsTyping(true);
上面的代码防止 form
重新加载网页,检查提交前是否输入了信息,并将 isTyping
设置为 true
,以表明应用程序已经开始处理所提供的输入。ChatGPT有一个信息的格式。它采取以下模式:
{role: user | assistant, content: message to be sent
每条信息(content
)都必须显示谁发送的。当聊天是来自人工智能时,角色是 assistant
,但如果是来自人类,则是 user
。因此,在发送消息之前,一定要正确地格式化它,并像这样把它添加到数组(chats
)中:
let msgs = chats; msgs.push({ role: "user", content: message }); setChats(msgs); setMessage("");
上面的最后一行清除了输入,以便用户输入另一个音符。现在我们将通过使用下面的代码触发 createChatCompletion
函数来调用 createChatCompletion
端点:
await openai .createChatCompletion({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a EbereGPT. You can help with graphic design tasks", }, ...chats, ], })
createChatCompletion
函数至少需要两(2)个参数(model
和 messages
):
- 模型指定了正在使用的chatGPT的版本。
- 消息是迄今为止用户和人工智能之间的所有消息的列表,以及一个系统消息,让人工智能了解它能提供什么样的帮助。
{ role: "system", content: "You are a EbereGPT. You can help with graphic design tasks", }
你可以把内容改成任何适合你的东西。messages
不一定要在数组中包含一个以上的对象。它可以只是一条消息。但是当它是一个数组时,它提供了一个消息历史,人工智能可以依靠它在未来给出更好的回复,而且它使用户打字更少,因为可能没有必要一直过度描述。 createChatCompletion
函数返回一个承诺。所以使用 then...catch...
块来获取响应。
.then((res) => { msgs.push(res.data.choices[0].message); setChats(msgs); setIsTyping(false); }) .catch((error) => { console.log(error); });
这段代码将从人工智能返回的消息添加到聊天数组中,并将 isTyping
设置为 false
,表示人工智能已经完成了回复。你现在应该在每次发送消息时收到反馈(Typing):
聊天应用程序在人工智能即将作出反应时给予反馈
现在是显示聊天历史给用户看的时候了。在 h1
标签下面输入以下代码:
上面的代码循环浏览 chats
,并将它们一个接一个地显示给用户。它把 role
的大写字母和消息的 content
并排输出。以下是输出结果的样子:
聊天机器人在没有CSS的情况下按预期工作
这看起来很酷!但添加一些造型会让它看起来像WhatsApp或Messenger一样吸引人。用以下内容替换 src/index.css
文件的内容:
:root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } h1 { font-size: 3.2em; line-height: 1.1; text-align: center; position: sticky; top: 0; background-color: #242424; } main{ max-width: 500px; margin: auto; } p{ background-color: darkslategray; max-width: 70%; padding: 15px; border-radius: 50px; } p span{ margin: 5px; } p span:first-child{ margin-right: 0; } .user_msg{ text-align: right; margin-left: 30%; display: flex; flex-direction: row-reverse; } .hide { visibility: hidden; display: none; } form{ text-align: center; position: sticky; bottom: 0; } input{ width: 100%; height: 40px; border: none; padding: 10px; font-size: 1.2rem; } input:focus{ outline: none; }
并删除 src/App.css
文件中的所有样式。
你可以在GitHub上找到完整的代码。现在应用程序应该有一个新的外观:
聊天机器人如期使用CSS工作
用React和ChatGPT创建一个聊天机器人的工作就这样结束了。它并不像听起来那么困难。但像这样的前端应用最好是用于演示,而不是生产。这样创建应用程序的问题是,前端将API密钥暴露给网络攻击。
要解决这个问题,明智的做法可能是将API Key和Organisation Id保存在云端某个安全的地方并引用它,或者为你的应用程序建立一个具有更好安全性的后端。下面的部分将致力于解决这个问题。
如何结合React和Node.js来制作一个全栈式的聊天AI软件
本节现在将加入前几节的力量,建立一个更安全的应用程序,同时表现出更好的用户界面和用户体验。
我们将改进Node部分,使用服务器来暴露一个端点供前端使用,并简化前端与后台的交互,而不是直接联系OpenAI。
如何设置项目
这一部分将创建项目所需的文件夹和文件。创建项目目录:
mkdir react-node-chatgpt-tutorial
导航到该文件夹:
cd react-node-chatgpt-tutorial
使用Vite安装React,并将文件夹命名为 frontend
。使用这个命令:
npm create vite@latest
之后,你将浏览到该文件夹并运行以下命令:
npm install npm run dev
这些命令将安装必要的依赖,并在 5173
端口启动本地服务器。创建后台文件夹:
mkdir backend
现在导航到后端文件夹,用这个命令初始化项目:
npm init -y
这将创建一个 package.json
文件来跟踪项目的细节。在该文件中添加以下一行代码:
"type": "module"
这将使ES6模块导入语句的使用成为可能。用下面的命令安装OpenAI和其他依赖项:
npm i openai body-parser cors express
创建一个文件,所有的代码都在其中。命名为 index.js
:
touch index.js
这就完成了项目的设置。现在有两个文件夹(frontend
和 backend
)。
如何搭建服务器
这一部分将着重于创建一个本地服务器,以监听 8000
端口。
首先要做的是像这样导入必要的模块:
import { Configuration, OpenAIApi } from "openai"; import express from "express"; import bodyParser from "body-parser"; import cors from "cors";
接下来,设置 express
、监听 port
、用于接收输入的 body-parser
以及允许前端和后端自由通信的 cors
。使用下面的代码:
const app = express(); const port = 8000; app.use(bodyParser.json()); app.use(cors());
最后,输入以下代码:
app.listen(port, () => { console.log(`listening on port ${port}`); });
这就完成了服务器的设置。当你运行 index.js
时,你应该得到以下输出:
listening on port 8000
如何创建端点
在这一部分,我们将建立一个端点,该端点将使用请求体接收来自前端的消息,并向调用者返回一个响应。开始时,我们要像前几节那样建立配置参数:
const configuration = new Configuration({ organization: "org-0nmrFWw6wSm6xIJXSbx4FpTw", apiKey: "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", }); const openai = new OpenAIApi(configuration);
接下来,使用下面的代码创建一个异步POST路由:
app.post("/", async (request, response) => { });
这个端点将使用 http://localhost:8000/
,在回调函数中,输入以下代码,从请求体( request.body
)接收 chats
的输入:
const { chats } = request.body;
现在像我们在React部分做的那样,调用 createChatCompletion
端点:
const result = await openai.createChatCompletion({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a EbereGPT. You can help with graphic design tasks", }, ...chats, ], });
这里的区别是,我们没有使用 then...catch...
块,而是将其分配给一个变量( result
),并使用 response.json()
返回响应,如以下代码:
response.json({ output: result.data.choices[0].message, });
在GitHub上找到这部分的代码。以下是在Postman上测试时的输出:
来自Postman的输出
代码的后端部分就这样结束了。下一部分将使用刚刚创建的端点( http://localhost:8000/
)连接前端和后端。
如何从前端连接到后端
这一部分把我们带到前台,在那里我们将创建一个表单。该表单将通过API端点向后端发送消息,并通过相同的媒介接收响应。导航到 frontend/src/App.jsx
文件并输入以下代码:
这段代码与上一节的代码相似。但我们删除了OpenAI的配置,因为我们在本节中不再需要它们。
在这一点上,每当表单被提交时,就会弹出一个警报。这一点一会儿就会改变。在聊天函数中,去掉 alert
信息,然后输入以下内容:
fetch("http://localhost:8000/", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ chats, }), }) .then((response) => response.json()) .then((data) => { msgs.push(data.output); setChats(msgs); setIsTyping(false); }) .catch((error) => { console.log(error); });
上面的代码调用了我们创建的端点,并传入 chats
数组供其处理。然后它返回一个响应,该响应被添加到 chats
中并显示在用户界面上:
样式设计前的全栈聊天UI
如果你在 frontend/src/index.css
文件中添加以下样式,UI会看起来更好:
:root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; font-synthesis: 无; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } html, body{ scroll-behavior: smooth; } h1 { font-size: 3.2em; line-height: 1.1; text-align: center; position: sticky; top: 0; background-color: #242424; } main{ max-width: 800px; margin: auto; } p{ background-color: darkslategray; max-width: 70%; padding: 15px; border-radius: 50px; } p span{ margin: 5px; } p span:first-child{ margin-right: 0; } .user_msg{ text-align: right; margin-left: 30%; display: flex; flex-direction: row-reverse; } .hide { visibility: hidden; display: none; } form{ text-align: center; position: sticky; bottom: 0; } input{ width: 100%; height: 40px; border: none; padding: 10px; font-size: 1.2rem; background-color: rgb(28, 23, 23); } input:focus{ outline: none; }
并删除 frontend/src/App.css
文件中的所有样式。
这一部分的代码在GitHub上。现在,这里是最终的输出:
全栈式聊天机器人如期使用CSS工作
恭喜你完成了这个项目!全栈聊天机器人的工作更多,但它帮助我们分离了关注点,建立了一个更安全和有吸引力的应用程序,并为用户提供了更好的体验。所以,这些努力是值得的。你可以在GitHub上找到这一部分的代码。
小结
本教程希望向你展示,任何具有基本编程知识的人都可以构建人工智能驱动的软件。你学会了如何使用React和Nodejs构建一个聊天机器人,我们还讨论了每种技术的利弊。最后,我们建立了一个既实用、安全又有视觉吸引力的解决方案。读完本教程后,你现在可以探索AI的功能,如图像处理和音频互动。花点时间浏览一下文档,看看你可以如何扩展我们在这里涉及的内容。
原文地址:https://www.wbolt.com/chatbot-with-openai-chatgpt-nodejs-and-react.html