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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

لذا، تابعت بهذا التوجيه:

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

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