会話型 AI を Web アプリケーションに組み込む-AI-php.cn

会話型 AI を Web アプリケーションに組み込む

DDD

リリース： 2023-11-02 11:04:08

転載

1644 人が閲覧しました

Web 開発の分野は常に進化しており、近年の最もエキサイティングな進歩の 1 つは、会話型 AI の Web アプリケーションへの統合です。 ChatGPT は OpenAI によって開発された強力な言語モデルで、人間のようなテキストを理解して生成することができます。ユーザーインターフェイスを構築するための人気のある JavaScript ライブラリである ReactJS と組み合わせると、開発者はインテリジェントでインタラクティブなチャットボットや仮想アシスタントを備えた Web アプリケーションを作成できます。この包括的なガイドでは、ChatGPT を ReactJS アプリケーションに統合する可能性と利点を探り、段階的な手順を説明します。

ReactJS と ChatGPT の強力な機能

統合プロセスに入る前に、まず ReactJS と ChatGPT の利点と機能を理解しましょう。

ReactJS: インタラクティブなユーザーインターフェイスの構築

ReactJS は、ユーザーインターフェイスを構築するための JavaScript ライブラリです。これは、コンポーネントベースのアーキテクチャで知られており、開発者は、基礎となるデータが変更されたときに効率的に更新およびレンダリングできる再利用可能な UI コンポーネントを作成できます。 React の仮想 DOM (Document Object Model) は、実際の 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 (ノードパッケージマネージャー) がシステムにインストールされています。これらのツールは、依存関係を管理し、React アプリケーションを実行するために不可欠です。まだお持ちでない場合は、Node.js の公式 Web サイトからダウンロードしてインストールできます。

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