Kami Telah Membuat Pembuat Situs WordPress Bertenaga AI yang Menjadi Sumber Terbuka Saat Ini. Ini adalah QuickWP

Beberapa minggu yang lalu, kami merilis prototipe QuickWP, pembuat situs WordPress bertenaga AI yang menggunakan OpenAI , tema FSE , dan WordPress Playground untuk menghasilkan tema yang dipersonalisasi untuk pengguna berdasarkan topik dan deskripsi situs web Anda.

Jika Anda belum memeriksanya, Anda dapat melihat pratinjau QuickWP di Twitter (alias X).

Membangun QuickWP telah menjadi pengalaman yang menantang dan pembelajaran bagi kami, dan hari ini, kami membuka basis kode untuk proyek tersebut sehingga Anda juga dapat belajar darinya dan bahkan mungkin membangun sesuatu yang luar biasa darinya.

Pada artikel kali ini saya akan membahas ide, tantangan, dan hal-hal yang kami pelajari selama mengerjakan QuickWP. Saya harap ini membantu Anda jika Anda pernah menghadapi tantangan serupa.

Ide

Meskipun kami sudah lama berpikir untuk bereksperimen dengan AI dan OpenAI API, kami tidak pernah berencana membuat pembuat situs web AI. Sebelumnya, kami mencoba mengintegrasikan AI dengan plugin Otter Blocks untuk menghasilkan tata letak dari pola yang tersedia menggunakan perintah AI, namun penerapannya cukup primitif. Hasilnya sangat umum dan tidak terlalu mempertimbangkan konteks pengguna dalam hasil yang diberikan.

Mengingat pola di Block Editor mudah untuk mencapai titik impas dengan perubahan kecil, kami tidak bisa begitu saja meminta GPT untuk membuat pola dengan cepat atau bahkan memintanya untuk mengganti konten.

Semuanya berubah ketika kami memikirkan ide ini berdasarkan wireframe. Sederhana saja: kami membuat tema FSE dengan gambar rangka dan palet warna yang luas. Lalu, dengan AI, kami memilih pola berdasarkan permintaan pengguna.

Di tema FSE, dengan menggunakan properti file theme.json, kita dapat dengan mudah mengubah gaya seluruh situs web dari satu tempat. Dan hal yang sama diterapkan pada pola kita sehingga kita memiliki keseragaman di seluruh situs web tanpa khawatir tentang pola berbeda yang memiliki pengaturan berbeda yang perlu dimodifikasi secara terpisah.

Di sini, kami juga menggunakan direktori gambar CC0 untuk mengisi situs web dengan gambar guna memberikan titik awal yang lebih baik kepada pengguna.

Meskipun idenya terdengar cukup sederhana, kami memerlukan beberapa percobaan dan kesalahan untuk mencapai titik di mana ide tersebut dapat memberikan hasil yang cukup baik bagi pengguna. Tujuannya adalah menghabiskan waktu sesedikit mungkin untuk membuat prototipe yang dapat digunakan pengguna sebagai SaSS dari situs web produk.

Ikhtisar tumpukan proyek

Proyek ini membutuhkan lebih dari satu bagian, jadi kami menggunakan sejumlah tumpukan, yaitu apa pun yang memudahkan kami membuat prototipe secepat mungkin.

Berikut adalah berbagai bagian proyek:

• Tema FSE: Dasar dari proyek. Ini mencakup berbagai pola dan file theme.json yang komprehensif.
• Plugin Dasar: Plugin ini memiliki semua fungsi dan UI yang diperlukan agar proyek dapat berfungsi.
• Titik Akhir API: Titik akhir API yang berkomunikasi antara situs web pengguna dan API OpenAI.

Berikut adalah diagram yang disederhanakan untuk menampilkan keseluruhan alur kerja.

tema FSE

Tema FSE berfungsi sebagai dasar dari keseluruhan proyek. Untuk mempermudah pembuatan prototipe, kami memulai dengan fork tema Dua Puluh Dua Puluh Empat. Kami menghapus hampir semua pola dan menyesuaikan properti theme.json sesuai kebutuhan kami.

Praktik terbaik tema FSE berubah dengan sangat cepat, dan dengan setiap versi WordPress, kami memiliki cara baru dalam melakukan sesuatu. Memulai dengan fork tema default memungkinkan kita membangun fondasi yang kokoh dengan sedikit usaha.

Dalam hal kode, sebagian besar hal seperti yang Anda harapkan dalam tema FSE. Satu-satunya perbedaan yang akan Anda lihat adalah cara kami menggunakan string dan gambar dalam pola.

Di sini, kami menambahkan teks default, namespace khusus templat untuk string, dan namespace pratinjau default ke setiap string.

Teks default adalah teks yang akan muncul dalam pola ketika digunakan secara normal, jika seseorang menambahkan pola di dalam editor atau menggunakan tema tanpa QuickWP AI.

Namespace khusus templat adalah pengidentifikasi untuk string tertentu. Dan namespace pratinjau default adalah namespace bersama yang kami gunakan untuk semua string dalam konteks. Kami akan membahasnya lagi nanti.

Generasi cepat AI

Karena ini adalah prototipe cepat, kami ingin mengeksplorasi metode pengujian dan implementasi yang lebih mudah. Kami bereksperimen dengan berbagai model AI tetapi mendapatkan opsi yang paling populer, yaitu OpenAI. Selama tahap pengembangan, kami menggunakan GPT-4 karena hasilnya jauh lebih baik dengan penawaran model terbaru OpenAI, namun biayanya terlalu mahal, jadi kami memutuskan untuk beralih menggunakan GPT-3.5 Turbo untuk sebagian besar tugas. Saya mengatakan sebagian besar tugas tersebut karena kami masih menggunakan GPT-4 untuk pembuatan palet warna karena variasi warnanya tidak terlalu bagus dengan GPT-3.5

Untuk mengajukan permintaan, kami mencoba berbagai opsi yang ditawarkan OpenAI tetapi menemukan API Asisten paling sesuai dengan kebutuhan kami. Untuk menghindari pelaku yang beritikad buruk, kami juga menggunakan API Moderasi OpenAI untuk mencegah pemrosesan permintaan jika permintaan tersebut tidak sejalan dengan kebijakan konten OpenAI. Seperti yang bisa kita lihat setelah rilis, orang-orang telah mencoba bereksperimen dengan segala macam perintah yang bisa membuat akun OpenAI kita mendapat masalah, jadi menambahkan moderasi sepadan dengan waktu yang dihabiskan. Dan ya, ini gratis untuk digunakan!

Pembuatan gambar

Saat kami membayangkan proyek ini, salah satu masalahnya adalah bagaimana menghasilkan gambar. Tentu saja kita dapat menggunakan Dall-E atau model lain untuk melakukannya, namun model tersebut lambat, berkualitas rendah, dan cukup mahal. Ternyata kami berpikir ke arah yang salah. Mengapa menghasilkan gambar ketika ada jutaan gambar CC0 tersedia di internet?

Setelah beberapa pertimbangan, kami memilih Pexels. Alasan di balik memilih Pexels adalah karena Pexels memiliki batasan permintaan yang lebih luas dan katalog gambar yang bagus. Dan, tentu saja, kami menautkan kembali ke gambar asli di aplikasi kami.

Bagaimana Anda mempertahankan konteks di seluruh situs?

Masalah pertama yang perlu kami selesaikan agar proyek ini berhasil adalah melihat bagaimana kami dapat mempertahankan konteks di seluruh situs saat membuat konten untuk pengguna. Pola yang berbeda memiliki jumlah dan jenis string yang berbeda, dan kami tidak bisa menambahkan konten secara acak di sana dan berharap konten tersebut relevan untuk situs web.

Dan di sinilah teman baik kita JSON datang untuk menyelamatkan. Dengan beberapa petunjuk kreatif (ditemukan dalam kode sumber) dan skema JSON yang konsisten, kami dapat mempertahankan konteks di seluruh situs web dan memiliki string yang saling melengkapi, bukan omong kosong acak.

Jika Anda melihat salah satu templat kami, Anda akan melihat bagaimana kami mencantumkan setiap pola dengan deskripsi agar API mengetahui tujuannya dan string apa yang dikandungnya.

Misalnya, inilah pola pertama dari template itu:

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

Setiap string, bersama dengan namespace, juga menjelaskan hubungannya dengan pola lainnya. Hal ini memungkinkan kami memastikan bahwa GPT tidak mengulangi hal yang sama di banyak tempat dan, misalnya, menjaga subjudul tetap terkait dengan judul pola.

Ketika kami mendapatkan permintaan kembali di situs, kami menggunakan string slug untuk menggantikannya dalam pola.

Meskipun implementasi kami saat ini masih primitif, Anda dapat menggunakan pendekatan ini untuk memberikan lebih banyak konteks pada string, seperti panjang dan nada string. Dengan cara ini, kami hanya menukar data dan bukan markupnya.

Kami membutuhkan instance WordPress untuk setiap pengguna

Masalah lain yang perlu kami selesaikan adalah memiliki instance WordPress untuk setiap sesi pengguna. Dalam implementasinya, kami membuat perubahan langsung pada instance WordPress pengguna saat ini dan kemudian menggunakan fungsionalitas WordPress yang ada untuk mengekspor tema FSE. Hanya jika ada solusi untuk membuat instance WordPress tanpa banyak membangun solusi hosting web kecil…

Izinkan saya memperkenalkan Anda ke WordPress Playground. Playground memungkinkan Anda menjalankan WordPress di browser Anda tanpa klik. Jika Anda belum pernah menggunakan WP Playground, Anda akan terkejut betapa hebatnya itu!

Apa yang akan Anda bangun dengan WordPress?

Kini setelah kami memandu Anda mengatasi beberapa tantangan yang kami hadapi, apa yang akan Anda bangun dengan alat ini? Kami harap artikel ini menginspirasi Anda untuk menggunakan beberapa alat yang telah kita diskusikan, seperti OpenAI API, tema FSE, dan WordPress Playground, dan membangun sesuatu yang mengagumkan. Jika ya, beri tahu kami karena kami ingin mencobanya!

Sekali lagi, semua kode sumber tersedia di GitHub kami, jadi silakan menggunakannya dengan cara apa pun yang dapat membantu Anda!