はじめに
naritomoと申します。
本職はインフラエンジニアを行っています。
今回は以下の記事の続きで、Web画面でChatGPTと会話するアプリを作ってみました。
いろいろアドバイスいただけると嬉しいです。
ソースは以下になります。
コンテナ構成
画面
事前作業
あらかじめdocker-composeインストールを実施していること。
本プログラムはmac/Linuxで動かしてください。
ChatGPT API keyも以下のページからあらかじめ入手してください。
初期設定
git clone https://github.com/naritomo08/chatgpt_webapp.git
cd chatgpt_webapp
rm -rf .git
cp .env_ref .env
vi .env
以下の””の中にAPIキーを入力する。
api_key = ""
docker-compose up -d
サイト参照
http://localhost/
→ログイン画面が出るので、testuser/testpasswordを入れてください。
ユーザー設定
ユーザー追加や変更する際は、user.pyの以下の箇所について書き換えたり、
カンマ追加してユーザー情報を追記してください。
# サンプルユーザーデータ
users = {
"testuser": User(id=1, username="testuser", password="testpassword")
}
質問実施履歴
以下のファイルに保管されています。
log_writer/output/chatgpt_log.log
Webアプリ起動
docker-compose down
Webアプリ停止
docker-compose down
注意点
仕組みとしてはChatGPTAPIでは過去のやり取りを覚える機能はないため、あらかじめRedisにやり取りを保存しておき、毎回質問するたびに履歴をつけて会話を送付するようにしています。
注意点はAPIではトークン数で課金され、青天井なので履歴が多くなるとかなり課金されるため、別のネタにする場合は一旦履歴クリアしたほうがいいです。
React(Tailwind CSS/nginx)+Flaskによるアプリ構築
発展形として本アプリをフロント(nginx,React)、バック部(Flask)で分離したアプリも作ってみました。
こちらは継続会話できず質問・回答をするのみになります。
コンテナ構成
画面
事前作業
あらかじめdocker-composeインストールを実施していること。
本プログラムはmac/Linuxで動かしてください。
ChatGPT API keyも以下のページからあらかじめ入手してください。
初期設定
git clone -b ReactFlaskDev https://github.com/naritomo08/chatgpt_webapp.git
cd chatgpt_webapp.git
rm -rf .git
cp .env_ref .env
vi .env
以下の””の中にAPIキーを入力する。
api_key = ""
cd ..
docker-compose up -d
サイト参照
http://localhost:3000/
→ログイン画面が出るので、testuser/testpasswordを入れてください。
ユーザー設定
ユーザー追加や変更する際は、user.pyの以下の箇所について書き換えたり、
カンマ追加してユーザー情報を追記してください。
# サンプルユーザーデータ
users = {
"testuser": User(id=1, username="testuser", password="testpassword")
}
フロント、バックログ
以下のフォルダに保管されています。
chatgpt-backend/output
chatgpt-frontend/output
Webアプリ起動
docker-compose up -d
Webアプリ停止
docker-compose down
今後の展望
K8S上でも稼働するようにしたい。
GitlabからCICDできるようにしたい。
→Flaskのみ版では完成はできていて、各種ソースファイルや公開記事について整理中。