私たちは AI を活用した WordPress サイト ビルダーを作成し、現在オープンソース化しています。 これはQuickWPです
公開: 2024-03-21数週間前、私たちは、 OpenAI 、 FSE テーマ、およびWordPress Playgroundを使用して Web サイトのトピックと説明に基づいてユーザー向けにパーソナライズされたテーマを生成する、AI を活用した WordPress サイト ビルダーである QuickWP のプロトタイプをリリースしました。
まだチェックしていない場合は、Twitter (別名 X) で QuickWP のプレビューをご覧ください。
QuickWP の構築は、私たちにとって挑戦的で学びの多い経験でした。現在、私たちはプロジェクトのコード ベースをオープンソース化しているので、皆さんもそこから学び、もしかしたらそれを基にして素晴らしいものを構築することもできます。
この記事では、QuickWP に取り組むことで得たアイデア、課題、学んだことについて説明します。 あなたが同じような課題に直面した場合に、この記事が役立つことを願っています。
アイデア
私たちはしばらく AI と OpenAI API を試してみることを考えていましたが、AI ウェブサイト ビルダーを作成するつもりはありませんでした。 以前、AI プロンプトを使用して利用可能なパターンからレイアウトを生成するために AI を Otter Blocks プラグインと統合しようとしましたが、その実装は非常に原始的でした。 結果は非常に一般的なもので、提供された結果ではユーザーのコンテキストがあまり考慮されていませんでした。
ブロック エディターのパターンはわずかな変更でも簡単に壊れることを考えると、単に GPT にオンザフライでパターンを作成するよう依頼したり、コンテンツを置き換えるように依頼したりすることはできません。
ワイヤーフレームに基づいてこのアイデアを考えたとき、すべてが変わりました。 それは簡単です。ワイヤーフレームと豊富なカラーパレットを使用して FSE テーマを作成します。 そして、AI を使用して、ユーザーのプロンプトに基づいてパターンを選択します。
FSE テーマでは、theme.json ファイルのプロパティを使用して、Web サイト全体のスタイルを 1 か所から簡単に変更できます。 また、同じことがパターンにも適用されるため、パターンごとに設定が異なり、個別に変更する必要があることを心配することなく、Web サイト全体で統一性が保たれます。
ここでは、ユーザーにより良い出発点を提供するために、CC0 画像ディレクトリも使用して Web サイトに画像を追加します。
このアイデアは非常に単純に思えますが、ユーザーにとって十分な結果を生成できる点に到達するには、いくつかの試行錯誤が必要でした。 目標は、ユーザーが製品 Web サイトから SaSS として使用できるプロトタイプの作成に費やす時間をできるだけ短縮することでした。
プロジェクトスタックの概要
このプロジェクトには複数のパーツが必要だったので、多数のスタック、つまりできるだけ早くプロトタイプを作成しやすいものをすべて使用しました。
プロジェクトのさまざまな部分を次に示します。
- FSE テーマ: プロジェクトのベース。 これには、さまざまなパターンと包括的なテーマ.json ファイルが含まれています。
- 基本プラグイン: このプラグインには、プロジェクトを機能させるために必要なすべての機能と UI が含まれています。
- API エンドポイント: ユーザー Web サイトと OpenAI API の間で通信する API エンドポイント。
ここでは、ワークフロー全体を示す簡略図を示します。
FSEのテーマ
FSE テーマはプロジェクト全体のベースとして機能します。 プロトタイピングを容易にするために、Twenty Twenty-Four テーマのフォークから始めました。 ほぼすべてのパターンを削除し、必要に応じて theme.json プロパティをカスタマイズしました。
FSE テーマのベスト プラクティスは急速に変化しており、WordPress のバージョンごとに新しい方法が導入されています。 デフォルトのテーマのフォークから始めると、最小限の作業で強固な基盤を構築できます。
コードに関しては、ほとんどのことが FSE テーマで期待されるとおりです。 あなたが気づく唯一の違いは、パターン内での文字列と画像の使用方法です。
ここでは、デフォルトのテキスト、文字列のテンプレート固有の名前空間、およびデフォルトのプレビュー名前空間を各文字列に追加します。
デフォルトのテキストは、誰かがエディタ内でパターンを追加する場合、または QuickWP AI なしでテーマを使用する場合に、通常の使用時にパターンに表示されるテキストです。
テンプレート固有の名前空間は、その特定の文字列の識別子です。 デフォルトのプレビュー名前空間は、コンテキスト内のすべての文字列に使用する共有名前空間です。 これについては後で説明します。
AIプロンプト生成
これは簡単なプロトタイプであったため、より簡単なテストと実装方法を模索したいと考えていました。 私たちはさまざまな AI モデルを試しましたが、最終的に最も人気のあるオプションである OpenAI に落ち着きました。 開発段階では、OpenAI の最新モデルの方が結果がはるかに優れていたため、GPT-4 を使用しましたが、コストが高すぎるため、ほとんどのタスクで GPT-3.5 Turbo の使用に移行することにしました。 GPT-3.5 では色の多様性が十分ではなかったため、カラー パレットの生成にはまだ GPT-4 を使用しているため、ほとんどのタスクについて説明します。
リクエストを行うために、OpenAI が提供するさまざまなオプションを試しましたが、アシスタント API が私たちのニーズに最も適していることがわかりました。 一部の悪意のある行為者を避けるために、OpenAI のモデレーション API を使用して、リクエストが OpenAI のコンテンツ ポリシーに準拠していない場合にリクエストが処理されないようにしました。 リリース後にわかるように、人々は OpenAI アカウントをトラブルに陥らせる可能性のあるあらゆる種類のプロンプトを実験しようとしました。そのため、モデレーションを追加することは時間を費やす価値がありました。 そしてはい、無料で使用できます！
画像生成
このプロジェクトを構想していたとき、問題の 1 つは画像をどのように生成するかでした。 もちろん、Dall-E や他のモデルを使用してこれを行うこともできますが、それらは遅く、低品質で、非常に高価です。 私たちが間違った方向に考えていたことが判明しました。 インターネット上には何百万もの CC0 画像が存在するのに、なぜ画像を生成するのでしょうか?
いくつか検討した結果、Pexels を選択しました。 Pexels を選択した理由は、リクエスト制限がより寛大で、画像のカタログが充実しているためです。 そしてもちろん、アプリ上の元の画像にリンクします。
サイト全体のコンテキストをどのように維持しますか?
このプロジェクトを機能させるために解決する必要があった最初の問題は、ユーザー向けのコンテンツを生成するときにサイト全体のコンテキストをどのように維持できるかを確認することでした。 パターンが異なれば文字列の数や種類も異なるため、そこにコンテンツをランダムに追加して、それが Web サイトに関連するものであることを期待することはできません。
ここで私たちの偉大な友人である JSON が助けてくれました。 いくつかの創造的なプロンプト (ソース コード内にあります) と一貫した JSON スキーマを使用すると、Web サイト全体でコンテキストを維持し、ランダムな意味不明な文字列ではなく、相互に補完する文字列を作成できます。
私たちのテンプレートの 1 つを見ると、API にその目的と含まれる文字列を知らせるために、各パターンを説明とともにリストする方法がわかります。
たとえば、そのテンプレートの最初のパターンは次のとおりです。
{ "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" } ] }各文字列は、名前空間とともに、パターンの残りの部分との接続も記述します。 これにより、GPT が複数の場所で同じことを繰り返さないようにすることができ、たとえば、サブタイトルをパターンのタイトルに関連付けたままにすることができます。
リクエストをサイトに戻すと、文字列スラッグを使用してパターン内のリクエストを置き換えます。
現在の実装は原始的ですが、このアプローチを使用すると、文字列の長さやトーンなど、文字列にさらに多くのコンテキストを与えることができます。 この方法では、データのみを交換し、マークアップは交換しません。
ユーザーごとに WordPress インスタンスが必要です
私たちが解決する必要があったもう 1 つの問題は、ユーザー セッションごとに WordPress のインスタンスを用意することでした。 私たちの実装では、現在のユーザーの WordPress インスタンスにライブで変更を加え、既存の WordPress 機能を使用して FSE テーマをエクスポートします。 小規模な Web ホスティング ソリューションをほとんど構築せずに WordPress インスタンスを作成するソリューションがあればの話ですが…
WordPress Playground についてご紹介します。 Playground を使用すると、クリックをせずにブラウザで WordPress を実行できます。 WP Playground を使用したことがない場合は、その素晴らしさに驚くでしょう。
WordPress で何を構築しますか?
私たちが直面したいくつかの課題について説明しましたが、これらのツールを使用して何を構築しますか? この記事が、OpenAI API、FSE テーマ、WordPress Playground など、これまで説明したツールのいくつかを使用して、素晴らしいものを構築するきっかけになったことを願っています。 もしそうなら、ぜひ試してみたいのでお知らせください。
繰り返しになりますが、すべてのソース コードは GitHub で入手できるので、役立つあらゆる方法で自由に使用してください。