Актуальність теми. Розробка веб-інтерфейсів є важливою складовою сучасних інформаційних систем, проте вона потребує значних витрат часу та ресурсів через велику кількість повторюваних етапів, таких як проєктування структури сторінки, підбір стилістичних рішень, кольорових схем, типографіки та зображень. Незважаючи на шаблонність багатьох процесів, розробник змушений брати участь у кожному етапі, що уповільнює створення навіть простих інтерфейсів. Існуючі підходи на основі великих мовних моделей частково автоматизують цей процес, однак їх результати часто є узагальненими та недостатньо враховують контекст конкретного завдання. Тому актуальним є створення систем, що поєднують генеративні можливості мовних моделей із семантичним пошуком для підвищення якості та релевантності результатів.

Об’єкт дослідження. Процес автоматизованої генерації веб-інтерфейсів із використанням сучасних інформаційних технологій.

Предмет дослідження. Методи та засоби побудови системи генерації веб-інтерфейсів на основі підходу Retrieval-Augmented Generation, зокрема семантичний пошук у векторних базах даних та генерація HTML/CSS коду за допомогою мовних моделей.

Мета дослідження. Розробка системи генерації веб-інтерфейсів, яка використовує семантичний пошук у базі UI-патернів для отримання точних, структурованих та контекстно узгоджених результатів.

Завдання дослідження.

1. Проаналізувати існуючі підходи до генерації веб-інтерфейсів.
2. Дослідити можливості застосування підходу Retrieval-Augmented Generation.
3. Розробити структуру векторної бази знань для зберігання UI-патернів.
4. Реалізувати механізм семантичного пошуку на основі векторних представлень.
5. Розробити алгоритм формування розширеного промпту для генерації інтерфейсу.
6. Інтегрувати мовну модель для генерації HTML/CSS коду.
7. Створити веб-застосунок для взаємодії з системою.

Виклад основного матеріалу. У роботі представлено систему генерації веб-інтерфейсів на основі підходу Retrieval-Augmented Generation, яка поєднує семантичний пошук у векторній базі знань із генерацією коду за допомогою мовної моделі.

Система включає векторну базу даних PostgreSQL з розширенням pgvector, у якій зберігаються структури сторінок, стилі та зображення у вигляді векторних представлень. Запит користувача перетворюється у вектор та порівнюється з даними бази для визначення найбільш релевантних елементів.

На основі результатів пошуку формується розширений промпт, що містить інформацію про структуру сторінки, UI-елементи, стиль оформлення та параметри зображень. Далі цей промпт передається мовній моделі, яка генерує готовий HTML-документ із вбудованими стилями.

Для взаємодії з користувачем реалізовано веб-застосунок на базі Flask, який забезпечує генерацію інтерфейсів та перегляд результатів.

Рис. 1 — На рисунку продемонстровано відмінності між веб-інтерфейсами, згенерованими виключно мовною моделлю (LLM) та з використанням підходу Retrieval-Augmented Generation (RAG). У випадку використання лише LLM інтерфейс зазвичай має більш узагальнений та шаблонний вигляд, оскільки модель генерує результат на основі загальних знань без доступу до конкретного контексту або прикладів.

Рис. 2 — На рисунку зображено розроблений інтерфейс користувача інтелектуальної системи генерації веб-сторінок. Інтерфейс реалізовано у вигляді сучасного веб-додатку з чіткою структурою та зручною навігацією.

Висновки. Запропонована система забезпечує повний цикл генерації веб-інтерфейсів із використанням семантичного пошуку. Використання RAG значно підвищує якість результатів. Подальші дослідження пов’язані з розширенням бази знань та використанням мультимодальних моделей.

1. Xu S., Yan Z., Dai C., Wu F. MEGA-RAG: a retrieval-augmented generation framework// Frontiers in Public Health, 2025. Режим доступу: https://www.frontiersin.org/journals/public-health/articles/10.3389/fpubh.2025.1635381/full
2. Ding H., Pang L., Wei Z., Shen H., Cheng X. Rowen: Adaptive Retrieval-Augmented Generation for Hallucination Mitigation in LLMs, 2024. Режим доступу:
   https://arxiv.org/abs/2402.10612