Bugün Açık Kaynak Kullandığımız Yapay Zeka Destekli bir WordPress Site Oluşturucusu Oluşturduk. Burası QuickWP

Birkaç hafta önce, web sitenizin konusuna ve açıklamasına göre kullanıcı için kişiselleştirilmiş bir tema oluşturmak üzere OpenAI , bir FSE teması ve WordPress Oyun Alanı kullanan yapay zeka destekli bir WordPress site oluşturucusu olan QuickWP'nin prototipini yayınladık.

Henüz kontrol etmediyseniz, QuickWP'nin önizlemesini Twitter'da (diğer adıyla X) görebilirsiniz.

QuickWP'yi oluşturmak bizim için zorlu ve öğretici bir deneyim oldu ve bugün projenin kod tabanını açık kaynak haline getiriyoruz, böylece siz de ondan öğrenebilir ve hatta belki onun üzerine harika bir şey inşa edebilirsiniz.

Bu makalede QuickWP üzerinde çalışarak öğrendiğimiz fikirleri, zorlukları ve öğrendiklerimizi tartışacağım. Umarım benzer zorluklarla karşılaşırsanız bu size yardımcı olur.

Fikir

Bir süredir AI ve OpenAI API'lerini denemeyi düşünsek de, hiçbir zaman bir AI web sitesi oluşturucusu oluşturmayı planlamadık. Daha önce, AI istemini kullanarak mevcut modellerden düzenler oluşturmak için AI'yı Otter Blocks eklentisiyle entegre etmeyi denedik, ancak bu uygulama oldukça ilkeldi. Sonuçlar oldukça geneldi ve sağlanan sonuçta kullanıcı bağlamını pek dikkate almıyordu.

Blok Düzenleyici'deki kalıpların küçük değişikliklerle bile kolayca kırılabileceği göz önüne alındığında, GPT'den anında kalıp oluşturmasını veya hatta içeriği değiştirmesini isteyemezdik.

Tel çerçevelere dayalı bu fikri düşündüğümüzde her şey değişti. Çok basit: Tel çerçeveler ve kapsamlı renk paletleriyle bir FSE teması oluşturuyoruz. Daha sonra yapay zeka ile kullanıcı istemlerine göre kalıpları seçiyoruz.

FSE temalarında theme.json dosya özelliklerini kullanarak tüm web sitesinin stilini tek yerden kolayca değiştirebiliriz. Aynı şey kalıplarımıza da uygulanır, böylece ayrı ayrı değiştirilmesi gereken farklı ayarlara sahip farklı kalıplar hakkında endişelenmeden web sitesi genelinde tekdüzelik elde ederiz.

Burada ayrıca kullanıcıya daha iyi bir başlangıç ​​noktası sağlamak amacıyla web sitesini görsellerle doldurmak için bir CC0 görsel dizini kullanıyoruz.

Fikir yeterince basit görünse de, kullanıcı için yeterince iyi sonuçlar üretebilecek noktaya ulaşmamız için bazı denemeler ve hatalar yapmamız gerekiyordu. Amaç, kullanıcıların ürün web sitesinden SaSS olarak kullanabileceği bir prototip oluşturmak için mümkün olduğunca az zaman harcamaktı.

Proje yığınına genel bakış

Proje birden fazla parça gerektiriyordu, bu yüzden bir dizi yığın kullandık, yani mümkün olduğu kadar çabuk prototip oluşturmamızı kolaylaştıran ne varsa.

İşte projenin çeşitli bölümleri:

• FSE Teması: Projenin temeli. Çeşitli desenler ve kapsamlı bir theme.json dosyası içerir.
• Temel Eklenti: Bu eklenti, projenin çalışması için gereken tüm işlevselliğe ve kullanıcı arayüzüne sahiptir.
• API Uç Noktası: Kullanıcı web sitesi ile OpenAI API arasında iletişim kuran bir API uç noktası.

İşte tüm iş akışını gösteren basitleştirilmiş bir şema.

FSE teması

FSE teması tüm projenin temeli olarak çalışır. Prototip oluşturmayı kolaylaştırmak için Yirmi Yirmi Dört temasının bir çatalıyla başladık. Hemen hemen tüm kalıpları kaldırdık ve theme.json özelliklerini ihtiyaçlarımıza göre özelleştirdik.

FSE temasının en iyi uygulamaları çok hızlı bir şekilde değişiyor ve WordPress'in her sürümüyle birlikte işleri yapmanın yeni bir yolu var. Varsayılan temanın çatalıyla başlamak, minimum çalışmayla sağlam bir temel oluşturmamıza olanak tanır.

Kod açısından çoğu şey bir FSE temasından beklediğiniz gibidir. Fark edeceğiniz tek fark, desenlerde dizeleri ve görüntüleri nasıl kullandığımızdır.

Burada, varsayılan metni, dizeler için şablona özel ad alanını ve her dizeye varsayılan önizleme ad alanını ekliyoruz.

Varsayılan metin, birisinin düzenleyicinin içine bir desen eklemesi veya temayı QuickWP AI olmadan kullanması durumunda, normal şekilde kullanıldığında kalıplarda görünecek olan metindir.

Şablona özgü ad alanı, söz konusu dize için bir tanımlayıcıdır. Ve varsayılan önizleme ad alanı, bağlamdaki tüm dizeler için kullandığımız paylaşılan bir ad alanıdır. Bu konuya daha sonra tekrar döneceğiz.

Yapay zeka istemi oluşturma

Hızlı bir prototip olduğu için daha kolay test ve uygulama yöntemlerini keşfetmek istedik. Çeşitli yapay zeka modellerini denedik ancak en popüler seçenek olan OpenAI ile sonuçlandık. Geliştirme aşamasında GPT-4'ü kullandık çünkü OpenAI'nin en son model teklifiyle sonuçlar çok daha iyi oldu ancak bu çok maliyetliydi, bu nedenle çoğu görev için GPT-3.5 Turbo kullanmaya karar verdik. Renk çeşitliliği GPT-3.5'te çok iyi olmadığından, renk paleti oluşturmak için hala GPT-4 kullandığımızdan görevlerin çoğunu söylüyorum.

İstekte bulunmak için OpenAI'nin sunduğu farklı seçenekleri denedik ancak Asistan API'sinin ihtiyaçlarımıza en uygun olduğunu gördük. Bazı kötü niyetli aktörleri önlemek amacıyla, OpenAI'nin içerik politikalarına uymayan isteklerin işlenmesini önlemek amacıyla OpenAI'nin Moderasyon API'sini de kullandık. Sürümden sonra görebileceğimiz gibi, insanlar OpenAI hesabımızın başını belaya sokabilecek her türlü istemi denemeye çalıştılar, bu nedenle denetimi eklemek zaman ayırmaya değerdi. Ve evet, kullanımı ücretsizdir!

Görüntü oluşturma

Bu projeyi hayal ederken karşılaştığımız konulardan biri de görüntülerin nasıl oluşturulacağıydı. Elbette bunu yapmak için Dall-E veya diğer modelleri kullanabiliriz, ancak bunlar yavaş, düşük kaliteli ve oldukça pahalıdır. Yanlış yönde düşündüğümüz ortaya çıktı. İnternette milyonlarca ve milyonlarca CC0 görseli varken neden görseller oluşturasınız ki?

Biraz düşündükten sonra Pexels'i seçtik. Pexels'in tercih edilmesinin nedeni daha liberal istek limitlerine ve iyi bir görsel kataloğuna sahip olmasıydı. Ve tabii ki uygulamamızdaki orijinal görsele geri bağlantı veriyoruz.

Site genelinde bağlamı nasıl korursunuz?

Bu projenin işe yaraması için çözmemiz gereken ilk sorun, kullanıcı için içerik üretirken site genelinde bağlamı nasıl koruyabileceğimizi görmekti. Farklı desenlerin farklı sayıları ve türleri vardır ve oraya rastgele içerik ekleyip bunun web sitesiyle alakalı olmasını umamayız.

Ve burası da büyük dostumuz JSON'un kurtarmaya geldiği yer. Bazı yaratıcı istemler (kaynak kodunda bulunur) ve tutarlı bir JSON şemasıyla, web sitesi genelinde bağlamı koruyabilir ve rastgele anlamsız sözler yerine birbirini tamamlayan dizelere sahip olabiliriz.

Şablonlarımızdan birine bakarsanız, API'nin amacını ve hangi dizeleri içerdiğini bilmesini sağlamak için her modeli bir açıklamayla birlikte nasıl listelediğimizi göreceksiniz.

Örneğin, işte bu şablondaki ilk kalıp:

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

Her dize, ad alanıyla birlikte, desenin geri kalanıyla olan bağlantısını da açıklar. Bu, GPT'nin aynı şeyi birden fazla yerde tekrarlamamasını ve örneğin alt başlığın kalıbın başlığıyla ilişkili kalmasını sağlamamızı sağlar.

İsteği siteye geri aldığımızda, onu kalıpta değiştirmek için sümüklü dizeyi kullanırız.

Mevcut uygulamamız ilkel olsa da, telin uzunluğu ve tonu gibi tellere daha fazla bağlam kazandırmak için bu yaklaşımı kullanabilirsiniz. Bu şekilde, işaretlemeyi değil, yalnızca verileri değiştiririz.

Her kullanıcı için WordPress örneklerine ihtiyacımız var

Çözmemiz gereken diğer bir sorun da her kullanıcı oturumu için bir WordPress örneğinin olmasıydı. Uygulamamızda, mevcut kullanıcının WordPress örneğinde canlı olarak değişiklikler yapıyoruz ve ardından FSE temasını dışa aktarmak için mevcut WordPress işlevselliğini kullanıyoruz. Yalnızca küçük bir web barındırma çözümü oluşturmaya gerek kalmadan WordPress örnekleri oluşturmanın bir çözümü olsaydı…

Sizi WordPress Oyun Alanı ile tanıştırayım. Playground, WordPress'i tarayıcınızda sıfır tıklamayla çalıştırmanıza olanak tanır. WP Playground'u kullanmadıysanız ne kadar harika olduğuna şaşıracaksınız!

WordPress ile ne inşa edeceksiniz?

Artık karşılaştığımız bazı zorlukların üstesinden gelmenizi sağladığımıza göre, bu araçlarla ne inşa edeceksiniz? Makalenin, OpenAI API, FSE temaları ve WordPress Oyun Alanı gibi tartıştığımız araçlardan bazılarını kullanmanıza ve harika bir şey oluşturmanıza ilham vereceğini umuyoruz. Eğer yaparsanız bize bildirin çünkü denemek isteriz!

Bir kez daha söylüyorum, tüm kaynak kodları GitHub'ımızda mevcuttur, bu yüzden size yardımcı olabileceği şekilde onu kullanmaktan çekinmeyin!