azure openai gpt4 chat

azure-openai-gpt4-chat

Azure OpenaiとGPT-4を搭載したChatGpt-Likeストリーミングチャットボットボット

注：進行中のプロジェクトとドキュメント

について

これは、GPT-4モデルの展開を使用してAzure Openaiサービスインスタンスとの間でメッセージをストリーミングする簡単なチャットアプリです

前提条件

• node.js> = 20.x（npm> = v10.x）
• Azureサブスクリプション
  • Azure Openaiアクセスが有効になっています
  • Azure Openaiサービスは、GPT-4モデルとともに展開されました
    • 展開されたサービスのAPIキー

ローカルで実行されます

1. クローンレポgit clone https://github.com/cu-cit-cloud-team/azure-openai-gpt4-chat.git
2. ディレクトリcd azure-openai-gpt4-chatを入力します
3. copy .env.local.example to .env.localおよびfill in fall
4. ローカルにインストールされたnode.jsを使用する場合：
   1. 依存関係npm installインストールします
   2. Project locally npm run devを実行します
5. DevContainerを使用する場合：
   1. DevContainerで開く（依存関係は自動的にインストールされます）
   2. Project npm run dev実行します
6. ブラウザのhttp://localhost:3001にアクセスしてください
7. 停止するctrl + c

特徴

• Azure Openai GPT-4モデルとチャットします
• チャットの応答は、ChatGptのような体験のためにリアルタイムでストリーミングします
• マルチラインサポートのために入力にtextareaを使用します
  • ページの読み込みにtextareaをフォーカスします
  • textarea入力するときに自動補充します
  • キーenterメッセージを送信します
  • shift +新しいラインにenter
• チャット応答の隣にインジケーターが終了するまで読み込みます
• チャットメッセージの内部のコードブロックやその他のマークダウンをフォーマット
• 現在のチャット履歴は、ブラウザのローカルストレージに保存されています
• チャットセッションのシステムメッセージを表示/編集します（例：「あなたは役に立つAIアシスタントです」）
• チャットセッションパラメーターを表示/編集する（温度、上部Pなど）
• メッセージおよびシステムメッセージ用に表示されるライブトークンカウント（使用/残り）
• Azure Openaiモデル（GPT-4、GPT-3.5などを変更する
• 現在のチャット履歴をJSONとしてダウンロードしてください
• 現在のチャット履歴を明確にします
  • キーボードショートカット（ cmd + esc ） textareaがフォーカスを持っているとき
• 完全なメッセージと応答をクリップボードにコピーします
  • 個々のコードスニペット（応答内）をクリップボードにコピーします
• チャット履歴から個々のメッセージと応答を削除します
• 現在ストリーミングされている応答を停止します（必要ではない長い応答に役立ちます）
• 最後の応答を再生します
• Azure App Serviceを介してホストされています
  • GitHubアクションで構築/展開
  • Azure App Serviceアプリは、広告を介して私たちのチームだけにロックダウンされました
  • ログインセッションからユーザーを識別し、チャットセッションをパーソナライズしようとします
• チャットメッセージタイムスタンプに相対的な時間を使用します
  • 相対的な時間には、完全なタイムスタンプを備えたツールチップがあります
  • ツールチップには、「今日」よりも古い場合、同じ日とフルデート/時刻の時間を表示します
• いくつかの明るいテーマと暗いテーマのテーマチェンジャー
  • システムの好みに基づいて、デフォルトはlightまたはdark
• レスポンシブレイアウト
• ローカル開発のためのdevcontainer

ロードマップ

計画

• 現在開発中の新機能はありません

潜在的

• JSONからチャットセッションをインポートします
• 複数のチャットセッション
  • チャットセッションのスクロール可能でフィルター可能なリストを備えたサイドバー
  • ローカルストレージを介したステートフル
  • 個々のチャットセッションを削除します
  • JSONに個別のチャットセッションをエクスポートします
  • JSONからチャットセッションをインポートします

用途

• 反応します
  • JavaScriptフレームワーク
• next.js
  • Reactフレームワーク
• Vercel AI SDK
  • AI搭載のUIのJSライブラリ
• langchain.js
  • LLMSと対話するためのJSライブラリ（例：GPT-4）
• Tailwind CSS
  • CSSフレームワーク
• daisyui
  • Tailwind CSS用のコンポーネントライブラリ
• Azure Openaiサービス
  • APIおよびモデルの展開（GPT-4およびGPT-3.5）
• Azure Appサービス
  • アプリケーションホスティングとユーザー認証
• GitHubアクション/ワークフロー
  • Azure App Serviceにビルド/公開します
  • 通知を作成します
  • GHリリースを作成します
  • 依存関係の更新