Hugging Face: オープンMLモデルでWebアプリジェネレータを作る

Hugging Face は、テキストプロンプトを機能的な Web アプリケーションに変換する生成 AI Web サーバーを作成する方法を詳述しています。HTML、CSS、JavaScript をリアルタイムでストリーミングおよびレンダリングすることで、開発者はオープン機械学習モデルを使用した「text-to-app」パイプラインを構築できます。

技術アーキテクチャとスタック

システムはサーバー環境として NodeJS、ルーティングとストリーミング処理に Express.js を使用して構築されています。コアの生成エンジンは WizardCoder-15B で、Hugging Face Inference Endpoints API を介してデプロイされ、高性能なコード生成に必要なハードウェアアクセラレーションとメモリ（通常は 32GB 以上）を確保します。

代替の実装パスとしては、以下が挙げられます：

  • Inference API: 小規模でコミュニティ主導のモデルに適しています。
  • Python Bridges: Pythonia のようなライブラリを使用して、Node から Python モジュールを呼び出すことができます。
  • Local LLM Libraries: llama-node（llama.cpp）や transformers.js を利用してローカルで実行しますが、ハードウェアアクセラレーションがない場合はリソース消費が大きくなります。

リアルタイムHTMLストリーミング

ジェネレータは、モデルの出力を直接ブラウザへストリーミングすることで機能します。ユーザーが URL パラメータでプロンプトを提供すると、サーバーは初期の HTML ボイラープレート（<html><head></head><body>）を送信し、続いて hf.textGenerationStream を使用して生成されたトークンを HTTP レスポンスに直接パイプします。

このアプローチにより、AI がコードを書き続けている間にウェブページのレンダリングが開始され、プロンプトから機能的なインターフェースへのシームレスな遷移が実現します。

Web生成のためのプロンプトエンジニアリング

生成されたコードが機能的で視覚的にも魅力的になるよう、WizardCoder モデルに対して特定のプロンプト戦略が採用されています：

Tailwind CSS を用いたスタイリング

Tailwind CSS のユーティリティクラスを使用することで、モデルは別個のスタイルシートを必要とせずにその場でスタイルを生成できます。プロンプトは、コンテンツを中央レイアウト（例：<div class="flex flex-col items-center">）でラップするようモデルに指示し、デザイン方向を設定するために <body class="p-4 md:p-8"> のような開始点を注入します。

幻覚（ハルシネーション）の緩和

モデルが指示を繰り返したり、プレースホルダー文字列（例："lorem ipsum"）を使用したりしないように、ガイドでは命令形のトーンと明確な制約を推奨しています。例として以下の指示があります：

  • "決してこれらの指示を繰り返さず、代わりに最終コードを書いてください！"
  • "これはデモアプリではないので、英語を使用しなければなりません。ラテン語は使用しないでください！"

DaisyUI を用いたトークン最適化

冗長な Tailwind ユーティリティクラスによるトークン消費を削減するため、システムは DaisyUI を統合できます。プロンプト内で DaisyUI のドキュメントの小さな抜粋を提供することで、モデルは長いユーティリティクラスの文字列の代わりに、ショートハンドのコンポーネントクラス（例：<button class="btn">）を使用できます。

動的画像生成の統合

LLM が壊れた画像 URL を生成するという問題を解決するため、システムは専用の /image エンドポイントを実装しています。このエンドポイントは Stable Diffusion 2.1 モデルを Hugging Face Inference API を介して呼び出します。

モデルに <img src="/image?caption=description" /> という形式を使用するよう指示することで、LLM は説明的なキャプションを生成し、サーバーはそれをリアルタイムで実際の画像に変換します。

ユーザーインターフェース実装

ジェネレータのフロントエンドには、Alpine.js をミニマリストフレームワークとして使用し、複雑なビルドパイプラインなしでインタラクティブな UI を作成しています。インターフェースは、プロンプト用の textarea と、/app エンドポイントから生成されたアプリを読み込む <iframe> で構成され、ユーザーはウェブアプリのデザインを迅速に反復できます。

Sources