ChatGPTやCodexなどのAIを使って単一HTMLファイルの改修を続けていると、ファイルが大きくなるにつれてトークン消費量が気になってきます。
そこで、単一HTMLを複数のファイルに分割して管理し、必要な部分だけ改修する方法を試してみました。
仕組み
基本的には、次の流れです。
- 単一HTMLをHTML・CSS・JavaScriptなどに分割する
- AIには改修に必要なファイルを中心に読み込ませる
- 改修後、Pythonで分割ファイルを結合する
- 最終的には従来どおり単一HTMLとして利用する
分割することで、毎回巨大なHTML全体をAIに読み込ませる必要性を減らせるのがメリットです。
また、結合処理をPython側で行うため、AIに完成版HTML全体を出力させる必要もありません。
トークン節約のポイント
例えば、100KBの単一HTMLを改修する場合、従来はファイル全体を読み込ませることが多くなります。
しかし、機能別に分割しておけば、数KBのJavaScriptだけを中心に改修できる場合があります。
これにより、入力トークンと出力トークンの両方を削減できる可能性があります。
ただし、AIの開発環境や作業内容によっては、関連ファイルや全体構成を読み込む必要もあるため、必ず削減できるわけではありません。
分割用プロンプトを公開
今回、単一HTMLを分割して管理するためのプロンプトとサンプルファイルをZIPにまとめました。
ZIPには実装例のZIPも含まれており、単一HTMLへの再結合用Pythonスクリプトなどが収録されています。
単一HTMLでの公開・配布を維持しながら、AIによる継続的な改修のトークン消費量を抑えたい場合に便利そうです。
特に、1つのHTMLに機能を追加し続けている方には、試す価値があると思います。
※トークン削減効果については、改修内容やAIの利用環境によって異なります。
プロンプト(ZIP等3種を添付する必要あり)
トークン数節のため添付の単一htmlファイルの細かく分割する作業をお願いします。
添付の単一htmlファイルを、添付の空のフォルダー内に細かく分割して下さい。
添付のzipファイル（HTML分割方法サンプル.zip）が分割方法のサンプルです。
添付フォルダに現在開発しているhtmlファイルを細かく分割して配置して、Codex開発のトークン数節約を行って下さい。結合して1ファイルにするためのファイルも作って下さい。