GPTが作成し保存したページ

概要

OpenAI API createCompletionを管理するMacアプリを作成し、それを使ってReactでページの生成が成功したので共有させて頂きます。
説明は稀にChatGPT中毒者しかわからない話も出てきますが、全体的には簡単な話になっていると思います。

（図が偉そうでごめんなさい）

動画デモ

GPTモデルを使ってReactでページフィットネスジムの登録ページが作成される一通りの流れのデモ動画です
※動画は退屈なのでかるーく流してもらえれば

流れ

動画の内容に沿ってReactでページが作成されるまでを時系列に解説していきます

1. 要件のヒアリング

以下の設定されたAIアシスタントを起動します

分類	説明	レベル
モデル	gpt-3.5-turbo-0613	LV5
名前	システム会社営業マン	LV80
役割	お客様からどのようなプログラムを作成したいかヒアリングする	LV3
装備	AIインスタンスを起動する能力(functions)	LV5

※LVはただの雰囲気です

ページの仕様、プログラム要件を入力します

要件をまとめてくれました。更に保存先を聞いてくれました。（さすが営業マン）

保存先とテンプレートページのファイルパスを伝えます。

コツ（プロンプトエンジニアリング）

ここがかなり重要でChatGPTはゼロイチが苦手です。苦手というよりもゼロからイチを説明する人間のコストが膨大なのでテンプレートを渡す方が早いのです。テンプレート はこちらの意図やページの基本の仕様が組み込まれているものになります。
例えばDBの仕様、mysql？ firebase? を日本語の仕様で書くよりもテンプレートに保存のサンプルを記述してあるだけで伝わります。

2. AIからAIを生成

要件を聞き終えた営業マンはプログラマーに仕様を伝え、保存先パスと参考ファイルの内容をテキストで渡します。
（動画だとわかりにくいですが）

↑AIインスタンスの関連性をノード表示で視覚化してあります
program_listner（営業）→ programer

↓営業マンとプログラマーのチャット画面が２つ並んでいます

プログラマーAI

以下の設定されたAIアシスタントを起動します

分類	説明	レベル
モデル	gpt-3.5-turbo-16k-0613	LV10
名前	プログラマー	LV20
役割	仕様、参考ファイルに基づいてコーディングのみします。無駄な発言は許可されていません	LV4
装備	ファイルを読み込む、保存(拡張（独自）)	LV10

コーディングを終えたプログラマーはファイルに保存しました。厳密にはsystemが保存する能力を持っています。

ファイルの読み書きに functionsではなく拡張を利用した理由はfunctionsを通してプログラムコードをapiで渡す際にgpt-3.5-turboがjsonのエスケープを頻繁にミスるからです。

コーディング完成

「俺」がscssのファイルパスを修正します。少し人間の手を借りましたがコーディングは完了しました

- import classes from './Template.module.scss'
+ import classes from './PageTemplate.module.scss'

レイアウトが崩れている？　プログラマーは見た目を気にしません。「要件通り動くからそれでいいじゃないですか」と言っているかもしれません。

3. スタイルを作成して頂きます

次は営業マンを通さずにプログラマーに直接依頼をします。
(現実にもよくあって揉めますよね笑)

以下の設定されたAIアシスタントを起動します

分類	説明	レベル
モデル	gpt-3.5-turbo-0613	LV5
名前	functions	LV28
役割	ユーザーのfunctionsをそのままapi functionsに渡します	LV1
装備	AIインスタンスを起動する能力(functions)	LV5

openai api chat/completions functions の形式に対応してくれます。

先程と同じプログラマーAIが生成されました

スタイルシートのコードディングが完了しました

何も変わっていない。。。

当初の目標

安くて早いgpt-3.5で私の業務（システムアプリ開発）を行えるこのアプリを開発していました。しかし
gpt-3.5モデルを使う中で記憶力の悪さに気がつきました。そでタスクを細かく分散（１回１回のゴールを小さく）すると、仕事がこなせる事がわかったので営業マンとプログラマーに分けました。

目標の方向転換

ですが cssの作成はTemplate.scssとページRegister2.jsの２つのファイルを見合わせながら新たにRegister2.scssの作成が必要です。

といわけで

お待たせいたしましたみんな大好き GPT-4を召喚します

GPT-4はjsのスタイルとHTMLの構造理解し、Template.scssからどのようなデザインを望んでいるかいるか理解してscssファイルを生成してくれます。

「俺」が保存されたcssの参照するファイルパスを修正します

- import classes from './PageTemplate.module.scss'
+ import classes from './Register2.module.scss'

スタイルが適応されました😊

いい感じです！

今後の目標

今はシステム会社営業マンとプログラマーだけの組織ですが、プロデューサー、ディレクター、デザイナーを生成してIT会社を構築していきます。インスタンス制御できるので小規模から大規模な組織づくりができます。また現段階ではMac内で動作していますがクラウド実装に移植してスマフォだけで仕事をできるようにする構想があります。Reactのコーディングは割りと簡単な方だと思うのでUnityやFlutterの仕事をふっていこうと思います。
システムやITだけでは無く他の業種でも使えるものになると思いますが、その頃にはWindowsですべて実装されているのではないかな？笑

↓タコみたいになりました笑

ここまでくれば

ですね！

目標の進捗

達成率 : 20%
現在 ■■□□□□□□□□ 目標

利用したAPI仕様

API
api.openai.com/v1/chat/completions

利用モデル	役割	説明
gpt-3.5-turbo-0613	システム会社営業マン	0613でfunctionsを利用
gpt-3.5-turbo-16k-0613	Reactプログラムコーディング	コーディングするために16kでtoken量を増やしている(functionsは利用していない)
gpt-4	scssコーディング	２つのファイルを認識するために4の頭脳が必要（でした）

最後に

ここまでお読み頂きまして、ありがとうございます。GPTやAIを利用した技術の進歩が早すぎて今私のやっている事が良いものなのか悪いのかわからず、みなさんのご意見をお聞きしたいと思い投稿してみました。「いいね」や「もっとこの方が良いのあるよ」とかなんでも良いので反応が頂けると幸いかと思います。よろしくお願いいたします。
（荒木先生ごめんなさい尊敬しています）

概要

動画デモ

流れ

1. 要件のヒアリング

コツ （プロンプトエンジニアリング）

2. AIからAIを生成

プログラマーAI

コーディング完成

3. スタイルを作成して頂きます

当初の目標

目標の方向転換

といわけで

今後の目標

目標の進捗

利用したAPI仕様

最後に

コツ（プロンプトエンジニアリング）