従来のコンピューティングでは、ユーザー インターフェースはあらかじめ定義されており、ボタン、メニュー、ウィンドウは、すべてデベロッパーが細心の注意を払ってコーディングしています。しかし、リアルタイムにインターフェースを生成し、インタラクションごとにユーザーのコンテキストに適応させることができるとしたら、どうなるでしょうか。私たちはこの問いを追求するため、無限の生成型コンピュータ エクスペリエンスを実現する研究プロトタイプ（Google AI Studio でデモアプリを表示）に取り組んでいます。
このプロトタイプは、大規模言語モデルがオンザフライで画面を生成するオペレーティング システムをシミュレーションしています。使っているのは、Gemini 2.5 Flash-Lite です。一瞬で高速なインタラクションを生成するためには、この低レイテンシ モデルが不可欠です。ユーザーが操作するのは、静的なファイル システムではなく、クリックするたびにモデルによって作成または再作成される環境です。本投稿では、このプロトタイプを支える中核的な技術の概要を説明します。
UI を即時に生成するには、リクエストのたびに、モデルに明確な構造とコンテキストを提供する必要があります。ここでは、モデルの入力を「UI 構成」と「UI インタラクション」の 2 つの部分に分割してプロンプトを設計しました。
UI 構成は、UI の生成に利用する固定のルールを含むシステム プロンプトです。このルールで、OS レベルのスタイル設定、ホーム画面の形式、マップなどの要素を埋め込むロジックなどの一貫した要素を定義します。
UI インタラクションは、マウスでアイコンをクリックするなど、ユーザーの最新のアクションをキャプチャする JSON オブジェクトです。このオブジェクトは、モデルに次の画面を生成させるための具体的なクエリとなります。たとえば、メモ帳アプリで「メモを保存」アイコンをクリックすると、次のようなオブジェクトが生成されます。
{
// `id`: ボタンの `data-interaction-id` 属性から取得するユニーク ID。
id: 'save_note_action',
// `type`: `data-interaction-type` から取得するインタラクションの種類。
type: 'button_press',
// `value`: ボタンに `data-value-from` 属性があるので、システムは
// ID 'notepad_main_textarea' のテキストエリアのコンテンツを受け取る。
value: 'Meeting notes\n- Discuss Q3 roadmap\n- Finalize budget',
// `elementType`: クリックされた要素の HTML タグ。
elementType: 'button',
// `elementText`: ボタンに表示されているテキスト。
elementText: 'Save Note',
// `appContext`: ユーザーが現在使用しているアプリケーションの ID。
// これは `App.tsx` の `activeApp` 状態から取得する。
appContext: 'notepad_app'
}この 2 段階のコンテキスト設定アプローチにより、一貫したルック アンド フィールを維持しつつ、ユーザーのリアルタイム入力に応じて新しい画面を生成できます。
1 つのインタラクションからでも即座にコンテキストを把握できますが、一連のインタラクションがあればさらに詳しい状況までわかります。このプロトタイプでは、過去 N 回のインタラクションを追跡することで、コンテキストを細かく考慮した画面を生成しています。たとえば、電卓アプリでは、ユーザーが以前にショッピング カートや旅行予約アプリを利用した場合、異なるコンテンツが生成されるかもしれません。追跡するインタラクションの数を変えることで、コンテキストの正確さと UI の可変性のバランスを調整できます。
システムを高速化するには、モデルが UI 画面全体を生成するのを待つことなく、レンダリングを始める必要があります。このプロトタイプでは、モデルによるストリーミングとブラウザのネイティブ パーサーを活用したプログレッシブ レンダリングを実装しています。モデルは HTML コードをチャンク単位で生成し、そのたびにコンポーネントの状態が継続的に追加されます。React がコンテンツを再レンダリングしてくれるので、ブラウザが有効な HTML 要素を受け取ると、すぐにそれが表示されます。ユーザーには、インターフェースが一瞬で画面に表示されるように見えます。
デフォルトでは、モデルはユーザーの入力ごとに、新しい画面をゼロから生成します。つまり、同じフォルダに 2 回アクセスしても、まったく異なるコンテンツが生成される可能性があります。私たちが慣れ親しんでいる GUI が静的であることを考えると、結果が一意に決まらないステートレスなエクスペリエンスが好ましくない場合もあるでしょう。そこで、プロトタイプをステートフルにできるように、このデモシステムには、インメモリ キャッシュを作成してセッション固有の UI グラフをモデリングするオプションを設けています。ユーザーが生成済みの画面に移動すると、再度 Gemini にリクエストせずに、グラフに格納されたバージョンを返します。ユーザーがキャッシュにない新しい画面を要求するにつれて、UI グラフは徐々に増加します。この方法は、生成型出力の品質を損なうことなく、状態を実現します。ただし、単にモデルのサンプリング温度を下げるだけだと、出力の品質が下がるという副作用が起きる場合があります。
これは考え方を示すためのプロトタイプですが、この基礎フレームワークを実用的なユースケースに適用することもできるでしょう。
このような新しい概念を追求することで、人間とコンピュータのインタラクションの新たなパラダイムがどのように進化しているかを理解することができます。モデルは高速になり、機能が向上し続けています。このような生成型インターフェースは、今後の有望な研究開発の分野となるはずです。
