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

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

Компания 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 представляет страницу как дерево объектов, где каждый объект является частью документа (например, атрибут).

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

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

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

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

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

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

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

При распознавании 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. Мне кажется, что это очень полезный плагин, который в будущем будет только развиваться и расти, и снижать потраченное время человеком за компуктером.

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

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