웹 애플리케이션에 대화형 AI 구축-일체 포함-php.cn

웹 애플리케이션에 대화형 AI 구축

DDD

풀어 주다： 2023-11-02 11:04:08

앞으로

1644명이 탐색했습니다.

웹 개발의 세계는 끊임없이 진화하고 있으며 최근 몇 년간 가장 흥미로운 발전 중 하나는 대화형 AI를 웹 애플리케이션에 통합한 것입니다. ChatGPT는 인간과 유사한 텍스트를 이해하고 생성할 수 있는 OpenAI가 개발한 강력한 언어 모델입니다. 사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리인 ReactJS와 결합하면 개발자는 스마트하고 대화형인 챗봇과 가상 도우미가 포함된 웹 애플리케이션을 만들 수 있습니다. 이 포괄적인 가이드에서는 ChatGPT를 ReactJS 애플리케이션에 통합할 때의 가능성과 이점을 살펴보고 단계별 지침을 제공합니다.

ReactJS 및 ChatGPT의 강력한 기능

통합 프로세스를 시작하기 전에 먼저 ReactJS 및 ChatGPT의 이점과 기능을 이해해 보겠습니다.

ReactJS: 대화형 사용자 인터페이스 구축

ReactJS는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다. 개발자는 기본 데이터가 변경될 때 효율적으로 업데이트하고 렌더링할 수 있는 재사용 가능한 UI 구성 요소를 만들 수 있는 구성 요소 기반 아키텍처로 잘 알려져 있습니다. React의 가상 DOM(Document Object Model)은 실제 DOM의 직접적인 조작을 최소화하여 최적의 성능을 보장하여 더 빠르고 원활한 사용자 경험을 제공합니다.

ReactJS의 주요 이점:

구성 요소 재사용: 구성 요소를 생성하고 재사용하여 개발을 단순화합니다.
효율적인 업데이트: Virtual 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 웹사이트에서 다운로드하여 설치할 수 있습니다.

Node.js 및 npm을 설치한 후 다음 명령을 사용하여 새 React 프로젝트를 생성할 수 있습니다.

npx create-react-app chatbot-app

로그인 후 복사

2단계: 필요한 패키지 설치

ChatGPT 통합을 설정하려면 일부 패키지를 설치해야 합니다. React 프로젝트 디렉터리에서 필수 패키지를 설치합니다.

npm install axios react-chat-widget

로그인 후 복사

axios는 ChatGPT API와 통신하는 데 사용되는 HTTP 요청을 만드는 데 널리 사용되는 JavaScript 라이브러리입니다.
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 应用程序以查看聊天机器人在操作中。在您的项目目录中，运行：