將對話式 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 应用程序以查看聊天机器人在操作中。在您的项目目录中，运行：