Abbiamo creato un costruttore di siti WordPress basato sull'intelligenza artificiale che oggi stiamo rendendo open source. Questo è QuickWP

Un paio di settimane fa, abbiamo rilasciato il prototipo di QuickWP, un costruttore di siti WordPress basato sull'intelligenza artificiale che utilizza OpenAI , un tema FSE , e WordPress Playground per generare un tema personalizzato per l'utente in base all'argomento e alla descrizione del tuo sito web.

Se non l'hai ancora verificato, puoi vedere l'anteprima di QuickWP su Twitter (aka X).

Costruire QuickWP è stata un'esperienza stimolante e istruttiva per noi e oggi stiamo rendendo open source il codice base per il progetto in modo che anche tu possa imparare da esso e magari anche costruire qualcosa di fantastico su di esso.

In questo articolo discuterò delle idee, delle sfide e delle cose che abbiamo imparato lavorando su QuickWP. Spero che questo ti aiuti se mai dovessi affrontare sfide simili.

L'idea

Anche se da tempo pensavamo di sperimentare con l'intelligenza artificiale e le API OpenAI, non abbiamo mai pianificato di creare un costruttore di siti web basato sull'intelligenza artificiale. In precedenza, abbiamo provato a integrare l'intelligenza artificiale con il plug-in Otter Blocks per generare layout da modelli disponibili utilizzando il prompt dell'intelligenza artificiale, ma l'implementazione era piuttosto primitiva. I risultati erano molto generici e non consideravano molto il contesto dell'utente nel risultato fornito.

Dato che i pattern nel Block Editor sono facili da interrompere anche con piccole modifiche, non potremmo semplicemente chiedere a GPT di creare pattern al volo o addirittura chiedergli di sostituire il contenuto.

Tutto è cambiato quando abbiamo pensato a questa idea basata sui wireframe. È semplice: creiamo un tema FSE con wireframe e ampie tavolozze di colori. E poi, con l'intelligenza artificiale, scegliamo i modelli in base alle richieste dell'utente.

Nei temi FSE, utilizzando le proprietà del file theme.json, possiamo facilmente modificare lo stile dell'intero sito Web da un'unica posizione. E lo stesso viene applicato ai nostri pattern in modo da avere uniformità in tutto il sito web senza preoccuparci che pattern diversi abbiano impostazioni diverse che devono essere modificate separatamente.

In questo caso utilizziamo anche una directory di immagini CC0 per popolare il sito Web con immagini per offrire all'utente un punto di partenza migliore.

Anche se l'idea sembra abbastanza semplice, ha richiesto alcuni tentativi ed errori per raggiungere il punto in cui potesse generare risultati sufficientemente buoni per l'utente. L'obiettivo era dedicare il minor tempo possibile alla creazione di un prototipo che gli utenti possano utilizzare come SaSS dal sito Web del prodotto.

Panoramica dello stack di progetti

Il progetto richiedeva più di una parte, quindi abbiamo utilizzato più stack, ovvero qualunque cosa ci rendesse più semplice la prototipazione il più rapidamente possibile.

Ecco le varie parti del progetto:

• Tema FSE: La base del progetto. Include vari modelli e un file theme.json completo.
• Plugin di base: questo plugin ha tutte le funzionalità e l'interfaccia utente necessarie per far funzionare il progetto.
• Endpoint API: un endpoint API che comunica tra il sito Web dell'utente e l'API OpenAI.

Ecco un diagramma semplificato per mostrare l'intero flusso di lavoro.

Tema FSE

Il tema FSE funge da base dell'intero progetto. Per rendere più semplice la prototipazione, abbiamo iniziato con un fork del tema Twenty Twenty-Four. Abbiamo praticamente rimosso tutti i pattern e personalizzato le proprietà theme.json in base alle nostre esigenze.

Le migliori pratiche sui temi FSE stanno cambiando molto rapidamente e con ogni versione di WordPress abbiamo un nuovo modo di fare le cose. Iniziare con il fork del tema predefinito ci consente di costruire su basi solide con un lavoro minimo.

In termini di codice, la maggior parte delle cose sono come ti aspetteresti in un tema FSE. L'unica differenza che noterai è il modo in cui utilizziamo stringhe e immagini nei pattern.

Qui aggiungiamo testo predefinito, spazio dei nomi specifico del modello per le stringhe e uno spazio dei nomi di anteprima predefinito per ogni stringa.

Il testo predefinito è il testo che apparirà nei pattern se utilizzato normalmente, nel caso in cui qualcuno aggiunga un pattern all'interno dell'editor o utilizzi il tema senza QuickWP AI.

Lo spazio dei nomi specifico del modello è un identificatore per quella particolare stringa. E lo spazio dei nomi di anteprima predefinito è uno spazio dei nomi condiviso che utilizziamo per tutte le stringhe nel contesto. Torneremo su questo più tardi.

Generazione rapida dell'IA

Dato che si trattava di un prototipo veloce, volevamo esplorare metodi di test e implementazione più semplici. Abbiamo sperimentato vari modelli di intelligenza artificiale, ma alla fine abbiamo optato per l'opzione più popolare, ovvero OpenAI. Durante la fase di sviluppo, abbiamo utilizzato GPT-4 poiché i risultati erano molto migliori con l'offerta dell'ultimo modello di OpenAI, ma era troppo costoso, quindi abbiamo deciso di passare all'utilizzo di GPT-3.5 Turbo per la maggior parte delle attività. Dico la maggior parte delle attività poiché stiamo ancora utilizzando GPT-4 per la generazione della tavolozza dei colori poiché la varietà di colori non era eccezionale con GPT-3.5

Per effettuare le richieste, abbiamo provato diverse opzioni offerte da OpenAI, ma abbiamo trovato l'API Assistant più adatta alle nostre esigenze. Per evitare alcuni attori in malafede, abbiamo utilizzato anche l'API di moderazione di OpenAI per impedire l'elaborazione delle richieste se non sono in linea con le politiche sui contenuti di OpenAI. Come possiamo vedere dopo il rilascio, le persone hanno provato a sperimentare tutti i tipi di suggerimenti che avrebbero potuto mettere nei guai il nostro account OpenAI, quindi è valsa la pena aggiungere la moderazione. E sì, è gratuito!

Generazione di immagini

Quando stavamo immaginando questo progetto, uno dei problemi era come generare le immagini. Naturalmente potremmo usare Dall-E o altri modelli per farlo, ma sono lenti, di bassa qualità e piuttosto costosi. Si è scoperto che stavamo pensando nella direzione sbagliata. Perché generare immagini quando su Internet sono disponibili milioni e milioni di immagini CC0?

Dopo qualche considerazione, abbiamo scelto Pexels. Il motivo alla base della scelta di Pexels è che ha limiti di richiesta più liberali e un buon catalogo di immagini. E, naturalmente, rimandiamo all'immagine originale sulla nostra app.

Come mantieni il contesto in tutto il sito?

Il primo problema che dovevamo risolvere per far funzionare questo progetto era vedere come potevamo mantenere il contesto a livello di sito durante la generazione di contenuti per l'utente. Modelli diversi hanno numeri e tipi di stringhe diversi e non possiamo semplicemente aggiungere contenuti in modo casuale e sperare che siano rilevanti per il sito web.

Ed è qui che il nostro grande amico JSON è venuto in soccorso. Con alcuni suggerimenti creativi (presenti nel codice sorgente) e uno schema JSON coerente, potremmo mantenere il contesto in tutto il sito Web e avere stringhe che si completano a vicenda, anziché parole senza senso casuali.

Se guardi uno dei nostri modelli, vedrai come elenchiamo ogni modello con una descrizione per far conoscere all'API il suo scopo e quali stringhe contiene.

Ad esempio, ecco il primo modello di quel modello:

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

Ogni stringa, insieme allo spazio dei nomi, descrive anche la sua connessione al resto del modello. Questo ci permette di assicurarci che GPT non ripeta la stessa cosa in più posti e, ad esempio, mantenga il sottotitolo correlato al titolo del pattern.

Quando riportiamo la richiesta sul sito, utilizziamo lo slug della stringa per sostituirlo nel pattern.

Sebbene la nostra attuale implementazione sia primitiva, puoi utilizzare questo approccio per dare ancora più contesto alla stringa, come la lunghezza e il tono della corda. In questo modo scambiamo solo i dati e non il markup.

Abbiamo bisogno di istanze WordPress per ciascun utente

Un altro problema che dovevamo risolvere era avere un'istanza di WordPress per ogni sessione utente. Nella nostra implementazione, stiamo apportando modifiche in tempo reale sull'istanza WordPress dell'utente corrente e quindi utilizzando la funzionalità WordPress esistente per esportare il tema FSE. Solo se esistesse una soluzione per creare istanze WordPress senza costruire una piccola soluzione di web hosting...

Lascia che ti presenti WordPress Playground. Playground ti consente di eseguire WordPress nel tuo browser con zero clic. Se non hai utilizzato WP Playground, rimarrai sorpreso da quanto sia fantastico!

Cosa costruirai con WordPress?

Ora che ti abbiamo illustrato alcune delle sfide che abbiamo dovuto affrontare, cosa costruirai con questi strumenti? Ci auguriamo che l'articolo ti abbia ispirato a utilizzare alcuni degli strumenti di cui abbiamo discusso, come l'API OpenAI, i temi FSE e WordPress Playground, e a creare qualcosa di fantastico. Se lo fai, faccelo sapere perché ci piacerebbe provarlo!

Ancora una volta, tutto il codice sorgente è disponibile sul nostro GitHub, quindi sentiti libero di usarlo in qualsiasi modo possa aiutarti!