「ChatGPTを使用して完全な製品を作成するために学んだ7つの教訓」

7 Lessons Learned for Creating a Complete Product Using ChatGPT

ChatGPTのコーディング能力を活用すれば、正しい方法で使えば短時間で製品全体のコーディングが非常に容易です

間もなく、ChatGPTを使用して独自のフランス語チューターを作成した方法を共有しました（オープンソースです）。アプリの設計（特にバックエンド）について説明し、さまざまなAIベースのサービスを接続して設定する方法を説明しました。ただし、アプリのフロントエンドの作成方法についてはほとんど触れませんでした。フロントエンドのプログラマではなく、JavaScriptの知識は<script></script>タグに配置する必要があることくらいしかありません。

しかし、私が考えていたアプリにはUIが必要であり、かなり動的なUIが必要でした。それはHTML、JavaScript、CSSを意味しますが、これらのコーディングの方法がさえわかりませんでした。

知っていたことは、どのように見えるかということでした。デザインは頭の中にあり、これらをコーディングする方法を知っていたらどのように行うかもわかっていました。そこで、新しいかなり革新的なアプローチを取ることにしました。ChatGPTにコードを書いてもらうように頼むことにしました。その時点で、コードに関連する要求をChatGPTに対してする経験はすでにありましたが、これほど複雑なものは試したことがありませんでした。

この文章を読んでいるということは、うまくいったことを知っています。私が見たいと思っていたものを単に大型言語モデル（LLM）に説明するだけで、私は完全なアプリを作成しました。これが起こったことを確認するために、もう一度書きたいと思います。アルゴリズムが、私がプレーンな英語で説明することによって、完全なアプリをコード化したのです。

• ダイナミックAIプロジェクト見積もり’ (Dainamikku AI purojekuto mitsumori)
• 「あなたのLLMアプリを守る必読です！」
• ファイル管理の効率化：サーバーまたはサーバー上で実行されているDockerコンテナーにおけるファイルの接続と変更をSFTPを使用してSublime Textで行うためのガイド

それにもかかわらず、驚くべきことに、このプロセスは思っているほど簡単ではありませんでした。そのため、ChatGPTを使用して複雑なコードを生成する方法について学んだいくつかのヒントを共有したいと思います。

1. 自分でデザインする

LLMはコードやコンテンツを作成するための強力なツールですが、考えることはありません。リクエストを満たすだけです（少なくともそれを試みます）。つまり、考えること、特にデザインはあなた次第です。最終的な製品の見た目を事前に把握してから、生成モデルへのリクエストを送信する前に確認してください。

さらに詳しく説明すると、自分にとって最適なテックスタックについて調査する必要があります。複雑なアプリをステップごとに分解する必要があるため、LLMは最終的な製品の外観を予測できず、最適でないライブラリやサービスを使用する可能性があります。

たとえば、ChatGPTが最初に生成したUIはtkinterに基づいており、実際のアプリケーションを作成するものでした。これにより、動的なUIを作成することがより複雑になります（そしてこれらの日においては標準ではありません）。別の試みでは、steamlitに基づいていました。これにより、非複雑なUIの作成が非常に簡単になりますが、再生録音ボタンを「ユーザーのメッセージの横にのみ追加するが、ユーザーがオーディオを録音した場合にのみ」というような複雑な要求には対応していませんでした。私の場合、Flaskを使用することが最適な方法だと理解する必要がありました。

2. タスクに分解し、簡単なものから始める

ChatGPTに一度に製品全体のコーディングを依頼すると、壊れたコードが返ってくる可能性が高いです。どれだけ「スマート」であっても、一度にすべての詳細に注意を払うことはできません。デザインをタスクとフェーズに分割し、まずは比較的シンプルなものから始め、それに追加していくことが重要です。

たとえば、これが私の最終的なチャットUIです。最初にデザインして計画したものです：

UIにはさまざまな種類のボタンや機能がありますが、私が最初にChatGPTに提示したプロンプトは次のとおりです：

PythonのチャットボットアプリケーションのためのPython web UIを作成します。ユーザーがプロンプトを入力するテキストボックスは画面の下部にあり、以前のメッセージは画面上に保持されます。

特別なボタンもなく、メッセージの横にプロフィール画像もなく、特別なものはありません。シンプルなチャットUIのみで、これを基盤として構築します。このプロンプトによって4つのファイルが生成されました：

• バックエンドとして機能するPythonファイル（Flaskを使用）
• HTMLファイル
• JavaScriptファイル（jQueryを使用）
• CSSファイル

これを持っていれば、製品をより複雑にすることができます。

おそらく私は自己矛盾していると思われるかもしれません – アプリを小さなステップに分解するように指示しているのに、最初のプロンプトで4つのファイルが生成されたと告白しています。ChatGPTからの各リクエストごとに、タスクを完了するために必要なコードの量と、それが非標準かつ特定のものであるかのトレードオフがあります。チャットUI全体を要求すると、かなり一般的なものが生成されますが、多くのコードが必要です。チューターのメッセージの横に「翻訳ボタンを追加し、メッセージバブルの右側に配置し、常に垂直中央にあり、再生ボタンの上部にあるようにしてください」と要求すると、非常に具体的な要求になるため、それ自体がリクエストになります。

3. 本当に欲しいものを注意深く説明する

製品に対する各リクエストと追加は、複数のファイル（および各ファイルごとの複数の変更）に変更をもたらす可能性があります。つまり、新しい変数、関数、エンドポイントが各リクエストごとに作成され、異なる場所から参照されます。それらに与えられる名前はChatGPTが提供し、意味のある名前を提供するために最善を尽くします – しかし、それはコンテキストをよく説明してくれる場合にのみできます。

例えば、製品に「保存」ボタンを追加したい場合は、次のように尋ねることをお勧めします：

テキストボックスの左側に「セッションを保存」ボタンを追加します。フロッピーディスクのアイコンを持つべきです。クリックすると、UI上のすべてのメッセージが「saved_session.json」という名前のJSONファイルに保存されます。

次のような文脈のないプロンプトではなく：

テキストボックスの左側にフロッピーディスクのアイコンがあるボタンを追加します。クリックすると、UI上のすべてのメッセージがJSONファイルに保存されます。

コンテキストが豊かなプロンプトを好むことで、より良い名前付け規則が得られます。

4. 何を要求しているかを非常に理解してください

ここに私が解決しなければならなかった本当の問題がありますが、それには気づきませんでした：私はUIにフランス語のチューターから生成されたテキストをストリーミングしながら表示させたかったのですが、OpenAI ChatCompletion APIを使用してチューターの応答を作成するために使用していたPython APIは、Python Generatorを返し、それが消費されて画面に表示される必要がありました。そして、私はChatGPTに次のように尋ねました：

ジェネレーターを消費し、メッセージテキストをアイテムごとに更新するJavaScriptの関数を書いてください

私が知らなかったことは、私は何か不可能なものを求めたということです – 私は人生で真剣にJavaScriptを書いたことがないので。JavaScriptにはPythonジェネレーターを処理する方法がないのです。その結果、ChatGPTは私が求めたことを正確に行うために、奇妙でまったく役に立たない解決策を提供しました。JavaScriptのコードを変更しようとしていました。

ChatGPTは、ガイドラインに違反しない限り、リクエストを正確に要求通りに達成しようとします。私が本当に必要だったのは、私が愚かなことを頼んでいると教えてくれることでしたが、それはただの方法ではありません。

この問題は、私が不可能なことを頼んでいることに気付いた時に修正されました（古い方法 – GoogleとStackOverflow）、そして私のプロンプトを次のようなものに変更しました：

レスポンスジェネレーターを取得し、メッセージテキストをアイテムごとに更新する機能を追加してください

これにより、JavaScriptファイルとPythonファイルの両方が変更され、望ましい結果が得られるようになりました。

5. LLMは自身のコードを元に戻すことができません（および元に戻す方法）

ChatGPTはコードの作成において優れていますが、それはただの言語モデルであり、特に2つまたは3つ前のプロンプトに戻すように要求した場合にはうまく機能しません。LLMを使用してコードを段階的に生成する際には、常に満足のいく最後の動作するバージョンのコードのコピーを保持することを強くお勧めします。そのため、ChatGPTが追加した新しいコードが壊れて修復できない場合には、コードを簡単に以前の動作した状態に戻すことができます。

しかし、注意が必要です。なぜなら、コードを元に戻す場合は、ChatGPTも同様に元のコードの見た目を正確に把握する必要があるからです。それを達成するためには、新しいセッションを開始し、次のようなプロンプトで開始することが最善です：

チャットボットアプリケーションを構築しています。これが私のコードです：HTML:```ここにHTMLコードを入力```JavaScript:```ここにJavaScriptコードを入力```CSS:```ここにCSSコードを入力```Python:```ここにPythonコードを入力```テキストボックスの左側に「セッション保存」ボタンを追加します。フロッピーディスクのアイコンを表示してください。クリックすると、UI上のすべてのメッセージが「saved_session.json」という名前のJSONファイルに保存されます。

（この時点ではChatGPTのCode Interpreterは利用できませんでした）。プロンプトが1つのメッセージとして送信するには長すぎる場合は、2つに分割してください。これらのメッセージの間にいるときに「生成を停止」ボタンをクリックして、ボットが不要なテキストを挿入するのを防ぎます。

6. 長時間戦うべきではありません

ChatGPTを使ってコーディングするうれしい点の一つは、もし壊れたコードを書いたり、コードが意図した通りに動作しなかった場合には、エラーメッセージを送信するだけで修正してくれることです。

しかし、常にそれが実現するわけではありません。時にはChatGPTがバグを修正できず、または別のバグを作り出してしまうこともあります。その場合、新しいエラーを送信して修正を再度依頼します。これが2回以上または3回以上続く場合、コードが壊れすぎて過度に変更されている可能性があり、単に動作しなくなることがあります。そのような場合には、停止し、元に戻し（上記参照）、そして要求を再表現してください。

7. プロンプトの書き方を学びましょう

ChatGPTの一連の利点は、日常的な言葉を使って対話できることですが、プロンプトを正しく書く方法を知っていると結果に大きな影響を与えることができます。そのため、その方法を学ぶ時間を確保することを強くお勧めします。例えば、OpenAIとDeepLearning.AIによるこの無料のコースは必須です。特に、指示、コード、例を1つのプロンプトに組み合わせる方法についてのレッスンです。

プロンプトに関して学ぶ際に最も重要なことの一つは、プロンプト内のフリーテキストとコードの間に明確な違いがあることを確認することです。例えば、次のように書く代わりに：

Pythonの関数です： def func(x):   return x*2これを修正して、入力が負数の場合には入力の絶対値の平方根を返すようにしてください。

次のように書いてください：

Pythonの関数です： ```def func(x):   return x*2```これを修正して、入力が負数の場合には入力の絶対値の平方根を返すようにしてください。

また、可能であれば、入出力の例を提供してください。これはLLMに対して何をすべきかを説明するための最善の方法であり、要求にあいまいさを排除します（入力が正数の場合、モデルは何を返すべきですか？x*2を保持するべきですか、それとも何も返さないべきですか？）：

Pythonの関数です： ```def func(x):   return x*2```これを修正して、入力が負数の場合には入力の絶対値の平方根を返すようにしてください。例：入力：2、出力：4入力：-9、出力：3

ボーナス：適切なLLMを選ぶ

「ChatGPT」は、モデルそのものではなく、ウェブ製品の名前です。無料版ではGPT-3.5にアクセスでき、有料版ではGPT-4が含まれており、コーディングタスクで劇的に優れたパフォーマンスを発揮します。新しいCode Interpreterがありますので、実際にコードを実行してテストすることも可能です。

別のLLMを選ぶことに決めたとしても、選んだLLMがコーディングタスクでうまく機能することを確認してください。そうでなければ、これらのヒントは何の助けにもなりません。

全てをまとめると、LLMとのコミュニケーションにおいて最も重要なことは、すべての言葉が重要であるということです。LLMは考えることがなく、私たちの望むことを明示的に説明しない限り、真に理解することはできません。なぜなら、彼らは（まだ）人間ではなく、単なるツールだからです。そして、すべてのツールと同様に、それを使い方を知らなければ、何も成し遂げることはできません。次のプロジェクトでこれらのヒントが役立つことを願っています！

We will continue to update VoAGI; if you have any questions or suggestions, please contact us!