Gemma 4 リサーチとテーマ付きHTMLレポート作成

自己ホストした Gemma 4 モデルを使って Google Gemma のテーマ付き HTML レポートを調査・作成する

新しい AI モデルファミリーを調査するには、複数のソースを行き来し、結果を統合し、さらに見栄えの良い成果物として整形する必要があります。このワークフローは、ローカルでホストされた Gemma 4 31B モデルを vLLM 経由で動かすことで、Eigent がそのパイプライン全体を排除する様子を示します。単一のプロンプトから、複数のエージェントをオーケストレーションして、調査、執筆、スタイリング、そして洗練された HTML ページの納品までを実行します。

このデモが特筆すべきなのは、マルチエージェントのオーケストレーション、ライブ Web リサーチ、スキルベースのドキュメント生成、テーマ付き HTML 出力というワークフロー全体が、手元のハードウェア上で動作するオープンウェイトの 31B パラメータモデルによって駆動されている点です。

1Eigent で Gemma 4 をモデルとして設定する

設定 → エージェント → vLLM に移動し、Model Endpoint URL をローカルでホストしているインスタンス（例: http://localhost:8000/v1）に設定し、Model Type を gemma4-31b に設定します。

これにより、Eigent はすべてのエージェントタスクをクラウド API ではなく自己ホストの Gemma 4 インスタンス経由でルーティングし、データをローカルに保ちながら推論コストをゼロにできます。

2エージェントスキルをダウンロードしてインポートする

Eigent Skills Hub の eigent.ai/skills にアクセスし、doc-coauthoring と theme-factory のスキルパッケージを zip ファイルとしてダウンロードします。

Eigent に戻り、設定 → エージェント → スキル に移動して、スキルを追加 ダイアログから両方の zip ファイルをドラッグ＆ドロップします。各スキルパッケージには、Eigent にいつ、どのようにスキルを有効化するかを指示する SKILL.md ファイルが含まれています。theme-factory スキルには、厳選されたカラーパレットとフォントの組み合わせを備えた 10 種類の事前構築済みテーマ定義も含まれています。

3リサーチプロンプトを送信する

スキルをインポートし、Gemma 4 を設定したら、Eigent のチャット入力欄にタスクのプロンプトを入力します。

{{doc-coauthoring}} と {{theme-factory}} の参照は、このワークフローで両方のスキルを有効化するよう Eigent に指示します。Eigent はすぐに実行計画を開始します。

4Eigent がタスクを分解して計画する様子を見る

Gemma 4 はプロンプトを分析し、2 つの連続するタスクに分解します。

1. リサーチタスク: Reuters、TechCrunch、Google の公式サイト、公式ドキュメントを使って Gemma モデルファミリーを調査します。主要な発見、モデル比較、推奨される次のステップを抽出します。「Key Findings」「Comparisons」「Next Steps」の 3 セクションを含む、詳細なリサーチ要約を markdown 形式で出力します。

2. HTML 生成タスク: 提供されたリサーチ要約を使い、doc-coauthoring と theme-factory スキルを活用して、洗練されたプロフェッショナルな HTML ページを作成します。最終 HTML ファイルを作業ディレクトリに保存します。

このタスク分解は自動的に行われます。Gemma 4 は依存関係を理解し、それに従って作業を順序立てます。

5マルチエージェントのオーケストレーションが始動する

Eigent は計画を実行するため、複数の専門エージェントを並列で起動します。

• Browser Agent は、Web 全体を調査するために並行ブラウザーセッションを起動します。Google 検索、Reuters、TechCrunch、Gemma の公式 Google DeepMind ページ、Google AI ブログを訪問し、スループットを最大化するためにすべて同時に進めます。

• Developer Agent は保留中のタスクを待機し、HTML 生成に進む前にリサーチ要約を待ちます。

Browser Agent は、複数の Web ページを同時に処理し、Gemma モデルファミリーのアーキテクチャ、デプロイオプション、エコシステム、ライセンスに関する関連情報を抽出することで、Gemma 4 の大きなコンテキストウィンドウを活用します。

6Browser Agent がリサーチ要約を返す

指定されたすべてのソースを確認した後、Browser Agent は統合されたリサーチを含む構造化された Completion Report を生成します。レポートには次の内容が含まれます。

• Key Findings: Gemma は、Google DeepMind によって開発された軽量で最先端のオープンウェイトモデル群であり、Gemini モデルと同じ技術を用いて構築されています。このエコシステムは効率性を重視して設計されており、開発者はさまざまなハードウェア上でローカルに動作する AI アプリケーションを構築できます。

• Core Characteristics: Gemini の研究を基盤にしたアーキテクチャ、高度に最適化されたデバイス上およびローカル動作、Hugging Face、Kaggle、Vertex AI、Ollama、LM Studio から利用可能、1 億 1,000 万ダウンロードを超えるエコシステム成長、商用利用向けの独自ライセンス条件を伴うオープンウェイトライセンス。

• GPT-4 との比較: GPT-4 は通常 API またはクラウド経由でアクセスする大規模なマルチモーダルモデルであるのに対し、Gemma はローカルデプロイ、完全なファインチューニング制御、オフライン動作を可能にするオープンウェイトの代替手段を提供します。

• Next Steps: 開発統合、デバイス上デプロイのテスト、特化ユースケース、スケーリングオプションなどの推奨アクション。

この markdown のリサーチ要約は、次のフェーズの入力として自動的に Developer Agent に渡されます。

7Developer Agent がスキルを取り込み、HTML を生成する

Developer Agent はリサーチ要約を受け取り、両方のスキルを有効化します。doc-coauthoring の SKILL.md を読み、構造化されたドキュメントワークフローを理解し、theme-factory の SKILL.md を読み、厳選されたテーマコレクションにアクセスします。

ターミナルを使って、Developer Agent は次の処理を行います。

1. 利用可能なスキルを確認して doc-coauthoring と theme-factory を見つける
2. テーマのショーケースを読み、適切なビジュアルテーマを選択する
3. workspace にプロジェクトディレクトリを作成する
4. リサーチ内容と選択したテーマのカラーパレットおよびタイポグラフィを組み合わせた、完全に自己完結した HTML ファイルを書く

Developer Agent はテーマの hex コード、フォントの組み合わせ、ビジュアルアイデンティティを見出し、本文、カードコンポーネント、背景要素などすべてのセクションに適用し、プロフェッショナルが手作業でデザインしたような成果物を作成します。

8最終的なテーマ付き HTML レポートを確認する

完成した HTML ページは workspace フォルダに直接保存されます。開くと、「Google Gemma Family of Models — Advanced Research Summary & Strategic Analysis」というタイトルの洗練されたダークテーマのレポートが表示され、次の内容が含まれています。

• Gemma のアーキテクチャ、デプロイ特性、アクセシビリティ、エコシステム成長、ライセンス条件を扱うスタイル付きの箇条書きを含む Key Findings セクション
• GPT-4 のようなクラウドベースの代替手段と Gemma を比較する Comparisons のマトリクス
• 開発統合、デバイス上デプロイ、特化ユースケース、スケーリングに関する実行可能な提案を含む Next Steps セクション
• ソースの帰属を含むプロフェッショナルなフッター

ページ全体はレスポンシブで、1 つの HTML ファイルに自己完結しており、関係者と共有したり社内で公開したりする準備が整っています。すべてローカルハードウェア上で動作する 31B オープンウェイトモデルによって生成されています。

9このワークフローが重要な理由

このデモは、3 つの機能が連携して動作することを示しています。

• オープンウェイトモデルの性能: vLLM 経由でローカル実行される Gemma 4 31B は、複雑なマルチエージェントオーケストレーション、ライブ Web リサーチ、コード生成を処理します。これらは通常、はるかに大規模なクラウドホスト型モデルに関連付けられるタスクです。
• スキルの組み合わせ: doc-coauthoring と theme-factory のスキルはシームレスに組み合わさります。どちらのスキルも互いを認識していません。Eigent がそれらを 1 つのパイプラインにオーケストレーションします。
• マルチエージェント並列処理: Browser Agent は複数ソースを横断して同時に調査し、Developer Agent は構造化された受け渡しを待機するため、品質を損なうことなくスループットを最大化できます。

10次に試すこと

最初のレポートを生成したら、次のようなフォローアッププロンプトで発展させることができます。

11より良い結果を得るためのヒント

• ソースを明示する。 Reuters、TechCrunch、公式ドキュメントを指定すると、Browser Agent は曖昧な検索に頼らず明確な調査ルートを得られます。
• ダブルブレースのスキル参照を使う。 プロンプト内で {{doc-coauthoring}} と {{theme-factory}} を記述すると、インポート済みのスキルが明示的に有効化されます。
• 出力先を指定する。 「HTML ファイルを workspace フォルダに保存する」と依頼すると、Developer Agent は最終成果物の書き込み先を正確に把握できます。
• モデルに計画させる。 Gemma 4 のタスク分解は、個々の手順を細かく指示するよりも、望ましい成果を説明する方が効果的です。