كيف استخدمت الذكاء الاصطناعي لتطوير تطبيق ويب حديث

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

المشكلة التي كنت أحاول حلها

منذ بداية ChatGPT ونماذج لغة الذكاء الاصطناعي الأخرى، أصبحت بعض الكلمات مرتبطة بقوة بالمحتوى الذي تم إنشاؤه بواسطة الذكاء الاصطناعي (أحد الأسباب العديدة التي تمنعك من استخدام ChatGPT للكتابة). تتضمن الأمثلة “الحفر” و”النسيج” و”الوصية”. ككاتبة، كنت أؤمن دائمًا باستخدام الكلمة الصحيحة في السياق الصحيح. عندما تكون الكلمة مناسبة وتعبر بالضبط عما أريد أن أنقله، أشعر أنني يجب أن أكون قادرًا على استخدامها.

لسوء الحظ، العديد من عملائي لا يرون الأمر بنفس الطريقة. إنهم يشعرون بالقلق بشكل متزايد من المحتوى الذي قد يبدو أنه تم إنشاؤه بواسطة الذكاء الاصطناعي. نظرًا لأنني لست من الذكاء الاصطناعي (على الأقل لا أعتقد ذلك)، فأنا لا أتذكر كل الكلمات والعبارات التي تستخدمها نماذج لغة الذكاء الاصطناعي بشكل شائع، لذلك قد يكون من الصعب علي تجنبها.

ولهذا السبب قررت إنشاء أداة يمكنها تحليل النص المقدم مقابل قائمة الكلمات وتسليط الضوء على الكلمات والعبارات المحتملة التي تبدو وكأنها “ذكاء اصطناعي”. يمكن تطوير أداة كهذه باستخدام تقنيات الويب الرئيسية الثلاثة: HTML (يبني محتوى صفحة الويب)، وCSS (يستخدم لتصميم المحتوى على صفحة الويب)، وJavaScript (يحول صفحة الويب الثابتة إلى “صفحة ويب” app” الذي يفعل ما نريده أن يفعله).

يعد مشروع مثل “AI Vocab Checker” مرشحًا مثاليًا لتطوير البرامج المدعومة بالذكاء الاصطناعي لأن أفضل نماذج الذكاء الاصطناعي تم تدريبها على كميات هائلة من أكواد HTML وCSS وJavaScript والوثائق، حتى يتمكنوا من إخراج التعليمات البرمجية وتقديم التوجيه بشأن أفضل الممارسات، واقتراح عمليات تنفيذ فعالة، وحتى المساعدة في استكشاف المشكلات التي قد تنشأ أثناء التطوير وإصلاحها.

يمكن لجميع أفضل 3 نماذج لغات كبيرة (LLMs) في LMSYS Chatbot Arena Leaderboard (GPT-4o وClaude 3.5 Sonnet وGemini Advanced) التعامل مع مهام تطوير الويب بكفاءة مذهلة. ومع ذلك، فقد اخترت في النهاية كلود 3.5 السوناتة لهذا المشروع.

كان Claude 3.5 Sonnet هو مساعدي المفضل للبرمجة بالذكاء الاصطناعي، ويرجع الفضل في ذلك إلى حد كبير إلى ميزة “المشاريع” الخاصة به، والتي سمحت لي بإنشاء مساحة عمل مخصصة فقط لتطوير تطبيقي. بالطبع، من المفيد أيضًا أن تتفوق Sonnet على منافسيها في مهام البرمجة المضمنة في معيار HumanEval.

بناء تطبيق الويب الخاص بي مع كلود

لقد بدأت بإنشاء مشروع جديد في Claude لـ AI Vocab Checker عن طريق تحديد المشاريع علامة التبويب في الجزء الأيسر (يمكنك الكشف عنها عن طريق تحريك مؤشر الماوس فوق شعار Claude في الزاوية العلوية اليسرى في الدردشة النشطة) ثم النقر فوق إنشاء مشروع زر.

وبمجرد الانتهاء من ذلك، كنت بحاجة لوصف المشكلة لكلود. إليك المطالبة التي توصلت إليها:

I want to create a web app that analyzes text for words and phrases commonly overused by AI language models like ChatGPT. The app should highlight these words in the input text: delve, dive in, in the era of, robust, ensure, significant, crucial, effectively, additionally, [redacted for brevity].
Here are the key features I need:
- A text area for users to input their content
- An editable list with words to detect
- A button to trigger the analysis
- A display area to show the analyzed text with highlighted words
- A list of the detected AI-associated words
Please create the app using HTML, CSS, and JavaScript. Include any libraries or frameworks you need to make it great. Output all code in a single file.

بشكل عام، تريد تقديم وصف عالي المستوى لما تريد تحقيقه ثم تتبعه بأكبر قدر ممكن من التفاصيل. سيتم ترك أي شيء لا تصفه بالتفصيل للتفسير بواسطة الذكاء الاصطناعي، والذي قد يتوافق أو لا يتوافق مع رؤيتك.

استغرق الأمر من كلود فترة قصيرة لإخراج الكود، والذي قمت بعد ذلك بلصقه في ملف Index.html باستخدام Visual Studio Code. تمكنت بعد ذلك من فتح ملف Index.html ببساطة في متصفح الويب، وكان هذا هو الإصدار الأولي من تطبيق AI Vocab Checker الذي ابتكره كلود:

كما ترون، كان كلود قادرًا على إنشاء تطبيق وظيفي بمطالبة واحدة فقط، ويقوم التطبيق فعليًا بما يفترض أن يفعله! ومع ذلك، هناك بعض المشكلات التي تظهر بوضوح عند الفحص الدقيق:

• يكون مربعا النص الأولان أكبر قليلاً من مربع النص السفلي.
• اسم التطبيق خاطئ (نسيت تحديده).
• لا يستفيد التطبيق من المساحة الأفقية المتوفرة على أجهزة سطح المكتب.
• يتم تمييز جميع الكلمات بنفس اللون (مما يجعل تحليل النتيجة صعبًا).
• لا توجد إحصائيات استخدام للكلمات المكتشفة.
• لم يستخدم كلود أي مكتبات أو أطر عمل على الرغم من تشجيعه على القيام بذلك.

لذلك تابعت هذه المطالبة:

Great start! Let's make a few improvements:
- Change the app name to 'AI Vocab Checker'.
- Please change the layout of the app so that the list of words to detect is in a left column and the text to analyze is in a right column.
- Implement responsive design for mobile devices.
- Highlight each unique word or phrase in a different color.
- Add usage statistics for each detected word/phrase.
- Use suitable frameworks or libraries to make the app better.

وهذه هي النتيجة:

وهذا أفضل بكثير، وقد استغرق الأمر مطالبة إضافية واحدة فقط. قام كلود بتطبيق إطار عمل Bootstrap لتحقيق تصميم حديث وسريع الاستجابة ومكتبة mark.js لإبراز أفضل. أعجبت بكيفية تحسين تضمينها للتطبيق، سألت كلود عن الأطر أو المكتبات الأخرى التي يمكننا استخدامها، واقترح الذكاء الاصطناعي Vue.js، وChart.js، وTippy.js، وNatural، وFileSaver.js، وعدد قليل من الآخرين.

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

فيما يتعلق باحتياجاتي الشخصية، يمكن لهذا الإصدار من AI Vocab Checker أن يلبيهم جيدًا، وقد استغرق الأمر مني 15 دقيقة فقط لتطويره باستخدام مهاراتي المحدودة للغاية في تطوير الويب والتي اكتسبتها على مر السنين من خلال العديد من البرامج المجانية مواقع الويب.

صورة الغلاف ولقطة الشاشة بواسطة David Morelo.

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