Stworzyliśmy narzędzie do tworzenia witryn WordPress oparte na sztucznej inteligencji, które dziś udostępniamy na zasadach open source. To jest QuickWP

Kilka tygodni temu opublikowaliśmy prototyp QuickWP, narzędzia do tworzenia witryn WordPress opartego na sztucznej inteligencji, które wykorzystuje OpenAI , motyw FSE i WordPress Playground do generowania spersonalizowanego motywu dla użytkownika na podstawie tematu i opisu Twojej witryny.

Jeśli jeszcze tego nie sprawdziłeś, możesz zobaczyć podgląd QuickWP na Twitterze (aka X).

Tworzenie QuickWP było dla nas wyzwaniem i pouczającym doświadczeniem, a dziś udostępniamy bazę kodu projektu na zasadach open source, dzięki czemu możesz się z niego uczyć, a może nawet zbudować na nim coś niesamowitego.

W tym artykule omówię pomysły, wyzwania i rzeczy, których nauczyliśmy się pracując nad QuickWP. Mam nadzieję, że pomoże Ci to, jeśli kiedykolwiek staniesz przed podobnymi wyzwaniami.

Pomysł

Chociaż od jakiegoś czasu myśleliśmy o eksperymentowaniu z interfejsami API AI i OpenAI, nigdy nie planowaliśmy stworzenia narzędzia do tworzenia witryn internetowych opartego na sztucznej inteligencji. Wcześniej próbowaliśmy zintegrować sztuczną inteligencję z wtyczką Otter Blocks, aby wygenerować układy na podstawie dostępnych wzorców za pomocą podpowiedzi AI, ale ta implementacja była dość prymitywna. Wyniki były bardzo ogólne i w dostarczonym wyniku nie uwzględniały zbytnio kontekstu użytkownika.

Biorąc pod uwagę, że wzorce w Edytorze bloków można łatwo złamać nawet przy niewielkich zmianach, nie mogliśmy po prostu poprosić GPT o utworzenie wzorców w locie lub nawet poprosić go o zastąpienie treści.

Wszystko się zmieniło, gdy pomyśleliśmy o pomyśle opartym na modelach szkieletowych. To proste: tworzymy motyw FSE z makietami i rozbudowaną paletą kolorów. Następnie, dzięki sztucznej inteligencji, wybieramy wzorce na podstawie podpowiedzi użytkownika.

W motywach FSE, korzystając z właściwości pliku topic.json, w łatwy sposób z jednego miejsca możemy modyfikować stylizację całej witryny. To samo dotyczy naszych wzorców, dzięki czemu mamy jednolitość w całej witrynie, nie martwiąc się, że różne wzorce mają różne ustawienia, które należy modyfikować osobno.

W tym przypadku używamy również katalogu obrazów CC0, aby zapełnić witrynę obrazami, aby zapewnić użytkownikowi lepszy punkt wyjścia.

Choć pomysł wydaje się dość prosty, wymagał kilku prób i błędów, aby osiągnąć punkt, w którym mógł wygenerować wyniki wystarczająco dobre dla użytkownika. Celem było poświęcenie jak najmniejszej ilości czasu na stworzenie prototypu, którego użytkownicy będą mogli używać jako SaSS ze strony internetowej produktu.

Przegląd stosu projektu

Projekt wymagał więcej niż jednej części, dlatego wykorzystaliśmy kilka stosów, czyli wszystko, co ułatwiło nam wykonanie prototypu w jak najkrótszym czasie.

Oto poszczególne części projektu:

• Temat FSE: Podstawa projektu. Zawiera różne wzorce i obszerny plik topic.json.
• Wtyczka podstawowa: ta wtyczka posiada wszystkie funkcje i interfejs użytkownika wymagane do działania projektu.
• Punkt końcowy API: Punkt końcowy API komunikujący się pomiędzy witryną użytkownika a interfejsem API OpenAI.

Oto uproszczony diagram przedstawiający cały przepływ pracy.

Temat FSE

Motyw FSE sprawdza się jako baza całego projektu. Aby ułatwić prototypowanie, zaczęliśmy od rozwidlenia motywu Twenty Twenty-Four. Prawie usunęliśmy wszystkie wzorce i dostosowaliśmy właściwości motywu.json zgodnie z naszymi potrzebami.

Najlepsze praktyki dotyczące motywów FSE zmieniają się bardzo szybko, a z każdą wersją WordPressa mamy nowy sposób działania. Rozpoczęcie od rozwidlenia domyślnego motywu pozwala nam zbudować solidny fundament przy minimalnym nakładzie pracy.

Jeśli chodzi o kod, większość rzeczy jest taka, jak można się spodziewać po motywie FSE. Jedyna różnica, jaką zauważysz, to sposób, w jaki używamy ciągów znaków i obrazów we wzorach.

Tutaj dodajemy domyślny tekst, specyficzną dla szablonu przestrzeń nazw dla ciągów i domyślną przestrzeń nazw podglądu do każdego ciągu.

Domyślny tekst to tekst, który pojawi się we wzorcach podczas normalnego użycia, na wypadek, gdyby ktoś dodawał wzorzec w edytorze lub korzystał z motywu bez QuickWP AI.

Przestrzeń nazw specyficzna dla szablonu jest identyfikatorem tego konkretnego ciągu. Domyślna przestrzeń nazw podglądu to współdzielona przestrzeń nazw, której używamy dla wszystkich ciągów znaków w kontekście. Wrócimy do tego później.

Generowanie podpowiedzi AI

Ponieważ był to szybki prototyp, chcieliśmy zbadać łatwiejsze metody testowania i wdrażania. Eksperymentowaliśmy z różnymi modelami AI, ale ostatecznie wybraliśmy najpopularniejszą opcję, czyli OpenAI. W fazie rozwoju używaliśmy GPT-4, ponieważ wyniki były znacznie lepsze w przypadku najnowszego modelu OpenAI, ale było to zbyt kosztowne, więc zdecydowaliśmy się przejść na użycie GPT-3.5 Turbo do większości zadań. Mówię o większości zadań, ponieważ nadal używamy GPT-4 do generowania palety kolorów, ponieważ różnorodność kolorów nie była zbyt duża w przypadku GPT-3.5

Jeśli chodzi o wysyłanie żądań, wypróbowaliśmy różne opcje oferowane przez OpenAI, ale uznaliśmy, że API Asystenta najlepiej odpowiada naszym potrzebom. Aby uniknąć działania niektórych podmiotów działających w złej wierze, użyliśmy także interfejsu API moderacji OpenAI, aby zapobiec przetwarzaniu żądań, jeśli nie są one zgodne z polityką treści OpenAI. Jak widać po wydaniu, ludzie próbowali eksperymentować z najróżniejszymi podpowiedziami, które mogły wpędzić nasze konto OpenAI w kłopoty, więc dodanie moderacji było warte czasu. I tak, korzystanie z niego jest bezpłatne!

Generowanie obrazu

Kiedy wyobrażaliśmy sobie ten projekt, jednym z problemów był sposób generowania obrazów. Moglibyśmy oczywiście użyć do tego Dall-E lub innych modeli, ale są one powolne, niskiej jakości i dość drogie. Okazało się, że myśleliśmy w złym kierunku. Po co generować obrazy, skoro w Internecie dostępnych jest wiele milionów obrazów CC0?

Po namyśle wybraliśmy Pexels. Powodem wyboru Pexels były bardziej liberalne limity żądań i dobry katalog zdjęć. I oczywiście odsyłamy do oryginalnego obrazu w naszej aplikacji.

Jak zachować kontekst w całej witrynie?

Pierwszym problemem, który musieliśmy rozwiązać, aby projekt zadziałał, było sprawdzenie, w jaki sposób moglibyśmy zachować kontekst w całej witrynie podczas generowania treści dla użytkownika. Różne wzorce mają różną liczbę i typy ciągów znaków i nie możemy po prostu losowo dodawać tam treści w nadziei, że będzie ona odpowiednia dla witryny.

I tu z pomocą przyszedł nasz wspaniały przyjaciel JSON. Dzięki kreatywnym podpowiedziom (znajdującym się w kodzie źródłowym) i spójnemu schematowi JSON moglibyśmy zachować kontekst w całej witrynie i mieć ciągi znaków, które się uzupełniają, a nie przypadkowy bełkot.

Jeśli spojrzysz na jeden z naszych szablonów, zobaczysz, jak wyświetlamy listę każdego wzorca wraz z opisem, aby interfejs API wiedział, jaki jest jego cel i jakie zawiera ciągi znaków.

Oto na przykład pierwszy wzór z tego szablonu:

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

Każdy ciąg znaków wraz z przestrzenią nazw opisuje także jego połączenie z resztą wzorca. Dzięki temu mamy pewność, że GPT nie powiela tego samego w wielu miejscach i np. zachowuje podtytuł powiązany z tytułem wzorca.

Kiedy żądanie ponownie pojawi się na stronie, używamy string slug, aby zastąpić je we wzorcu.

Chociaż nasza obecna implementacja jest prymitywna, możesz zastosować to podejście, aby nadać ciągowi jeszcze więcej kontekstu, na przykład długość i ton ciągu. W ten sposób wymieniamy tylko dane, a nie znaczniki.

Potrzebujemy instancji WordPress dla każdego użytkownika

Kolejnym problemem, który musieliśmy rozwiązać, było posiadanie instancji WordPress dla każdej sesji użytkownika. W naszej implementacji wprowadzamy zmiany na żywo w instancji WordPress bieżącego użytkownika, a następnie wykorzystujemy istniejącą funkcjonalność WordPress do eksportu motywu FSE. Tylko gdyby istniało rozwiązanie umożliwiające utworzenie instancji WordPress bez konieczności budowania małego rozwiązania hostingowego…

Pozwól, że przedstawię Ci plac zabaw WordPress. Playground umożliwia uruchomienie WordPressa w przeglądarce bez kliknięć. Jeśli nie korzystałeś z WP Playground, będziesz zaskoczony, jakie to niesamowite!

Co będziesz budować za pomocą WordPressa?

Teraz, gdy przeprowadziliśmy Cię przez niektóre wyzwania, przed którymi stanęliśmy, co będziesz budować za pomocą tych narzędzi? Mamy nadzieję, że ten artykuł zainspirował Cię do wykorzystania niektórych z omówionych przez nas narzędzi, takich jak OpenAI API, motywy FSE i WordPress Playground, i zbudowania czegoś niesamowitego. Jeśli tak, daj nam znać, bo chętnie spróbujemy!

Po raz kolejny cały kod źródłowy jest dostępny w naszym GitHubie, więc możesz go używać w dowolny sposób, który może Ci pomóc!