Факт, что сейчас искусственный интеллект занимает центральное место в различных аспектах нашей повседневной жизни, делает его одной из самых важных и динамично развивающихся технологий нашего времени. Они поджидают нас и в автоматизации процессов, и в анализе данных, и в обработке естественного языка, и в медицинской диагностике, и в финансовых прогнозах и во многом другом. Но я бы хотела поговорить и о дизайне.
Компания 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. Мне кажется, что это очень полезный плагин, который в будущем будет только развиваться и расти, и снижать потраченное время человеком за компуктером.
Также рассмотрели преобразование фигмы в код, как мне кажется – тоже интересная функция для плагина, которая помогает оптимизировать наши процессы, однако, конечно, которая оставляет за собой некоторые вопросы. Хотя мы и не проверяли код, однако мне кажется, что все-таки рука опытного программиста все-таки должна быть приложена к результату работы плагина, хотя, не берусь утверждать. Все-таки, в любом случае, это очень интересная разработка, которая воодушевляет(:
Что же, была рада подготовить материал, всем спасибо и рады видеть в комментариях!(:
