«Ваш промпт здесь»: web-сервис генерации промптов на WordPress
«Ваш промпт здесь» — браузерный сервис для подготовки промптов к изображениям, видео, презентациям и иконкам. Проект работает на WordPress, но основная пользовательская часть реализована кодом.
Для сайта создана собственная тема, отдельные PHP-шаблоны и интерфейсы сервисов. Формы, проверка параметров, сборка результата, лимиты и пользовательские сценарии разработаны специально под проект.
Сайт проекта: vashprompt.ru
Задача
Нужно было создать не одну форму, а платформу для нескольких конструкторов промптов. Каждый сервис получает собственный набор параметров, правила проверки и структуру итогового запроса.
При этом интерфейс должен оставаться единым, а новые инструменты можно было добавлять без полной переделки сайта.
Стек проекта
- WordPress;
- PHP;
- JavaScript;
- HTML5;
- CSS3;
- база данных WordPress;
- Яндекс Метрика.
Архитектура платформы
Проект изначально строился как система из нескольких самостоятельных сервисов. Главная страница работает как витрина, а каждый конструктор открывается по отдельному URL.
Изображения
Конструктор промптов для фотографий, рекламы и других визуальных задач.
Видео
Сценарий учитывает действие, движение камеры, формат и параметры будущего ролика.
Презентации
Промпт собирается с учетом аудитории, структуры, слайдов и исходных данных.
Иконки
Можно подготовить одиночную иконку или серию в общей стилистике.
Серверная сборка промпта
Полный результат не собирается заранее в браузере. Пользователь заполняет форму, после чего данные передаются на сервер.
PHP проверяет запрос, собирает промпт по заданной структуре и возвращает готовый текст в интерфейс. Такая схема позволяет хранить основную логику на серверной стороне.
1. Параметры
Пользователь выбирает значения и заполняет необходимые поля.
2. Проверка
Сервер получает данные и проверяет структуру запроса.
3. Результат
Готовый промпт возвращается в интерфейс пользователя.
Система бесплатных генераций
Для обычного пользователя предусмотрено пять бесплатных сборок промпта в сутки. Лимит уменьшается только после нажатия кнопки «Собрать промпт».
Изменение полей, очистка формы, копирование или скачивание результата лимит не расходуют. Учет ведется на сервере, а не только через JavaScript в браузере.
Логика интерфейса
На странице конструктора используется двухколоночная структура. Слева расположена основная форма, справа — блок проверки заполнения.
Проверка показывает, какие параметры уже указаны и какие сведения еще отсутствуют. Полный промпт до отправки серверного запроса в этой области не раскрывается.
После сборки результат появляется ниже формы. Его можно скопировать, скачать в TXT или открыть в полноэкранном режиме.
JavaScript и поведение страницы
JavaScript отвечает за работу формы, проверку заполнения, состояние кнопок, очистку параметров и пользовательские уведомления.
После генерации страница автоматически прокручивается к готовому результату. Правая колонка сохраняет стабильную высоту, поэтому интерфейс не меняет размер при каждом выборе параметра.
Собственная тема WordPress
Для проекта не использовалась готовая коммерческая тема или визуальный конструктор страниц.
Для главной, сервисов и служебных разделов созданы отдельные PHP-шаблоны. Общие элементы интерфейса вынесены в единую систему.
Общие элементы
- шапка и футер;
- кнопки;
- формы;
- уведомления;
- блок проверки;
- область результата.
Что можно расширять
- добавлять новые сервисы;
- менять набор полей;
- добавлять сценарии;
- расширять серверную логику;
- создавать новые шаблоны.
Адаптивная версия
На широком экране форма и проверка расположены рядом. На смартфоне элементы переходят в последовательную компоновку.
Поля и кнопки адаптированы под сенсорное управление, а логика сборки промпта остается одинаковой на разных устройствах.
SEO и аналитика
У главной страницы и каждого конструктора собственные Title, Description и H1. Направления разделены по отдельным URL, поэтому страницы не конкурируют за одну и ту же семантику.
Для аналитики подключена Яндекс Метрика. Google Analytics в проекте не используется.
Интерфейс сервиса
Скриншоты показывают страницы сервиса, интерфейс конструкторов и работу основных элементов проекта.
Что получилось
WordPress используется здесь как основа полноценного браузерного сервиса, а не только как CMS для публикаций.
Собственная тема
Интерфейс и шаблоны разработаны специально под сервис.
Серверная логика
Промпт собирается на стороне сервера через PHP.
Расширяемая платформа
Новые конструкторы можно добавлять в существующую архитектуру.