Генератор веб-интерфейсов

Генератор веб-интерфейсов - это инструмент для создания UI форм из шаблонов и генерации аннотированных скриншотов для наборов данных машинного обучения. Он предназначен для обучения нейронных сетей распознавать элементы интерфейса в приложениях с похожими UI. Формы создаются с использованием веб-технологий (HTML/CSS) и рендерятся с помощью ChromeDriver.

Основные возможности

• Генерация веб-форм на основе JSON шаблонов с использованием HTML/CSS
• Создание скриншотов сгенерированных форм
• Аннотирование скриншотов с указанием позиций и типов элементов
• Поддержка различных типов виджетов и макетов
• Настройка через JSON файлы

Архитектура

Система состоит из:

1. Конфигурация - JSON файлы, определяющие:

   • Свойства и стили виджетов
   • Правила композиции
   • Ограничения макета
   • Визуальные стили

2. Ядро генератора - Создает веб-формы (HTML/CSS) путем:

   • Парсинга конфигурационных файлов
   • Построения деревьев виджетов
   • Генерации HTML шаблонов
   • Создания скриншотов

3. Интерфейс командной строки - Позволяет управлять процессом генерации HTML форм и их рендеринга:

   • Указывать количество генерируемых форм
   • Задавать выходные директории
   • Настраивать параметры скриншотов

Конфигурационные файлы

Генератор использует следующие JSON файлы:

atomic_widget_descr.json

Определяет атомарные (неделимые) виджеты, такие как кнопки и метки. Каждый виджет имеет:

• name: Тип виджета
• prob: Вероятность появления
• style: Список применимых стилей
• solo: Может ли виджет появляться только один раз

comp_widget_descr.json

Определяет составные виджеты из других виджетов. Содержит:

• name: Тип составного виджета
• content: Список дочерних виджетов с позициями
• group: Группы виджетов для альтернативного выбора
• row/col: Позиции в сетке

cont_widget_descr.json

Определяет контейнерные виджеты, содержащие другие виджеты. Включает:

• name: Тип контейнера
• children: Разрешенные дочерние виджеты
• direction: Направление компоновки (вертикальное/горизонтальное)
• nrows/ncols: Размеры сетки

tree_descr.json

Задает общие параметры формы:

• root: Корневой контейнерный виджет
• min/max_nwidgets: Диапазон количества виджетов на форму

widget_styles.json

Определяет визуальные стили для виджетов:

• name: Идентификатор стиля
• widget: Тип виджета, к которому применяется
• props: Свойства стиля (цвета, шрифты и т.д.)

Использование

1. Установить зависимости:

pip install -r requirements.txt

2. Загрузить chromedriver и сохранить его в директорию ./driver

3. Запустите генератор:

python -m web_gui_generator.main --count 100 --output ./screenshots

4. Просмотрите сгенерированные скриншоты и аннотации в выходной директории

Параметры командной строки

• --count: Количество генерируемых форм (обязательно)
• --output: Выходная директория для скриншотов
• --config: Путь к директории с конфигурацией
• --driver: Путь к исполняемому файлу ChromeDriver
• --help: Показать справку

Пример:

python -m web_gui_generator.main --count 50 --output ./dataset --config ./custom_configs

Формат вывода

Генератор создает:

1. HTML/CSS файлы для каждой сгенерированной веб-формы
2. Скриншоты в формате PNG
3. JSON аннотации с:
   • Позициями и размерами виджетов
   • Типами виджетов
   • Иерархической информацией

Пример аннотации:

{
  "form_id": "12345",
  "widgets": [
    {
      "type": "Button",
      "position": [
        100,
        200
      ],
      "size": [
        80,
        30
      ],
      "text": "Submit"
    },
    {
      "type": "Label",
      "position": [
        50,
        100
      ],
      "size": [
        200,
        20
      ],
      "text": "Enter your name:"
    }
  ]
}