เราได้สร้างตัวสร้างไซต์ WordPress ที่ขับเคลื่อนด้วย AI ซึ่งเราเป็นโอเพ่นซอร์สในปัจจุบัน นี่คือ QuickWP

เมื่อสองสามสัปดาห์ก่อน เราได้เปิดตัวต้นแบบของ QuickWP ซึ่งเป็นเครื่องมือสร้างเว็บไซต์ WordPress ที่ขับเคลื่อนด้วย AI ซึ่งใช้ OpenAI ธีม FSE และ WordPress Playground เพื่อสร้างธีมส่วนบุคคลสำหรับผู้ใช้ตามหัวข้อและคำอธิบายของเว็บไซต์ของคุณ

หากคุณยังไม่ได้ลองดู คุณสามารถดูตัวอย่าง QuickWP ได้บน Twitter (หรือที่เรียกว่า X)

การสร้าง QuickWP ถือเป็นประสบการณ์ที่ท้าทายและเป็นการเรียนรู้สำหรับเรา และในวันนี้ เรากำลังเปิดซอร์สฐานโค้ดสำหรับโปรเจ็กต์ เพื่อให้คุณสามารถเรียนรู้จากมัน และอาจสร้างสิ่งที่ยอดเยี่ยมบนนั้นด้วยซ้ำ

ในบทความนี้ ฉันจะหารือเกี่ยวกับแนวคิด ความท้าทาย และสิ่งที่เราเรียนรู้จากการทำงานกับ QuickWP ฉันหวังว่านี่จะช่วยคุณได้หากคุณเผชิญกับความท้าทายที่คล้ายกัน

ความคิด

แม้ว่าเราจะคิดที่จะทดลองกับ AI และ OpenAI API มาระยะหนึ่งแล้ว แต่เราไม่เคยวางแผนที่จะสร้างเครื่องมือสร้างเว็บไซต์ด้วย AI ก่อนหน้านี้ เราพยายามรวม AI เข้ากับปลั๊กอิน Otter Blocks เพื่อสร้างเลย์เอาต์จากรูปแบบที่มีอยู่โดยใช้พร้อมท์ AI แต่การใช้งานนั้นค่อนข้างดั้งเดิม ผลลัพธ์ที่ได้เป็นแบบทั่วไปมากและไม่ได้คำนึงถึงบริบทของผู้ใช้มากนักในผลลัพธ์ที่ให้มา

เนื่องจากรูปแบบใน Block Editor นั้นสามารถทำลายได้ง่ายแม้จะมีการเปลี่ยนแปลงเล็กน้อย เราจึงไม่สามารถขอให้ GPT สร้างรูปแบบได้ทันทีหรือแม้แต่ขอให้แทนที่เนื้อหา

ทุกอย่างเปลี่ยนไปเมื่อเราคิดถึงแนวคิดนี้โดยใช้โครงลวด ง่ายมาก: เราสร้างธีม FSE ด้วยโครงร่างและชุดสีที่หลากหลาย จากนั้นด้วย AI เราจะเลือกรูปแบบตามการแจ้งเตือนของผู้ใช้

ในธีม FSE เมื่อใช้คุณสมบัติไฟล์ theme.json เราสามารถปรับเปลี่ยนสไตล์ของเว็บไซต์ทั้งหมดได้อย่างง่ายดายจากที่เดียว และเช่นเดียวกันกับรูปแบบของเรา เพื่อให้เรามีความสม่ำเสมอทั่วทั้งเว็บไซต์โดยไม่ต้องกังวลกับรูปแบบที่แตกต่างกันซึ่งมีการตั้งค่าที่แตกต่างกันซึ่งจำเป็นต้องแก้ไขแยกกัน

ที่นี่ เรายังใช้ไดเร็กทอรีรูปภาพ CC0 เพื่อเติมรูปภาพในเว็บไซต์เพื่อให้เป็นจุดเริ่มต้นที่ดียิ่งขึ้นแก่ผู้ใช้

แม้ว่าแนวคิดนี้ฟังดูง่ายพอ แต่ก็ต้องมีการลองผิดลองถูกบ้างเพื่อให้เราไปถึงจุดที่สร้างผลลัพธ์ที่ดีพอสำหรับผู้ใช้ เป้าหมายคือการใช้เวลาให้น้อยที่สุดเท่าที่จะเป็นไปได้ในการสร้างต้นแบบที่ผู้ใช้สามารถใช้เป็น SaSS จากเว็บไซต์ผลิตภัณฑ์ได้

ภาพรวมของโปรเจ็กต์สแต็ก

โปรเจ็กต์ต้องการมากกว่าหนึ่งชิ้นส่วน ดังนั้นเราจึงใช้สแต็กจำนวนหนึ่ง เช่น อะไรก็ตามที่ทำให้เราสร้างต้นแบบได้ง่ายขึ้นโดยเร็วที่สุด

นี่คือส่วนต่าง ๆ ของโครงการ:

• ธีม FSE: ฐานของโครงการ ประกอบด้วยรูปแบบต่างๆ และไฟล์ theme.json ที่ครอบคลุม
• ปลั๊กอินพื้นฐาน: ปลั๊กอินนี้มีฟังก์ชันและ UI ทั้งหมดที่จำเป็นในการทำให้โครงการทำงานได้
• API Endpoint: ตำแหน่งข้อมูล API ที่สื่อสารระหว่างเว็บไซต์ผู้ใช้และ OpenAI API

นี่คือไดอะแกรมอย่างง่ายเพื่อแสดงขั้นตอนการทำงานทั้งหมด

ธีม FSE

ธีม FSE ทำงานเป็นฐานของโครงการทั้งหมด เพื่อให้การสร้างต้นแบบง่ายขึ้น เราเริ่มต้นด้วยการแยกธีม Twenty Twenty-Four เราลบรูปแบบทั้งหมดออกและปรับแต่งคุณสมบัติ theme.json ตามความต้องการของเรา

แนวทางปฏิบัติที่ดีที่สุดของธีม FSE กำลังเปลี่ยนแปลงอย่างรวดเร็ว และด้วย WordPress แต่ละเวอร์ชัน เราก็มีวิธีใหม่ในการทำสิ่งต่างๆ การเริ่มต้นด้วยการแยกธีมเริ่มต้นทำให้เราสามารถสร้างรากฐานที่มั่นคงโดยใช้เวลาเพียงเล็กน้อย

ในแง่ของโค้ด สิ่งต่างๆ ส่วนใหญ่เป็นไปตามที่คุณคาดหวังในธีม FSE ข้อแตกต่างเดียวที่คุณจะสังเกตได้คือวิธีที่เราใช้สตริงและรูปภาพในรูปแบบ

ที่นี่ เราเพิ่มข้อความเริ่มต้น เนมสเปซเฉพาะเทมเพลตสำหรับสตริง และเนมสเปซแสดงตัวอย่างเริ่มต้นให้กับแต่ละสตริง

ข้อความเริ่มต้นคือข้อความที่จะปรากฏในรูปแบบเมื่อใช้ตามปกติ ในกรณีที่มีคนเพิ่มรูปแบบภายในตัวแก้ไขหรือใช้ธีมโดยไม่มี QuickWP AI

เนมสเปซเฉพาะเทมเพลตเป็นตัวระบุสำหรับสตริงนั้น และเนมสเปซแสดงตัวอย่างเริ่มต้นคือเนมสเปซที่ใช้ร่วมกันที่เราใช้สำหรับสตริงทั้งหมดในบริบท เราจะกลับมาที่นี้ในภายหลัง

การสร้างพรอมต์ AI

เนื่องจากเป็นต้นแบบที่รวดเร็ว เราจึงต้องการสำรวจวิธีการทดสอบและการใช้งานที่ง่ายขึ้น เราทดลองกับโมเดล AI ต่างๆ แต่สุดท้ายก็จบลงด้วยตัวเลือกที่ได้รับความนิยมมากที่สุด ซึ่งก็คือ OpenAI ในระหว่างขั้นตอนการพัฒนา เราใช้ GPT-4 เนื่องจากผลลัพธ์ที่ได้ดีกว่าข้อเสนอรุ่นล่าสุดของ OpenAI มาก แต่มีค่าใช้จ่ายสูงเกินไป เราจึงตัดสินใจเปลี่ยนไปใช้ GPT-3.5 Turbo สำหรับงานส่วนใหญ่ ฉันบอกว่างานส่วนใหญ่เนื่องจากเรายังคงใช้ GPT-4 ในการสร้างจานสี เนื่องจากความหลากหลายของสีไม่ค่อยดีนักใน GPT-3.5

สำหรับการส่งคำขอ เราได้ลองใช้ตัวเลือกต่างๆ ที่ OpenAI นำเสนอ แต่พบว่า Assistant API เหมาะสมกับความต้องการของเรามากที่สุด เพื่อหลีกเลี่ยงผู้ไม่ซื่อสัตย์บางราย เรายังใช้ Moderation API ของ OpenAI เพื่อป้องกันการประมวลผลคำขอ หากคำขอเหล่านั้นไม่สอดคล้องกับนโยบายเนื้อหาของ OpenAI ดังที่เราเห็นหลังจากการเปิดตัว ผู้คนได้พยายามทดลองด้วยข้อความเตือนทุกประเภทที่อาจทำให้บัญชี OpenAI ของเราประสบปัญหา ดังนั้นการเพิ่มการกลั่นกรองจึงคุ้มค่ากับเวลา และใช่ มันใช้งานได้ฟรี!

การสร้างภาพ

ตอนที่เราจินตนาการถึงโปรเจ็กต์นี้ ปัญหาหนึ่งก็คือการสร้างภาพอย่างไร แน่นอนว่าเราสามารถใช้ Dall-E หรือรุ่นอื่นๆ ในการทำสิ่งนี้ได้ แต่จะช้า คุณภาพต่ำ และค่อนข้างแพง ปรากฎว่าเราคิดผิดทาง เหตุใดจึงต้องสร้างภาพในเมื่อมีภาพ CC0 หลายล้านภาพบนอินเทอร์เน็ต?

หลังจากพิจารณาแล้ว เราก็เลือก Pexels เหตุผลเบื้องหลังการเลือก Pexels ก็คือมันมีข้อจำกัดคำขอที่เสรีมากกว่าและมีแคตตาล็อกรูปภาพที่ดี และแน่นอนว่าเราลิงก์กลับไปยังรูปภาพต้นฉบับในแอปของเรา

คุณจะรักษาบริบททั่วทั้งไซต์ได้อย่างไร?

ปัญหาแรกที่เราต้องแก้ไขเพื่อให้โครงการนี้ทำงานได้คือการดูว่าเราจะรักษาบริบททั่วทั้งไซต์ได้อย่างไรเมื่อสร้างเนื้อหาสำหรับผู้ใช้ รูปแบบที่แตกต่างกันมีจำนวนและประเภทของสตริงที่แตกต่างกัน และเราไม่สามารถสุ่มเพิ่มเนื้อหาที่นั่นและหวังว่ามันจะเกี่ยวข้องกับเว็บไซต์ได้

และนี่คือจุดที่ JSON เพื่อนรักของเราเข้ามาช่วยเหลือ ด้วยข้อความแจ้งที่สร้างสรรค์ (พบในซอร์สโค้ด) และสคีมา JSON ที่สอดคล้องกัน เราสามารถรักษาบริบททั่วทั้งเว็บไซต์และมีสตริงที่ส่งเสริมซึ่งกันและกัน แทนที่จะพูดพล่อยๆ แบบสุ่ม

หากคุณดูเทมเพลตใดเทมเพลตหนึ่งของเรา คุณจะเห็นว่าเราแสดงรายการแต่ละรูปแบบพร้อมคำอธิบายอย่างไรเพื่อให้ 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 จะไม่ทำสิ่งเดียวกันซ้ำๆ ในหลายที่ และเก็บคำบรรยายที่เกี่ยวข้องกับชื่อเรื่องของรูปแบบไว้ เป็นต้น

เมื่อเราได้รับคำขอกลับมาที่ไซต์ เราจะใช้ string slug เพื่อแทนที่คำขอในรูปแบบ

แม้ว่าการใช้งานปัจจุบันของเราจะเป็นแบบดั้งเดิม คุณสามารถใช้วิธีนี้เพื่อให้บริบทเพิ่มเติมแก่สตริง เช่น ความยาวและโทนสีของสตริง ด้วยวิธีนี้ เราจะแลกเปลี่ยนข้อมูลเท่านั้น ไม่ใช่มาร์กอัป

เราต้องการอินสแตนซ์ WordPress สำหรับผู้ใช้แต่ละคน

ปัญหาอีกประการหนึ่งที่เราต้องแก้ไขคือการมีอินสแตนซ์ของ WordPress สำหรับแต่ละเซสชันของผู้ใช้ ในการใช้งานของเรา เรากำลังทำการเปลี่ยนแปลงบนอินสแตนซ์ WordPress ของผู้ใช้ปัจจุบัน จากนั้นใช้ฟังก์ชัน WordPress ที่มีอยู่เพื่อส่งออกธีม FSE เฉพาะในกรณีที่มีวิธีแก้ไขในการสร้างอินสแตนซ์ WordPress โดยไม่ต้องสร้างโซลูชันเว็บโฮสติ้งขนาดเล็กมากนัก...

ฉันขอแนะนำให้คุณรู้จักกับ WordPress Playground Playground ช่วยให้คุณสามารถเรียกใช้ WordPress ในเบราว์เซอร์ของคุณได้โดยไม่ต้องคลิกเลย หากคุณไม่ได้ใช้ WP Playground คุณจะต้องแปลกใจว่ามันยอดเยี่ยมขนาดไหน!

คุณจะสร้างอะไรด้วย WordPress?

ตอนนี้เราได้พาคุณผ่านความท้าทายบางอย่างที่เราเผชิญแล้ว คุณจะสร้างอะไรด้วยเครื่องมือเหล่านี้ เราหวังว่าบทความนี้เป็นแรงบันดาลใจให้คุณใช้เครื่องมือบางอย่างที่เราพูดคุยกัน เช่น OpenAI API, ธีม FSE และ WordPress Playground และสร้างสิ่งที่ยอดเยี่ยม หากคุณเป็นเช่นนั้น โปรดแจ้งให้เราทราบเพราะเราอยากลอง!

อีกครั้งที่ซอร์สโค้ดทั้งหมดมีอยู่ใน GitHub ของเรา ดังนั้นอย่าลังเลที่จะใช้มันในทางใดก็ตามที่สามารถช่วยคุณได้!