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

في إصدار Prompt Tuesday #11 هذا، نطلب من الذكاء الاصطناعي إنشاء تصور مرئي مذهل باستخدام HTML/JavaScript: كرة أرضية ثلاثية الأبعاد دوارة تضيء فيها البورصات العالمية الكبرى بناءً على حالة افتتاحها.

بين عمليتي تطوير على Linkeum، تظهر أحياناً أفكار تجعلك ترغب على الفور في اختبار المدى الذي يمكن أن يصل إليه الذكاء الاصطناعي. بالنسبة لـ Prompt Tuesday #11، كان الهدف طموحاً: مطالبة Qwen بإنشاء صفحة HTML/JavaScript قادرة على عرض كرة أرضية ثلاثية الأبعاد دوارة، حيث يتم تمثيل أكبر بورصات العالم بنقاط مضيئة تتغير حالتها اعتماداً على ما إذا كان السوق مفتوحاً أم مغلقاً.

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

الموجه المستخدم في Qwen

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

Act as an expert Front-End Developer and Data Visualization specialist. Write a modern, responsive single-page HTML file that renders an interactive 3D globe using the globe.gl library (and three.js) via CDN, along with Tailwind CSS for styling.

Here are the exact requirements:

1. The Globe: Render a beautiful, dark-themed, highly detailed 3D globe. It should auto-rotate slowly.
2. The Data: Plot the top 10 major world stock exchanges (e.g., NYSE, LSE, Tokyo, Shanghai, Euronext Paris, etc.) using their real latitude and longitude.
3. Market Status Logic: Write JavaScript logic that uses the current UTC time to determine if each market is currently OPEN or CLOSED based on their real-world trading hours.
4. Visual Markers: Represent each exchange on the globe as a glowing, pulsating point. Make the point Green and pulsating if the market is OPEN, and Red and pulsating if the market is CLOSED.
5. Interactivity: When the user clicks on a point:
   • Stop the globe's auto-rotation.
   • Open a sleek, dark-themed HTML pop-up/tooltip floating above the globe displaying the Exchange Name, City, Local Time, and Status (Open/Closed in green/red text).
   • Clicking elsewhere on the globe should close the pop-up and resume rotation.
6. UI/Aesthetics: Give the page a premium, high-end fintech aesthetic (dark mode, glassmorphism for the pop-up, sleek typography).

Output the complete, fully functional HTML, CSS, and JS code in a single file so I can copy-paste it into an index.html file and run it immediately in my browser.

لماذا كان هذا الموجه مثيراً للاهتمام

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

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

بعض اللمسات بمساعدة Gemini

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

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

نتيجة مذهلة

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

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

وماذا بعد؟

ربما يكون هذا هو الجزء الأكثر إثارة للاهتمام في Prompt Tuesday #11. العرض مقنع بما يكفي ليجعلني أرغب في المضي قدماً لأكثر من مجرد مقال بسيط على مدونة.

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