🐕
ChatGPT APIで、複数のプログラミングコードを同時にチェックできるWEBツールを作ってみた。
ChatGPT APIで、複数のプログラミングコードを同時にチェックできるWEBツールを作ってみた。
とりあえず、暫定的に↓に公開していますが、そのうち消す予定です。
作成した目的
- 日常的にAIにコードの見直しをさせているが、規模が大きめのアプリケーションを作ると複数のコードが関連するため、一つずつ関連付けを見なおすのが面倒だった。
- 最初、Google Spread SheetのGASで対応しようとしたが、コード管理が意外と面倒だった。
使用技術
- HTML,CSS,JavaScript
- jQuery,BootStrap5
使い方
1.ファイルを開きます。（HTML１枚で作っています。PWAにもしていませんので、皆様で好きに改造して頂ければ幸いです）
2.テキストボックスを追加ボタンを押すと、下にコード入力画面が出てきます。
3.後はご自分のAPIKEYをコピペして、Promptを入力するだけです。
4.サンプルとしてテキストボックスを追加を２回クリックして、それぞれにindex.htmlとstyle.cssとファイル名を付けます。
5.Promptに「index.htmlで適当なLPを書いて、style.cssで適当な装飾をして欲しい」という命令文を書いてGPTへ送信ボタンを押します。
6.すると、さっき作ったテキストボックスの右側にAIがコードを書いてくれます。
7.確認のためファイル名の横にある表示を押してみて下さい。
8.index.html、style.cssにそれぞれのコードが生成されていると思います。
最後に
かなり適当に作ったので、繰り返しになりますが、誰か改造してくれれば嬉しいです。
ReactやVueのバグ探しに疲れたため開発しましたが、もっと使いやすくなれば嬉しいです。
ご要望があれば、GPT-4を使うための機能も追加したいと思います。
ご覧頂きありがとうございました。
Discussion