Мы создали конструктор сайтов WordPress на базе искусственного интеллекта, исходный код которого сегодня открыт. Это QuickWP

Пару недель назад мы выпустили прототип QuickWP, конструктора сайтов WordPress на базе искусственного интеллекта, который использует OpenAI , тему FSE и WordPress Playground для создания персонализированной темы для пользователя на основе темы и описания вашего веб-сайта.

Если вы еще не опробовали его, вы можете просмотреть предварительный просмотр QuickWP в Твиттере (он же X).

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

В этой статье я расскажу об идеях, проблемах и вещах, которые мы узнали, работая над QuickWP. Надеюсь, это поможет вам, если вы когда-нибудь столкнетесь с подобными проблемами.

Идея

Хотя мы уже некоторое время подумывали об экспериментах с API-интерфейсами AI и OpenAI, мы никогда не планировали создавать конструктор веб-сайтов с искусственным интеллектом. Ранее мы пытались интегрировать ИИ с плагином Otter Blocks для генерации макетов из доступных шаблонов с помощью подсказки ИИ, но эта реализация была довольно примитивной. Результаты были очень общими и не учитывали контекст пользователя в предоставленном результате.

Учитывая, что шаблоны в редакторе блоков легко сломать даже при незначительных изменениях, мы не могли просто попросить GPT создавать шаблоны на лету или даже попросить его заменить контент.

Все изменилось, когда мы подумали об этой идее, основанной на каркасах. Все просто: мы создаем тему FSE с каркасами и обширной цветовой палитрой. А затем с помощью ИИ мы выбираем шаблоны на основе подсказок пользователя.

В темах FSE, используя свойства файла theme.json, мы можем легко изменить стиль всего веб-сайта из одного места. То же самое применяется и к нашим шаблонам, чтобы обеспечить единообразие на всем веб-сайте, не беспокоясь о том, что разные шаблоны имеют разные настройки, которые необходимо изменять отдельно.

Здесь мы также используем каталог изображений CC0 для заполнения веб-сайта изображениями, чтобы предоставить пользователю лучшую отправную точку.

Хотя идея звучит достаточно просто, нам потребовалось несколько проб и ошибок, чтобы достичь момента, когда она сможет генерировать результаты, которые будут достаточно хороши для пользователя. Целью было потратить как можно меньше времени на создание прототипа, который пользователи смогут использовать в качестве SaSS с веб-сайта продукта.

Обзор стека проекта

Проект требовал более одной части, поэтому мы использовали несколько стеков, то есть все, что позволяло нам максимально быстро создать прототип.

Вот различные части проекта:

• Тема FSE: Основа проекта. Он включает в себя различные шаблоны и подробный файл theme.json.
• Базовый плагин: этот плагин обладает всеми функциями и пользовательским интерфейсом, необходимыми для работы проекта.
• Конечная точка API: конечная точка API, обеспечивающая связь между веб-сайтом пользователя и API OpenAI.

Вот упрощенная диаграмма, показывающая весь рабочий процесс.

тема ФСЕ

Тема FSE является основой всего проекта. Чтобы упростить создание прототипов, мы начали с форка темы Twenty Twenty-Four. Мы практически удалили все шаблоны и настроили свойства theme.json в соответствии с нашими потребностями.

Лучшие практики в области тем FSE меняются очень быстро, и с каждой версией WordPress у нас появляется новый способ ведения дел. Начав с ответвления темы по умолчанию, мы сможем построить прочную основу с минимальными усилиями.

С точки зрения кода, большинство вещей такие же, как и в теме FSE. Единственное отличие, которое вы заметите, — это то, как мы используем строки и изображения в шаблонах.

Здесь мы добавляем текст по умолчанию, пространство имен, зависящее от шаблона, для строк и пространство имен предварительного просмотра по умолчанию для каждой строки.

Текст по умолчанию — это текст, который будет отображаться в шаблонах при обычном использовании, если кто-то добавляет шаблон внутри редактора или использует тему без QuickWP AI.

Пространство имен, специфичное для шаблона, является идентификатором для этой конкретной строки. А пространство имен предварительного просмотра по умолчанию — это общее пространство имен, которое мы используем для всех строк в контексте. Мы вернемся к этому позже.

Генерация подсказок ИИ

Поскольку это был быстрый прототип, мы хотели изучить более простые методы тестирования и реализации. Мы экспериментировали с различными моделями ИИ, но в итоге остановились на наиболее популярном варианте — OpenAI. На этапе разработки мы использовали GPT-4, поскольку результаты были намного лучше с последней моделью OpenAI, но это было слишком дорого, поэтому мы решили перейти на использование GPT-3.5 Turbo для большинства задач. Я говорю о большинстве задач, поскольку мы все еще используем GPT-4 для создания цветовой палитры, поскольку цветовое разнообразие с GPT-3.5 было невелико.

Для отправки запросов мы попробовали различные варианты, предлагаемые OpenAI, но обнаружили, что Assistant API лучше всего подходит для наших нужд. Чтобы избежать недобросовестных действий, мы также использовали API модерации OpenAI, чтобы предотвратить обработку запросов, если они не соответствуют политике OpenAI в отношении контента. Как мы видим, после релиза люди пытались экспериментировать со всеми видами подсказок, которые могли бы привести к проблемам с нашей учетной записью OpenAI, поэтому добавление модерации стоило потраченного времени. И да, его можно использовать бесплатно!

Генерация изображений

Когда мы задумывали этот проект, одной из проблем было создание изображений. Мы могли бы, конечно, использовать для этого Dall-E или другие модели, но они медленные, некачественные и довольно дорогие. Оказалось, что мы думали не в том направлении. Зачем создавать изображения, если в Интернете доступны миллионы и миллионы изображений CC0?

После некоторых размышлений мы выбрали Pexels. Причина выбора Pexels заключалась в том, что у него более либеральные ограничения на запросы и хороший каталог изображений. И, конечно же, мы даем обратную ссылку на исходное изображение в нашем приложении.

Как вы поддерживаете контекст всего сайта?

Первая проблема, которую нам нужно было решить, чтобы этот проект заработал, заключалась в том, как мы могли поддерживать контекст всего сайта при создании контента для пользователя. Разные шаблоны имеют разное количество и типы строк, и мы не можем просто случайно добавлять туда контент и надеяться, что он будет актуален для веб-сайта.

И тут на помощь пришел наш большой друг JSON. С помощью некоторых креативных подсказок (найденных в исходном коде) и согласованной схемы JSON мы могли поддерживать контекст на всем веб-сайте и иметь строки, которые дополняют друг друга, а не случайную тарабарщину.

Если вы посмотрите на один из наших шаблонов, вы увидите, как мы перечисляем каждый шаблон с описанием, чтобы API знал его назначение и какие строки он содержит.

Например, вот первый шаблон из этого шаблона:

 { "order": 1, "slug": "quickwp/hero-centered", "name": "Hero Centered", "description": "Hero sections are used to introduce the product or service. They are the first and primary section of the website. This is a centered hero section with a large title, a subtitle and two buttons.", "category": "heroes_page_titles", "strings": [ { "slug": "hero-centered/title", "description": "Main title of the hero section" }, { "slug": "hero-centered/subtitle", "description": "Subtitle of the hero section" }, { "slug": "hero-centered/button-primary", "description": "Primary button text of the hero section" }, { "slug": "hero-centered/button-secondary", "description": "Secondary button text of the hero section" } ], "images": [ { "slug": "hero-centered/image", "description": "Background image of the hero section" } ] }

Каждая строка вместе с пространством имен также описывает ее связь с остальной частью шаблона. Это позволяет нам гарантировать, что GPT не повторяет одно и то же в нескольких местах и, например, сохраняет подзаголовок, связанный с названием шаблона.

Когда мы получаем запрос обратно на сайт, мы используем строковый фрагмент, чтобы заменить его в шаблоне.

Хотя наша текущая реализация примитивна, вы можете использовать этот подход, чтобы придать строке еще больше контекста, например длину и тон строки. Таким образом, мы обмениваемся только данными, а не разметкой.

Нам нужны экземпляры WordPress для каждого пользователя.

Еще одна проблема, которую нам нужно было решить, заключалась в том, чтобы иметь экземпляр WordPress для каждого пользовательского сеанса. В нашей реализации мы вносим изменения в экземпляр WordPress текущего пользователя, а затем используем существующие функции WordPress для экспорта темы FSE. Только если бы существовало решение для создания экземпляров WordPress без создания небольшого решения для веб-хостинга…

Позвольте мне познакомить вас с игровой площадкой WordPress. Playground позволяет запускать WordPress в браузере без щелчков мышью. Если вы еще не использовали WP Playground, вы будете удивлены, насколько это круто!

Что вы будете создавать с помощью WordPress?

Теперь, когда мы рассказали вам о некоторых проблемах, с которыми мы столкнулись, что вы будете строить с помощью этих инструментов? Мы надеемся, что статья вдохновила вас использовать некоторые из обсуждавшихся нами инструментов, таких как OpenAI API, темы FSE и WordPress Playground, и создать что-то потрясающее. Если да, дайте нам знать, потому что мы хотели бы попробовать!

Еще раз: весь исходный код доступен на нашем GitHub, поэтому не стесняйтесь использовать его любым способом, который может вам помочь!