ChatGPTとやり取りするWebアプリ作ってみた。

# はじめに

naritomoと申します。

本職はインフラエンジニアを行っています。

今回は以下の記事の続きで、Web画面でChatGPTと会話するアプリを作ってみました。

https://qiita.com/naritomo08/items/155bc27972b3d045c085

いろいろアドバイスいただけると嬉しいです。

ソースは以下になります。

https://github.com/naritomo08/chatgpt_webapp

## コンテナ構成

![raspik8s-ChatGPT応答アプリコンテナ１.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/4fb8144b-8edc-091a-3457-1ccb6cb58fff.jpeg)

## 画面

![Screenshot 2024-08-31 20.05.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/00e131a8-3014-ca74-78d1-149cbbaf7329.png)

![Screenshot 2024-08-31 20.05.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/ec486acc-9f74-67f0-6479-83cfc50bf43f.png)

## 事前作業

あらかじめdocker-composeインストールを実施していること。

本プログラムはmac/Linuxで動かしてください。

ChatGPT API keyも以下のページからあらかじめ入手してください。

https://platform.openai.com/playground/

## 初期設定

```bash
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
```

## サイト参照

```bash
http://localhost/
→ログイン画面が出るので、testuser/testpasswordを入れてください。
```

## ユーザー設定

```bash
ユーザー追加や変更する際は、user.pyの以下の箇所について書き換えたり、
カンマ追加してユーザー情報を追記してください。

# サンプルユーザーデータ
users = {
    "testuser": User(id=1, username="testuser", password="testpassword")
}

```

## 質問実施履歴

```bash
以下のファイルに保管されています。

log_writer/output/chatgpt_log.log
```

## Webアプリ起動

```bash
docker-compose down
```

## Webアプリ停止

```bash
docker-compose down
```

## 注意点

仕組みとしてはChatGPTAPIでは過去のやり取りを覚える機能はないため、あらかじめRedisにやり取りを保存しておき、毎回質問するたびに履歴をつけて会話を送付するようにしています。
注意点はAPIではトークン数で課金され、青天井なので履歴が多くなるとかなり課金されるため、別のネタにする場合は一旦履歴クリアしたほうがいいです。

## React(Tailwind CSS/nginx)+Flaskによるアプリ構築

発展形として本アプリをフロント(nginx,React)、バック部(Flask)で分離したアプリも作ってみました。

こちらは継続会話できず質問・回答をするのみになります。

### コンテナ構成

![raspik8s-ChatGPT応答アプリコンテナ2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/d9125a8a-f691-0c67-653f-ba76e667537a.jpeg)

### 画面

![Screenshot 2024-08-02 20.55.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/27071086-6a36-eb18-64de-60d014da6241.png)

![Screenshot 2024-08-02 20.57.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/6d24315d-0dbe-9ac5-264b-d33003409769.png)

### 事前作業

あらかじめdocker-composeインストールを実施していること。

本プログラムはmac/Linuxで動かしてください。

ChatGPT API keyも以下のページからあらかじめ入手してください。

https://platform.openai.com/playground/

### 初期設定

```bash
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
```

### サイト参照

```bash
http://localhost:3000/
→ログイン画面が出るので、testuser/testpasswordを入れてください。
```

### ユーザー設定

```bash
ユーザー追加や変更する際は、user.pyの以下の箇所について書き換えたり、
カンマ追加してユーザー情報を追記してください。

# サンプルユーザーデータ
users = {
    "testuser": User(id=1, username="testuser", password="testpassword")
}

```

### フロント、バックログ

```bash
以下のフォルダに保管されています。

chatgpt-backend/output
chatgpt-frontend/output
```

### Webアプリ起動

```bash
docker-compose up -d
```

### Webアプリ停止

```bash
docker-compose down
```

## 今後の展望

```bash
K8S上でも稼働するようにしたい。
GitlabからCICDできるようにしたい。
→Flaskのみ版では完成はできていて、各種ソースファイルや公開記事について整理中。
```