En la informática tradicional, las interfaces de usuario están predefinidas. Los desarrolladores codifican meticulosamente cada botón, menú y ventana. Pero ¿y si se pudiera generar una interfaz en tiempo real, que se adapte al contexto de un usuario con cada interacción? Exploramos esta pregunta construyendo un prototipo de investigación (ver app de demostración en Google AI Studio) para una experiencia de computadora generativa e infinita.
Nuestro prototipo simula un sistema operativo en el que cada pantalla se genera sobre la marcha a través de un modelo de lenguaje grande. Utiliza Gemini 2.5 Flash-Lite, un modelo cuya baja latencia es fundamental para crear una interacción receptiva que se sienta instantánea. En lugar de navegar por un sistema de archivos estático, el usuario interactúa con un entorno que el modelo construye y reconstruye con cada clic. Esta publicación describe los conceptos técnicos básicos detrás de este prototipo.
Para generar una interfaz de usuario sobre la marcha, debemos proporcionar al modelo una estructura y un contexto claros para cada solicitud. Diseñamos nuestra indicación dividiendo la entrada del modelo en dos partes: una "constitución de la IU" y una "interacción de la IU".
La constitución de la IU es una indicación del sistema que contiene un conjunto fijo de reglas para la generación de la interfaz de usuario. Estas reglas definen elementos coherentes, como el estilo en el nivel del sistema operativo, el formato de la pantalla de inicio y la lógica para insertar elementos, como mapas.
La interacción de la IU es un objeto JSON que captura la acción más reciente del usuario, como hacer clic con el mouse en un ícono. Este objeto sirve como la consulta específica que solicita al modelo que genere la siguiente pantalla. Por ejemplo, hacer clic en el ícono "Guardar nota" dentro de la aplicación Notepad puede generar un objeto como el siguiente:
{
// `id`: El ID único del atributo `data-interaction-id` del botón.
id: 'save_note_action',
// `type`: El tipo de interacción de `data-interaction-type`.
type: 'button_press',
// `value`: Debido a que el botón tiene un atributo `data-value-from`, el sistema
// obtiene el contenido del área de texto con el ID 'notepad_main_textarea'.
value: 'Meeting notes\n- Discuss Q3 roadmap\n- Finalize budget',
// `elementType`: La etiqueta HTML del elemento en el que se hizo clic.
elementType: 'button',
// `elementText`: El texto visible dentro del botón.
elementText: 'Save Note',
// `appContext`: El ID de la aplicación en la que se encuentra el usuario.
// Proviene del estado `activeApp` en `App.tsx`.
appContext: 'notepad_app'
}Este enfoque de configuración de contexto de dos partes permite que el modelo mantenga una apariencia y estilo constantes al tiempo que genera pantallas novedosas basadas en entradas de usuario específicas en tiempo real.
Una sola interacción proporciona un contexto inmediato, pero una secuencia de interacciones cuenta una historia más rica. Nuestro prototipo puede usar un rastro de las N interacciones pasadas para generar una pantalla más relevante contextualmente. Por ejemplo, el contenido generado dentro de una aplicación de calculadora podría diferir dependiendo de si el usuario visitó previamente un carrito de compras o una aplicación de reserva de viajes. Al ajustar la longitud de esta traza de interacción, podemos ajustar el equilibrio entre la precisión contextual y la variabilidad de la IU.
Para que el sistema sea rápido, no podemos esperar a que el modelo genere toda la pantalla de la IU antes de renderizar. Nuestro prototipo aprovecha la transmisión de modelos y el analizador nativo del navegador para implementar la representación progresiva. A medida que el modelo genera código HTML en fragmentos, lo agregamos continuamente al estado de nuestro componente. React luego vuelve a renderizar el contenido, permitiendo que el navegador muestre elementos HTML válidos tan pronto como se reciban. Para el usuario, esto crea la experiencia de una interfaz que se materializa en la pantalla casi al instante.
De forma predeterminada, nuestro modelo genera una nueva pantalla desde cero con cada entrada de usuario. Esto significa que visitar la misma carpeta dos veces podría producir contenidos completamente diferentes. Es posible que no siempre se prefiera esta experiencia no determinista y sin estado, dado que la GUI a la que estamos acostumbrados es estática. Para introducir el estado en nuestro prototipo, nuestro sistema de demostración tiene la opción de crear una caché en memoria para modelar un gráfico de IU específico de la sesión. Cuando un usuario navega a una pantalla que ya se generó, el sistema muestra la versión almacenada desde el gráfico, sin volver a consultar a Gemini. Cuando el usuario solicita una nueva pantalla que no está en caché, el gráfico de IU crece de forma incremental. Este método proporciona un estado sin comprometer la calidad de la salida generativa, lo que puede ser un efecto secundario de simplemente bajar la temperatura de muestreo del modelo.
Si bien este es un prototipo conceptual, el marco subyacente podría aplicarse a casos de uso más prácticos.
Explorar conceptos novedosos como este nos ayuda a comprender cómo están evolucionando los nuevos paradigmas para la interacción persona-computadora. A medida que los modelos continúan siendo más rápidos y capaces, creemos que las interfaces generativas representan un área prometedora para la investigación y el desarrollo futuros.
