Codia AI: скрины в дизайн и дизайн в код

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

Компания Codia, из технологического центра Сингапура, идет, нет, даже бежит на свет в темноте, в виде искусственного интеллекта.

Команда предлагает нам интересные продукты: Codia AI Design и Codia AI Figma to code, где первый способен воспроизвести наш набросок и фотографию в драфт, а второй способен подобный драфт воспроизвести в код.

Предлагаю рассмотреть эти плагины и концепцию их работы.

Приступим(:

Codia AI Design

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

Но сначала вводные.

Распознавание

Codia AI решила попробовать себя на поле распознавания ИИ, да это в принципе является ключевым шагом для преобразования наших скринов в драфты (а если иначе, то как?). Что нам, а точнее им, нужно было почерпнуть из алгоритмов машинного обучения? Конечно: OCR, сегментация изображений и распознавание объектов.

Начнем со схемы для распознавания:

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

Сегментация изображений – это процесс идентификации и разделения каждого отдельного элемента на изображении. Обычно это достигается с помощью deep learning, например CNN. Популярная архитектура сети для этой цели — U-Net, которая особенно хорошо подходит для задач сегментации изображений.
С точки зрения реализации:

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

Пример:

import tensorflow as tf  from tensorflow.keras.layers import Input, Conv2D, MaxPooling2D, UpSampling2D, concatenate  from tensorflow.keras.models import Model  def unet_model(input_size=(256, 256, 3)):      inputs = Input(input_size)      # Архитектура U-Net      # ... (код конкретной конструкции U-Net опущен)      outputs = Conv2D(1, (1, 1), activation='sigmoid')(conv9)      model = Model(inputs=inputs, outputs=outputs)      model.compile(optimizer='adam', loss='binary_crossentropy', metrics=['accuracy'])      return model  # Код для загрузки набора данных, обучения модели и применения модели должен быть реализован здесь

Далее к распознанию объектов:

Обнаружение объектов подразумевает идентификацию конкретных элементов на изображении, таких как кнопки, иконки и т. д., и соотнесение их с заранее определенной библиотекой элементов.

С точки зрения реализации:

from tensorflow.keras.applications.resnet50 import ResNet50, preprocess_input  from tensorflow.keras.preprocessing.image import ImageDataGenerator  from tensorflow.keras.layers import Dense, GlobalAveragePooling2D  from tensorflow.keras.models import Model  # Загрузка предварительно обученной модели ResNet50  base_model = ResNet50(weights='imagenet', include_top=False)  # Добавление пользовательских слоев  x = base_model.output  x = GlobalAveragePooling2D()(x)  x = Dense(1024, activation='relu')(x)  predictions = Dense(num_classes, activation='softmax')(x)  # Создание окончательной модели  model = Model(inputs=base_model.input, outputs=predictions)  # Замораживание слоев ResNet50  for layer in base_model.layers:     layer.trainable = False  # Компиляция модели  model.compile(optimizer='rmsprop', loss='categorical_crossentropy')  # Код для обучения модели будет реализован здесь

И OCR:

Если коротко, то это возможность распознавать текст и символы на изображениях, фотографиях или скриншотах.
С точки зрения реализации:

Используем инструменты OCR (например, Tesseract) для распознавания текста на изображениях.
Работаем с постобработкой распознанного текста, включая коррекцию языка и настройку формата.
И импортируем обработанный текст в макет дизайна Figma.
Пример:

import pytesseract  from PIL import Image  # Настройка пути к Tesseract  pytesseract.pytesseract.tesseract_cmd = r'путь_к_tesseract'  # Загрузка изображения  image = Image.open('пример.png')  # Применение OCR  text = pytesseract.image_to_string(image, lang='eng')  # Вывод распознанного текста  print(text)  # Код для импорта распознанного текста в Figma будет реализован здесь

Генерация макета

Преобразование изображения в макет дизайна в Figma включает восстановление элементов, распознанных ИИ, в объекты в Figma, и применение соответствующих стилей и компоновок. Рассмотрим этапы.

Начнем с восстановления элементов:

На этапе распознавания с помощью искусственного интеллекта мы уже получили информацию о границах и категориях каждого элемента на изображении. Теперь необходимо воссоздать эти элементы в Figma.
Техническая реализация:

Сначала используем API Figma для создания соответствующих форм и текстовых элементов.
Устанавливаем размер и позицию элементов на основе данных, полученных от ИИ.
При наличии текстового элемента определяем шрифт, размер и цвет.

Пример:

// Предположим, что у нас уже есть информация о элементе, включая тип, позицию, размер и стиль  const elementInfo = {   type: 'rectangle',   x: 100,   y: 50,   width: 200,   height: 100,   fill: '#FF5733' };  // Используем fetch API для вызова REST API Figma для создания прямоугольника  fetch('https://api.figma.com/v1/files/:file_key/nodes', {   method: 'POST',   headers: {     'X-Figma-Token': 'ВАШ_ТОКЕН_ДОСТУПА'   },    body: JSON.stringify({     nodes: [       {         type: 'RECTANGLE',         x: elementInfo.x,         y: elementInfo.y,         width: elementInfo.width,         height: elementInfo.height,         fills: [{ type: 'SOLID', color: elementInfo.fill }]       }     ]   }) })  .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Ошибка:', error));

Теперь перейдем к сопоставлению стилей:

Процесс сопоставления стилей заключается в передаче информации о стиле, обнаруженной искусственным интеллектом, к элементам в Figma, включая цвета, отступы, тени и прочее.
C точки зрения реализации:

Производим анализ данных о стиле, обнаруженных искусственным интеллектом.
Используем API Figma для обновления свойств стиля элементов.
Пример:

// Предположим, что у нас уже есть информация о стиле  const styleInfo = {   color: { r: 255, g: 87, b: 51 },   fontSize: 16,   fontFamily: 'Roboto',   fontWeight: 400 };  // Обновление стиля текстового элемента  fetch('https://api.figma.com/v1/files/:file_key/nodes/:node_id', {   method: 'PUT',   headers: {     'X-Figma-Token': 'ВАШ_ТОКЕН_ДОСТУПА'   },    body: JSON.stringify({     nodes: [       {         type: 'TEXT',         characters: 'Пример текста',         style: {           fontFamily: styleInfo.fontFamily,           fontWeight: styleInfo.fontWeight,           fontSize: styleInfo.fontSize,           fills: [{ type: 'SOLID', color: styleInfo.color }]         }       }     ]   }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Ошибка:', error));

И автоматизация(интеллектуальная компоновка):

Под интеллектуальной компоновкой понимается умное распределение элементов на основе их взаимных пространственных отношений в Figma.
C точки зрения реализации:

Сначала производим анализ пространственных взаимосвязей между элементами.
Используем API Figma для установки ограничений и сеток компоновки для элементов.
Пример:

// Предположим, что у нас уже есть данные о пространственных взаимосвязях между элементами  const layoutInfo = {   parentFrame: 'Frame_1',   childElements: ['Rectangle_1', 'Text_1']  };  // Установка ограничений для элементов внутри плагина Figma  const parentFrame = figma.getNodeById(layoutInfo.parentFrame);  layoutInfo.childElements.forEach(childId => {   const child = figma.getNodeById(childId);    if (child) {     child.constraints = { horizontal: 'SCALE', vertical: 'SCALE' };     parentFrame.appendChild(child);   } });

Итак, мы рассмотрели основные этапы работы в Codia AI Design для преобразования наших, например, скетчей в рабочие драфты посредством ИИ.

Design2Code

Теперь обратимся ко второй фишке Codia AI, а именно к возможности преобразования нашего дизайн в код с помощью нейросети. Звучит, конечно, очень заманчиво.

Сразу перейдем к делу, я думаю.

Стек у Codia AI следующий:

Для веба: HTML, CSS, JavaScript, TypeScript, Tailwind, React, Vue, with ongoing expansions.
Приложения: iOS, Android, Flutter, Swift, SwiftUI, Objective-C, Java, Kotlin, Jetpack Compose UI.

Распознание макета

В основе – DOM, что это?

Document Object Model(DOM) – программный интерфейс для веб-документов, который дает возможность изменения структуры/стиля/содержимого документа. За счет чего это происходит? DOM представляет страницу как дерево объектов, где каждый объект является частью документа(например, атрибут).

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

Схематически весь процесс распознавания можно изобразить так:

Начнем с анализа дерева DOM:

Путем анализа HTML и CSS страницы формируется древовидная структура DOM, которая представляет собой иерархию всех элементов на странице. Каждый элемент (узел) в этом дереве соответствует определенной части документа, например, заголовку.

Перейдем к распознавание макета:

Здесь нам нужно понять, как элементы визуально представлены на странице, в том числе их расположение, размеры или расстояние от других элементов. Здесь используются алгоритмы и ML для анализа макетов, особенно в случае сложных веб-страниц с динамически генерируемыми или изменяемыми элементами.

Машинное обучение и искусственный интеллект:

Применение алгоритмов машинного обучения позволяет лучше понимать и предсказывать структуру и макет веб-страниц. Эти алгоритмы обучаются на больших наборах данных веб-страниц.

Взаимодействие с механизмом визуализации браузера:

Важно понимать, как разные веб-браузеры интерпретируют и отображают HTML и CSS, поскольку каждый браузер может иметь небольшие различия в отображении. Поэтому необходимо распознавать, как DOM преобразуется в видимый макет в различных браузерах для обеспечения совместимости между платформами.

Обработка динамического контента:

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

Доступность и семантический HTML:

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

Переменные

Проиллюстрировать шаги можно так:

Концепция понимания структуры DOM включает несколько ключевых шагов.

В начале происходит анализ содержимого, что подразумевает изучение текстового содержимого элементов DOM и контекстное толкование, где учитывается окружающий контекст и генерируются соответствующие имена переменных.

Затем используются техники машинного обучения и обработки естественного языка для интеллектуального назначения имен переменным на основе содержимого DOM.

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

Далее сосредотачиваемся на поддержании читаемости кода и удобстве его сопровождения, обеспечивая генерацию информативных имен переменных.

Затем происходит интеграция инструментов интеллектуального назначения имен переменных в редакторы кода и предоставление поддержки в реальном времени для разработчиков.

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

Объединение слоев и сжатие

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

Разбиение изображений на более мелкие части — это важный аспект в веб-дизайне. При усовершенствованном разделении учитываются следующие аспекты:
- Точное сегментирование: Использование алгоритмов для точного выделения частей изображения в соответствии с его содержанием, композицией или требованиями дизайна.
- Учет намерений разработчика: Понимание контекста и назначения изображений (например, фоновые изображения, иконки или функциональные графические элементы) для их оптимального разделения в соответствии с требованиями веб-макета.

Автоматическое сжатие изображений с сохранением качества — это еще один важный аспект. Оно включает:
- Адаптивные алгоритмы: Алгоритмы, которые регулируют уровень сжатия в зависимости от содержания изображения, чтобы сохранить важные детали.
- Выбор формата: Автоматический выбор наилучшего формата файла (например, JPEG, PNG, WebP) в зависимости от содержания изображения и его использования.

Эффективное разделение и интеллектуальное сжатие изображений помогают ускорить загрузку веб-страниц, что крайне важно для улучшения пользовательского опыта, особенно на мобильных устройствах с медленным интернетом.
Также важно найти правильный баланс между качеством изображения и его размером файла. Усовершенствованное разделение и интеллектуальное сжатие обеспечивают визуально привлекательные изображения, которые не замедляют загрузку страниц.
Улучшенное разделение изображений может быть интегрировано с принципами отзывчивого веб-дизайна, что позволяет загружать различные версии изображений в зависимости от устройства пользователя и его разрешения.
Внедрение машинного обучения помогает сделать процесс еще более точным, учитывая различные типы изображений и их оптимальное разделение и сжатие для лучшей производительности веб-страниц.
Функции могут быть встроены в рабочие процессы веб-разработчиков, что обеспечивает автоматическую обработку изображений и сохранение единого стиля на всем веб-сайте.
Оптимизированные изображения улучшают SEO, а правильное разделение и обозначение изображений способствуют лучшей доступности веб-сайта для пользователей с ограниченными возможностями.

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

UI

Обнаружение компонентов, включающее использование алгоритмов и методов машинного обучения для сканирования и анализа макетов пользовательского интерфейса с целью идентификации распространенных компонентов, таких как кнопки, текстовые поля, выпадающие меню и другие.
Путем обучения моделей машинного обучения на большом наборе примеров пользовательского интерфейса система может научиться точно распознавать и классифицировать различные элементы пользовательского интерфейса. Это обучение может включать разные стили, конфигурации и расположения компонентов.
Система проверяет наличие основных компонентов пользовательского интерфейса, которые обычно ожидаются в определенном контексте. Например, на экране входа в систему она будет искать поля для ввода имени пользователя и пароля, кнопку отправки и так далее.
Технология понимает контекст, в котором функционирует пользовательский интерфейс. Например, в приложении электронной коммерции она будет проверять наличие строки поиска, списка продуктов и значков корзины.
Обнаружив и предлагая необходимые компоненты пользовательского интерфейса, система значительно улучшает UX, обеспечивая интуитивно понятный, удобный в использовании и функциональный интерфейс.
Гарантия соблюдения стандартов доступности пользовательского интерфейса, таких как включение элементов, удобных для программ чтения экрана, и обеспечение легкой навигации по интерактивным компонентам.
Интегрированная в среды разработки, эта технология может предоставлять разработчикам обратную связь и рекомендации в реальном времени, помогая создавать более полные и надежные пользовательские интерфейсы.
Система может быть настроена на распознавание компонентов пользовательского интерфейса, специфичных для различных платформ, таких как веб-сайты, мобильные или десктопные приложения, учитывая уникальные стандарты дизайна и ожидания пользователей каждой платформы.
Возможность предсказывать необходимость определенных компонентов пользовательского интерфейса на основе поведения пользователя и образцов взаимодействия, дополнительно улучшая удобство и эффективность интерфейса.
Возможность интеграции в существующие инструменты дизайна и разработки пользовательского интерфейса, делая ее неотъемлемой частью процесса разработки.

Пример использования

Итак, вначале залетаем в фигму и добавляем себе плагин “Codia AI Design” и загружаем свой скрин, я решила взять пример, который они предлагают и ждем, пока плагин преобразует наш скрин в редактируемый прототип:

Итак, нейросеть проявила себя в действии и создала нам редактируемый шаблон:

Далее, для того, чтобы мы могли получить код, нужно добавить плагин “Codia-AI Figma to code” и выпавшем окне выбираем язык и настраиваем конфигурацию:

Затем, когда код сгенерирован, мы можем открыть его в песочнице:

Заключение

Итак, мы рассмотрели нововведение в виде Codia AI, которая позволяет преобразовывать наши, например, скриншоты в драфты, что значительно позволяет ускорить работу дизайнерам. Я, например, частенько юзаю различные редакторы, чтобы распознать текст с пдф файлов, у меня есть какие-то фавориты в этом отношении, однако при работе с фигмой, до знакомства с Codia AI, я даже не подозревала, что можно реализовать свой набросок в полноценный Figma Design. Мне кажется, что это очень полезный плагин, который в будущем будет только развиваться и расти, и снижать потраченное время человеком за компуктером.

Также рассмотрели преобразование фигмы в код, как мне кажется – тоже интересная функция для плагина, которая помогает оптимизировать наши процессы, однако, конечно, которая оставляет за собой некоторые вопросы. Хотя мы и не проверяли код, однако мне кажется, что все-таки рука опытного программиста все-таки должна быть приложена к результату работы плагина, хотя, не берусь утверждать. Все-таки, в любом случае, это очень интересная разработка, которая воодушевляет(:

Что же, была рада подготовить материал, всем спасибо и рады видеть в комментариях!(:

ссылка на оригинал статьи https://habr.com/ru/articles/795143/