Am creat un generator de site-uri WordPress alimentat de inteligență artificială pe care îl găsim astăzi. Acesta este QuickWP

Cu câteva săptămâni în urmă, am lansat prototipul QuickWP, un generator de site-uri WordPress bazat pe inteligență artificială, care utilizează OpenAI , o temă FSE și WordPress Playground pentru a genera o temă personalizată pentru utilizator pe baza subiectului și a descrierii site-ului dvs.

Dacă nu l-ați verificat încă, puteți vedea previzualizarea QuickWP pe Twitter (alias X).

Construirea QuickWP a fost o experiență provocatoare și de învățare pentru noi, iar astăzi, deschidem baza de cod pentru proiect, astfel încât să puteți învăța și din el și poate chiar să construiți ceva extraordinar pe el.

În acest articol, voi discuta ideile, provocările și lucrurile pe care le-am învățat lucrând la QuickWP. Sper că acest lucru vă va ajuta dacă vă confruntați vreodată cu provocări similare.

Ideea

Deși ne-am gândit de ceva timp să experimentăm cu AI și API-uri OpenAI, nu am plănuit niciodată să creăm un generator de site-uri AI. Anterior, am încercat să integrăm AI cu pluginul Otter Blocks pentru a genera machete din modelele disponibile folosind promptul AI, dar această implementare a fost destul de primitivă. Rezultatele au fost foarte generice și nu au luat în considerare contextul utilizatorului prea mult în rezultatul furnizat.

Având în vedere că modelele din Block Editor sunt ușor de spart chiar și cu modificări minore, nu am putea să îi cerem pur și simplu GPT să creeze modele din mers sau chiar să îi cerem să înlocuiască conținutul.

Totul s-a schimbat când ne-am gândit la această idee bazată pe wireframes. Este simplu: creăm o temă FSE cu wireframes și palete de culori extinse. Și apoi, cu AI, alegem modelele pe baza solicitărilor utilizatorului.

În temele FSE, folosind proprietățile fișierului theme.json, putem modifica cu ușurință stilul întregului site dintr-un singur loc. Și același lucru se aplică modelelor noastre, astfel încât să avem uniformitate pe site-ul web, fără a ne îngrijora că modelele diferite au setări diferite care trebuie modificate separat.

Aici, folosim și un director de imagini CC0 pentru a popula site-ul web cu imagini pentru a oferi un punct de plecare mai bun utilizatorului.

Deși ideea sună destul de simplă, a necesitat câteva încercări și erori pentru a ajunge la punctul în care ar putea genera rezultate suficient de bune pentru utilizator. Scopul a fost de a petrece cât mai puțin timp posibil pentru a crea un prototip pe care utilizatorii să-l poată folosi ca SaSS de pe site-ul web al produsului.

Prezentare generală a stivei de proiecte

Proiectul a necesitat mai mult de o parte, așa că am folosit o serie de stive, adică orice ne-a făcut mai ușor să prototipăm cât mai repede posibil.

Iată diferitele părți ale proiectului:

• Tema FSE: Baza proiectului. Include diverse modele și un fișier cuprinzător theme.json.
• Plugin de bază: Acest plugin are toate funcționalitățile și interfața de utilizare necesare pentru ca proiectul să funcționeze.
• Punct final API: un punct final API care comunică între site-ul web al utilizatorului și API-ul OpenAI.

Iată o diagramă simplificată pentru a arăta întregul flux de lucru.

Tema FSE

Tema FSE funcționează ca bază a întregului proiect. Pentru a face prototipul mai ușor, am început cu o bifurcăre a temei Douăzeci și douăzeci și patru. Am eliminat aproape toate modelele și am personalizat proprietățile theme.json conform nevoilor noastre.

Cele mai bune practici ale temei FSE se schimbă foarte repede și, cu fiecare versiune de WordPress, avem un nou mod de a face lucrurile. Începând cu bifurcația temei implicite ne permite să construim pe o fundație solidă cu muncă minimă.

În ceea ce privește codul, majoritatea lucrurilor sunt așa cum v-ați aștepta într-o temă FSE. Singura diferență pe care o veți observa este modul în care folosim șiruri și imagini în modele.

Aici, adăugăm text implicit, spațiu de nume specific șablonului pentru șiruri și un spațiu de nume de previzualizare implicit pentru fiecare șir.

Textul implicit este textul care va apărea în modele atunci când este utilizat în mod normal, în cazul în care cineva adaugă un model în interiorul editorului sau folosește tema fără QuickWP AI.

Spațiul de nume specific șablonului este un identificator pentru acel șir special. Și spațiul de nume de previzualizare implicit este un spațiu de nume partajat pe care îl folosim pentru toate șirurile în context. Vom reveni la asta mai târziu.

Generare promptă AI

Deoarece era un prototip rapid, am vrut să explorăm metode mai ușoare de testare și implementare. Am experimentat cu diverse modele AI, dar am ajuns cu cea mai populară opțiune, care este OpenAI. În faza de dezvoltare, am folosit GPT-4, deoarece rezultatele au fost mult mai bune cu cel mai recent model oferit de OpenAI, dar era prea costisitor, așa că am decis să trecem la utilizarea GPT-3.5 Turbo pentru majoritatea sarcinilor. Spun cele mai multe dintre sarcini, deoarece încă folosim GPT-4 pentru generarea paletei de culori, deoarece varietatea de culori nu a fost grozavă cu GPT-3.5

Pentru a face solicitări, am încercat diferite opțiuni pe care OpenAI le oferă, dar am găsit API-ul Asistent cel mai potrivit pentru nevoile noastre. Pentru a evita unii actori de rea-credință, am folosit și API-ul de moderare a OpenAI pentru a preveni procesarea solicitărilor dacă acestea nu se aliniază cu politicile de conținut ale OpenAI. După cum putem vedea după lansare, oamenii au încercat să experimenteze cu tot felul de solicitări care ar fi putut duce la probleme contului nostru OpenAI, așa că a meritat să adăugați moderarea. Și da, este gratuit de utilizat!

Generarea imaginii

Când ne imaginam acest proiect, una dintre probleme a fost cum să generăm imagini. Am putea, desigur, să folosim Dall-E sau alte modele pentru a face acest lucru, dar sunt lente, de calitate scăzută și destul de scumpe. S-a dovedit că ne gândim în direcția greșită. De ce să generezi imagini când există milioane și milioane de imagini CC0 disponibile pe internet?

După câteva analize, am ales Pexels. Motivul din spatele alegerii Pexels a fost că are limite de solicitare mai liberale și un catalog bun de imagini. Și, desigur, ne conectăm înapoi la imaginea originală din aplicația noastră.

Cum mențineți contextul la nivelul întregului site?

Prima problemă pe care trebuia să o rezolvăm pentru ca acest proiect să funcționeze a fost să vedem cum am putea menține contextul la nivelul întregului site atunci când generăm conținut pentru utilizator. Modele diferite au numere și tipuri diferite de șiruri și nu putem adăuga conținut la întâmplare acolo și sperăm că va fi relevant pentru site-ul web.

Și aici a venit în ajutor marele nostru prieten JSON. Cu unele solicitări creative (găseate în codul sursă) și o schemă JSON consecventă, am putea menține contextul pe tot site-ul web și am putea avea șiruri care se completează reciproc, mai degrabă decât farfurii aleatorii.

Dacă te uiți la unul dintre șabloanele noastre, vei vedea cum listăm fiecare model cu o descriere pentru a-i spune API-ului scopul și ce șiruri conține.

De exemplu, iată primul model din acel șablon:

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

Fiecare șir, împreună cu spațiul de nume, descrie, de asemenea, conexiunea sa cu restul modelului. Acest lucru ne permite să ne asigurăm că GPT nu repetă același lucru în mai multe locuri și, de exemplu, păstrează subtitrarea legată de titlul modelului.

Când primim cererea înapoi pe site, folosim slug-ul șir pentru a o înlocui în model.

În timp ce implementarea noastră actuală este primitivă, puteți folosi această abordare pentru a oferi și mai mult context șirului, cum ar fi lungimea și tonul șirului. În acest fel, schimbăm doar datele și nu markupul.

Avem nevoie de instanțe WordPress pentru fiecare utilizator

O altă problemă pe care trebuia să o rezolvăm era să avem o instanță de WordPress pentru fiecare sesiune de utilizator. În implementarea noastră, facem modificări live pe instanța WordPress a utilizatorului actual și apoi utilizăm funcționalitatea WordPress existentă pentru a exporta tema FSE. Doar dacă ar exista o soluție pentru a crea instanțe WordPress fără a construi o soluție mică de găzduire web...

Permiteți-mi să vă prezint WordPress Playground. Playground vă permite să rulați WordPress în browser fără clicuri. Dacă nu ați folosit terenul de joacă WP, veți fi surprins de cât de minunat este!

Ce vei construi cu WordPress?

Acum, că v-am prezentat câteva dintre provocările cu care ne-am confruntat, ce veți construi cu aceste instrumente? Sperăm că articolul v-a inspirat să utilizați unele dintre instrumentele pe care le-am discutat, cum ar fi OpenAI API, temele FSE și WordPress Playground, și să construiți ceva extraordinar. Dacă o faci, anunță-ne pentru că ne-ar plăcea să încercăm!

Încă o dată, tot codul sursă este disponibil pe GitHub, așa că nu ezitați să-l utilizați în orice mod vă poate ajuta!