Исследование Apple: представлен ИИ-инструмент для создания прототипов интерфейсов

Исследователи Apple опубликовали подробности о SQUIRE — экспериментальном инструменте на базе ИИ, который помог разработчикам исследовать и дорабатывать идеи интерфейсов с большим контролем, чем обычные инструменты кодирования с ИИ. Подробности далее.

Интересный подход к созданию прототипов интерфейсов с помощью ИИ

В новой статье под названием SQUIRE: Interactive UI Authoring via Slot QUery Intermediate REpresentations группа разработчиков Apple предлагает новый способ подхода к интерфейсам, генерируемым ИИ.

Как объясняют авторы, естественный язык привнес больше гибкости в различные аспекты процесса разработки, но также порождает две ключевые проблемы:

Во-первых, естественный язык сам по себе может быть неоднозначным, что затрудняет точное донесение намерений разработчика. Во-вторых, модель может реагировать непредсказуемо, требуя от разработчика повторных запросов методом проб и ошибок для исправления нежелательных изменений.

Вот тут-то и появляется SQUIRE. Это визуальный интерфейс, который позволяет разработчикам шаг за шагом создавать и дорабатывать прототипы пользовательского интерфейса с более точным контролем над результатами.

Из исследования:

В SQUIRE пользователи начинают проект, предоставляя запрос, описывающий их цели для пользовательского интерфейса, а также пример данных, содержащий информацию, которую SQUIRE будет использовать в качестве эталона. Затем пользователи конструируют пользовательский интерфейс как дерево компонентов в порядке сверху вниз, запрашивая у SQUIRE заполнение «пустых мест», представляющих недостающие, но ожидаемые функции. В ответ на такой запрос SQUIRE генерирует список подходящих альтернатив, каждая из которых точно соответствует целевому «пустому месту» в незавершенном пользовательском интерфейсе. Щелчок по каждой альтернативе немедленно обновляет предварительный просмотр в реальном времени, а также базовый код, что облегчает визуализацию различий. Пользователь также может делать целевые запросы для изменения внешнего вида конкретных областей пользовательского интерфейса с гарантией того, что код за пределами намеченной области не будет изменен. В ответ на такой запрос SQUIRE генерирует временные элементы управления, которые позволяют пользователю быстро вносить семантически связанные изменения без повторного запроса. Во всех случаях LLM действует как компаньон, предлагая разумные варианты для оценки пользователем, но оставляя пользователю возможность принять или отклонить его предложения.

Другими словами, разработчики по-прежнему взаимодействовали с SQUIRE с помощью запросов на естественном языке, но вместо того, чтобы влиять на весь интерфейс сразу, каждый запрос привязывался к конкретной части пользовательского интерфейса.

Исследователи обнаружили, что, основываясь на наблюдениях за 11 фронтенд-разработчиками, которые использовали SQUIRE для создания прототипов интерфейсов, участники смогли исследовать и итерировать различные дизайны пользовательских интерфейсов с сильным ощущением контроля, а также высоко оценили систему за удобство использования и общее удовлетворение.

Кроме того, они отмечают, что это дополнительное чувство контроля делало разработчиков более уверенными в исследовании путей, которые они, возможно, не попробовали бы в противном случае, поскольку изменения было легко вносить, прогнозировать и отменять.

Снова из исследования:

На основании данных, собранных в ходе пользовательского исследования с участием 11 фронтенд-разработчиков, мы обнаружили, что (1) взаимодействие с SQUIRE побуждало участников часто исследовать, а не просто использовать SQUIRE в качестве ускорителя кода; (2) участники чувствовали себя уверенно, рискуя при внесении изменений, зная, что последствия принятия нестандартных решений всегда можно отменить без особых усилий; (3) участники выразили уверенность в том, что SQUIRE соответствует их намерениям при внесении изменений; и (4) участники были в целом довольны качеством кода и визуальных элементов, сгенерированных системой.

SQUIRE изнутри

Вместо того чтобы генерировать код интерфейса непосредственно из пользовательских запросов, SQUIRE сначала создает собственное промежуточное представление интерфейса, называемое SquireIR, которое моделирует пользовательский интерфейс как дерево компонентов с именованными слотами, которые могут заполняться со временем, как показано на примере ниже:

Эта структура также может включать заполнители для частей, которые еще не определены (например, метка кнопки, изображение или фрагмент контента), а также несколько возможных альтернативных вариантов пользовательского интерфейса. Например, один и тот же контент может быть представлен как список или сетка.

Затем SQUIRE преобразует это представление в код с использованием HTML, CSS и JavaScript, а Web Components обрабатывают окончательную структуру пользовательского интерфейса.

Еще одним ключевым аспектом SQUIRE является то, как он обрабатывает изменения.

Если разработчик просит настроить кнопку или изменить макет, обновляется только эта часть, а все остальное остается неизменным.

По словам исследователей, это помогает избежать циклов проб и ошибок, наблюдаемых во многих инструментах кодирования с ИИ из-за общей непредсказуемости LLM, когда модель может вносить изменения, выходящие за рамки намерений разработчика.

Эта структура также позволяет SQUIRE предлагать несколько вариантов на каждом шаге, чтобы разработчики могли быстро сравнивать различные версии, не теряя свою предыдущую работу.

В отличие от многих технических статей, данное исследование не вдается в подробности обучения модели, архитектуры или данных. Исследователи отмечают, что SQUIRE работает на базе GPT-4o от OpenAI, но основное внимание в статье уделено дизайну системы и модели взаимодействия.

SQUIRE пока не доступен в широком доступе, и его использование было ограничено 11 разработчиками, участвовавшими в исследовании. Однако несложно представить, как нечто подобное может быть реализовано в будущих версиях Xcode или других инструментах разработки Apple.

Чтобы узнать больше о SQUIRE, перейдите по этой ссылке.

Рекомендуем посмотреть на Amazon