UIAnalyzer

UIAnalyzer — комплексная система для анализа, оценки и управления качеством пользовательских интерфейсов. Проект построен по микросервисной архитектуре и состоит из независимых подсистем, каждая из которых запускается в отдельном контейнере Docker.

Программная система реализована в рамках ВКР «Разработка методов и программного обеспечения для автоматической оценки качества пользовательских интерфейсов».

• Студент Бураков Алексей Андреевич, М9123-09.04.04рпис
• Научный руководитель Озерова Галина Павловна

Структура репозитория

• backend/ — серверная часть (Flask, SQLAlchemy, Playwright)
• frontend/report-app/ — клиент для визуализации и интерпретации отчётов
• frontend/knowledge-editor/ — клиент для наполнения и редактирования базы знаний
• docker-compose.yml — запуск всех сервисов в контейнерах

Структура проекта

UIAnalyzer/
├── backend/                # Серверная часть (Flask, бизнес-логика, API, анализ интерфейса)
│   ├── app.py              # Точка входа Flask-приложения
│   ├── Dockerfile          # Docker-образ backend
│   ├── requirements.txt    # Python-зависимости
│   ├── data/               # Временные и обработанные файлы анализа
│   ├── db/                 # База знаний (SQLite), модели, инициализация
│   ├── routes/             # Flask Blueprints: knowledge (база знаний), page (анализ интерфейса)
│   ├── services/           # Сервисы для анализа DOM, генерации заключений, парсинга и др.
│   ├── tests/              # Модульные и интеграционные тесты backend (pytest)
│   └── utils/              # Вспомогательные утилиты (логирование и др.)
├── frontend/
│   ├── knowledge-editor/   # Подсистема наполнения базы знаний (React)
│   │   ├── Dockerfile      # Docker-образ knowledge-editor
│   │   ├── package.json    # JS-зависимости
│   │   ├── public/         # Статические файлы и шаблон index.html
│   │   └── src/            # Исходный код React-приложения
│   │       ├── api/        # Слой работы с backend API
│   │       ├── components/ # React-компоненты (KnowledgeEditor, KnowledgeForm, KnowledgeList и др.)
│   │       ├── hooks/      # Кастомные хуки (работа с API, валидация)
│   │       └── utils/      # Схемы, вспомогательные функции
│   └── report-app/         # Подсистема интерпретации оценки (React)
│       ├── Dockerfile      # Docker-образ report-app
│       ├── package.json    # JS-зависимости
│       ├── public/         # Статические файлы и шаблон index.html
│       └── src/            # Исходный код React-приложения
│           ├── api/        # Слой работы с backend API
│           ├── components/ # React-компоненты (DomTreeView, StatisticsWidget, FileUpload и др.)
│           ├── hooks/      # Кастомные хуки (работа с анализом DOM, выбор элементов)
│           └── utils/      # Вспомогательные функции
├── docker-compose.yml      # Конфигурация для запуска всех сервисов
├── README.md               # Общая документация проекта

Технологии и инструменты

Общие инструменты

• Git — система контроля версий (документация)
• Docker и Docker Compose — контейнеризация и управление сервисами (документация)

Фронтенд

• React — библиотека для построения интерфейсов (документация)
• Material UI (MUI) — компонентная библиотека для React (документация)
• Jest, React Testing Library — тестирование компонентов (Jest, RTL)

Бэкенд

• Flask — Python-фреймворк для API (документация)
• Flasgger — генерация Swagger/OpenAPI (документация)
• SQLAlchemy — ORM для Python (документация)
• SQLite — встроенная реляционная БД (документация)
• Playwright — headless-анализ DOM (документация)
• Pytest — тестирование Python-кода (документация)

Быстрый старт (Docker)

1. Убедитесь, что установлены Docker и Docker Compose.

2. В корне проекта выполните:

   docker-compose up --build

3. Фронтенд-приложения будут доступны на портах, указанных в docker-compose.yml.

Запуск без Docker (локально)

Backend

cd backend
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python app.py

Frontend (пример для report-app)

cd frontend/report-app
npm install
npm start

Назначение подсистем

• backend — REST API для анализа интерфейса и управления знаниями
• report-app — визуализация отчётов и результатов анализа
• knowledge-editor — ручное наполнение и редактирование базы знаний экспертами

Пример структуры запроса к API

curl -X POST http://localhost:5000/process-page -H "Content-Type: application/json" -d '{"url": "https://example.com"}'