📝

AIとプロンプトMarkdown、及びPyodide又はAssemblyScriptによるDockerFile風どこでも開発環境構築

に公開
WebAssembly
AssemblyScript
Pyodide
プロンプトエンジニアリング
zennfes2025ai
tech

これは何？

PyodideやAssemblyScriptを用いた環境セットアップ手順と構築するべきアプリの構成や設計をレシピとして事前にまとめておいて、使いたいときにAIに与えるプロンプトに添付することで、手軽に複雑な処理をAIに要請出来ます。また、この手法は従来直接生成が難しかった多様なバイナリファイルに対してもPyodideやAssemblyScriptを介することで生成の可能性を広げます。

将来的にはこれに類する手法に加えてWebGPUを利活用することでモデル推論や学習もオンブラウザで実用的な速度で出来るようになるのではないかと期待しています（Transformers.jsで出来ることがPyodideで出来るようになると最高です）。

この方法で出来ること

  • 「AIがあってブラウザが動けばどこでもアプリやバイナリファイルを作れます」の実現
  • どこでも Python 開発 with AI
  • どこでも Wasm 開発 with AI
  • どこでも簡易 Computer Use
  • 仮想環境の実行コストのクライアントサイドへの押し付け
  • 実行環境の悪用リスクのクライアントサイドへの押し付け

つまり？

俺が天才ってことです ← 違います

汎用TextToFileの実現＋α

将来的にはオンプレミス／エッジAI向けComputerUseサンドボックスの実現

Java 並みに「Write once, run anywhere」な Docker 風の簡易コンテナ環境がモダンブラウザと AI と環境構築プロンプトで手軽に実現出来ます。ブラウザサンドボックスにより厳重にホスト環境から隔離されている点も魅力です。加えて、AIベンダー非依存のMarkdownベースのソリューションという点にも面白みや共有上の利点があります。

※ Docker とのプロセスフロー比較

📄 レシピシステムのフロー
🐳 Dockerシステムのフロー

具体的には？

  • Office ファイルの直接生成機能が無いクラウドAI（例：Gemini、Perplexity）で Office ファイルを生成
  • AI 製 Web アプリに WASM をひとつまみ、実行ファイルサイズの減量に
  • GPT-OSS-120B のような大型ローカルモデルに間接的にアプリの開発・実行環境を付与し、用途を手軽に拡張
    • レシピを記述したMarkdownファイルの構造上、ある程度のコンテキストウィンドウ長と文脈やプログラムの理解力が求められるので、モデルのパラメータ数は最低20B～30Bはあると良さげです。

どうやって使うの？

  1. 一般的な生成AIにレシピのMarkdownファイルを添付
  2. プロンプトで「添付のレシピを元に、魔王軍の営業報告のプレゼンを5枚で構築しpptxファイルをダウンロード可能なWebページを生成・表示して下さい。」等と依頼
  3. バグが発生した場合はエラーメッセージをコピペしてAIに修正依頼

作例及びスクリーンショット

クリックして展開

ChatGPT

「魔王軍の営業報告のプレゼンを5枚で作って。」

Gemini

「魔王軍の営業報告のプレゼンを5枚で作って。」

Claude

「魔王軍の営業報告のプレゼンを5枚で作って。」

Perplexity

「魔王軍の営業報告のプレゼンを5枚で作って。」

WASM アプリ

「Counter Demoを作成して」

生成されたカウンターデモHTMLファイル
assemblyscript-counter-demo

「Ball Physics Demoを作成して」

生成されたボール物理演算デモHTMLファイル
assemblyscript-ball-physics-demo

「Image Filter Processorを作成して」

生成された画像フィルターデモHTMLファイル
assemblyscript-image-filter-processor.jpeg

「Pongのパチモンを作成して」

生成されたゲームのHTMLファイル
pongu-championship

プロンプト詳細
以下の要件を満たすPongクローンを作成してください。
・添付レシピに基づくWASM製ゲームエンジン
・Pongをもじったパチモン感溢れるゲームタイトル
・シングルユーザーモード
・2ユーザー対戦モード
・キーボード及びJoystickに対応
・レトロなオープニング画面と一人プレイ・二人プレイ選択画面、及び8bitサウンド風効果音&BGM
・レスポンシブ対応

リンク先にレシピの PoC をまとめてあります。

https://github.com/HarmoniaEpic/text-to-officefile-or-wasmapp-recipes

レシピやサンプルファイルはスマホやタブレットからもお試し頂けます。

どうやって作るの？

アイデアとしてはそれほど複雑ではなく、以下のワークフローを実現する Markdown ファイルを作成出来ればOKです。

※ 先ほどのサンプル PoC プロジェクトの場合、Markdown ファイルのかなりの部分を Claude を用いて構築しています。設計を明確化した上で細部はAIに記述させ具体化すると楽ちんです。

Markdownファイルには例えば以下を含めます。

  • AIへの指示
    • ユーザーの指示で柔軟に差し替えるべき部分の明確化
    • 禁止事項の明確化
  • HTMLテンプレート
  • デバッグフィードバックの実装詳細

※ 各種インジェクション攻撃対策等、セキュリティについての基本的な考慮事項もレシピに加えると良いかもしれません。

※ レシピを作るためのレシピプロトタイプ

以下は「対話的にレシピを作るためのレシピ（メタレシピ）」のプロトタイプです。レシピ開発のヒントとしてお使いください。

https://github.com/HarmoniaEpic/text-to-officefile-or-wasmapp-recipes/blob/main/META-RECIPE.md

オンブラウザのWASM内サーバーにサンドボックス外部からアクセスさせたいんだけど

ブラウザのサンドボックスの仕様上、外部から直接は無理っぽいです。ブラウザ以外のWASM実行環境を利用するか、ブラウザ向けにサンドボックスからのレピーター機能・中継機能を持たせた拡張機能を開発するといったひと手間が必要です。汎用AIチャットにレシピと共に依頼する手軽さは失われますが、軽量サンドボックス内にサーバーを立てられるのは魅力です。

おまけ：WAT2WASMバイナリレシピ

その後の拙作のAssemblyScript系レシピの原点にあたるレシピ。この一歩は人類にとって小さな一歩ですが、私にとっては偉大な一歩です。

PoC-WAT2WASM-RECIPE.md

上記ファイルをAIチャットに添付し、例えば「添付のレシピを元に、0～100までの整数に含まれる素数をリストするWASMプログラムを生成するWebページを作成して下さい。」等の指示を与えます。すると以下のようなHTMLファイルまたはそのコードを得られます。

prime_numbers_wasm.html

生成されたWebページはWASMバイナリの実行環境も兼ねています。自分が過去に本レシピを用いて作成したバイナリや他の人が本レシピを用いて作成したバイナリがあれば本ウェブページで実行可能です。

Discussion