مواجهة بين أفضل أربعة موديلات! مراجعة تُظهر قوة كاميرا Deepseek R1

على مدى الأيام القليلة الماضية، أصبح Deepseek-R1 0528 مفتوح المصدر رسميًا.

على LiveCodeBench، أداؤه يكاد يكون على قدم المساواة مع أداء OpenAI's o3 (عالي)؛ وفي اختبار معياري متعدد اللغات من Aider، فإنه يتفوق على Claude Opus.

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

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

باستخدام نفس الموجه، أرسلناه إلى Claude Opus 4، وSonnet 4، وGemini 2.5 Pro، و DeepSeek R1-0528، وطلب منهم التنافس في ست مهام تطوير واجهة أمامية متزايدة الصعوبة.

بالنسبة لأولئك الذين لا يستطيعون الانتظار، إليكم الاستنتاج:

يتخلف Deepseek-R1-0528 قليلاً عن Opus 4 في قدرات الواجهة الأمامية ولكنه يتفوق عليه في الأداء السوناتة 4 وGemini 2.5 Pro.

بشكل أساسي، أي مهمة يمكن لـ Opus إكمالها، يمكن لـ R1 إكمالها أيضًا، وحتى المهام التي لا يمكن لـ Opus 4 إكمالها، يمكن لـ R1 التعامل معها، على الرغم من معدلات الإكمال وجودة النتيجة المنخفضة قليلاً.

وإذا أخذنا في الاعتبار فارق السعر بين R1 والثلاثة الآخرين، فإن هذا الأداء ممتاز بالفعل، ولا يمكننا إلا أن نتخيل مدى الإعجاب الذي سيقدمه R2.

الاختبار 1: نظام إدارة المستودعات

موجه: من فضلك ساعدني في إنشاء أداة إدارة منتجات كاملة تعتمد على الويب مع المتطلبات التالية:

المتطلبات الوظيفية

1. إدارة المنتجات

• إدخال معلومات المنتج: اسم المنتج، النوع/الفئة، رقم SKU، السعر، كمية المخزون
• إدارة صورة المنتج:دعم تحميل الصور ومعاينتها (محاكاة باستخدام محدد الملفات)
• عرض قائمة المنتجات:عرض جميع المنتجات في شكل جدول، مع دعم البحث والتصفية
• تحرير المنتج:دعم تعديل معلومات المنتج
• حذف المنتج:دعم حذف المنتج (مع مطالبة التأكيد)

2. إدارة المخزون

• العمليات الواردة:زيادة كمية مخزون المنتج، وتسجيل وقت و كمية الوارد
• العمليات الصادرة: تقليل كمية مخزون المنتج، وتسجيل وقت الخروج والكمية
• سجلات الجرد:يعرض سجل تغييرات المخزون لكل منتج

3. ميزات الواجهة

• لوحة التحكم:يعرض إحصائيات مثل العدد الإجمالي للمنتجات وقيمة المخزون الإجمالية وتنبيهات انخفاض المخزون وما إلى ذلك.
• تصميم متجاوب:قابل للتكيف مع أجهزة سطح المكتب والأجهزة المحمولة
• استمرارية البيانات:يستخدم localStorage لحفظ البيانات

المتطلبات الفنية

الأنماط والأيقونات

• إطار عمل CSS:يستخدم TailwindCSS 3.0+ CDN
• مكتبة الأيقونات:يستخدم Heroicons أو Feather Icons CDN
• الخط:استخدم خطوط جوجل

بنية الكود

• تطبيق من صفحة واحدة: HTML + CSS + جافا سكريبت
• التصميم المعياري:تقسيم الوظائف إلى وحدات JavaScript مختلفة
• تنسيق البيانات:استخدم تنسيق JSON لتخزين بيانات المنتج

متطلبات تصميم الواجهة

• واجهة المستخدم الحديثة:تصميم واجهة بسيط وجميل
• مخطط الألوان:استخدم مجموعات الألوان التجارية الاحترافية
• ردود الفعل التفاعلية: نقرات الأزرار، والتحقق من صحة النموذج، والتأثيرات التفاعلية الأخرى
• التحقق من صحة النموذج:التحقق من صحة الحقل المطلوب، والتحقق من صحة تنسيق البيانات

مثال على بنية البيانات

يرجى إنشاء ملف HTML كامل يحتوي على كل أكواد CSS وJavaScript الضرورية، مع التأكد من أن جميع الميزات وظيفية ويمكن تشغيلها مباشرة في المتصفح.

لنلقِ نظرة على نتائج الاختبار. المنطق في الواقع معقد للغاية، إذ يختبر طول سياق النموذج، وجمالياته، وقدراته على المعالجة المنطقية.

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

ديب سيك-R1-0528: النسخة المُحسّنة من R1 قوية جدًا. كما ترون، الواجهة احترافية للغاية، ويمكنك أيضًا إنشاء منتجات جديدة، وإجراء عمليات صادرة وواردة عادية، وتقسيم تقارير المنتجات وإدارة المخزون والمخزون إلى ثلاث صفحات، وهو أمر واضح جدًا بشكل عام. هناك أيضًا صفحة لوحة معلومات مخصصة، وقد كتب بعض البيانات النموذجية للاختبار. النماذج الأخرى لا تحتوي على بيانات، وإضافة المنتجات لا تعمل، لذا فإن الاختبار مستحيل تمامًا.

كلود أوبس 4: يبدأ بواجهة كبيرة وبسيطة للغاية، باستخدام شريط تنقل علوي بدلاً من الشريط الجانبي الشائع في منصات SaaS. إضافة المنتجات تؤدي إلى خطأ عند الحفظ، مما يجعل الاختبار مستحيلاً.

كلود سونيت 4: مقارنةً بـ Opus 4، أصبحت الواجهة أبسط. لا يستجيب زر "إضافة منتج"، ولا تظهر أي نافذة منبثقة للنماذج. الصفحات الأخرى مجرد عناصر بديلة.

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

الاختبار 2: محرر الرسوم المتحركة بالبكسل

المرحلة التالية هي اختبار للقدرة البصرية. طلبتُ منهم إنشاء مُحرّر رسوم متحركة بتقنية البكسل باستخدام P5.js، مع دعم أوضاع الحركة، وتعديل أشكال النقاط وأحجامها وسرعاتها، وشروط أخرى.

موجه: قم بإنشاء مولد رسوم متحركة تفاعلية لفن البكسل على كامل الشاشة استنادًا إلى P5.js، مع تلبية المتطلبات الفنية التالية:

الميزات الأساسية

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

المعلمات القابلة للتعديل

• كثافة النقاط: التحكم في عدد النقاط لكل صف/عمود
• حجم الشكل: اضبط حجم النقاط
• سرعة الرسوم المتحركة: التحكم في سرعة وسعة تأثير الرسوم المتحركة
• تباعد الشبكة: اضبط المسافة بين النقاط

المواصفات الفنية

• استخدم HTML5، وTailwindCSS 3.0+ (تم تقديمه عبر CDN)، وP5.js
• تنفيذ وظيفة التبديل الكاملة بين الوضعين الداكن/الفاتح، والافتراضي هو إعدادات النظام
• يجب أن يتضمن الكود منطق تحسين الأداء، وعرض النقاط فقط داخل المنطقة المرئية وبالقرب من الحواف
• يجب أن تعمل الرسوم المتحركة بسلاسة دون تأخير

تصميم متجاوب

• يجب أن يتم عرض الصفحات بشكل مثالي على جميع الأجهزة (الجوال، والكمبيوتر اللوحي، وسطح المكتب)
• يجب أن تكون لوحات التحكم قابلة للطي/التوسيع في العرض المحمول
• تحسين تخطيط وحجم الخطوط لأحجام الشاشات المختلفة
• ضمان تجربة لمس جيدة على الأجهزة المحمولة

عناصر الواجهة

• محدد وضع الرسوم المتحركة (الموجة، النبضة، التموج، الضوضاء)
• محدد الشكل (يعرض أشكالًا مختلفة مع أيقونات)
• عناصر التحكم في شريط التمرير: الكثافة والحجم والسرعة والتباعد
• زر تبديل السمة
• عرض معلومات تراكب المصفوفة والعدد الإجمالي للنقاط

ألقِ نظرة على النتائج. بصراحة، لم أتوقع أن يكون أداء النماذج الأخرى بهذا السوء في هذا الاختبار. باستثناء Deepseek-R1، لم تعمل الرسوم المتحركة في النماذج الأخرى إطلاقًا.

ديب سيك-R1-0528: أداء مثالي. جميع الأزرار والمزلقات تعمل بشكل طبيعي، والنقاط تتحرك بسلاسة. حتى أنه أضاف بيانات مصفوفة النقاط، وتبقى الألوان ثابتة بعد التبديل إلى الوضع الليلي. المشكلة البسيطة الوحيدة هي وجود مشكلة طفيفة في حالة اختيار اللون، لكنها طفيفة مقارنةً بالأداء الكارثي للطرازات الأخرى.

كلود أوبس 4: خبر سار: يحتوي على رسومات بكسل. خبر سيئ: لا يتحرك. يمكن تشغيل المحتوى على الجانب الأيمن بشكل طبيعي، لكن نظام الألوان غير صحيح بعد التبديل إلى الوضع الليلي.

كلود سونيت 4: هذه كارثة. لا يوجد فن بكسل، وحتى حالة اختيار الأزرار مفقودة. أشرطة التمرير مجرد نقاط - من الأفضل استخدام المكونات الافتراضية.

جيميني 2.5 برو: يُبلغ أيضًا عن خطأ في عدم وجود شبكة بكسل. يمكن تشغيل المحتوى على الجانب الأيمن بشكل طبيعي، ويعمل تبديل السمات بشكل جيد، ولكن المكونات الافتراضية سيئة بعض الشيء.

الاختبار 3: أداة استخراج تدرج الألوان في الصورة

هذه أداةٌ كتبتُها سابقًا. لا يوجد شرحٌ مُفصّلٌ لمنطقها، ولكن هناك شرحٌ مُفصّلٌ للأسلوب. وظيفتها الرئيسية هي استخراج خمس مجموعاتٍ من ألوان التدرجات من صورة.

المطلوب: إنشاء صفحة ويب HTML بناءً على محتوى الملف التالي، مع دعم استخراج خمس مجموعات من ألوان التدرج من الصور المُحمّلة، وتمكين المستخدمين من نسخ مجموعات ألوان التدرج السداسي عشر مباشرةً. يجب تنفيذ وظيفة استخراج الألوان.

1. استخدم تصميمًا مرئيًا بأسلوب NetEase Cloud Music، وخلفية بيضاء بلون مشابه لـ #FE1110 كإبراز
2. أبرز الخطوط أو الأرقام الكبيرة لإبراز النقاط الرئيسية. أضف عناصر بصرية كبيرة الحجم لإبراز نقاط التركيز، مما يخلق تباينًا مع العناصر الأصغر.
3. امزج النصوص الصينية والإنجليزية. استخدم أحرفًا صينية كبيرة وغامقة، ونصوصًا إنجليزية صغيرة كعلامات مميزة.
4. استخدم رسومات خطوط بسيطة لتوضيح البيانات أو كعناصر زخرفية.
5. استخدم تدرج الشفافية لألوان التمييز لإنشاء تأثير مستوحى من التكنولوجيا، ولكن تأكد من عدم اختلاط ألوان التمييز المختلفة مع بعضها البعض.
6. محاكاة الرسوم المتحركة للموقع الرسمي لشركة Apple، من خلال تحريك الرسوم المتحركة عن طريق تمرير الماوس
7. يمكن الرجوع إلى البيانات من مكونات المخططات عبر الإنترنت، مع أنماط متوافقة مع الموضوع
8. استخدم Framer Motion (عبر CDN)
9. استخدم HTML5، وTailwindCSS 3.0+ (عبر CDN)، وJavaScript الضروري
10. استخدم مكتبات الأيقونات الاحترافية مثل Font Awesome أو Material Icons (عبر CDN)
11. تجنب استخدام الرموز التعبيرية كرموز أساسية
12. يعرض زر الكبسولة الموجود في الزاوية اليسرى السفلية اسم المستخدم الخاص بالمؤلف على تويتر

في هذه الحالة، قام كلود أخيرًا بعمل رائع. تفاصيل الصفحة وجماليات Deepseek-R1-0528 مثيرة للإعجاب، لكن الوظيفة غير مُطبّقة. صفحات Opus 4 وSonnet 4 أبسط، لكنها على الأقل عملية، بينما Gemini غير عملية على الإطلاق.

ديب سيك-R1-0528: بعد استخدامي لموجهتي مرة أخرى، أصبحت جمالية صفحة Deepseek لا مثيل لها. كما أضاف إليها محتوىً مُحسّنًا لمحركات البحث، مثل سيناريوهات التطبيق وأوقات المعالجة. بطاقات العرض ذات الألوان المتدرجة غنية بالتفاصيل، ولكن لم يتم تطبيق منطق اختيار الألوان.

كلود أوبس 4: هذه المرة، لم يُخيب كلود الآمال، إذ أكمل وظائف الصفحة، لكن محتواها بسيط جدًا، إذ لا يحتوي إلا على مكان لرفع الصور والنتائج، كما أن آلية اختيار الألوان ضعيفة. مع ذلك، على الأقل، يعمل بشكل جيد.

كلود سونيت 4: كما أكمل Sonnet 4 الوظيفة، وأعتقد أن نتائج Sonnet أفضل من نتائج Opus، على الرغم من أنها لا تزال ليست غنية مثل Deepseek.

جيميني 2.5 برو: هذا هو الأسوأ. ليس فقط تفاصيل الصفحة وجمالياتها مفقودة، بل إن وظائفها غير مطبقة أيضًا، وتتعطل عند بدء التشغيل.

الاختبار الرابع: موقع اقتباسات الضوضاء البيضاء اليومية

الموقع التالي هو مُولّد اقتباسات يومية للضوضاء البيضاء، وهو مثالي لإضافة صفحة تبويب جديدة. يدعم تشغيل الضوضاء البيضاء من Spotify، وتعرض صفحة الويب

موجه: من فضلك ساعدني في إنشاء موقع ويب بسيط وأنيق لعرض الأسعار اليومية مع المتطلبات التالية:

التصميم المرئي

• صورة الخلفية:قم باختيار صور المناظر الطبيعية عالية الجودة بشكل عشوائي من الروابط التالية كصورة خلفية
• روابط الصور:XXXX
• معالجة الصور:أضف قناعًا أسود 25% وتشويشًا طفيفًا في Gaussian لضمان بقاء النص واضحًا وقابلًا للقراءة
• الأسلوب العام:بسيطة وحديثة، مع صور المناظر الطبيعية كخلفية لصفحة الويب لتعزيز الانغماس
• استخدم anime.js (تم تقديمه عبر CDN: JsDelivr jsdelivr.com) لإطار عمل الرسوم المتحركة، وHTML5، وTailwindCSS 3.0+ (تم تقديمه عبر CDN)، وJavaScript الضروري، واستخدم مكتبات الأيقونات الاحترافية مثل Font Awesome أو Material Icons (تم تقديمه عبر CDN).

وحدة عرض الوقت

• قمة:عرض تنسيق الشهر واليوم (على سبيل المثال، "29 مايو")، بخط أصغر، في المنتصف
• الصف الثاني:يعرض التنسيق "الأسبوع X · التقويم القمري X الشهر X اليوم X" بخط أصغر
• مركز:يسلط الضوء على التاريخ الحالي بخط أبيض كبير، في المنتصف

وحدة عرض الاقتباس

• محتوى:يعرض بشكل عشوائي اقتباسات كلاسيكية من الفلاسفة والكتاب الصينيين والأجانب
• تَخطِيط:الاقتباسات في المنتصف، وحجم الخط معتدل، ومسافة السطور مريحة
• الإسناد:يتم عرض "الكاتب، XXX" أو "الفيلسوف، XXX" في أسفل اليمين
• مكتبة الاقتباسات:يحتوي على اقتباسات حول مواضيع مختلفة مثل الدافع ورؤى الحياة والحكمة

وظيفة تشغيل الموسيقى

• موقع:الزاوية اليسرى السفلية من الصفحة، مطوية بشكل افتراضي
• محتوى:تضمين قائمة تشغيل الضوضاء البيضاء في Spotify
• شفرة:

التنفيذ الفني

• تصميم متجاوب:مُكيّف لأجهزة سطح المكتب والأجهزة المحمولة
• اختيار الخط:استخدم الخطوط الصينية الأنيقة، المقدمة من Google Fonts
• مخطط الألوان:استخدم النص الأبيض بشكل أساسي لضمان إمكانية القراءة على جميع الخلفيات
• تحسين التحميل:تحميل الصور بشكل كسول لتحسين أداء الصفحة

الميزات التفاعلية

• التحديث التلقائي:تغيير صورة الخلفية والاقتباس تلقائيًا كل يوم
• التحديث اليدوي:يوفر زر تحديث للسماح للمستخدمين بتغيير المحتوى يدويًا

أسلوب كتابة الإعلانات

• اختيار الاقتباس:أفضّل الاقتباسات القصيرة والإيجابية والفلسفية
• أسلوب اللغة:موجز وقوي، وتجنب الطول المفرط
• تصنيف الموضوع:رؤى الحياة، النمو الملهم، الأفكار الحكيمة، التعبير العاطفي، وما إلى ذلك.

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

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

لا بد من القول إن برنامج Claude Opus 4 لا يزال يتمتع بمكانة مرموقة في هذا المجال، بفضل اهتمامه الدقيق بالتفاصيل. كما أن برنامج Gemini 2.5 Pro جيد أيضًا، حتى أنه يضيف تأثيرات متحركة إلى انتقالات الصور. أما برنامجا Deepseek وSonnet 4 فهما بنفس المستوى.

ديب سيك-R1-0528: شغّلتُ Deepseek أولاً، ووجدتُه جيداً بالفعل. أول مشكلة في التصميم العام كانت زر الموسيقى في الزاوية السفلية اليسرى، الذي كان مسطحاً بعض الشيء. واجه قسم الاقتباس أيضاً مشاكل - لم يكن من المفترض إضافة القناع الأسود، وكانت محاذاة النص غير دقيقة بعض الشيء. مع ذلك، أُضيف تأثير رسوم متحركة للتحديث.

كلود أوبس 4: جماليات Opus 4 لا تشوبها شائبة. حجم ومسافات جميع الخطوط مريحة للغاية، وقد تمت معالجة اقتباسات الأقوال الشهيرة بشفافية، سواءً في نص الاقتباس أو بين علامتي الاقتباس. حتى مشغل Spotify مُدمج بواجهة مستخدم مع خاصية التوسيع/الطي المتحركة. إنه مثالي.

كلود سونيت 4: تأثير سونيت ٤ مشابه لمشكلة ديب سيك. يمكن تحسين زر تشغيل الموسيقى، وحجم النص، والمحاذاة، والتباعد بشكل أكبر.

جيميني 2.5 برو: تأثير جيميني جيد أيضًا، لكن إزالة ظل النص سيجعله أفضل. كما خصّص واجهة مستخدم مشغل سبوتيفاي، وتفاصيل النص ممتازة. تأثير الانتقال ملحوظ، مع تأثير تمدد على الصورة.

الاختبار 5: إنشاء صفحة تطبيق النوم

المرحلة التالية هي اختبار تطبيق الهاتف المحمول. اطلب من كلٍّ منهم إنشاء تطبيق لمراقبة النوم. سيحدد هذا الموجه الحزمة التقنية ومتطلبات التصميم، وسيتطلب إنشاء صفحات تفاعلية متعددة.

موجه: متطلبات تطوير تطبيق مراقبة النوم

نظرة عامة على المشروع

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

متطلبات المكدس الفني

تقنيات الواجهة الأمامية

– HTML5 - هيكل الصفحة

– TailwindCSS الإصدار 3.0+ - إطار العمل الأسلوبي (تم تقديمه عبر CDN)

– جافا سكريبت - منطق التفاعل الضروري

– Anime.js الإصدار 4.0.2 - مكتبة تأثيرات الرسوم المتحركة

• شبكة توصيل المحتوى: https://cdn.jsdelivr.net/npm/animejs@4.0.2/+esm

الأيقونات والرسوم البيانية

• مكتبة الأيقونات: Font Awesome أو Material Icons (CDN)
• مكونات الرسم البياني: يجب أن تكون مكونات الرسم البياني عبر الإنترنت والأنماط متوافقة مع الموضوع
• تصور البيانات: يدعم عرض مخطط بيانات النوم

متطلبات التصميم

تصميم متجاوب

• تخطيط متجاوب بالكامل
• تصميم يركز على الهاتف المحمول أولاً
• عرض جيد على كل من أجهزة سطح المكتب والأجهزة المحمولة

تأثيرات التفاعل

• تفاعل الأزرار: تأثير مكبر قليلاً عند التمرير فوقها

تفاعل النموذج: عرض حدود التدرج عند التركيز على حقل الإدخال

تفاعل البطاقة: قم بتغميق الظل عند التمرير

تأثيرات الرسوم المتحركة: استخدم Anime.js لتحقيق رسوم متحركة سلسة للصفحة

متطلبات الصفحة الوظيفية

يرجى إنشاء جميع الصفحات المطلوبة لتطبيق مراقبة النوم، بما في ذلك على سبيل المثال لا الحصر:

• الصفحة الرئيسية/لوحة المعلومات
• صفحة سجل النوم
• صفحة تحليل البيانات
• صفحة الإعدادات
• الصفحات الوظيفية الأخرى ذات الصلة

متطلبات إخراج الكود

• كل صفحة عبارة عن ملف HTML مستقل
• هيكل الكود واضح مع التعليقات الكاملة
• تأكد من إمكانية الوصول إلى جميع روابط CDN
• توفير كود كامل وقابل للتنفيذ

من حيث منطق الهاتف المحمول وواجهته، أثبت Cluade Opus 4 قوته مجددًا، حيث أكمل صفحات متعددة بمنطق جيد. بينما أنتجت النماذج الأخرى صفحة واحدة فقط، إلا أن Deepseek R1 0528 حقق نجاحًا باهرًا من حيث التصميم، بأسلوبه الجميل. ورغم أنه لم ينشئ سوى صفحة واحدة، إلا أنه كان مكتملًا للغاية.

ديب سيك-R1-0528: تم إنشاء صفحة واحدة فقط، لكن المظهر العام جيد. تفاصيل البطاقات والتعامل مع الأيقونات مُتقن، والصفحة كاملة وطويلة. بالإضافة إلى ذلك، تم تطبيق تصميم متجاوب للتصفح، مما أدى إلى تصميمات مختلفة تمامًا على الأجهزة المحمولة وأجهزة الكمبيوتر.

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

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

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

الاختبار 6: الوظائف المعقدة - تتريس

أخيرًا، اختتمت باختبار لعبة صغير. صممتُ لعبة تتريس معقدة نسبيًا، تتضمن كتلًا خاصة، وتبديلًا للموضوعات، وتوقعًا لهبوط الكتل، وتخزينًا للكتل، وغيرها الكثير - تحدٍّ حقيقي.

موجه: من فضلك ساعدني في إنشاء لعبة ويب Tetris وظيفية بالكامل وجذابة بصريًا مع المتطلبات التالية:

ميزات اللعبة الأساسية

1. آلية تتريس كاملة: 7 كتل قياسية (I، O، T، S، Z، J، L)
2. ضوابط سلسة: حركة يمينًا ويسارًا، دوران، إسقاط سريع، إسقاط فوري
3. نظام الإزالة الذكي:يدعم إزالة 1-4 صفوف في المرة الواحدة باستخدام تأثيرات الرسوم المتحركة الخاصة
4. نظام الصعوبة التدريجي:يزيد تلقائيًا من سرعة السقوط والمستوى بناءً على عدد الصفوف التي تم إزالتها

الميزات المتقدمة

1. نظام المعاينة: يعرض الكتل التالية والتالي-التالية
2. وظيفة الإيقاف المؤقت: اضغط باستمرار على زر "التثبيت" لتخزين الكتلة الحالية مؤقتًا. يُستخدم مرة واحدة فقط في كل جولة.
3. كتل الأشباح:يعرض موضع هبوط الكتل بشكل شبه شفاف
4. نظام كومبو:المسح المستمر يمنح نقاطًا إضافية وتأثيرات بصرية
5. المهارات الخاصة:
   1. كتلة القنابل (تطهر المنطقة المحيطة)
   2. مسح بالليزر (يمسح الصف بأكمله)
   3. توقف مؤقت (تتوقف الكتل عن السقوط لمدة 3 ثوانٍ)

متطلبات التصميم المرئي

1. واجهة المستخدم الحديثة:
   1. خلفية متدرجة أو تأثيرات جسيمية
   2. لوحة لعبة تأثير الزجاج
   3. انتقالات الرسوم المتحركة السلسة
   4. تصميم متجاوب للشاشات المختلفة
2. تأثيرات بصرية غنية:
   1. رسوم متحركة سلسة للكتل المتساقطة والدوارة
   2. تأثيرات الانفجار أو الوميض عند التخلص منها
   3. تأثير اهتزاز الشاشة عند تحقيق المجموعة
   4. رسوم متحركة للاحتفال عند ترقية المستوى
3. نظام الموضوع:على الأقل 3 موضوعات بصرية مختلفة للتبديل بينها

نظام المؤثرات الصوتية

1. ردود الفعل الصوتية الكاملة: الحركة، الدوران، الهبوط، الإقصاء، نهاية اللعبة، إلخ.
2. موسيقى خلفية:موسيقى خلفية للعبة متكررة
3. التحكم في مستوى الصوت: تأثيرات صوتية قابلة للتعديل بشكل مستقل ومستوى صوت الموسيقى الخلفية

أوضاع اللعبة

1. الوضع الكلاسيكي:لعبة تتريس التقليدية
2. الوضع المحدود بالوقت: تحقيق أعلى الدرجات في غضون فترة زمنية محددة
3. وضع التحدي:عقبات محددة مسبقًا لزيادة الصعوبة
4. وضع زين:لا يوجد ضغط وقت، متعة خالصة للعبة

ميزات إحصاءات البيانات

1. إحصائيات في الوقت الحقيقي: النتيجة الحالية، المستوى، عدد الخطوط التي تم مسحها، وقت اللعبة
2. تاريخ: أعلى نتيجة، أفضل مستوى، إجمالي وقت اللعبة
3. نظام الإنجاز: فتح إنجازات اللعبة المختلفة
4. التخزين المحلي:حفظ سجلات اللعبة والإعدادات

المتطلبات الفنية

1. يستخدم HTML5/CSS3/JavaScript النقي، لا يتطلب أطر خارجية
2. هيكل الكود واضح:البرمجة الموجهة للكائنات، التصميم المعياري
3. تحسين الأداء: رسوم متحركة سلسة بمعدل 60 إطارًا في الثانية، بدون تأخير
4. التوافق:يدعم المتصفحات الحديثة السائدة
5. تصميم متجاوب:متوافق مع أجهزة الكمبيوتر والأجهزة المحمولة

تجربة المستخدم

1. تعليمات بديهية:البرنامج التعليمي المدمج ومطالبات الأزرار
2. وظيفة الإيقاف المؤقت/الاستئناف:إيقاف اللعبة مؤقتًا في أي وقت
3. قائمة الإعدادات:ضبط صعوبة اللعبة والمؤثرات الصوتية والمؤثرات البصرية وما إلى ذلك.
4. حفظ حالة اللعبة:يدعم حفظ اللعبة واستئنافها

متطلبات جودة الكود

1. تعليقات مفصلة:يجب أن يكون لكل وظيفة وجزء مهم من التعليمات البرمجية وصف
2. معالجة الأخطاء:آلية شاملة لالتقاط الاستثناءات ومعالجتها
3. كود أنيق:اتبع أفضل الممارسات، وسهلة الفهم والصيانة
4. قابلية التوسعة:من السهل إضافة ميزات جديدة في المستقبل

يرجى تقديم ملفات HTML كاملة تحتوي على جميع أكواد CSS وJavaScript لضمان إمكانية تشغيلها مباشرةً في المتصفح. يجب أن يُظهر الكود مهارات برمجة احترافية وفهمًا عميقًا لتطوير الألعاب.

في اللعبة المصغرة، يُحدث كلود شيئًا ما. قام كلٌّ من Opus وSonnet بتوليد كتل Tetris المقابلة حسب الحاجة، وخاصةً منطق الكتل الخاصة. عالج Deepseek الموضوع الذي أغفله كلود، لكنه أغفل الكتل الخاصة، مما أدى إلى توليد Gemini 2.5 Pro كتلًا غير قابلة للعب.

ديب سيك-R1-0528: أُنجزت المهمة على أكمل وجه ووفقًا للمواصفات، ولكن تم حذف تصميم الكتلة الخاص ولم يُنفَّذ إطلاقًا. قد يكون ذلك بسبب مشاكل في اتباع التعليمات. تشبه صفحة الويب بأكملها واجهة اللعبة، حيث تظهر جميع الأزرار كمكونات قياسية.

كلود أوبس 4: أكملتُ منطق الكتل الخاصة وغيرها من المنطق دون مشاكل، لكنه تجاهل طلب تبديل السمة، الذي لم يُطبّقه. مقارنةً بمشاكل DeepSeek، تُعدّ هذه مشكلةً أصغر، لكن الواجهة مُبرمجةٌ بشكلٍ ثابتٍ بدون منطق استجابة، لذا فإنّ نسبها غير دقيقة، مما يجعل بعض الأزرار غير قابلةٍ للنقر.

كلود سونيت 4: مشابه لـ Opus، لكنني أعتقد أن Sonnet 4 أفضل منه. تعديل الصفحة جيد أيضًا. يبدو أن Sonnet فاز، إذ أكمل جميع الوظائف المطلوبة.

جيميني 2.5 برو: يعاني الجوزاء باستمرار من مشاكل في المنطق المعقد. هذه المرة، كان غير قابل للاستخدام تمامًا بسبب وجود خلل في وضع الطوب، مما يجعل التنبؤ بمكان سقوطه مستحيلًا. إنه الأسوأ.

الآن، أعتقد أنك مندهش مثلي من أداء DeepSeek-R1.

من الصعب تصديق أن هذا مجرد ترقية بسيطة للطراز. لنقارن أسعار هذه الطرازات مع DeepSeek R1 0528.

سعر Opus 4 أعلى بنحو 30 مرة، وذلك باستخدام تسعير Openrouter - السعر الرسمي سيكون أكثر ذهولاً.

الطراز	طول السياق	سعر الإدخال ($/M رمز)	سعر الإنتاج ($/M رمز)	سعر الصورة ($/K رمز)
DeepSeek R1 0528	160 ألف	0.50	2.18	–
معاينة Gemini 2.5 pro	1000 ألف	1.25	10	5.16
كلود سونيت 4	200 ألف	3.00	15	4.80
كلود أوبس 4	200 ألف	15.00	75	24.00

بصفتي شخصًا يتابع أخبار الذكاء الاصطناعي يوميًا، فقد شهدتُ عددًا لا يُحصى من "الاختراقات" التي تبيّن في النهاية أنها "مخيبة للآمال". لكن هذه المرة الأمر مختلف. لقد منحني DeepSeek-R1 أملًا حقيقيًا.

فرق السعر يصل إلى 30 ضعفًا، ولكن الأداء متساوٍ تقريبًا.

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

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