لقد أنشأنا أداة إنشاء مواقع WordPress مدعومة بالذكاء الاصطناعي والتي أصبحنا مفتوحة المصدر اليوم. هذا هو QuickWP

منذ بضعة أسابيع، أصدرنا النموذج الأولي لـ QuickWP، وهو منشئ مواقع WordPress المدعوم بالذكاء الاصطناعي والذي يستخدم OpenAI ، وموضوع FSE ، و WordPress Playground لإنشاء سمة مخصصة للمستخدم بناءً على موضوع ووصف موقع الويب الخاص بك.

إذا لم تكن قد قمت بفحصه بعد، فيمكنك مشاهدة معاينة QuickWP على Twitter (المعروف أيضًا باسم X).

لقد كان إنشاء QuickWP بمثابة تجربة مليئة بالتحديات والتعلم بالنسبة لنا، واليوم، نحن نوفر مصدرًا مفتوحًا لقاعدة التعليمات البرمجية للمشروع حتى تتمكن أيضًا من التعلم منه وربما حتى بناء شيء رائع عليه.

سأناقش في هذه المقالة الأفكار والتحديات والأشياء التي تعلمناها من خلال العمل على QuickWP. آمل أن يساعدك هذا إذا واجهت تحديات مماثلة.

الفكرة

على الرغم من أننا فكرنا في تجربة الذكاء الاصطناعي وواجهات برمجة تطبيقات OpenAI لفترة من الوقت، إلا أننا لم نخطط أبدًا لإنشاء أداة إنشاء مواقع ويب تعمل بالذكاء الاصطناعي. في السابق، حاولنا دمج الذكاء الاصطناعي مع المكون الإضافي Otter Blocks لإنشاء تخطيطات من الأنماط المتاحة باستخدام موجه الذكاء الاصطناعي، ولكن هذا التنفيذ كان بدائيًا للغاية. كانت النتائج عامة جدًا ولم تأخذ في الاعتبار سياق المستخدم كثيرًا في النتيجة المقدمة.

نظرًا لسهولة كسر الأنماط في Block Editor مع تغييرات طفيفة، لا يمكننا ببساطة أن نطلب من GPT إنشاء أنماط سريعة أو حتى أن نطلب منها استبدال المحتوى.

لقد تغير كل شيء عندما فكرنا في هذه الفكرة بناءً على الإطارات السلكية. الأمر بسيط: نقوم بإنشاء سمة FSE باستخدام إطارات سلكية ولوحات ألوان واسعة النطاق. وبعد ذلك، باستخدام الذكاء الاصطناعي، نختار الأنماط بناءً على مطالبات المستخدم.

في سمات FSE، باستخدام خصائص ملف theme.json، يمكننا بسهولة تعديل نمط موقع الويب بأكمله من مكان واحد. وينطبق الشيء نفسه على أنماطنا بحيث يكون لدينا التوحيد عبر موقع الويب دون القلق بشأن الأنماط المختلفة التي تحتوي على إعدادات مختلفة والتي تحتاج إلى تعديل بشكل منفصل.

هنا، نستخدم أيضًا دليل صور CC0 لملء موقع الويب بالصور لإعطاء نقطة بداية أفضل للمستخدم.

على الرغم من أن الفكرة تبدو بسيطة بما فيه الكفاية، إلا أنها تطلبت منا بعض التجارب والأخطاء للوصول إلى النقطة التي يمكن أن تولد فيها نتائج جيدة بما يكفي للمستخدم. كان الهدف هو قضاء أقل وقت ممكن لإنشاء نموذج أولي يمكن للمستخدمين استخدامه كـ SaSS من موقع المنتج على الويب.

نظرة عامة على مكدس المشروع

يتطلب المشروع أكثر من جزء واحد، لذلك استخدمنا عددًا من الأكوام، أي كل ما يسهل علينا تصميم النموذج الأولي في أسرع وقت ممكن.

فيما يلي الأجزاء المختلفة للمشروع:

• موضوع FSE: قاعدة المشروع. يتضمن أنماطًا مختلفة وملف theme.json شاملاً.
• البرنامج المساعد الأساسي: يحتوي هذا البرنامج المساعد على جميع الوظائف وواجهة المستخدم المطلوبة لإنجاز المشروع.
• نقطة نهاية واجهة برمجة التطبيقات (API Endpoint): نقطة نهاية واجهة برمجة التطبيقات (API) التي تتصل بين موقع المستخدم وواجهة برمجة تطبيقات OpenAI.

فيما يلي رسم تخطيطي مبسط لإظهار سير العمل بأكمله.

موضوع FSE

يعمل موضوع FSE كقاعدة للمشروع بأكمله. لجعل النماذج الأولية أسهل، بدأنا بشوكة من موضوع Twenty-Twenty-Four. لقد قمنا بإزالة جميع الأنماط إلى حد كبير وقمنا بتخصيص خصائص theme.json وفقًا لاحتياجاتنا.

تتغير أفضل الممارسات الخاصة بموضوع FSE بسرعة كبيرة، ومع كل إصدار من WordPress، لدينا طريقة جديدة للقيام بالأشياء. يتيح لنا البدء بشوكة السمة الافتراضية البناء على أساس متين بأقل قدر من العمل.

فيما يتعلق بالكود، فإن معظم الأشياء تكون كما تتوقع في سمة FSE. والفرق الوحيد الذي ستلاحظه هو كيفية استخدامنا للسلاسل والصور في الأنماط.

هنا، نضيف نصًا افتراضيًا ومساحة اسم خاصة بالقالب للسلاسل ومساحة اسم معاينة افتراضية لكل سلسلة.

النص الافتراضي هو النص الذي سيظهر في الأنماط عند استخدامه بشكل طبيعي، في حالة قيام شخص ما بإضافة نمط داخل المحرر أو استخدام السمة بدون QuickWP AI.

مساحة الاسم الخاصة بالقالب هي معرف لتلك السلسلة المعينة. ومساحة اسم المعاينة الافتراضية هي مساحة اسم مشتركة نستخدمها لجميع السلاسل في السياق. سوف نعود الى هذا لاحقا.

الجيل الفوري لمنظمة العفو الدولية

نظرًا لأنه كان نموذجًا أوليًا سريعًا، أردنا استكشاف طرق اختبار وتنفيذ أسهل. لقد جربنا العديد من نماذج الذكاء الاصطناعي ولكن انتهى بنا الأمر إلى الخيار الأكثر شيوعًا، وهو OpenAI. خلال مرحلة التطوير، استخدمنا GPT-4 حيث كانت النتائج أفضل بكثير مع أحدث عرض لنموذج OpenAI، ولكنه كان مكلفًا للغاية، لذلك قررنا التحول إلى استخدام GPT-3.5 Turbo لمعظم المهام. أقول معظم المهام لأننا لا نزال نستخدم GPT-4 لإنشاء لوحة الألوان حيث لم يكن تنوع الألوان رائعًا مع GPT-3.5

ولتقديم الطلبات، جربنا خيارات مختلفة يقدمها OpenAI ولكننا وجدنا واجهة برمجة تطبيقات المساعد الأكثر ملاءمة لاحتياجاتنا. ولتجنب بعض الجهات الفاعلة سيئة النية، استخدمنا أيضًا واجهة برمجة تطبيقات الاعتدال الخاصة بـ 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 لا تكرر نفس الشيء في أماكن متعددة، وعلى سبيل المثال، تحافظ على العنوان الفرعي مرتبطًا بعنوان النموذج.

عندما نتلقى الطلب مرة أخرى على الموقع، نستخدم السلسلة الثابتة لاستبدالها في النمط.

على الرغم من أن تطبيقنا الحالي بدائي، إلا أنه يمكنك استخدام هذا الأسلوب لإعطاء المزيد من السياق للسلسلة، مثل طول السلسلة ونبرتها. بهذه الطريقة، نقوم فقط بتبادل البيانات وليس العلامات.

نحتاج إلى مثيلات WordPress لكل مستخدم

هناك مشكلة أخرى كنا بحاجة إلى حلها وهي أن يكون لدينا مثيل WordPress لكل جلسة مستخدم. في تنفيذنا، نقوم بإجراء تغييرات مباشرة على مثيل WordPress للمستخدم الحالي ثم نستخدم وظيفة WordPress الحالية لتصدير سمة FSE. فقط إذا كان هناك حل لإنشاء مثيلات WordPress دون إنشاء حل استضافة ويب صغير إلى حد كبير…

اسمحوا لي أن أقدمكم إلى WordPress Playground. يتيح لك Playground تشغيل WordPress في متصفحك دون أي نقرات. إذا لم تكن قد استخدمت WP Playground، فسوف تتفاجأ بمدى روعته!

ما الذي ستبنيه باستخدام WordPress؟

الآن بعد أن شرحنا لك بعض التحديات التي واجهناها، ما الذي ستبنيه باستخدام هذه الأدوات؟ نأمل أن يكون المقال قد ألهمك لاستخدام بعض الأدوات التي ناقشناها، مثل OpenAI API، وموضوعات FSE، وWordPress Playground، وإنشاء شيء رائع. إذا قمت بذلك، فأخبرنا لأننا نود تجربتها!

مرة أخرى، كل الكود المصدري متاح على GitHub الخاص بنا، لذا لا تتردد في استخدامه بأي طريقة يمكن أن تساعدك!