chatgpt react express

ChatGpt Reactアプリ

これは、OpenaiのChatGPT APIの力を活用して、チャットインターフェイスで人間のような応答を生成するReactベースのアプリケーションです。このreadme.mdは、このアプリのセットアップと使用をガイドします。 Expressサーバーは、GPT-Turboを使用してChatGPT APIと通信するプロキシとして機能します。OpenaiパッケージはGPT-3.5-ターボモデルを使用するのに問題があるためです。

目次

1. 特徴
2. 前提条件
3. インストール
4. 使用法
5. 貢献
6. ライセンス

？特徴

• スムーズなユーザーエクスペリエンスを提供するReactベースのフロントエンド。
• 強力な自然言語生成のためのOpenaiのChatGPT APIとの統合。
• さまざまな画面サイズに適応するレスポンシブチャットインターフェイス。
• シームレスなエクスペリエンスを確保するための徹底的なエラー処理。

？前提条件

始める前に、次のインストールを確実にしてください。

• node.js（V14以降）
• NPM（V7以降）
• Openai APIキー（あなたが持っていない場合はこちらからサインアップ）

インストール

ローカルマシンにプロジェクトを設定するには、次の手順に従ってください。

1. リポジトリをクローンします：

git clone https://github.com/yourusername/chatgpt-react-express-app.git

2. プロジェクトディレクトリに変更：

 cd chatgpt-react-express-app

3. 依存関係をインストールします。

npm install

4. ルートディレクトリに.envファイルを作成し、OpenAI APIキーを追加します。

 REACT_APP_OPENAI_API_KEY=your_openai_api_key

5. このアプリケーションは、フロントエンドとバックエンドに個別のプロセスを使用します。次のNPMスクリプトを使用して、個別にまたは同時に実行できます。

バックエンドサーバーのみを実行します：

npm run server

フロントエンドReact開発サーバーのみを実行します。

npm run client

バックエンドサーバーとフロントエンドサーバーの両方を同時に実行します。

npm run dev

アプリケーションはhttp://localhost:3000で実行されます。ブラウザを開き、このアドレスに移動してアプリの使用を開始します。

使用法

1. チャットインターフェイスの下部にある入力フィールドにメッセージを入力します。
2. Enterを押すか、 Sendボタンをクリックしてメッセージを送信します。
3. アプリケーションはメッセージをChatGPT APIに送信し、チャットウィンドウに生成された応答を表示します。
4. より多くのメッセージを送信して、会話を続けることができます。チャットの履歴が表示され、より魅力的でインタラクティブな会話が可能になります。

？貢献

貢献は大歓迎です！プロジェクトを改善または拡張したい場合は、次の手順に従ってください。

1. リポジトリをフォークします。
2. 説明的な名前の新しいブランチを作成します。
3. 新しいブランチに変更を加えます。
4. 変更の詳細な説明を記載したプルリクエストを送信してください。

プルリクエストを確認し、フィードバックを提供するか、できるだけ早く変更をマージします。

？ライセンス

このプロジェクトは、MITライセンスの下でライセンスされています。詳細については、ライセンスファイルを参照してください。