Config-Driven RAG Generation

AI Page Generator

5000+ сгенерированных секций, раннее применение полного RAG-стека (Chroma/Qdrant, LlamaIndex, Multiagent).

PAGE_GEN

Project Init sys_vars.json

Контекст

SYS>В середине 2025 года, до массовой популяризации устоявшихся LLM-паттернов, возникла необходимость в исследовании глубокой интеграции ИИ для массовой генерации UI. Требовалось понять, как управлять нестабильным выводом LLM при создании сложной HTML/Tailwind верстки.

Роль

USR>AI/LLM Engineer / Архитектор систем

Проблема

ERR>Как объединить сырую мощь компактных языковых моделей (Codestral, Gemini, GLM) со строгими детерминированными структурами, чтобы массово генерировать код без 'галлюцинаций', опираясь на знания из векторных баз данных.

Ограничения

■ Сложный зоопарк БД: поддержка ChromaDB, Qdrant и FAISS в одном пайплайне.
■ Обеспечение сложной логики кастомного multiagent cascade-роутинга.
■ Интеграция тяжелой математической матрицы: 30 премиум-стилей, 53+ композиции, 11 структурных паттернов и 18 индустрий.
■ Отсутствие готовых фреймворков для гибридной генерации UI: все оркестраторы писались с нуля.

Архитектура Системы

Гибридная архитектура RAG + Multiagent. Пользовательский запрос обогащается данными из векторных хранилищ, затем сложный роутер распределяет задачу между моделями или локальным кэшем, после чего выходной HTML проходит через Contrast Fixer и сохраняется в CMS.

flowchart TD
  CONF[JSON Configs: Styles/Compositions] --> LOAD[Configuration Loader]
  LOAD --> GEN[Universal Gen Engine]

  SCR[Scraped HTML Templates] --> CHROMA[(ChromaDB / Qdrant)]

  REQ[User Request: Industry + Style] --> RAG[RAG Retrieval Engine]
  RAG --> CHROMA

  REQ --> ROUTE{Multiagent Router}
  ROUTE -- "RAG-hit / Complex" --> RAG
  ROUTE -- "Direct LLM" --> LLM[Codestral 95% / Gemini 2.5 Pro / GLM]
  ROUTE -- "Easy" --> CACHE[Local Cache]

  RAG --> WORKFLOW[Tailwind/HTML Workflow]
  LLM --> WORKFLOW
  CACHE --> WORKFLOW

  WORKFLOW --> OUT[HTML + CSS Output]
  OUT --> FIX[Contrast Fixer / QA]
  FIX --> CMS[(Directus Export)]

Config-Driven Layer Multiagent Router Dual Vector Stores Quality Assurance

Архитектура Системы

Детализация Config-Driven ядра. Демонстрирует, как CLI параметры и флаги управляют сборкой промпта на уровне tools/universal/page_component_generator.py. Каждый слой изоляции (индустрия, стиль, композиция) добавляет свой фрагмент контекста.

flowchart LR
  CLI[CLI Flags / Params] --> ORCH[Component Generator]
  
  subgraph Prompt Assembly Layers
    IND[Industry Context] --> ORCH
    STY[Style Tokens] --> ORCH
    COMP[Composition Rules] --> ORCH
    ELEM[Element Schemas] --> ORCH
  end
  
  ORCH --> LLM[LLM Engine]
  LLM --> PARSE[Structural Parser]
  PARSE --> RENDER[Component HTML]

CLI Parameters Prompt Assembly Context Layers

Детерминированный Пайплайн Генерации (8 Фаз)

В основе работы AI Page Generator лежит строгий 8-этапный конвейер, который контролирует весь процесс: от валидации входящего запроса до финальной пост-обработки и оценки качества HTML-кода.

Step 01

1. Инициализация

Загрузка Config-Driven loaders (style, composition, element) и запуск ключевых ядер: UniversalGenerationEngine, UnifiedDesignTokenManager, PageUnificationEngine и PageComponentComposer.

Step 02

2. Валидация Запроса

Проверка обязательных полей (industry, page_type), строгая валидация списка компонентов и проверка доступности конфигураций.

Step 03

3. Загрузка Конфигураций

Парсинг JSON-матриц из директорий config/: загрузка style, composition, elements и design_tokens.

Step 04

4. Генерация Компонентов

Для каждого блока в списке: создание UniversalRequest, применение дизайн-токенов, RAG-генерация через UniversalGenerationEngine и сохранение в ComponentContent. Поддерживается параллельная генерация.

Step 05

5. Унификация (Очистка и Стандартизация)

Глубокая очистка HTML: унификация цветовой палитры (regex замена rgba/hex на унифицированные Tailwind классы), удаление лишних оберток, стандартизация кнопок, очистка от LLM-артефактов и оптимизация CSS структуры.

Step 06

6. Композиция Страницы

Обертка каждого компонента в семантические

с добавлением ARIA атрибутов. Сборка финального HTML (DOCTYPE, head, style, body, CDN Tailwind) и опциональный прогон через ContrastFixer.

Step 07

7. Сохранение и Интеграция

Локальное сохранение HTML-артефакта через FileManager, запись метаданных генерации и опциональный экспорт данных в Directus CMS.

Специализированный production-интерфейс (FastAPI/Jinja2), оптимизированный для массового запуска генерационных очередей. Управляет пакетным экспортом в Directus CMS и обеспечивает мониторинг стабильности воркфлоу.

Техническая Спецификация

Ключевые возможности

Mass Queue Execution CMS Sync Stability Metrics

Architecture Layer: Pipeline UI

Эволюция R&D Лаборатории

Фундамент RAG-Генерации

Проектирование ядра извлечения знаний (core/rag_engine.py, core/rag_retrieval_engine.py). Настройка и параллельное использование нескольких векторных хранилищ (ChromaDB и Qdrant) с моделями sentence-transformers для эмбеддингов HTML-паттернов.

Собственный Multiagent Router

Разработка кастомной мультиагентной системы. Реализация cascade-роутинга между Codestral (использовался в 95% случаев), Gemini и GLM, с локальными fallback-стратегиями в зависимости от сложности UI-компонента.

Config-Driven Архитектура

Создание мощных генераторов (tools/universal/page_component_generator.py — более 5000 строк). Внедрение систем внедрения зависимостей (DI) и модулей данных: 30 премиум-стилей, 53 уникальные композиции и 18 контент-профилей индустрий.

Разделение HTML & Tailwind Pipelines

Разработка двух независимых, огромных воркфлоу (enhanced_html_workflow.py и enhanced_tailwind_workflow.py), которые изолированно обрабатывают генерацию чистого семантического HTML и функционального Tailwind-кода.

Quality Gates & Benchmarks

Внедрение автоматических модулей проверки качества (core/quality_assurance_engine.py), системы оценки сгенерированного HTML и инструмента ContrastFixer для пост-обработки цветовой доступности интерфейсов. Запуск скриптов сравнения RAG-стратегий.

Осознанный Рефакторинг (v2)

Переход к модульной архитектуре generator2 parity (8 строгих фаз от CLI до тестирования) с введением жесткого лимита в 500-700 строк на файл — демонстрация зрелого инженерного подхода к управлению растущим AI-монолитом.

Галерея Результатов

3000+ наборов секций

Premium

Beauty Salon Landing

export: 20260215_201252

Beauty Pass ≥ 90

Aesthetic

Beauty Center

export: 20260218_195627

Aesthetic Pass ≥ 94

Corporate

Consulting Hub

export: 20260205_015917

Business Pass ≥ 92

Modern B2B

Financial Advisory

export: 20260205_002628

Finance Pass ≥ 89

Cyber HUD

Fitness Landing

export: 20260205_215737

Dark Mode Pass ≥ 94

Dynamic

Crossfit Club

export: 20260205_184419

Sport Pass ≥ 88

Minimalist

Yoga Studio

export: 20260204_141012

Wellness Pass ≥ 91

Luxury

Premium Spa

export: 20251017_224134

Premium Pass ≥ 95

Codestral 95% 3000+ Комбинаций Gemini Pro 1.5 Quality Config-Driven Architecture

Project Conclusion

Что это доказывает

Эффективность Multi-Track подхода

Оба трека (Прямая генерация через LLM и RAG-генерация) показали высокую результативность. Выбор трека динамически маршрутизировался на основе сложности запрашиваемого UI-компонента.

Качество малых моделей

При правильной изоляции промптов (Prompt Assembly) и точечных инструкциях, 7-22B модели (Codestral) выдавали результат, неотличимый от ответов флагманских моделей (Gemini 2.5 Pro).

Агентная инкапсуляция

Самым важным архитектурным сдвигом стало понимание, что существующие генераторы и их модули можно 'завернуть' в Tools для автономных агентов, что в будущем легло в основу Antigravity OS.

Детерминированность поверх AI

Модель не должна принимать структурных решений. Она должна лишь окрашивать жестко заданный Config-Driven скелет (CSS/HTML каркас) креативным контентом и утилитарными Tailwind-классами.

Ознакомьтесь с другими проектами генеративной архитектуры:

Связанные материалы

Website Engine Architecture

HTML-Tailwind Builder

GovardOS Concept

Интересует внедрение RAG или разработка внутренних AI-инструментов?

От экспериментальных агентов до стабильных Production-пайплайнов.

Обсудить проект Мой опыт