Los investigadores de Apple han publicado detalles sobre una herramienta experimental de IA llamada SQUIRE, que ayuda a los desarrolladores a explorar y desarrollar ideas de interfaz con mayor control. Aquí están los detalles.

Un enfoque interesante para la prototipación de interfaces asistida por IA

En un nuevo artículo titulado "SQUIRE: Escritura de UI Interactiva a través de Representaciones Intermedias de Consulta de Slots", un grupo de desarrolladores de Apple propone una forma innovadora de acercarse a las interfaces generadas por IA.

Los investigadores explican que el lenguaje natural aporta más flexibilidad a muchos aspectos del proceso de desarrollo, pero también conlleva dos desafíos principales:

En primer lugar, el lenguaje natural puede ser ambiguo por sí mismo, lo que dificulta que los desarrolladores transmitan sus intenciones con precisión. En segundo lugar, el modelo puede responder de manera impredecible, lo que requiere que el desarrollador vuelva a solicitar mediante prueba y error para corregir cambios no deseados.

Aquí es donde entra SQUIRE. Es una interfaz visual que permite a los desarrolladores crear y desarrollar prototipos de UI paso a paso, proporcionando un control más claro sobre los resultados.

Del estudio:

En SQUIRE, los usuarios comienzan un proyecto proporcionando un prompt que define sus objetivos para la UI y añaden datos de ejemplo que contienen información que SQUIRE puede usar como referencia. Los usuarios guían a SQUIRE para que llene los vacíos que representan funcionalidades faltantes pero esperadas, construyendo la UI como un árbol de componentes de arriba hacia abajo. En respuesta a este tipo de solicitud, SQUIRE genera una lista de alternativas adecuadas específicamente contextualizadas para el vacío objetivo en la UI incompleta. Hacer clic en cada alternativa facilita visualizar las diferencias al actualizar instantáneamente una vista previa en vivo y el código base. El usuario también puede hacer solicitudes específicas para cambiar la apariencia de ciertas áreas de la UI, con la garantía de que ningún código fuera del alcance deseado se verá afectado. En respuesta a este tipo de solicitud, SQUIRE produce controles temporales que permiten al usuario aplicar cambios semánticamente relacionados rápidamente, sin necesidad de volver a solicitar. En todos los casos, el LLM actúa como un compañero, presentando opciones razonables para la evaluación del usuario, pero dejando la autoridad de aceptar o rechazar sus sugerencias al usuario.

En otras palabras, las solicitudes en lenguaje natural siguen siendo el camino a través del cual los desarrolladores interactúan con SQUIRE, pero cada solicitud estaba vinculada a una parte específica de la UI y no afectaba toda la interfaz a la vez.

Basándose en observaciones realizadas con 11 desarrolladores front-end que usaron SQUIRE para desarrollar prototipos de interfaz, los investigadores encontraron que los participantes podían explorar y iterar diferentes diseños de UI con una fuerte sensación de control, y también evaluaron el sistema con una alta puntuación en usabilidad y satisfacción general.

Además, señalan que esta sensación adicional de control hizo que los desarrolladores se sintieran más cómodos al explorar formas en que los cambios podían hacerse, preverse y revertirse fácilmente.

De nuevo del estudio:

A través de los datos recopilados de 11 desarrolladores front-end, observamos que (1) las interacciones de SQUIRE incentivaron a los participantes a explorar con frecuencia, no solo usaron SQUIRE como un acelerador de código, (2) los participantes se sintieron incentivados a asumir riesgos al hacer cambios, sabiendo que las consecuencias de tomar decisiones inusuales siempre podían revertirse sin fricción, (3) los participantes confiaron en que SQUIRE cumplía con sus intenciones al hacer cambios, y (4) los participantes estaban generalmente satisfechos con la calidad del código y las visualizaciones generadas por el sistema.

Estructura interna de SQUIRE

En lugar de generar código de interfaz directamente desde las solicitudes del usuario, SQUIRE primero crea su propia representación intermedia de la interfaz, llamada SquireIR, modelando la UI como un árbol de componentes con espacios nombrados que pueden llenarse con el tiempo, como en el siguiente ejemplo:

Esta estructura también puede incluir marcadores de posición para partes aún no definidas (por ejemplo, una etiqueta de botón, una imagen o una sección de contenido) y múltiples alternativas de UI posibles. Por ejemplo, puede representar el mismo contenido como una lista o una cuadrícula.

Después de esto, SQUIRE convierte esta representación en código utilizando HTML, CSS y JavaScript, y gestiona la estructura final de la UI con Web Components.

Otro aspecto importante de SQUIRE es cómo gestiona los cambios.

Cuando un desarrollador quiere ajustar un botón o cambiar un diseño, solo esa parte se actualiza, todo lo demás permanece igual.

Según los investigadores, esto ayuda a prevenir los ciclos de prueba y error que se ven en muchas herramientas de codificación de IA; debido a la imprevisibilidad general de los LLM, el modelo puede hacer más cambios de los que el desarrollador pretendía.

Esta estructura también permite que SQUIRE sugiera múltiples opciones en cada paso, de modo que los desarrolladores puedan comparar rápidamente diferentes versiones sin perder su trabajo anterior.

A diferencia de muchos artículos técnicos, este estudio no proporciona detalles sobre el entrenamiento del modelo, la arquitectura o los datos. Aunque los investigadores mencionan que SQUIRE trabaja con GPT-4o de OpenAI, el enfoque del artículo está en el diseño del sistema y el modelo de interacción.

SQUIRE no está disponible en general y su uso está limitado a los 11 desarrolladores que participaron en el estudio. Sin embargo, no es difícil imaginar cómo podría implementarse en futuras versiones de Xcode o en otras herramientas de desarrollo de Apple.

Para obtener más información sobre SQUIRE, puedes seguir este enlace.

Productos que valen la pena revisar en Amazon

  • David Pogue – 'Apple: Los Primeros 50 Años'
  • MacBook Neo
  • Logitech MX Master 4
  • AirPods Pro 3
  • AirTag (2ª Generación) – Paquete de 4
  • Apple Watch Series 11
  • Adaptador inalámbrico de CarPlay