فيديو جديد حنستعرض فيه نموذج Gemini 3.5 Flash الجديد من جوجل، ونتعرف على أهم مميزاته في السرعة، البرمجة، بناء التطبيقات، وتشغيل الوكلاء الذكيين. النموذج لا يركز فقط على الإجابة السريعة، بل يقدم أداء قويًا في إنشاء تطبيقات تفاعلية، التعامل مع الأكواد، وتحويل الأفكار إلى نتائج عملية داخل Gemini وCanvas.
نبدأ بشرح ما الذي يميز Gemini 3.5 Flash عن Gemini 3.1 Pro، ومتى يكون Flash هو الخيار الأفضل، خاصة في المهام التي تحتاج سرعة وإنتاجية وتكلفة أقل. بعد ذلك ننتقل إلى تجارب عملية، مثل إنشاء تطبيق محاكاة للنظام الشمسي، أنيميشن تفاعلي، لوحة تحكم للمبيعات، ومحاكاة خلية نحل، وكل ذلك من خلال أوامر نصية فقط.
الفيديو مناسب لكل من يهتم بالذكاء الاصطناعي، أدوات جوجل، البرمجة بدون كود، بناء التطبيقات بسرعة، واستخدام نماذج AI في الإنتاجية وصناعة المحتوى.
أمر تطبيق المجموعة الشمسية:
اصنع محاكاة تفاعلية ثلاثية الأبعاد للنظام الشمسي، دقيقة علميًا ومذهلة بصريًا، على شكل ملف HTML واحد مستقل بالكامل باستخدام Three.js يتم تحميلها من CDN.
يجب أن يبدو وكأنه ينتمي إلى موقع NASA، وليس مجرد شرح تعليمي للمبتدئين.
الفيزياء والدقة العلمية — غير قابلة للتفاوض:
جميع الكواكب الثمانية + بلوتو بأحجام نسبية متناسبة، مع استخدام مقياس لوغاريتمي لتحسين الرؤية.
فترات الدوران حول الشمس الحقيقية، لكن يتم تسريعها لتكون مناسبة للمشاهدة: سنة أرضية واحدة = 10 ثوانٍ افتراضيًا، مع إمكانية التعديل.
الميل المحوري الحقيقي للكواكب، مثل الأرض 23.5°، وأورانوس 97.8°، إلخ.
سرعات الدوران حول المحور الحقيقية بالنسبة لبعضها البعض.
مدارات بيضاوية وليست دوائر مثالية، باستخدام قيم الانحراف المداري الحقيقية.
حلقات زحل بنصف قطر داخلي وخارجي صحيحين، مع الميل المناسب.
قمر الأرض يدور حول الأرض بمقياس نسبي صحيح.
حزام كويكبات بين المريخ والمشتري يحتوي على أكثر من 200 جسيم.
الجودة البصرية:
كل كوكب يجب أن يمتلك إما Shader إجرائيًا فريدًا أو خامة عالية الجودة. استخدم روابط خامات NASA من solarsystemscope.com إن كانت متاحة، وإلا أنشئ أسطحًا إجرائية قائمة على الضوضاء Procedural Noise.
الشمس يجب أن تكون كرة متوهجة باستخدام Fragment Shader مخصص يتضمن: ضوضاء متحركة، تأثير الهالة Corona، Lens Flare، وBloom.
خلفية نجوم واقعية تحتوي على الأقل على 5000 نجم بدرجات سطوع مختلفة وتنوع بسيط في الألوان: أزرق، أبيض، أصفر، وأحمر.
الأرض يجب أن تحتوي على: محيطات زرقاء، قارات خضراء/بنية، طبقة سحب بيضاء تدور بشكل مستقل، توهج جوي على الحواف باستخدام Fresnel Shader، وأضواء مدن على الجانب الليلي.
حلقات زحل يجب أن تكون شفافة قليلًا مع تفاصيل جسيمات خفيفة.
المشتري يجب أن يُظهر أنماط السحب الشريطية.
إضافة Bloom خفيف على الشمس والنجوم اللامعة.
عناصر التحكم التفاعلية:
Orbit Controls: السحب لتدوير الكاميرا، عجلة الماوس للتقريب والتبعيد، والسحب بزر الماوس الأيمن للتحريك الجانبي Pan.
عند النقر على أي كوكب، تنتقل الكاميرا بسلاسة لتدور حوله عن قرب.
الضغط على مفتاح SPACE لإيقاف/استئناف الزمن.
الضغط على + / – لتسريع أو إبطاء الزمن، ضمن نطاق من 0.1x إلى 1000x.
الضغط على R لإعادة الكاميرا إلى العرض الافتراضي.
مفاتيح الأرقام من 1 إلى 9 للتركيز الفوري على كل كوكب.
وضع “Free Fly” يمكن تفعيله بمفتاح F، مع حركة WASD وتحكم بالنظر باستخدام الماوس.
واجهة المستخدم UI Overlay:
شريط علوي بسيط يعرض: تاريخ المحاكاة الحالي، مضاعف سرعة الزمن، والجسم الذي يتم التركيز عليه.
لوحة معلومات في أسفل اليسار تظهر عند اختيار كوكب، وتعرض:
- الاسم، النوع، القطر، الكتلة، الفترة المدارية، طول اليوم، وعدد الأقمار
- المسافة من الشمس، الحالية والمتوسطة
- معلومة “هل تعلم؟” في جملتين
- صورة حقيقية مصغرة للكوكب، استخدم Wikimedia Commons إن كان متاحًا، وإلا تخطَّها
دليل اختصارات في أسفل اليمين، قابل للطي.
يجب أن تستخدم الواجهة تأثير الزجاج المصنفر Frosted Glass باستخدام backdrop-filter: blur، وأن تبدو عصرية، وليست مثل تطبيق ويب من عام 2010.
الطبقات التعليمية — أزرار تبديل في لوحة جانبية:
“Show orbital paths” — عرض مسارات مدارية بيضاوية رفيعة ومتوهجة لكل كوكب.
“Show labels” — عرض أسماء الكواكب عائمة فوق كل كوكب.
“Show scale” — عرض مسطرة وحدات في الأسفل توضّح المسافات بوحدة AU.
“Show Lagrange points” — عرض علامات لنقطتي L1 وL2 بين الأرض والشمس.
“Show comet” — إضافة مذنب هالي على مساره البيضاوي الحقيقي.
القيود التقنية:
يجب أن يعمل بسلاسة بسرعة 60 إطارًا في الثانية على لابتوب متوسط المواصفات.
استخدم InstancedMesh لحزام الكويكبات وخلفية النجوم، ولا تنشئ 5000 Mesh منفصل.
طبّق Frustum Culling وLOD عند الحاجة.
جميع الأصول Assets يجب أن تكون إما إجرائية أو محمّلة من CDN، بدون ملفات محلية.
ملف HTML واحد فقط، مع تضمين كل CSS وJavaScript داخليًا.
صيغة الإخراج:
أخرج كود HTML الكامل فقط في كتلة واحدة. بدون شرح، بدون تغليف Markdown، بدون مقدمة. فقط الكود، جاهز للحفظ والفتح في المتصفح.
أمر الأنيمشين الخاص بكوب القهوة:
اعمل انيمشن
قصير مدته ٣٠ ثانية في صفحة HTML واحدة، يحكي قصة كوب قهوة الصباح. القصة دي بتمشي على ٥ مراحل: المرحلة الأولى (٦ ثواني): شمس بتطلع بالتدريج
من تحت لفوق على خلفية وردية وبرتقالية، وكلمة “صباح الخير” بتظهر بشكل
ناعم. المرحلة الثانية (٦ ثواني): مكنة
قهوة بتظهر، ومياه بتنزل من فوق وتعدي على البن، وقهوة بنية بتنزل في الكوب نقطة
نقطة. المرحلة الثالثة (٦ ثواني): الكوب
اتملى، وبخار بيطلع منه بحركة متموجة لفوق، والبخار بيتلف ويتكور بشكل جميل. المرحلة الرابعة (٦ ثواني): إيد بترسم بكوب
القهوة قلب على الفوم في الكوب (لاتيه آرت). المرحلة الخامسة (٦ ثواني): الكوب بيقرب من المشاهد ويتعمل عليه زووم، وفي
الآخر تظهر جملة “يومك سعيد” بحروف كبيرة وحلوة. شروط الانيمشن: • كل حاجة مرسومة بـ SVG أو CSS، مفيش صور
خارجية. • الحركة سلسة جداً، استخدم
easing مش حركة مستقيمة. • الألوان دافية
ومريحة للعين: بني، بيج، وردي، برتقالي. •
الخط حلو ومقروء، ويفضل خط عربي زي Cairo أو Tajawal. • الانيمشن يشتغل أوتوماتيك أول ما الصفحة
تفتح. • زرار صغير لإعادة التشغيل في
الكورنر. • أصوات خفيفة لو ينفع (صوت قهوة
بتنزل، صوت إيد بترسم). اطلع الكود كله في
ملف HTML واحد. بس الكود من غير شرح.
أمر للوحة التفاعلية لعرض بيانات ملف الإكسل:
اقرأ الملف المرفق وافهمه كويس، وبعدين اعمل داشبورد تفاعلية بصفحة HTML
واحدة. عايزة الداشبورد تكون فيها: • أربع كروت في الأعلى توضح أهم أرقام في
البيانات، وكل كرت يكون فيه الرقم الحالي ومقارنة بسيطة. • رسم بياني كبير في النص يوضح أهم اتجاه في
البيانات على مدى الوقت. • رسم دائري أو
أعمدة على الجنب يوضح أهم التصنيفات. •
جدول صغير تحت يعرض أفضل ١٠ نتايج. •
فلاتر فوق تخليني أقدر أصفّي البيانات حسب التاريخ أو التصنيف، وكل الرسومات تتحدث
لما أغير الفلتر. • قسم في الآخر اسمه
“أهم الملاحظات” تكتب فيه ٥ ملاحظات ذكية اكتشفتها من البيانات، وكل
ملاحظة بأرقام حقيقية من الملف. • زرار
للوضع الليلي في الكورنر الأعلى. اعمل
التصميم بألوان حلوة وفخمة، ومتستخدمش قوالب جاهزة. خليه يبان احترافي زي شغل
شركات كبيرة. اطلع الكود كله في ملف HTML
واحد، ومتشرحش حاجة، بس الكود.
قم باستخدام الأوامر السابقة للتجربة .. وأتمنى أن يكون الشرح ممتع ومفيد.
