Hemos creado un creador de sitios de WordPress impulsado por inteligencia artificial que hoy ofrecemos en código abierto. Esto es QuickWP

Hace un par de semanas, lanzamos el prototipo de QuickWP, un creador de sitios de WordPress impulsado por IA que utiliza OpenAI , un tema FSE y WordPress Playground para generar un tema personalizado para el usuario según el tema y la descripción de su sitio web.

Si aún no lo ha comprobado, puede ver la vista previa de QuickWP en Twitter (también conocido como X).

Crear QuickWP ha sido una experiencia desafiante y de aprendizaje para nosotros, y hoy estamos abriendo el código base del proyecto para que usted también pueda aprender de él y tal vez incluso construir algo increíble a partir de él.

En este artículo, analizaré las ideas, los desafíos y las cosas que aprendimos al trabajar en QuickWP. Espero que esto te ayude si alguna vez enfrentas desafíos similares.

La idea

Si bien hemos pensado en experimentar con IA y las API OpenAI por un tiempo, nunca planeamos crear un creador de sitios web con IA. Anteriormente, intentamos integrar la IA con el complemento Otter Blocks para generar diseños a partir de patrones disponibles utilizando el indicador de IA, pero esa implementación era bastante primitiva. Los resultados fueron muy genéricos y no consideraron mucho el contexto del usuario en el resultado proporcionado.

Dado que los patrones en el Editor de bloques son fáciles de equilibrar con cambios menores, no podríamos simplemente pedirle a GPT que cree patrones sobre la marcha o incluso pedirle que reemplace el contenido.

Todo cambió cuando pensamos en esta idea basada en wireframes. Es simple: creamos un tema FSE con wireframes y paletas de colores extensas. Y luego, con la IA, elegimos los patrones según las indicaciones del usuario.

En los temas FSE, utilizando las propiedades del archivo theme.json, podemos modificar fácilmente el estilo de todo el sitio web desde un solo lugar. Y lo mismo se aplica a nuestros patrones para que tengamos uniformidad en todo el sitio web sin preocuparnos de que diferentes patrones tengan diferentes configuraciones que deban modificarse por separado.

Aquí, también utilizamos un directorio de imágenes CC0 para llenar el sitio web con imágenes y brindar un mejor punto de partida al usuario.

Si bien la idea parece bastante simple, requirió algunas pruebas y errores para llegar al punto en el que pudiera generar resultados que fueran lo suficientemente buenos para el usuario. El objetivo era dedicar el menor tiempo posible a crear un prototipo que los usuarios pudieran utilizar como SaSS desde el sitio web del producto.

Descripción general de la pila de proyectos

El proyecto requería más de una pieza, por lo que utilizamos varias pilas, es decir, lo que nos permitiera crear un prototipo lo más rápido posible.

Estas son las distintas partes del proyecto:

• Tema FSE: La base del proyecto. Incluye varios patrones y un archivo theme.json completo.
• Complemento base: este complemento tiene toda la funcionalidad y la interfaz de usuario necesarias para que el proyecto funcione.
• Punto final API: un punto final API que se comunica entre el sitio web del usuario y la API OpenAI.

A continuación se muestra un diagrama simplificado para mostrar todo el flujo de trabajo.

tema FSE

El tema FSE funciona como base de todo el proyecto. Para facilitar la creación de prototipos, comenzamos con una bifurcación del tema Twenty Twenty-Four. Prácticamente eliminamos todos los patrones y personalizamos las propiedades de theme.json según nuestras necesidades.

Las mejores prácticas de temas de FSE están cambiando muy rápidamente y con cada versión de WordPress, tenemos una nueva forma de hacer las cosas. Comenzar con la bifurcación del tema predeterminado nos permite construir sobre una base sólida con un trabajo mínimo.

En términos de código, la mayoría de las cosas son como cabría esperar en un tema FSE. La única diferencia que notará es cómo usamos cadenas e imágenes en los patrones.

Aquí, agregamos texto predeterminado, espacio de nombres específico de la plantilla para las cadenas y un espacio de nombres de vista previa predeterminado para cada cadena.

El texto predeterminado es el texto que aparecerá en los patrones cuando se usa normalmente, en caso de que alguien agregue un patrón dentro del editor o use el tema sin QuickWP AI.

El espacio de nombres específico de la plantilla es un identificador para esa cadena en particular. Y el espacio de nombres de vista previa predeterminado es un espacio de nombres compartido que usamos para todas las cadenas en contexto. Vamos a volver a esto más adelante.

Generación de mensajes de IA

Como era un prototipo rápido, queríamos explorar métodos de prueba e implementación más sencillos. Experimentamos con varios modelos de IA pero terminamos con la opción más popular, que es OpenAI. Durante la fase de desarrollo, utilizamos GPT-4 ya que los resultados fueron mucho mejores con el último modelo ofrecido por OpenAI, pero era demasiado costoso, por lo que decidimos pasar a usar GPT-3.5 Turbo para la mayoría de las tareas. Digo la mayoría de las tareas porque todavía usamos GPT-4 para la generación de la paleta de colores, ya que la variedad de colores no era excelente con GPT-3.5.

Para realizar solicitudes, probamos diferentes opciones que ofrece OpenAI, pero encontramos que la API Asistente se adaptaba mejor a nuestras necesidades. Para evitar algunos actores de mala fe, también utilizamos la API de moderación de OpenAI para evitar el procesamiento de solicitudes si no se alinean con las políticas de contenido de OpenAI. Como podemos ver después del lanzamiento, la gente ha intentado experimentar con todo tipo de indicaciones que podrían haber causado problemas a nuestra cuenta OpenAI, por lo que valió la pena agregar la moderación. Y sí, ¡es de uso gratuito!

Generación de imágenes

Cuando estábamos imaginando este proyecto, uno de los problemas era cómo generar imágenes. Por supuesto, podríamos utilizar Dall-E u otros modelos para hacerlo, pero son lentos, de baja calidad y bastante caros. Resultó que estábamos pensando en la dirección equivocada. ¿Por qué generar imágenes cuando hay millones y millones de imágenes CC0 disponibles en Internet?

Después de considerarlo un poco, elegimos Pexels. La razón para elegir Pexels fue que tiene límites de solicitud más liberales y un buen catálogo de imágenes. Y, por supuesto, vinculamos a la imagen original en nuestra aplicación.

¿Cómo se mantiene el contexto en todo el sitio?

El primer problema que necesitábamos resolver para que este proyecto funcionara era ver cómo podíamos mantener el contexto en todo el sitio al generar contenido para el usuario. Diferentes patrones tienen diferentes números y tipos de cadenas, y no podemos simplemente agregar contenido al azar y esperar que sea relevante para el sitio web.

Y aquí es donde nuestro gran amigo JSON vino al rescate. Con algunas indicaciones creativas (que se encuentran en el código fuente) y un esquema JSON coherente, podríamos mantener el contexto en todo el sitio web y tener cadenas que se complementen entre sí, en lugar de galimatías aleatorias.

Si observa una de nuestras plantillas, verá cómo enumeramos cada patrón con una descripción para que la API sepa su propósito y qué cadenas contiene.

Por ejemplo, aquí está el primer patrón de esa plantilla:

 { "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" } ] }

Cada cadena, junto con el espacio de nombres, también describe su conexión con el resto del patrón. Esto nos permite asegurarnos de que GPT no repite lo mismo en varios lugares y, por ejemplo, mantiene el subtítulo relacionado con el título del patrón.

Cuando recibimos la solicitud nuevamente en el sitio, usamos el slug de cadena para reemplazarla en el patrón.

Si bien nuestra implementación actual es primitiva, puedes usar este enfoque para darle aún más contexto a la cuerda, como la longitud y el tono de la cuerda. De esta manera, sólo intercambiamos los datos y no el marcado.

Necesitamos instancias de WordPress para cada usuario.

Otro problema que necesitábamos resolver era tener una instancia de WordPress para cada sesión de usuario. En nuestra implementación, realizamos cambios en vivo en la instancia de WordPress del usuario actual y luego utilizamos la funcionalidad existente de WordPress para exportar el tema FSE. Solo si hubiera una solución para crear instancias de WordPress sin tener que construir una pequeña solución de alojamiento web...

Déjame presentarte WordPress Playground. Playground le permite ejecutar WordPress en su navegador sin hacer clic. Si no ha utilizado WP Playground, ¡se sorprenderá de lo increíble que es!

¿Qué construirás con WordPress?

Ahora que lo hemos explicado a través de algunos de los desafíos que enfrentamos, ¿qué construirá con estas herramientas? Esperamos que el artículo lo haya inspirado a utilizar algunas de las herramientas que analizamos, como la API OpenAI, los temas FSE y WordPress Playground, y crear algo increíble. Si lo haces, ¡cuéntanoslo porque nos encantaría probarlo!

Una vez más, todo el código fuente está disponible en nuestro GitHub, así que siéntete libre de usarlo en cualquier forma que pueda ayudarte.