Claude 3でOpenAIのAPIを使ったWEBサービスの修正と、課金周りのちょっとしたトラブルについて
この記事では、既に作成済みのOpenAIのAPIを使ったWebサービスの修正をClaude 3に依頼した過程と、その際の知見を共有する内容となっています。気づきベースなので、知見がある方には真新しさは無い内容となります。
また、OpenAIのAPI課金について誤解していた点もあったので、その辺の話題にも触れます。
本当はChatGPT-4で修正しようとしましたが、どうにも調子が悪いのでClaude 3を使用します。また、作成（追加）されたものは公開しないのであしからず。
Claude 3でPHPやjavascript、HTMLの修正
現時点で、ChatGPT-4とは違い、zipファイルにして連携ができないので、すべてテキストにして連携します。
連携する前に、具体的に何を作りたいのかを決めた方がスムーズに進みます。なので要件定義じみたものを作るべきですが、無くても時間（やりとり）がかかるだけなので、今回は簡単に文章で連携します。
尚、今回の修正はトータル1時間くらいで済んだので、爆速ですね。
次のプログラムは、スケジュールを提案するOpenAIのAPIを使ったサービスのソースコード全量です。これを改造して、スケジュール以外にも使えるようにしたいと考えています。
PHPにおいて、function buildTaskPrompt($data) {というメソッドがありますが、これを、HTML側でプルダウンで選択できるようにしたいです。
例えば、スケジュールをいう選択肢をプルダウンから選択した際には、レイアウトと、そしてPHP側でここにハンドリングするようにしたいです。
次に、別の選択肢、通常を選択した際には、同様の作りの別メソッドを呼ぶようにしたいです。
---
PHPのソース
<?php
〜べた貼り〜
Javascript
〜べた貼り〜
総ステップ数が851くらいなので、そのくらいの規模であれば1回で投入できますね。すると、かなり早くて30秒くらいで修正バージョンを連携してくれます。これは良いですね。
〜ここにコードが連携〜
主な変更点は以下の通りです：HTMLにメソッド選択用のプルダウンを追加しました。
JavaScriptで、選択されたメソッドをサーバーに送信するようにしました。
PHPで、選択されたメソッドに基づいて適切なプロンプト構築メソッドを呼び出すようにしました。buildTaskPromptメソッドは既存のものを使用し、buildOtherPromptメソッドは新しく追加しました。
この修正により、プルダウンでメソッドを選択し、それに応じて異なるプロンプトを構築できるようになります。buildOtherPromptメソッドの実装は、通常のプロンプトを組み立てるロジックに合わせて行ってください。
出来上がったものはちょっとイメージ通りでは無かったので修正を再度お願いしました。そうして、何往復かして、以下のようなものができました。
これは、メソッドの選択で、スケジュールを入力するエリアと、上記のように「通常」となっていますが、別の指示に従って動作するものが出来上がりました。
要するにAPIにおけるroleがsystemの箇所を切り替え、さらに入力エリアも最適化する修正内容ですね。
$prompt = "あなたの課題は、指定されたトピックに関する哲学的概念や思考実験について議論することです。\n" .
"概念を簡単に説明し、主な議論とその意味を提示し、自由回答型の質問を投げかけることで批判的思考を促します。\n" .
"知的好奇心を育む、バランスの取れた客観的なトーンを維持します。: " . $otherTask;
これはGPT3.5相当で動作していますが、それでも適切なプロンプトを与えることで良い結果が得られることが分かります。
トラブルと知見
この作成したシステムは、javascript（クライアント）側と、PHP（サーバ）側と両方に入力チェックを設けています。
Claude 3が提示したソースでは、あまりその辺が考慮されておらず、細かく修正をお願いする必要がありました。
なので、思考停止気味に、コーディングをお願いするというのは、今のAIではまだまだ厳しいですね。
少なくともデバッガーが使えることと、クラスとかメソッドが分かる必要があるかと思います。逆に言えば、それくらいの理解でも動くものは作れるので、個人的にはかなり驚くべき事かなと思います。
もう一点、Claude 3やChatGPT-4に共通する点ですが、こういう機能を作ってほしいと言った際に、全体を見てメソッドを共通的に作り直すことは基本してくれません。
なので、言われたままに実装していくと、非常に保守性に乏しい、縦に長いプログラムが出来上がります。
この辺厄介だったのは、去年作成していたChromeの拡張機能で、当時メソッドやオブジェクト指向って何？状態で作っていたため、凄い入れ子構造になっています。（{{{{{ソース}}}}}みたいな。）
最終的に、機能を追加する際に、自分もChatGPT-4も手が出せないものが完成しまして、結果放置になっています。
ChatGPT-4も自分も成長するので、今はそうなりにくいですが、その辺の知識もまだ最低限必要かもしれませんね。
具体的に、出来上がったソースを見て、ここ共通化できないかや、セキュリティ的な懸念や、ユーザーインターフェース周り（しばらくお待ちください、を表示するなど）を提案できる必要があるのかなと思います。
例えば将来的に、「では、メソッドを共通化しましょうか」や「現状の実装ではUIが不親切かと思います。次の提案をさせていただきます〜」等、コンサル寄りのSE的な働きをしてくれれば、また多くの脅威かと思いますが、まだ大丈夫そうですね。
OpenAIのAPI課金トラブル
動作確認をしていて気付きましたが、以下のメッセージが返されました。
You exceeded your current quota, please check your plan and billing details. For more information on this error, read the docs: https://platform.openai.com/docs/guides/error-codes/api-errors.
クレジットカードを紐付けていましたが、どうやらオートチャージでないのが問題のようで、以下の設定の所をオートチャージにして、残高も増やしてあげたら使えるようになりました。
まとめ
使ってみた感じ、元気だった頃のChatGPT-4とそう大差ない印象を受けました。
コーディングにおいては、最低限動くものについては、ある程度要件通りにどちらも作ってくれる印象です。
違いとしては、Claude 3はデフォルトでメソッド単位や、広い範囲で修正箇所を提示してくれるので、差し替えが凄い楽でした。
ChatGPT-4はその辺面倒くさがるので、プロンプトで言ってあげる必要があります。（全量を出力してください、等）
また、Claude 3はあまりコメントを書いてくれない印象でした。ChatGPT-4はくどいくらいにコメントを書くときがあったので、そういう違いは感じました。ただ、当時は今よりも理解に乏しかったので、それを察して、かなり細かくコメントを書いてくれた説はあります。
（見返したら最初の指示で自分誤字ってますね。）
おまけ（記事の見出し画像）
この記事が気に入ったらサポートをしてみませんか？