Dalam komputasi tradisional, antarmuka pengguna sudah ditentukan sebelumnya. Setiap tombol, menu, dan jendela dikodekan dengan cermat oleh developer. Namun, bagaimana jika antarmuka bisa dibuat secara real time, menyesuaikan diri dengan konteks pengguna dengan setiap interaksi? Kami mengeksplorasi pertanyaan ini dengan membangun sebuah prototipe riset (lihat aplikasi demo di Google AI Studio) untuk menciptakan pengalaman komputer generatif yang tanpa batas.
Prototipe kami menyimulasikan sistem operasi dengan setiap layar dibuat secara real time oleh model bahasa besar. Model ini menggunakan Gemini 2.5 Flash-Lite, sebuah model dengan latensi rendah yang sangat penting untuk menciptakan interaksi responsif yang terasa instan. Alih-alih menavigasi sistem file statis, pengguna berinteraksi dengan lingkungan yang dibangun model dan dibangun kembali dengan setiap klik. Postingan ini menguraikan konsep teknis inti di balik prototipe ini.
Untuk membuat UI secara real time, model perlu diberi struktur dan konteks yang jelas untuk setiap permintaan. Kami merancang prompt dengan membagi input model menjadi dua bagian: “konstitusi UI” dan “interaksi UI”.
Konstitusi UI adalah prompt sistem yang berisi serangkaian aturan tetap untuk pembuatan UI. Aturan-aturan ini menentukan elemen-elemen yang konsisten, seperti pengaturan gaya visual tingkat OS, format layar utama, serta logika untuk menyematkan elemen seperti peta.
Interaksi UI adalah objek JSON yang menangkap tindakan terbaru pengguna, seperti klik mouse pada ikon. Objek ini berfungsi sebagai kueri spesifik yang memicu model untuk menghasilkan layar berikutnya. Sebagai contoh, mengklik ikon “Save Note” di dalam aplikasi Notepad akan menghasilkan objek seperti berikut:
{
// `id`: The unique ID from the button's `data-interaction-id` attribute.
id: 'save_note_action',
// `type`: The interaction type from `data-interaction-type`.
type: 'button_press',
// `value`: Because the button has a `data-value-from` attribute, the system
// retrieves the content from the textarea with the ID 'notepad_main_textarea'.
value: 'Meeting notes\n- Discuss Q3 roadmap\n- Finalize budget',
// `elementType`: The HTML tag of the element that was clicked.
elementType: 'button',
// `elementText`: The visible text inside the button.
elementText: 'Save Note',
// `appContext`: The ID of the application the user is currently in.
// This comes from the `activeApp` state in `App.tsx`.
appContext: 'notepad_app'
}Pendekatan pengaturan konteks dua bagian ini memungkinkan model mempertahankan tampilan dan nuansa yang konsisten saat menghasilkan layar baru berdasarkan input pengguna yang spesifik secara real-time.
Interaksi tunggal memberikan konteks langsung, tetapi rangkaian interaksi menyampaikan narasi yang lebih kaya. Prototipe kami bisa menggunakan rekam jejak dari N interaksi sebelumnya untuk menghasilkan layar yang lebih relevan secara kontekstual. Sebagai contoh, konten yang dihasilkan aplikasi kalkulator dapat berbeda tergantung apakah pengguna sebelumnya mengunjungi keranjang belanja atau aplikasi pemesanan perjalanan. Dengan menyesuaikan panjang rekam jejak ini, kami bisa mengatur keseimbangan antara akurasi konteks dan variasi UI.
Untuk membuat sistem terasa cepat, kami tidak bisa menunggu model menghasilkan seluruh layar UI sebelum rendering. Prototipe kami memanfaatkan streaming model dan parser native browser untuk mengimplementasikan rendering progresif. Ketika model menghasilkan kode HTML dalam potongan kecil, kami terus menambahkannya ke status komponen kami. React kemudian merender ulang konten, sehingga browser dapat menampilkan elemen HTML yang valid segera setelah diterima. Bagi pengguna, hal ini menciptakan pengalaman antarmuka yang muncul di layar hampir secara instan.
Secara default, model kami membuat layar baru dari awal untuk setiap input pengguna. Ini berarti mengunjungi folder yang sama dua kali dapat menghasilkan konten yang sama sekali berbeda. Pengalaman stateless non-deterministik ini mungkin tidak selalu disukai karena GUI yang biasa kita gunakan bersifat statis. Untuk memperkenalkan statefulness pada prototipe, sistem demo kami memiliki opsi untuk membangun cache dalam memori guna memodelkan grafik UI khusus sesi. Ketika pengguna membuka layar yang telah dibuat, sistem akan menyajikan versi grafik yang tersimpan, tanpa perlu kueri ulang ke Gemini. Ketika pengguna meminta layar baru yang tidak ada dalam cache, grafik UI akan bertambah secara bertahap. Metode ini memberikan status tanpa mengorbankan kualitas output generatif, yang bisa menjadi efek samping hanya dengan menurunkan suhu pengambilan sampel model.
Meskipun ini adalah prototipe konseptual, framework yang mendasarinya bisa diterapkan pada kasus penggunaan yang lebih praktis.
Menjelajahi konsep-konsep baru seperti ini membantu kami memahami bagaimana paradigma baru dalam interaksi manusia dan komputer terus berevolusi. Seiring dengan model yang semakin cepat dan kemampuannya terus berkembang, kami percaya bahwa antarmuka generatif merupakan bidang yang sangat menjanjikan untuk riset dan pengembangan di masa depan.
