React と OpenAI API を使用して ChatGPT クローンアプリケーションをビルドおよびデプロイする方法

公開: 2023-03-13

チャットボットと仮想アシスタントの使用が増え続ける中、多くの企業や開発者は、AI を利用した独自のチャットボットを作成する方法を探しています。 ChatGPT は、OpenAI によって作成されたそのようなチャットボットの 1 つで、人間のような会話に参加し、幅広い質問に答えることができます。

構築するもの

このチュートリアルでは、React と OpenAI API を使用して ChatGPT クローンアプリケーションを構築する方法を学習します。週末に楽しく魅力的なプロジェクトに挑戦したい場合、これは React と OpenAI に飛び込む絶好の機会です。

また、GitHub リポジトリから Kinsta のアプリケーションホスティングプラットフォームに直接デプロイする方法も学びます。Kinsta のアプリケーションホスティングプラットフォームは、無料の.kinsta.appドメインを提供し、プロジェクトを迅速に稼働させます。 Kinstaの無料トライアルとHobby Tierを使えば、無料で簡単に始めることができます.

これは、ChatGPT クローンアプリケーションのライブデモです。

このプロジェクトを詳しく調べたい場合は、その GitHub リポジトリにアクセスできます。

または、React アプリケーションスタータープロジェクトを複製することもできます。これには、スタイル、Font Awesome CDN リンク、OpenAI パッケージ、および基本構造などの基本的な要素が付属しており、開始するのに役立ちます。

要件/前提条件

このチュートリアルは、「順を追って」体験できるように設計されています。したがって、簡単にコーディングできるように、次のものを用意することをお勧めします。

HTML、CSS、および JavaScript の基本的な理解
React にある程度精通している
Node.js と npm (Node Package Manager) または yarn がコンピューターにインストールされている

OpenAI API とは?

OpenAI API は、開発者が API を介して GPT-3 などの OpenAI の言語モデルにアクセスできるようにするクラウドベースのプラットフォームです。開発者は、モデルの開発やトレーニングを行うことなく、テキスト補完、感情分析、要約、翻訳などの自然言語処理機能をアプリケーションに追加できます。

OpenAI API を使用するには、開発者は OpenAI Web サイトでアカウントを作成し、API キーを取得する必要があります。 API キーは、API リクエストの認証と使用状況の追跡に使用されます。

API キーを取得すると、開発者は API を使用してテキストを言語モデルに送信し、応答を受け取ることができます。

ChatGPT と話すだけでなく、自分のスキルを披露して自分のスキルを構築してください! このガイドで、React と OpenAI API を使用して ChatGPT クローンアプリを作成する方法を学びます。

なぜ反応するのですか？

React は、ユーザーインターフェイスを構築するための一般的な JavaScript ライブラリです。 2022 年の Stack Overflow 開発者調査によると、これは 2 番目に一般的に使用されている Web テクノロジであり、市場シェアの 42.62% を占めています。

React を使用すると、開発者はユーザーインターフェイスのさまざまな部分を表す宣言型コンポーネントを作成できます。これらのコンポーネントは、JavaScript と HTML を組み合わせた JSX という構文を使用して定義されます。

コンポーネントライブラリとキットの大規模なエコシステムのおかげで、開発者は OpenAI API などの API を簡単に操作および統合して、複雑なチャットインターフェイスを構築できます。これが、ChatGPT クローンアプリケーションを構築するための優れた選択肢となる理由です。

React 開発環境のセットアップ方法

React をインストールする、または React プロジェクトを作成する最良の方法は、create-react-app でインストールすることです。前提条件の 1 つは、マシンに Node.js がインストールされていることです。 Node がインストールされていることを確認するには、ターミナルで次のコマンドを実行します。

 node -v

バージョンが表示される場合、それは存在します。 npx を使用するには、Node のバージョンが v14.0.0 以上であり、NPM のバージョンが v5.6 以上であることを確認する必要があります。それ以外の場合は、 npm update -gを実行して更新する必要があります。 npm を理解したら、次のコマンドを実行して React プロジェクトをセットアップできます。

 npx create-react-app chatgpt-clone

注: 「chatgpt-clone」は作成中のアプリケーション名ですが、任意の名前に変更できます。

インストールプロセスには数分かかる場合があります。成功したら、ディレクトリに移動して Node.js OpenAI パッケージをインストールできます。これにより、次のコマンドを使用して Node.js から OpenAI API に簡単にアクセスできます。

 npm install openai

npm start実行して、アプリケーションがlocalhost:3000で稼働していることを確認できます。

create-react-appコマンドを使用して React プロジェクトを作成すると、フォルダー構造が自動的にスキャフォールディングされます。あなたに関係する主要なフォルダーは、開発が行われる場所であるsrcフォルダーです。このフォルダーにはデフォルトで多くのファイルが含まれていますが、 App.js 、 index.js 、およびindex.cssファイルのみに注意する必要があります。

App.js : App.jsファイルは、React アプリケーションのメインコンポーネントです。これは通常、アプリケーション内の他のすべてのコンポーネントをレンダリングする最上位のコンポーネントを表します。
index.js : このファイルは、React アプリケーションのエントリポイントです。これは、アプリを開いたときに最初に読み込まれるファイルであり、 App.jsコンポーネントをブラウザーにレンダリングします。
index.css : このファイルは、React アプリケーションの全体的なスタイルとレイアウトを定義する役割を果たします。

React と OpenAI API を使用して ChatGPT クローンを構築する方法

ChatGPT クローンアプリケーションは、アプリケーションの理解と保守を容易にする 2 つのコンポーネントで構成されます。これらの 2 つのコンポーネントは次のとおりです。

フォームセクション: このコンポーネントには、ユーザーがチャットボットと対話するためのテキスト領域フィールドとボタンが含まれています。
回答セクション: 質問と対応する回答が配列に格納され、このセクションに表示されます。配列を時系列でループし、最新のものを最初に表示します。

ChatGPT クローンアプリケーションのセットアップ

このチュートリアルでは、最初にアプリケーションインターフェイスを構築することから始めましょう。次に、アプリケーションが OpenAI API と対話するように機能を実装できます。このチュートリアルで使用する 2 つのコンポーネントを作成することから始めます。適切に編成するために、すべてのコンポーネントが保存されるsrcフォルダーにcomponentsフォルダーを作成します。

フォームセクションコンポーネント

これは、 textareaと送信buttonで構成される単純なフォームです。

 // components/FormSection.jsx const FormSection = () => { return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." ></textarea> <button className="btn"> Generate Response </button> </div> ) } export default FormSection;

App.jsファイルにインポートすると、フォームは次のようになります。

ChatGPTクローンのフォームセクションコンポーネント — フォームセクションコンポーネント

回答セクションコンポーネント

このセクションには、すべての質問と回答が表示されます。 App.jsファイルにもインポートすると、このセクションは次のようになります。

これらの質問と回答を配列とループから取得して、コードを読みやすく維持しやすくします。

 // components/AnswerSection.jsx const AnswerSection = () => { return ( <> <hr className="hr-line" /> <div className="answer-container"> <div className="answer-section"> <p className="question">Who is the founder of OpenAi?</p> <p className="answer">OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> </div> </> ) } export default AnswerSection;

ホームページ

これで両方のコンポーネントが作成されましたが、 App.jsファイルにインポートする必要があるため、アプリケーションを実行しても何も表示されません。このアプリケーションでは、いかなる形式のルーティングも実装しません。つまり、 App.jsファイルがアプリケーションのホームコンポーネント/ページとして機能します。

コンポーネントをインポートする前に、アプリケーションのタイトルや説明などのコンテンツを追加できます。

 // App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection /> <AnswerSection /> </div> ); }; export default App;

上記のコードでは、2 つのコンポーネントがインポートされ、アプリケーションに追加されます。アプリケーションを実行すると、アプリケーションは次のようになります。

機能の追加と OpenAI API の統合

これで、アプリケーションのユーザーインターフェイスが完成しました。次のステップは、アプリケーションを機能させて、OpenAI API と対話し、応答を取得できるようにすることです。まず、OpenAI API のクエリに使用されるため、送信時にフォームから値を取得する必要があります。

フォームからデータを取得する

React でデータを保存および更新する最良の方法は、状態を使用することです。機能コンポーネントでは、状態を操作するためにuseState()フックが使用されます。状態を作成し、フォームから状態に値を割り当て、その値が変更されるたびに更新することができます。 useState()フックをFormSection.jsxコンポーネントにインポートしてから、 newQuestions保存および更新する状態を作成することから始めましょう。

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( // Form to submit a new question ) } export default FormSection;

次に、 textareaフィールドの値を状態に割り当て、 onChange()イベントを作成して、入力値が変更されるたびに状態を更新します。

 <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea>

最後に、送信ボタンがクリックされるたびに関数をロードするonClick()イベントを作成できます。このメソッドはApp.jsファイルで作成され、引数としてnewQuestionおよびsetNewQuestion値を使用して、小道具としてFormSection.jsxコンポーネントに渡されます。

 <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button>

フォームの値を保存および更新する状態を作成し、 App.jsファイルから props として渡されるメソッドを追加して、クリックイベントを処理しました。最終的なコードは次のようになります。

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea> <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button> </div> ) } export default FormSection;

次のステップでは、 App.jsファイルにメソッドを作成して、OpenAI API とやり取りするプロセス全体を処理します。

OpenAI API とのやり取り

React アプリケーションで OpenAI API を操作して API キーを取得するには、OpenAI API アカウントを作成する必要があります。 Google アカウントまたは電子メールを使用して、OpenAI Web サイトでアカウントにサインアップできます。 API キーを生成するには、Web サイトの右上隅にある[個人]をクリックします。いくつかのオプションが表示されます。 [API キーを表示]をクリックします。

OpenAI API キーへのアクセス — OpenAI API キーにアクセスします。

[Create new secret key]ボタンをクリックし、このアプリケーションで OpenAI と対話するために使用するキーをどこかにコピーします。これで、openai パッケージ (既にインストール済み) を構成メソッドと共にインポートすることにより、OpenAI の初期化に進むことができます。次に、生成されたキーを使用して構成を作成し、それを使用して OpenAI を初期化します。

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); return ( // Render FormSection and AnswerSection ); }; export default App;

上記のコードでは、OpenAI API キーが環境変数として.envファイルに保存されます。アプリケーションのルートフォルダーに.envファイルを作成し、キーを変数REACT_APP_OPENAI_API_KEYに保存できます。

 // .env REACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…

これで、 App.jsファイルでgenerateResponseメソッドを作成し、作成済みのフォームから期待される 2 つのパラメーターを渡して、要求を処理し、API から応答を取得できます。

 // src/App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const generateResponse = (newQuestion, setNewQuestion) => { // Set up OpenAI API and handle response }; return ( // Render FormSection and AnswerSection ); }; export default App;

OpenAI API にリクエストを送信できるようになりました。 OpenAI API は、質問と回答 (Q&A)、文法修正、翻訳など、多くの操作を実行できます。これらの操作ごとに、オプションは異なります。たとえば、Q&A のエンジン値はtext-davinci-00ですが、SQL 翻訳の場合はcode-davinci-002です。さまざまな例とそのオプションについては、OpenAI の例のドキュメントを自由に確認してください。

このチュートリアルでは、Q&A のみを使用します。オプションは次のようになります。

 { model: "text-davinci-003", prompt: "Who is Obama?", temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ["\"], }

注:プロンプト値を変更しました。

プロンプトは、フォームから送信される質問です。これは、 generateResponseメソッドにパラメーターとして渡すフォーム入力からそれを受け取る必要があることを意味します。これを行うには、オプションを定義してからスプレッド演算子を使用して、プロンプトを含む完全なオプションを作成します。

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; }; return ( // Render FormSection and AnswerSection ); }; export default App;

この時点で、 createCompletionメソッドを介して OpenAI にリクエストを送信し、レスポンスを取得する必要があります。

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); console.log(response.data.choices[0].text); }; return ( // Render FormSection and AnswerSection ); }; export default App;

上記のコードでは、回答のテキストがコンソールに表示されます。質問をして、アプリケーションを自由にテストしてください。最後のステップは、質問と回答の配列を保持する状態を作成し、この配列を小道具としてAnswerSectionコンポーネントに送信することです。 App.js の最終的なコードは次のようになります。

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); if (response.data.choices) { setStoredValues([ { question: newQuestion, answer: response.data.choices[0].text, }, ...storedValues, ]); setNewQuestion(''); } }; return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection generateResponse={generateResponse} /> <AnswerSection storedValues={storedValues} /> </div> ); }; export default App;

AnswerSectionコンポーネントを編集できるようになったので、 App.jsから props 値を受け取り、JavaScript Map()メソッドを使用してstoredValues配列を調べます。

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

アプリケーションを実行し、質問してテストすると、答えが下に表示されます。しかし、コピーボタンが機能しないことに気付くでしょう。ボタンにonClick()イベントを追加して、機能を処理するメソッドをトリガーする必要があります。 navigator.clipboard.writeText()メソッドを使用して機能を処理できます。 AnswerSectionコンポーネントは次のようになります。

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { const copyText = (text) => { navigator.clipboard.writeText(text); }; return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon" onClick={() => copyText(value.answer)} > <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

アプリケーションを実行すると、ChatGPT クローンアプリケーションは完全に機能します。アプリケーションをデプロイしてオンラインでアクセスし、友人と共有できるようになりました。

React アプリケーションを Kinsta にデプロイする方法

このアプリケーションをビルドしてローカルコンピューターに残すだけでは十分ではありません。他のユーザーがアクセスできるように、オンラインで共有する必要があります。 GitHub と Kinsta を使用してこれを行う方法を見てみましょう。

コードを GitHub にプッシュする

コードを GitHub にプッシュするには、Git コマンドを使用できます。これは、コードの変更を管理し、プロジェクトで共同作業し、バージョン履歴を維持するための信頼性が高く効率的な方法です。

コードをプッシュする最初のステップは、GitHub アカウントにログインして新しいリポジトリを作成することです。画面の右上隅にある+ボタンをクリックし、ドロップダウンメニューから[新しいリポジトリ]を選択します。

リポジトリに名前を付け、説明を追加し (オプション)、公開するか非公開にするかを選択します。 [リポジトリの作成]をクリックして作成します。

リポジトリが作成されたら、コードを GitHub にプッシュするために必要な、リポジトリのメインページからリポジトリ URL を取得してください。

ターミナルまたはコマンドプロンプトを開き、プロジェクトを含むディレクトリに移動します。次のコマンドを 1 つずつ実行して、コードを GitHub リポジトリにプッシュします。

 git init git add . git commit -m "my first commit" git remote add origin [repository URL] git push -u origin master

git init 、ローカル Git リポジトリgit add . 現在のディレクトリとそのサブディレクトリ内のすべてのファイルを新しい Git リポジトリに追加します。 git commit -m "my first commit"簡単なメッセージとともに変更をリポジトリにコミットします。 git remote add origin [repository URL]リポジトリ URL をリモートリポジトリとして設定し、 git push -u origin master master ブランチのリモートリポジトリ (オリジン) にコードをプッシュします。

ChatGPT Clone ReactアプリケーションをKinstaにデプロイする

リポジトリを Kinsta にデプロイするには、次の手順に従います。

My Kinstaダッシュボードにログインするか、Kinstaアカウントを作成してください。
左側のサイドバーで[アプリケーション]をクリックし、 [サービスの追加]をクリックします。
ドロップダウンメニューから[アプリケーション]を選択して、React アプリケーションを Kinsta にデプロイします。
表示されるモーダルからデプロイするリポジトリを選択します。複数のブランチがある場合は、デプロイするブランチを選択して、アプリケーションに名前を割り当てることができます。利用可能な 25 か所の中からデータセンターの場所を選択すると、Kinsta が開始コマンドを自動的に検出します。
最後に、API キーを GitHub のようなパブリックホストにプッシュするのは安全ではありません。これは環境変数としてローカルに追加されました。ホスティング時には、同じ変数名とキーを値として使用して、環境変数として追加することもできます。

ChatGPTクローンをKinstaにデプロイする — ChatGPT クローンを Kinsta にデプロイします。

アプリケーションのデプロイが開始され、数分以内に、アプリケーションのデプロイされたバージョンにアクセスするためのリンクが提供されます。この場合、これはhttps://chatgpt-clone-g9q10.kinsta.app/です。注:自動デプロイを有効にすると、コードベースを変更して GitHub にプッシュするたびに、Kinsta がアプリケーションを再デプロイします。

すべての質問に答えてくれるパーソナルアシスタントが欲しいと思ったことはありませんか? 24 時間年中無休のサービスで ChatGPT クローンアプリを構築します。ここから始めましょう！クリックしてツイート

まとめ

OpenAI API を使用して、カスタマーサポートやパーソナルアシスタントから言語翻訳やコンテンツ作成まで、幅広い潜在的なアプリケーションを構築できます。

このチュートリアルでは、React と OpenAI を使用して ChatGPT クローンアプリケーションを構築する方法を学習しました。このアプリケーション/機能を他のアプリケーションに統合して、人間のような会話体験をユーザーに提供できます。

OpenAI API でできることと、このクローンアプリケーションを改善する方法は他にもあります。たとえば、ブラウザを更新しても以前の質問と回答が消えないように、ローカルストレージを実装できます。

Kinstaの無料トライアルとHobby Tierを使用すると、アプリケーションホスティングを無料で簡単に開始できます. それでは、試してみて、作成できるものを確認してみませんか?

以下のコメントでプロジェクトと経験を共有してください。