Конференция раннего чата по интерфейсу, новая отправная точка для развития интерфейса, была проведена совместно с Nuggets. Добавьте WeChat codingdreamer в эксклюзивную внутреннюю группу поддержки конференции и выиграйте на новой стартовой линии.
14-я сессия Front-end Growth and Promotion, 8-29 будет в прямом эфире, 9 лекторов (Ant Financial Services / Tax Friends и т. д.),Нажмите на меня, чтобы сесть в машину 👉 (Адрес регистрации):
Текст выглядит следующим образом
Эта статья является третьей сессией - специальная сессия по созданию передней страницы, которую лектор Мяоцзин делится
Самостоятельное введение
Привет всем, сначала позвольте представиться. Я Мяоцзин из технологического отдела отдела Alibaba Taobao. Я окончила школу и присоединилась к Taobao в 2010 году. , и система построения маркетинга Taobao.Теперь я отвечаю за Taobao.Внешняя команда по покупкам и бренд-маркетингу Tmall отвечает за переднюю интеллектуальную платформу генерации кода imgcook.Сегодня я познакомлю вас с imgcook.
Сначала посмотрите видео, чтобы узнать, что может сделать imgcook.В настоящее время код просмотра, привязка данных и некоторый логический код могут быть сгенерированы в основном с помощью черновиков дизайна. imgcook открыт для внешнего мира, посетитеimgcook.comВот и все.
Сегодняшняя схема обмена информацией об интеллектуально сгенерированном коде выглядит следующим образом:
фон imgcook
источник
Давайте взглянем на предысторию imgcook. Мы являемся основным полем битвы электронной коммерции Alibaba. Существуют различные формы интерфейсных продуктов. Согласно неполным статистическим данным, годовой прирост легких строительных модулей составляет более 1 Вт, и годовой прирост страницы составляет более 100 Вт (здесь содержатся обширные маркетинговые кампании). Те, которые могут быть повторно использованы, должны создаваться и использоваться повторно в максимально возможной степени.Большое количество из них трудно повторно использовать из-за особого характера бизнеса.Эти 1w несколько модулей и различные сильные умственные страницы продукта C-стороны по-прежнему требуют переднего плана. - окончание разработки.
путь развития
Под огромным давлением со стороны бизнеса Da Vinci (imgcook), удобный в сопровождении интерфейсный инструмент для написания кода, созданный непосредственно из проекта дизайна, был рожден командой Taobao по интерфейсу в то время в 2017. Позже он был постепенно оптимизирован. чтобы уменьшить ограничения на проект дизайна, постепенно вводился CV, НЛП решает проблему распознавания слоев и семантики, а позже официально открылся imgcook в январе 2019 года.
Затем продолжите оптимизацию эффекта восстановления и расширение для создания логического кода, и в то же время улучшите способность платформы к расширению и развитию в imgcook 2.0; в настоящее время ведется планирование и реализация imgcook 3.0, в основном для решения проблемы улучшения Генерация PRD (понимание документа требований) на основе NLP, кода вспомогательной бизнес-логики и части генерации кода бизнес-логики на стороне сервера. Полученные артефакты простираются от кода представления, привязок полей данных до кода бизнес-логики. В настоящее время время разработки модуля, регистрируемое с платформы, сократилось примерно на 40%, в то же время, после объединения средневзвешенных внутренних и внешних пользовательских исследований, общая эффективность НИОКР улучшилась примерно на 40%. .
Первичный анализ повышения эффективности отрасли
Повышение эффективности интерфейсных исследований и разработок — это банальная и вневременная тема.Фронтальные фреймворки, фронтенд-инжиниринг и визуальное конструирование — все это проблемы для повышения эффективности в различных аспектах.
От первоначального proCode, LowCode, noCode до платформы hpaPaas (платформа высокопроизводительных приложений), с одной стороны, за счет повторного использования материалов, визуальной конфигурации, полносвязного онлайн-развертывания НИОКР и других средств, всесторонне улучшить вопросы эффективности НИОКР, с другой стороны, через Empower другие роли (операции, PD) для передачи производственных отношений для высвобождения рабочей силы.
Для AUTOCODE, определенного imgcook, он напрямую генерирует код на основе проекта проекта или будущего PRD, но из-за проблем с точностью, таких как распознавание проекта проекта, он также интегрирует способность визуализации lowcode для вмешательства, а стоимость модификации визуализации относительно низкая, и в то же время модифицированный результат можно использовать для самостоятельной итерации модели, но из-за некоторой сложной бизнес-логики некоторые визуализации вынуждены строить больше, чем затраты на написание кода, что также является причиной, почему lowcode не навязывает nocode, поэтому мы также интегрируем procode. Преимущество заключается в том, что сгенерированный поддерживаемый код может быть повторен дважды и, наконец, может быть применен к бизнес-сценариям различной сложности. Наша основная стратегия повышения эффективности здесь заключается в том, чтобы генерировать код с одним ключом AUTOCODE, что значительно повышает эффективность Визуализация встроена в ссылку для коррекции вмешательства точности и итерации модели.
Анализ повышения эффективности в интеллектуальных смежных отраслях
Здесь повышение эффективности передовых исследований и разработок, вызванное интеллектуальной генерацией кода одним щелчком мыши, является самым непосредственным, и влияние интеллекта на другие отрасли также очень велико.
Например, Индустрия 4.0 с интеллектом в качестве основы, предложенная в последние годы, основная стратегия Индустрии 4.0, вероятно, включает интеллектуальное управление производственным процессом, визуализацию, стандартизированное сотрудничество в области управления и интеграцию между отраслями для достижения эффективного производства. , базовые средства, на которые полагаются, облачны и постепенно стандартизируются (стандартизация данных, стандартизация услуг и т. д.), совершенная передняя часть проектирования, совместная интеграция исследований и разработок между PD/дизайнером/сервером, персонализированная бизнес-настройка, визуализация производства и аналитика. также существуют в индустрии переднего плана.
Глядя на достижения, принесенные интеллектом, его ведущий проект, полностью автоматизированный интеллектуальный терминал Xiamen Yuanhai, позволил сократить штат передового персонала на 70% и повысить эффективность на 20%;
В финансовой отрасли, которая известна как мать отрасли, доля операционного персонала в типичных интеллектуальных банковских точках снизилась на 15%; после преобразования операционного персонала количество сложных талантов увеличилось до 90%. ; добавлены новые суперсчетчики, счетчики самообслуживания.После покупки автоматов по обмену иностранной валюты и виртуальных кассовых аппаратов площадь торговых точек и касс будет уменьшена для дальнейшего снижения затрат.
В целом, после интеллигентности различных отраслей повысится эффективность и снизятся затраты, будут сокращены определенные виды персонала, а определенные виды персонала будут преобразованы и модернизированы, что приведет к повышению качества или приросту бизнеса.
Таким образом, после нескольких лет работы интеллекта во фронтенд-индустрии общая эффективность будет значительно повышена, некоторые простые и повторяющиеся задачи будут заменены интеллектом, а также могут родиться некоторые новые должности, такие как конфигуратор бизнес-логики (сотрудничество с роботы для генерации кода) И так далее, апгрейды интерфейса выполняют более сложную работу.
Введение в imgcook
Далее я познакомлю вас с imgcook.
Цель
Цель imgcook — генерировать код непосредственно из (черновик дизайна, черновик прототипа, PRD, APIHub, CodeHub и других ресурсов) с помощью интеллектуальных средств.
В настоящее время мы продолжаем оптимизировать точность проекта проекта для кода и можем генерировать весь код представления (html + css), угадывать привязку полей данных и интеллектуально идентифицировать некоторые часто используемые логические точки; остальное, что не может быть охвачено, является большое количество персонализированных услуг Logic в настоящее время дополняет генерацию кода бизнес-логики посредством структурированных документов PRD, включая генерацию кода бизнес-логики на стороне сервера, поэтому ресурсы в настоящее время зависят от проекта проекта до PRD. Наша конечная цель — разумно генерировать все более и более точные коды из (черновик проекта, черновик прототипа, PRD, APIHub, CodeHub и других ресурсов) и стать codeRobot.
Основные функции
Текущая основная функция imgcook заключается в создании кода непосредственно из проекта проекта с помощью глубокого обучения, такого как CV / NLP, традиционное машинное обучение, экспертная система правил, разработка алгоритмов и другие комплексные средства.
Линия использования продукта
В частности, давайте взглянем на текущую линию использования продукта.После импорта проекта дизайна вы можете сгенерировать код одним щелчком мыши, и вы можете выполнить интервенционное редактирование в визуальном редакторе, как вы видите, что вы получаете, а затем вы можете создавать различные DSL (React/Vue/Rax/Applet) DSL и т. д.), а затем код может быть непосредственно внедрен в собственный проект проекта через плагин VS Code, imgcook-cli и т. д. Каждый командный проект может иметь свой собственный спецификация каталога проекта.Он также поддерживает настройку через расширение плагина.Команда imgcook Расширенные возможности настройки поддерживают возможности настройки различных размеров для удовлетворения требований генерации кода различных сценариев.
Шаг 1. Импортируйте проект дизайна
Шаг 2. Визуализируйте вмешательство
Шаг 3. Просмотрите сгенерированный код (необязательно)
Шаг 4: Введите ссылку на проект (прямой импорт плагина vs code)
Необязательный шаг: расширенная настройка команды
Функция настройки высокой частоты:
Подводя итог, текущая картина возможностей продукта выглядит следующим образом:
Текущее использование выглядит следующим образом:
- Уровень доступности = код, непосредственно сгенерированный imgcook, наконец выпущен gitlab, а последний зарезервированный код / весь код опубликован в сети.
Технологическая архитектура
Техническая архитектура imgcook выглядит следующим образом:
Снизу вверх, на основе алгоритмической инженерной структуры и продуктов, на основе визуального чернового CV-анализа и NLP-анализа, многомерной идентификации элементов для генерации кода, визуального представления после идентификации, визуального вмешательства в случае выявления ошибок и визуализации для дополнения дополнительных logic , а затем приложение интегрируется в соответствующие ссылки проекта (плагин VSCode, плагин WebIDE, imgcook-cli). Сгенерированный код также поддерживает настройку, наиболее часто используемой является настройка DSL (React/vue/Applet DSL...) и плагинов (разные команды имеют разные спецификации каталогов и т. д.). При этом для всей технической системы нас больше всего волнуют технические метрики, такие как реальная доступность кода, точность модели и данные по повышению эффективности.
Основные технические трудности
Далее, давайте взглянем на части с высокой сложностью реализации в этой большой технической картине:
Интеллектуальное распознавание и разборка выражений
Во-первых, это проблема демонтажа выражения интеллектуального распознавания. В настоящее время в отрасли нет прямого сквозного решения. В отрасли также есть решения, аналогичные pix2code screenshot2code. Одно из них заключается в том, что степень детализации слишком велика. , который подходит для решения проблемы идентификации компонентов, а другой - удобство использования невелико, особенно для восстановления визуального проекта C-end, дизайнеры C-end не приемлют отклонения на уровне пикселей.
Конкретно давайте посмотрим, как разобрать его на решаемые задачи.От интуитивного анализа, чтобы сгенерировать код, необходимый для выражения, требуется многомерный ввод и извлечение информации, а также различная детальная метаинформация (изображения, тексты , стили, атрибуты) и т. д.), в то же время необходимо извлекать повторно используемые единицы (материалы) разной степени детализации, а также динамическую логику извлечения (динамические поля, циклы, логика взаимодействия и т. д. .).
Как реализовать описанную выше технологию в слоях? Во-первых, сверху вниз, сначала введите проект проекта и обработайте информацию о слое. Детали каждого слоя следующие:
- слой обработки слоя: Он в основном разделяет слои в черновике дизайна или изображении и упорядочивает метаинформацию слоя в сочетании с результатами распознавания предыдущего слоя.
- Слой идентификации материала: в основном идентифицируйте материалы на изображениях с помощью возможностей распознавания изображений (распознавание модулей, распознавание атомарных модулей, распознавание базовых компонентов, распознавание бизнес-компонентов).
- слой переделки слоя: Дальнейшая нормализация данных слоя слоя обработки слоя.
- Слой алгоритма компоновки: преобразует макеты слоев с абсолютным позиционированием в 2D в макеты с относительным позиционированием и гибкие макеты.
- семантический слой: Уровень семантически выражается на стороне сгенерированного кода через многомерные функции уровня.
- Слой привязки поля: привяжите и сопоставьте поля динамических данных интерфейса со статическими данными в слое, объединенном с интерфейсом данных.
- слой бизнес-логики: создание протокола кода бизнес-логики для сконфигурированной бизнес-логики посредством идентификации и выражения бизнес-логики.
- Визуальная оркестровка: Конечным результатом является протокол кода, который был интеллектуально обработан каждым уровнем, представлен и обработан механизмом визуализации, который можно визуально вмешивать и дополнять.
- Слой движка кода: Наконец, после ручного вмешательства, внутри более точного протокола различные коды DSL выводятся через выразительную способность (движок кода преобразования протокола).
- **Уровень инженерной связи: **Наконец, через подключаемый модуль vs code и подключаемый модуль webIDE вывод в каждую среду проекта.
Идентификация информационной архитектуры пользовательского интерфейса
Самым сложным из вышеперечисленного является уровень идентификации материала, который включает в себя общую информационную структуру пользовательского интерфейса.В соответствии с традиционным методом обработки интерфейса общий интуитивный опыт заключается в том, что проект приложения содержит несколько страниц, страницы разделены на несколько блоков, и блоки разделены на атомарные блоки, могут содержать бизнес-компоненты или базовые компоненты многократного использования, а компоненты также состоят из компонентов, которые нельзя разделить. С ними интуитивно легко иметь дело мозгу, имеющему опыт работы в отрасли, но машинам нелегко их понять.Результаты, полученные с помощью прямого сквозного вывода, в настоящее время относительно сложны, особенно для каждой области бизнеса. бизнес-компонентов.Определение совершенно другое. Поэтому наша текущая стратегия состоит в том, чтобы разделить весь проект послойно от большого к меньшему, снаружи внутрь; несколько моделей взаимодействуют, и одна модель отвечает за идентификацию определенного типа фичи; модель бизнес-компонента здесь открытая, и организован с помощью различных моделей.Бизнес-домен определяет свои собственные возможности идентификации бизнес-компонентов.
Взяв в качестве примера целевую страницу Juhuasuan, сначала используйте модель сегментации страницы, чтобы разделить страницу на несколько блоков (блоков) сверху вниз, второй блок посередине более сложен, продолжайте использовать модель группировки для разделения, идентификации как блок Loopable; затем продолжайте определять, есть ли в блоке бизнес-компоненты и базовые компоненты, например, первый — Slider, третий — Tabbar и четвертый — BottomBar.
Базовая модель распознавания объектов-обнаружения компонентов
Панель вкладок является очень распространенным базовым компонентом на стороне C. Давайте возьмем этот пример в качестве примера, чтобы представить, как выполняется базовая модель распознавания компонентов.
- Определение проблемы: определение проблемы является наиболее важным шагом.Во-первых, идентификация основного компонента является проблемой обнаружения цели, а затем необходимо четко определить, какие цели должны быть обнаружены и какие основные функции, чтобы обеспечить основу для производства положительных и отрицательных образцов в будущем.
- Генерация сэмплов: стоимость направленного создания сэмплов, связанных с внешним доменом, по-прежнему относительно низка.Существуют различные способы создания скриншотов, макетов и т. д., но легко сделать сэмплы недостаточно богатыми и сбалансированными, и его необходимо постоянно корректировать в соответствии с эффектом модели. При необходимости для маркировки необходимо собрать больше сэмплов реальных сцен.В настоящее время наш формат хранения сэмплов унифицирован как Pascal VOC.
- Моделирование: в отрасли существует множество моделей для обнаружения целей, таких как SSD YoLo и т. д., но большинство моделей являются истинным обнаружением физических признаков, таких как обнаружение цветов, кошек, собак и т. д. Интерфейсный компонент распознавание больше ориентировано на обнаружение контурных особенностей.В тестах различных моделей конечный эффект Detectron2 лучший среди них, mAp составляет около 75%, в настоящее время он оптимизируется.
- Прогноз обучения: Detectron2 — это относительно большая модель, которая в настоящее время обучается и прогнозируется независимо на сервере GPU.
Ниже приведен фактический эффект после распознавания imgcook:
Анализ логической точки
Далее поговорим о проблеме интеллектуальной идентификации и генерации логических точек.В первую очередь разберем бизнес-логику, которая может скрываться за ней от наиболее интуитивного способа получения эскизного проекта.В свою очередь, мы можем увидеть, что есть логика цикла, логика изображения белого фона, что такое логика поля с высокой вероятностью, а также видно, что может быть логика сбора купонов... Это показывает, что многие логики могут быть идентифицируемы, и эти маленькие логики баллы тесно связаны с фоновым опытом в сфере бизнеса.
Приведенная выше бизнес-логика анализируется с точки зрения.Как можно разобраться в таком количестве логики?Далее мы проанализируем ее с технической точки зрения и углубимся в анализ внешней бизнес-логики.Сначала мы представим концепция конечного автомата для моделирования и анализа, которая обычно включает в себя несколько элементов, при каких условиях и времени (времени событий), какое действие делать (действие) и из какого состояния (текущее состояние) в другое состояние (вторичное). состояние). Интерфейсный домен, соответствующий диску данных, может быть отображен как текущее состояние и вторичное состояние, которые могут быть выражены состоянием данных, изменения данных приводят к изменениям пользовательского интерфейса, запускают события (жизненный цикл, события, запланированные задачи и т. д.) генерировать действия (Action, OP/operation) изменяет данные, а данные управляют изменениями пользовательского интерфейса. Таким образом, вся бизнес-логика внешнего интерфейса может быть включена.Здесь есть три основных элемента: один - время триггера, один - триггерное действие, а другой - привязка данных. Здесь привязка данных рассматривается как специальная OP.
Таким образом, после индукции мы можем выразить всю бизнес-логику с помощью этих двух элементов.Глубокое обучение очень хорошо работает в области распознавания.Каждая логическая точка здесь может осуществляться разными методами идентификации.Ведь модель Точность не может быть гарантируется на 100%. В реальной бизнес-реализации для помощи в распознавании вводится больше распознавателей правил, таких как обычные и пользовательские распознаватели функций, так что все логические точки в бизнесе могут быть распознаны и выражены через Логическая точка грамотно собран. По сравнению с традиционными бизнес-компонентами он имеет более детализированный пакет и разумно собран в соответствии с бизнес-требованиями.
Ниже приведен пример всех логических точек, применяемых модулем купонов.
Наконец, возможности идентификации и выражения этого набора логических точек были преобразованы в набор продуктовых возможностей.Каждый бизнес может настраивать свою собственную логическую библиотеку, а затем автоматически применять ее для своего собственного развития бизнеса. Вся связь от новой логической классификации, производства образцов, обучения модели до онлайн-развертывания может быть непосредственно завершена путем создания продукта без необходимости порогового уровня глубокого обучения. Из-за больших накладных расходов на сервер обучения и развертывания моделей в настоящее время внутри предоставляются только соответствующие службы.
Суммировать
imgcook по-прежнему будет концентрироваться на передовых интеллектуальных исследованиях и разработках. Мы ожидаем, что ИИ еще больше расширит возможности передних исследований и разработок и повысит эффективность. В настоящее время, в дополнение к производственному коду проекта (Design2Code), мы в настоящее время делаем PRD2Code и Service2Code. для понимания служб данных на стороне сервера. , для дальнейшего создания интеллектуального поколения, охватывающего больше внешнего кода и часть логического кода на стороне сервера.
В то же время, на фоне внешнего интеллекта, мы предпримем дальнейшие попытки в области внешнего интеллекта.В настоящее время существует множество приложений для восприятия изображений и оценки намерений пользователя в реальном времени. В то же время, чтобы лучше популяризировать интерфейсную аналитику и обеспечить более широкое участие во внешнем интерфейсе, мы сотрудничали с командой Google tfjs, чтобы открыть исходный код для разработки алгоритма внешнего интерфейса.pipcook, предоставляет связанные с машинным обучением боеприпасы qiangzhi для внешнего интерфейса, а также позволяет интерфейсу войти в область машинного обучения с более низким порогом и постепенно улучшает экологию javascript и экологию машинного обучения.Есть еще те, кто знает javascript.I надеюсь, что больше передовых студентов обратят внимание на направление переднего интеллекта и объединятся вместе~~
Внешняя разведка является одним из четырех основных направлений Экономического комитета Али. Мы виртуальная команда, а разведывательная группа отдела Дао D2C является одной из основных команд. Мы команда, которая использует романтику поэта и Строгость ученого, чтобы создать ум, который лучше всего понимает ИИ, и международная команда разработчиков, приглашаем присоединиться к нам, чтобы вместе определить и создать новое будущее.