Nous avons créé un constructeur de site WordPress alimenté par l'IA que nous sommes aujourd'hui open-source. C'est QuickWP

Il y a quelques semaines, nous avons publié le prototype de QuickWP, un constructeur de site WordPress basé sur l'IA qui utilise OpenAI , un thème FSE et WordPress Playground pour générer un thème personnalisé pour l'utilisateur en fonction du sujet et de la description de votre site Web.

Si vous ne l'avez pas encore consulté, vous pouvez voir l'aperçu de QuickWP sur Twitter (alias X).

Construire QuickWP a été une expérience difficile et enrichissante pour nous, et aujourd'hui, nous rendons open source la base de code du projet afin que vous puissiez également en tirer des leçons et peut-être même créer quelque chose de génial dessus.

Dans cet article, je discuterai des idées, des défis et des choses que nous avons apprises en travaillant sur QuickWP. J'espère que cela vous aidera si jamais vous faites face à des défis similaires.

L'idée

Même si nous envisageons depuis un certain temps d’expérimenter l’IA et les API OpenAI, nous n’avons jamais prévu de créer un créateur de site Web IA. Auparavant, nous avions essayé d'intégrer l'IA au plugin Otter Blocks pour générer des mises en page à partir des modèles disponibles à l'aide de l'invite AI, mais cette implémentation était assez primitive. Les résultats étaient très génériques et ne tenaient pas beaucoup compte du contexte utilisateur dans le résultat fourni.

Étant donné que les modèles dans Block Editor sont faciles à équilibrer avec des modifications mineures, nous ne pouvons pas simplement demander à GPT de créer des modèles à la volée ou même de lui demander de remplacer du contenu.

Tout a changé lorsque nous avons pensé à cette idée basée sur les wireframes. C'est simple : nous créons un thème FSE avec des wireframes et des palettes de couleurs étendues. Et puis, avec l’IA, nous sélectionnons les modèles en fonction des invites des utilisateurs.

Dans les thèmes FSE, en utilisant les propriétés du fichier theme.json, nous pouvons facilement modifier le style de l'ensemble du site Web à partir d'un seul endroit. Et la même chose est appliquée à nos modèles afin que nous ayons une uniformité sur tout le site Web sans nous soucier des différents modèles ayant des paramètres différents qui doivent être modifiés séparément.

Ici, nous utilisons également un répertoire d'images CC0 pour remplir le site Web avec des images afin de donner un meilleur point de départ à l'utilisateur.

Bien que l'idée semble assez simple, elle a nécessité quelques essais et erreurs pour atteindre le point où elle pourrait générer des résultats suffisamment bons pour l'utilisateur. L'objectif était de consacrer le moins de temps possible à la création d'un prototype que les utilisateurs peuvent utiliser comme SaSS à partir du site Web du produit.

Présentation de la pile de projets

Le projet nécessitait plus d'une pièce, nous avons donc utilisé un certain nombre de piles, c'est-à-dire tout ce qui nous permettait de réaliser un prototype le plus rapidement possible.

Voici les différentes parties du projet :

• Thème FSE : La base du projet. Il comprend divers modèles et un fichier theme.json complet.
• Plugin de base : ce plugin possède toutes les fonctionnalités et l'interface utilisateur nécessaires pour faire fonctionner le projet.
• Point de terminaison API : point de terminaison API communiquant entre le site Web de l'utilisateur et l'API OpenAI.

Voici un diagramme simplifié pour montrer l'ensemble du flux de travail.

Thème FSE

Le thème FSE sert de base à l’ensemble du projet. Pour faciliter le prototypage, nous avons commencé avec un fork du thème Twenty Twenty-Four. Nous avons pratiquement supprimé tous les modèles et personnalisé les propriétés theme.json selon nos besoins.

Les bonnes pratiques des thèmes FSE évoluent très rapidement, et avec chaque version de WordPress, nous avons une nouvelle façon de faire les choses. Commencer par le fork du thème par défaut nous permet de construire sur une base solide avec un minimum de travail.

En termes de code, la plupart des choses sont comme on peut s'y attendre dans un thème FSE. La seule différence que vous remarquerez est la façon dont nous utilisons les chaînes et les images dans les modèles.

Ici, nous ajoutons du texte par défaut, un espace de noms spécifique au modèle pour les chaînes et un espace de noms d'aperçu par défaut à chaque chaîne.

Le texte par défaut est le texte qui apparaîtra dans les modèles lorsqu'il est utilisé normalement, au cas où quelqu'un ajouterait un modèle dans l'éditeur ou utiliserait le thème sans QuickWP AI.

L'espace de noms spécifique au modèle est un identifiant pour cette chaîne particulière. Et l'espace de noms d'aperçu par défaut est un espace de noms partagé que nous utilisons pour toutes les chaînes en contexte. Nous reviendrons à ceci plus tard.

Génération d'invites IA

Comme il s'agissait d'un prototype rapide, nous souhaitions explorer des méthodes de test et de mise en œuvre plus simples. Nous avons expérimenté différents modèles d'IA, mais nous avons finalement opté pour l'option la plus populaire, à savoir OpenAI. Pendant la phase de développement, nous avons utilisé GPT-4 car les résultats étaient bien meilleurs avec la dernière offre de modèles d'OpenAI, mais c'était trop coûteux, nous avons donc décidé de passer à l'utilisation de GPT-3.5 Turbo pour la plupart des tâches. Je dis la plupart des tâches car nous utilisons toujours GPT-4 pour la génération de palettes de couleurs car la variété de couleurs n'était pas excellente avec GPT-3.5

Pour faire des requêtes, nous avons essayé différentes options proposées par OpenAI, mais nous avons trouvé que l'API Assistant était la mieux adaptée à nos besoins. Pour éviter certains acteurs de mauvaise foi, nous avons également utilisé l'API de modération d'OpenAI pour empêcher le traitement des demandes si elles ne correspondent pas aux politiques de contenu d'OpenAI. Comme nous pouvons le voir après la sortie, les gens ont essayé d'expérimenter toutes sortes d'invites qui auraient pu causer des problèmes à notre compte OpenAI, donc l'ajout de la modération en valait la peine. Et oui, son utilisation est gratuite !

Génération d'images

Lorsque nous imaginions ce projet, une des problématiques était de savoir comment générer des images. Nous pourrions bien sûr utiliser le Dall-E ou d’autres modèles pour le faire, mais ils sont lents, de mauvaise qualité et assez chers. Il s’est avéré que nous pensions dans la mauvaise direction. Pourquoi générer des images alors qu’il existe des millions et des millions d’images CC0 disponibles sur Internet ?

Après réflexion, nous avons choisi Pexels. La raison qui a motivé le choix de Pexels est qu’il offre des limites de requêtes plus libérales et un bon catalogue d’images. Et bien sûr, nous renvoyons à l’image originale sur notre application.

Comment maintenez-vous le contexte à l’échelle du site ?

Le premier problème que nous devions résoudre pour faire fonctionner ce projet était de voir comment nous pouvions maintenir le contexte à l'échelle du site lors de la génération de contenu pour l'utilisateur. Différents modèles ont différents nombres et types de chaînes, et nous ne pouvons pas simplement y ajouter du contenu au hasard et espérer qu'il sera pertinent pour le site Web.

Et c’est là que notre grand ami JSON est venu à la rescousse. Avec quelques invites créatives (trouvées dans le code source) et un schéma JSON cohérent, nous pourrions maintenir le contexte sur tout le site Web et avoir des chaînes qui se complètent, plutôt qu'un charabia aléatoire.

Si vous regardez l'un de nos modèles, vous verrez comment nous répertorions chaque modèle avec une description pour informer l'API de son objectif et des chaînes qu'il contient.

Par exemple, voici le premier modèle de ce modèle :

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

Chaque chaîne, ainsi que l'espace de noms, décrivent également sa connexion avec le reste du modèle. Cela nous permet de nous assurer que GPT ne répète pas la même chose à plusieurs endroits et, par exemple, conserve le sous-titre lié au titre du motif.

Lorsque nous récupérons la requête sur le site, nous utilisons le string slug pour la remplacer dans le modèle.

Bien que notre implémentation actuelle soit primitive, vous pouvez utiliser cette approche pour donner encore plus de contexte à la chaîne, comme la longueur et le ton de la chaîne. De cette façon, nous échangeons uniquement les données et non le balisage.

Nous avons besoin d'instances WordPress pour chaque utilisateur

Un autre problème que nous devions résoudre était d'avoir une instance de WordPress pour chaque session utilisateur. Dans notre implémentation, nous apportons des modifications en direct sur l'instance WordPress de l'utilisateur actuel, puis utilisons la fonctionnalité WordPress existante pour exporter le thème FSE. Seulement s’il existait une solution pour créer des instances WordPress sans vraiment construire une petite solution d’hébergement Web…

Laissez-moi vous présenter WordPress Playground. Playground vous permet d'exécuter WordPress dans votre navigateur avec zéro clic. Si vous n’avez pas utilisé WP Playground, vous serez surpris de voir à quel point il est génial !

Qu'allez-vous construire avec WordPress ?

Maintenant que nous vous avons expliqué certains des défis auxquels nous avons été confrontés, qu'allez-vous construire avec ces outils ? Nous espérons que l'article vous a inspiré à utiliser certains des outils dont nous avons discuté, comme l'API OpenAI, les thèmes FSE et WordPress Playground, et à créer quelque chose de génial. Si c’est le cas, faites-le-nous savoir car nous serions ravis de l’essayer !

Encore une fois, tout le code source est disponible sur notre GitHub, alors n'hésitez pas à l'utiliser de quelque manière que ce soit pour vous aider !