Wir haben einen KI-gestützten WordPress-Site-Builder erstellt, den wir heute als Open-Source-Lösung anbieten. Das ist QuickWP

Vor ein paar Wochen haben wir den Prototyp von QuickWP veröffentlicht, einem KI-gestützten WordPress-Site-Builder, der OpenAI , ein FSE-Theme und WordPress Playground nutzt, um ein personalisiertes Theme für den Benutzer basierend auf dem Thema und der Beschreibung Ihrer Website zu generieren.

Wenn Sie es noch nicht ausprobiert haben, können Sie sich die Vorschau von QuickWP auf Twitter (auch bekannt als X) ansehen.

Die Entwicklung von QuickWP war für uns eine herausfordernde und lehrreiche Erfahrung, und heute stellen wir die Codebasis für das Projekt als Open-Source-Lösung zur Verfügung, damit auch Sie daraus lernen und vielleicht sogar etwas Großartiges darauf aufbauen können.

In diesem Artikel werde ich die Ideen, Herausforderungen und Dinge besprechen, die wir durch die Arbeit an QuickWP gelernt haben. Ich hoffe, das hilft Ihnen, wenn Sie jemals vor ähnlichen Herausforderungen stehen.

Die Idee

Obwohl wir schon seit einiger Zeit darüber nachgedacht haben, mit KI und OpenAI-APIs zu experimentieren, hatten wir nie vor, einen KI-Website-Builder zu entwickeln. Zuvor haben wir versucht, KI mit dem Otter Blocks-Plugin zu integrieren, um mithilfe der KI-Eingabeaufforderung Layouts aus verfügbaren Mustern zu generieren, aber diese Implementierung war recht primitiv. Die Ergebnisse waren sehr allgemein und berücksichtigten den Benutzerkontext im bereitgestellten Ergebnis kaum.

Angesichts der Tatsache, dass Muster im Blockeditor bei geringfügigen Änderungen leicht zu durchbrechen sind, konnten wir GPT nicht einfach bitten, Muster im Handumdrehen zu erstellen oder sogar Inhalte zu ersetzen.

Alles änderte sich, als wir auf diese Idee kamen, die auf Wireframes basiert. Es ist ganz einfach: Wir erstellen ein FSE-Theme mit Wireframes und umfangreichen Farbpaletten. Und dann wählen wir mit KI die Muster basierend auf Benutzereingaben aus.

In FSE-Themen können wir mithilfe der Dateieigenschaften „theme.json“ den Stil der gesamten Website einfach von einem Ort aus ändern. Und das Gleiche gilt für unsere Muster, sodass wir auf der gesamten Website für Einheitlichkeit sorgen, ohne uns Gedanken darüber machen zu müssen, dass unterschiedliche Muster unterschiedliche Einstellungen haben, die separat geändert werden müssen.

Hier verwenden wir auch ein CC0-Bildverzeichnis, um die Website mit Bildern zu füllen und dem Benutzer einen besseren Ausgangspunkt zu bieten.

Obwohl die Idee recht einfach klingt, erforderte sie einige Versuche und Irrtümer, bis wir den Punkt erreichten, an dem Ergebnisse erzielt werden konnten, die für den Benutzer gut genug waren. Ziel war es, so wenig Zeit wie möglich in die Erstellung eines Prototyps zu investieren, den Benutzer als SaSS von der Produktwebsite aus verwenden können.

Übersicht über den Projektstapel

Das Projekt erforderte mehr als ein Teil, daher verwendeten wir mehrere Stapel, also alles, was es uns einfacher machte, so schnell wie möglich Prototypen zu erstellen.

Hier sind die verschiedenen Teile des Projekts:

• FSE-Thema: Die Basis des Projekts. Es enthält verschiedene Muster und eine umfassende theme.json-Datei.
• Basis-Plugin: Dieses Plugin verfügt über alle Funktionen und Benutzeroberflächen, die erforderlich sind, damit das Projekt funktioniert.
• API-Endpunkt: Ein API-Endpunkt, der zwischen der Benutzerwebsite und der OpenAI-API kommuniziert.

Hier ist ein vereinfachtes Diagramm, das den gesamten Arbeitsablauf zeigt.

FSE-Thema

Das FSE-Thema dient als Grundlage des gesamten Projekts. Um das Prototyping zu vereinfachen, haben wir mit einem Fork des Twenty-Twenty-Four-Themas begonnen. Wir haben so gut wie alle Muster entfernt und die Eigenschaften von theme.json an unsere Bedürfnisse angepasst.

Die Best Practices für FSE-Themen ändern sich sehr schnell und mit jeder Version von WordPress haben wir eine neue Vorgehensweise. Wenn wir mit der Abzweigung des Standardthemas beginnen, können wir mit minimalem Aufwand auf einer soliden Grundlage aufbauen.

Was den Code betrifft, sind die meisten Dinge so, wie man es von einem FSE-Theme erwarten würde. Der einzige Unterschied, den Sie bemerken werden, besteht darin, wie wir Zeichenfolgen und Bilder in Mustern verwenden.

Hier fügen wir Standardtext, einen vorlagenspezifischen Namespace für die Zeichenfolgen und einen Standardvorschau-Namespace zu jeder Zeichenfolge hinzu.

Der Standardtext ist der Text, der bei normaler Verwendung in den Mustern angezeigt wird, falls jemand ein Muster im Editor hinzufügt oder das Design ohne QuickWP AI verwendet.

Der vorlagenspezifische Namespace ist eine Kennung für diese bestimmte Zeichenfolge. Und der Standard-Vorschau-Namespace ist ein gemeinsamer Namespace, den wir für alle Zeichenfolgen im Kontext verwenden. Wir werden später darauf zurückkommen.

KI-Promptgenerierung

Da es sich um einen schnellen Prototyp handelte, wollten wir einfachere Test- und Implementierungsmethoden erkunden. Wir haben mit verschiedenen KI-Modellen experimentiert, sind aber am Ende bei der beliebtesten Option gelandet: OpenAI. Während der Entwicklungsphase haben wir GPT-4 verwendet, da die Ergebnisse mit dem neuesten Modellangebot von OpenAI viel besser waren, aber es war zu kostspielig, weshalb wir uns entschieden, für die meisten Aufgaben auf GPT-3.5 Turbo umzusteigen. Ich sage die meisten Aufgaben, da wir immer noch GPT-4 für die Farbpalettengenerierung verwenden, da die Farbvielfalt mit GPT-3.5 nicht großartig war

Um Anfragen zu stellen, haben wir verschiedene Optionen von OpenAI ausprobiert, fanden jedoch, dass die Assistant-API für unsere Anforderungen am besten geeignet ist. Um einige böswillige Akteure zu vermeiden, haben wir auch die Moderations-API von OpenAI verwendet, um die Verarbeitung der Anfragen zu verhindern, wenn sie nicht mit den Inhaltsrichtlinien von OpenAI übereinstimmen. Wie wir nach der Veröffentlichung sehen können, haben die Leute versucht, mit allen möglichen Eingabeaufforderungen zu experimentieren, die unser OpenAI-Konto in Schwierigkeiten hätten bringen können, daher hat sich das Hinzufügen der Moderation gelohnt. Und ja, die Nutzung ist kostenlos!

Bilderzeugung

Als wir uns dieses Projekt vorstellten, bestand eines der Probleme darin, wie man Bilder generiert. Wir könnten dafür natürlich Dall-E oder andere Modelle verwenden, aber sie sind langsam, von schlechter Qualität und ziemlich teuer. Es stellte sich heraus, dass wir in die falsche Richtung gedacht hatten. Warum Bilder generieren, wenn im Internet Millionen und Abermillionen von CC0-Bildern verfügbar sind?

Nach einiger Überlegung haben wir uns für Pexels entschieden. Der Grund für die Wahl von Pexels war, dass es großzügigere Anfragelimits und einen guten Bildkatalog bietet. Und natürlich verlinken wir in unserer App auf das Originalbild.

Wie pflegen Sie den Kontext auf der gesamten Website?

Das erste Problem, das wir lösen mussten, damit dieses Projekt funktionierte, bestand darin, herauszufinden, wie wir den Kontext auf der gesamten Website beibehalten können, wenn wir Inhalte für den Benutzer generieren. Unterschiedliche Muster haben unterschiedliche Anzahlen und Arten von Zeichenfolgen, und wir können dort nicht einfach zufällig Inhalte hinzufügen und hoffen, dass sie für die Website relevant sind.

Und hier kam unser großartiger Freund JSON zur Rettung. Mit einigen kreativen Eingabeaufforderungen (im Quellcode zu finden) und einem konsistenten JSON-Schema könnten wir den Kontext auf der gesamten Website aufrechterhalten und Strings haben, die sich gegenseitig ergänzen, statt zufälligem Kauderwelsch.

Wenn Sie sich eine unserer Vorlagen ansehen, werden Sie sehen, wie wir jedes Muster mit einer Beschreibung auflisten, um der API ihren Zweck und die darin enthaltenen Zeichenfolgen mitzuteilen.

Hier ist zum Beispiel das erste Muster aus dieser Vorlage:

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

Jede Zeichenfolge beschreibt zusammen mit dem Namespace auch ihre Verbindung zum Rest des Musters. Dadurch können wir sicherstellen, dass GPT nicht an mehreren Stellen dasselbe wiederholt und beispielsweise den Untertitel in Bezug zum Titel des Musters behält.

Wenn wir die Anfrage wieder auf der Website erhalten, verwenden wir den String-Slug, um sie im Muster zu ersetzen.

Während unsere aktuelle Implementierung primitiv ist, können Sie diesen Ansatz verwenden, um der Saite noch mehr Kontext zu geben, z. B. die Länge und den Ton der Saite. Auf diese Weise tauschen wir nur die Daten und nicht das Markup aus.

Wir benötigen WordPress-Instanzen für jeden Benutzer

Ein weiteres Problem, das wir lösen mussten, bestand darin, für jede Benutzersitzung eine Instanz von WordPress zu haben. In unserer Implementierung nehmen wir Änderungen live auf der WordPress-Instanz des aktuellen Benutzers vor und nutzen dann die vorhandene WordPress-Funktionalität, um das FSE-Theme zu exportieren. Nur wenn es eine Lösung gäbe, WordPress-Instanzen zu erstellen, ohne eine kleine Webhosting-Lösung aufzubauen …

Lassen Sie mich Ihnen WordPress Playground vorstellen. Mit Playground können Sie WordPress ohne Klicks in Ihrem Browser ausführen. Wenn Sie den WP Playground noch nicht genutzt haben, werden Sie überrascht sein, wie großartig er ist!

Was werden Sie mit WordPress erstellen?

Nachdem wir Sie nun durch einige der Herausforderungen geführt haben, denen wir gegenüberstanden, was werden Sie mit diesen Tools erstellen? Wir hoffen, dass der Artikel Sie dazu inspiriert hat, einige der von uns besprochenen Tools wie OpenAI API, FSE-Themes und WordPress Playground zu verwenden und etwas Großartiges zu erstellen. Wenn ja, lassen Sie es uns wissen, denn wir würden es gerne ausprobieren!

Auch hier ist der gesamte Quellcode auf unserem GitHub verfügbar, Sie können ihn also gerne auf jede Art und Weise verwenden, die Ihnen weiterhilft!