ВебВиро: создание многостраничного веб-сервиса нейросетью
ВебВиро — экспериментальный многостраничный web-сервис, при разработке которого нейросеть использовалась на всех основных этапах: от структуры проекта до написания PHP, JavaScript, HTML и CSS.
В отличие от тестового лендинга, здесь нужно было собрать шесть рабочих генераторов, собственную тему WordPress, экспорт файлов, валидацию полей, адаптивный интерфейс и общую систему оформления.
Архитектура проекта
WordPress используется как основа сайта: для страниц, маршрутизации, меню и стандартных функций CMS. Готовая тема и визуальный конструктор не применялись.
Для сайта написана собственная тема. Каждый генератор оформлен отдельным плагином, поэтому его интерфейс и логика не зависят от содержимого других сервисов.
Стек проекта
- WordPress;
- PHP;
- HTML5;
- CSS3;
- JavaScript;
- SVG;
- Canvas API.
Шесть сервисов с разной логикой
В проект вошли генераторы прайсов, объявлений, чек-листов, расписаний, инструкций и карточек контактов с QR-кодом. Общий интерфейс у них одинаковый, но обработка данных различается.
Пагинация
Прайсы, чек-листы и инструкции автоматически переходят на новый лист, если контент не помещается.
Валидация
Проверяются даты, время, телефон, e-mail, сайты и другие поля, где свободный ввод может вызвать ошибку.
Автоматическая логика
В расписании день недели рассчитывается по выбранной дате, а на одну дату можно добавить несколько событий.
JavaScript и формирование макетов
Основная логика генераторов работает в браузере. JavaScript получает значения формы, проверяет их и перестраивает предпросмотр после изменения параметров.
Готовый макет формируется в SVG. Для длинных материалов скрипт рассчитывает высоту строк и доступное место на листе. Если места недостаточно, создается следующая страница без уменьшения текста и обрезки содержимого.
Пользовательские данные при этом не сохраняются на сайте. Текст, цены, даты и контакты используются только в текущей сессии браузера.
Экспорт PNG, SVG и PDF
SVG используется не только для предпросмотра, но и как основа для экспорта. Это позволило не создавать отдельный серверный генератор изображений.
- SVG скачивается напрямую;
- PNG формируется через Canvas;
- PDF создается через печатное представление;
- многостраничные материалы сохраняют разбивку на листы.
Общая дизайн-система
Все плагины приведены к одной структуре: одинаковые панели, поля, кнопки, форматы, стили и цветовые палитры. При этом каждый вариант оформления строит собственную SVG-композицию.
Отдельно тестировались длинные названия, максимальное количество строк, переносы текста и мобильная версия. Именно такие проверки занимают заметную часть работы после первой генерации кода нейросетью.
SEO и техническая подготовка сайта
SEO-плагин для проекта не используется. Title, Description, Open Graph и Schema.org выводятся через функции темы. Для сервисов применяется разметка WebApplication.
- настроен canonical;
- проверен robots.txt;
- используется штатная XML-карта WordPress;
- подключен счетчик LiveInternet;
- добавлено уведомление о cookie;
- созданы служебные и юридические страницы.
Интерфейс сервиса
Скриншоты показывают страницы сервиса, интерфейс конструкторов и работу основных элементов проекта.
Что получилось
Нейросеть написала значительную часть кода и заметно ускорила разработку. Но проект собирался не одним запросом: каждая функция требовала отдельной постановки задачи, проверки и последующей корректировки.
В итоге получился рабочий многостраничный сервис, а не демонстрационный макет. Посмотреть результат можно на webviro.ru.
Отдельно я разобрала сам эксперимент и вопрос, насколько реальны рекламные обещания «создать сайт нейросетью за две минуты». Этот материал опубликован на Дзене.