ChatGPTにコーディングさせてみた⑤ チャットボット作成
今回のトライ
実際にWEBアプリを作っていこうと思います。もちろん必要なコードは全てChatGPTに出力してもらう予定です。
ということで、前回はのコーディングの際はGoogle Colaboratoryを用いていましたが、今日はVisual Studio Code上で作業を実施していきます。
最初の質問
まずはChatGPTに質問し、Flaskローカル環境を構築していきます。
ちなみにFlaskとはPythonで作られたウェブフレームワークのことです。詳しくは僕もわかりません。笑
![](https://assets.st-note.com/img/1686017240384-dHpPv8VxKK.png?width=1200)
![](https://assets.st-note.com/img/1686016653954-MS3eZfpExn.png)
簡易的なプロジェクトのフォルダ構造を参考に上記スクショのようなフォルダ構図を作成しました。
2つ目の質問
実際に「GPT3のAPIをよんで、ユーザーに対する返答を返却するチャットボットをFlaskでWEBアプリとして開発してください」といきなりですが指示を出してみましょう。
![](https://assets.st-note.com/img/1686017397209-M0T3WKofob.png?width=1200)
![](https://assets.st-note.com/img/1686017463050-2FnUhyyNRG.png?width=1200)
ファイル”app.py”と"index.html"にそれぞれ代入し、ターミナル上でじっっこうしていきます。
すると、、、WEB上でチャットボットを表示できました。
![](https://assets.st-note.com/img/1686017560604-NX1tQiVRsp.png?width=1200)
できた!と思ったのですが、入力スペースに言葉を入れて”send”ボタンを押しても何も起こりませんね。。。
これもChatGPTに質問してみましょう。
3つ目の質問
ターミナル上にエラーの表示あったので、とりあえず全コピして丸投げしました。それでもちゃんと正解が返ってくるので驚きです。
![](https://assets.st-note.com/img/1686022815941-KjG3coVMHT.png?width=1200)
![](https://assets.st-note.com/img/1686022836831-TsbovN8iSx.png?width=1200)
回答通りに対処することで、無事にチャット画面を作成することができました。
![](https://assets.st-note.com/img/1686022762326-Yu7oX5b36V.png?width=1200)
最後に
まったくのド素人が3回質問するだけでWEb上でチャットできる仕組みまでできてしまいました。うまくいきすぎて自分でもビックリなくらいです。
しかし、まだまだ序の口。チャットの会話の履歴は残らないし、UIだってひどいままだし、と課題は山積みです。コツコツ対処してどこまでいけるのか検証してみましょう。