Details

Объектом работы служит процесс перевода графических макетов промышленных интерфейсов, выполненных в среде Figma, в web-based interface code; нормализация выходного кода к самодостаточному HTML/CSS-документу без внешних зависимостей рассматривается как ограничение текущей реализации, а не нативный формат выхода модели. Предметом — архитектура, контракты и алгоритмическая часть встраиваемого программного модуля, опирающегося на открытую визуально-языковую модель UI2Code^N. Проведён обзор подходов к задаче «screenshot-to-code» — от свёрточно-рекуррентной архитектуры pix2code до современных мультимодальных моделей; рассмотрены академические датасеты Design2Code, WebSight, Web2Code, WebCode2M и коммерческие генераторы v0, Galileo AI, Claude Design; показано, что ни один из рассмотренных ресурсов не охватывает специфики промышленных интерфейсов, требования к которым заданы стандартами ANSI/ISA-101.01-2015 и ISO 11064-1, а также руководством «The High Performance HMI Handbook». Спроектирован и реализован трёхзвенный программный модуль: плагин Figma (в песочнице Plugin API), локальный HTTP-сервис на FastAPI и обёртка модели UI2Code^N с поддержкой трёх режимов — генерации, итеративного уточнения и точечного редактирования. В текущей версии прототипа режим уточнения мандаторно передаёт модели рендер текущего кода в дополнение к референсному изображению, а режим редактирования принимает переменные дизайна и CSS-подсказки симметрично с двумя другими режимами; этим устраняется расхождение с заявленной семантикой UI-polishing и UI-editing модели UI2Code^N. Рендер сгенерированного HTML выполняется headless-Chromium через Playwright. Результаты rule-based заместителя и UI2Code^N в записке не смешиваются: инференс UI2Code^N подтверждается конфигурацией сервиса и проверкой /health. Собрано тестовое множество из восьми многослойных макетов промышленных экранов разной сложности на основе библиотеки SCADA-символов ThingsBoard 4.0 и принципов high-performance HMI. Состояние компонента кодируется одновременно цветом, текстовым бейджем и формой. В записке даны формальная постановка задачи, архитектура модуля, контракты HTTP-эндпоинтов, разграничение источников экспериментального контекста (ручная проверка извлечения из документа Figma и массовый эксперимент на синтетическом сценарии) и методика экспериментальной оценки (SSIM как часть набора метрик, дополненного визуальным анализом, категориями ошибок и принудительными итерациями refine). По массовому эксперименту получены численные характеристики цепочек «Generate → Refine 1 → Refine 2», агрегированные тайминги на эталонной конфигурации RTX 5090 и количественная оценка эффекта опционального контекста; материалы и выводы вынесены в третью главу и в раздел «Заключение».

The object of the work is the process of translating industrial HMI mockups authored in Figma into self-contained HTML/CSS code; the subject is the architecture, contracts and algorithmic part of an embeddable software module built on top of the open vision-language model UI2Code^N. Existing approaches to the "screenshot-to-code" task are surveyed, from the convolutional-recurrent pix2code architecture to modern multimodal models; the academic corpora Design2Code, WebSight, Web2Code and WebCode2M and commercial generators v0, Galileo AI and Claude Design are considered. None of the reviewed resources covers the specifics of industrial HMI, the requirements for which are defined by the ANSI/ISA-101.01-2015 standard, ISO 11064-1 and the "High Performance HMI Handbook". A three-tier software module is designed and implemented: a Figma plugin running inside the Plugin API sandbox, a local HTTP service based on FastAPI and a wrapper around UI2Code^N that exposes three modes — generation, iterative refinement and pointwise editing. The refinement mode mandatorily supplies the current rendered code to the model, and the editing mode accepts design variables and CSS hints on equal footing with the other two modes. Rendering of the generated HTML is performed by a headless Chromium instance driven by Playwright. Rule-based substitute results are not merged with UI2Code^N results in the thesis narrative; production runs require configurations that activate model_kind=ui2coden per /health. For evaluation, a set of eight layered industrial HMI mockups of varying complexity is assembled, grounded in the ThingsBoard 4.0 SCADA symbol library and the principles of high-performance HMI. The state of each component is encoded simultaneously by colour, by a textual badge and by a shape cue, satisfying the standards requirement that state must not rely on colour alone. The note covers the formal problem statement, architecture, HTTP contracts, separation of experimental context sources (figma_plugin / synthetic_script) and methodology for an honest experimental evaluation (SSIM as part of a metric set supplemented by visual analysis, error categories and, when needed, forced refine iterations). Quantitative results, GPU timings and VRAM-focused material are deferred to the third chapter.