<p class="e-p">ReactのWebアプリを触ることがあったので、OpenAIのchat-completion APIで遊ぶついでに勉強も兼ねてReactでChatGPT劣化アプリを作成してみた</p><h2 class="e-heading">成果物</h2><div class="e-link-card" data-href="https://github.com/wagowa5/chatgpt-react-app" data-title="GitHub - wagowa5/chatgpt-react-app: Reactの勉強" data-description="Reactの勉強. Contribute to wagowa5/chatgpt-react-app development by creating an acc…"><a class="e-link-card__anchor" href="https://github.com/wagowa5/chatgpt-react-app" rel="nofollow noreferrer noopener" target="_blank"><div class="e-link-card__title">GitHub - wagowa5/chatgpt-react-app: Reactの勉強</div><div class="e-link-card__hostname"><img src="https://icons.duckduckgo.com/ip3/github.com.ico" referrerpolicy="no-referrer" /><span>github.com</span></div></a></div><figure class="e-image" data-natural-width="591" data-natural-height="343" data-size="default" data-style="default"><img src="https://r2.sizu.me/users/19530/post-images/i3auhkr0dw962z6vvc3f.png" width="591" height="343" /></figure><h2 class="e-heading">やったこと</h2><p class="e-p">技術書店オンラインでちょうどよくやりたいこととレベルがマッチしていそうな本を発見できたので、この本をまずはそのまま真似しました。</p><div class="e-link-card" data-href="https://techbookfest.org/product/qJcZv2Lqr8nkjSsW3DxNrD?productVariantID=5qBQ2kMLrRxrt6kyfpMJ1Q" data-title="ChatGPTアプリを作って学ぶReact：philosophy" data-description="□■□本情報□■□
・サイズ：B5
・初版：技術書典15（新刊）

□■□概要□■□
・普段アプリを作らないような⼈でも React のコードを理解し、アプリが…"><a class="e-link-card__anchor" href="https://techbookfest.org/product/qJcZv2Lqr8nkjSsW3DxNrD?productVariantID=5qBQ2kMLrRxrt6kyfpMJ1Q" rel="nofollow noreferrer noopener" target="_blank"><div class="e-link-card__title">ChatGPTアプリを作って学ぶReact：philosophy</div><div class="e-link-card__hostname"><img src="https://icons.duckduckgo.com/ip3/techbookfest.org.ico" referrerpolicy="no-referrer" /><span>techbookfest.org</span></div></a></div><ul class="e-ul"><li class="e-li"><p class="e-p">本では最後にRaspberryPiで公開していましたが、RaspberryPiを用意するよりAWSを使うほうが早かったのでS3とCloudFrontで公開</p></li><li class="e-li"><p class="e-p">本通りだとAPIキーがベタ書きされているのでローカルでのみの公開とするよう注意書きがあったので、OpenAI API部分をAPIGatewayとLambdaに変更しAPIキーのベタ書きをやめました</p><ul class="e-ul"><li class="e-li"><p class="e-p">(APIGatewayにキー設定はしていないのでキー流出はないがAPIを誰でも使えてしまうのは問題ではある)</p></li></ul></li><li class="e-li"><p class="e-p">せっかくAPIGatewayとLambdaにしたのでWebSocketでstream表示できるように改修してみた</p></li></ul><h2 class="e-heading">改善点</h2><ul class="e-ul"><li class="e-li"><p class="e-p">API Gateway</p><p class="e-p">-APIキーを設定</p></li><li class="e-li"><p class="e-p">Lambda</p><p class="e-p">-OpenAI ChatCompletionsのエラーハンドリング</p><p class="e-p">-チャット履歴を保存できるようにする(RDSの導入など)</p></li><li class="e-li"><p class="e-p">React</p><p class="e-p">-API GatewayのAPIキーを環境変数で管理できるようにする</p><p class="e-p">-チャットを複数管理できるようにする</p></li></ul><p class="e-p"></p>