将对话式 AI 构建到您的 Web 应用程序中-人工智能-PHP中文网

Web 开发领域不断发展，近年来最令人兴奋的进步之一是将会话式 AI 集成到 Web 应用程序中。ChatGPT 是由 OpenAI 开发的一种功能强大的语言模型，能够理解和生成类似人类的文本。当与 ReactJS（用于构建用户界面的流行 JavaScript 库）结合使用时，开发人员可以创建具有智能、交互式聊天机器人和虚拟助手的 Web 应用程序。在本综合指南中，我们将探索将 ChatGPT 集成到 ReactJS 应用程序中的可能性和优势，并提供逐步说明。

ReactJS 和 ChatGPT 的强大功能

在深入探讨集成过程之前，让我们首先了解 ReactJS 和 ChatGPT 的优势和功能。

ReactJS：构建交互式用户界面

ReactJS 是用于构建用户界面的 JavaScript 库。它以其基于组件的架构而闻名，该架构允许开发人员创建可重用的 UI 组件，当底层数据发生变化时，这些组件可以高效地更新和渲染。React 的虚拟 DOM（文档对象模型）通过尽量减少对实际 DOM 的直接操作，确保最佳性能，从而带来更快、更流畅的用户体验。

ReactJS 的主要优势：

组件重用：创建和重用组件以简化开发。
高效更新：虚拟 DOM 仅有效地更新已更改的组件，从而提高性能。
社区和生态系统：有一个庞大的库和资源生态系统可用于支持 React 开发。

ChatGPT：OpenAI 的会话式 AI

ChatGPT 是 OpenAI 开发的一种语言模型。它经过训练，可以理解和生成文本，使其成为创建对话式代理、聊天机器人和虚拟助手的绝佳选择。ChatGPT 功能强大，可处理以下任务：回答问题、生成内容和进行自然语言对话。

ChatGPT 的主要优势：

语言理解：ChatGPT 可以理解人类语言，并根据上下文提供准确、有用的信息。
文本生成：ChatGPT 可以生成各种样式的文本，包括新闻文章、代码、诗歌和脚本。
对话能力：ChatGPT 能够进行自然语言对话，并根据用户的输入做出响应。

使用 ReactJS 和 ChatGPT 构建会话式 AI

将 ChatGPT 集成到 ReactJS 应用程序中可以创建动态、会话式用户界面。以下是一步一步的指南，使用 ReactJS 构建一个由 ChatGPT 驱动的聊天机器人：

步骤 1：设置开发环境

在开始之前，请确保您的系统上安装了 Node.js 和 npm（Node 包管理器）。这些工具对于管理依赖项和运行 React 应用程序至关重要。如果您还没有，可以从官方 Node.js 网站下载和安装它们。

安装 Node.js 和 npm 后，您可以使用以下命令创建一个新的 React 项目：

npx create-react-app chatbot-app

登录后复制

步骤 2：安装必要的包

您需要安装一些包来设置 ChatGPT 集成。在 React 项目目录中，安装所需包：

npm install axios react-chat-widget

登录后复制

axios 是一个用于进行 HTTP 请求的流行 JavaScript 库，您将使用它与 ChatGPT API 通信。
react-chat-widget 是一个聊天小部件组件库，可简化聊天机器人的 UI。

步骤 3：设置 ChatGPT API 密钥

要与 ChatGPT API 交互，您需要一个 API 密钥。您可以通过在 OpenAI 平台上注册来获取一个密钥。获得 API 密钥后，在项目目录中创建一个文件（您可以将其命名为 openai.js）以安全地存储您的 API 密钥：

// openai.js
const apiKey = &#39;YOUR_API_KEY_HERE&#39;;
export default apiKey;

登录后复制

步骤 4：创建聊天机器人组件

现在，您可以开始在 React 中构建聊天机器人组件。在您的项目中创建一个新组件，例如 Chatbot.js，以管理聊天界面：

// Chatbot.js
import React, { Component } from &#39;react&#39;;
import axios from &#39;axios&#39;;
import apiKey from &#39;./openai&#39;;
class Chatbot extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [],
    };
  }
  componentDidMount() {
    this.addMessage(&#39;Hello! How can I assist you today?&#39;);
  }
  addMessage = (text, fromUser = false) => {
    const newMessage = { text, fromUser };
    this.setState((prevState) => ({
      messages: [...prevState.messages, newMessage],
    }));
  };
  handleUserInput = (text) => {
    this.addMessage(text, true);
    // 向 ChatGPT API 发出请求
    axios
      .post(
        &#39;https://api.openai.com/v1/engines/davinci-codex/completions&#39;,
        {
          prompt: text,
          max_tokens: 50,
        },
        {
          headers: {
            &#39;Content-Type&#39;: &#39;application/json&#39;,
            &#39;Authorization&#39;: `Bearer ${apiKey}`,
          },
        }
      )
      .then((response) => {
        const botReply = response.data.choices[0].text;
        this.addMessage(botReply);
      })
      .catch((error) => {
        console.error(&#39;Error communicating with the ChatGPT API:&#39;, error);
        this.addMessage(&#39;I apologize, but I am currently experiencing technical difficulties.&#39;);
      });
  };
  render() {
    return (
      <div className="chatbot">
        <div className="chatbot-container">
          <div className="chatbot-messages">
            {this.state.messages.map((message, index) => (
              <div
                key={index}
                className={`chatbot-message ${message.fromUser ? &#39;user&#39; : &#39;bot&#39;}`}
              >
                {message.text}
              </div>
            ))}
          </div>
          <input
            type="text"
            className="chatbot-input"
            placeholder="Type a message..."
            onKeyPress={(event) => {
              if (event.key === &#39;Enter&#39;) {
                this.handleUserInput(event.target.value);
                event.target.value = &#39;&#39;;
              }
            }}
          />
        </div>
      </div>
    );
  }
}
export default Chatbot;

登录后复制

步骤 5：为您的聊天机器人设置样式

您可以根据您的应用程序的整体外观和感觉来设置聊天机器人组件的样式。使用 CSS 或您选择的样式库自定义聊天小部件的外观。

步骤 6：将聊天机器人添加到您的应用程序

要使用聊天机器人组件，请将其导入并将其包含在应用程序的主组件中：

// App.js
import React from &#39;react&#39;;
import &#39;./App.css&#39;;
import Chatbot from &#39;./Chatbot&#39;;
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>React Chatbot with ChatGPT</h1>
      </header>
      <main>
        <Chatbot />
      </main>
    </div>
  );
}
export default App;

登录后复制

步骤 7：运行您的 React 应用程序

现在，您可以运行您的 React 应用程序以查看聊天机器人在操作中。在您的项目目录中，运行：