Cipta glob interaktif bursa saham dunia dengan AI

Untuk Prompt Tuesday #11 ini, kami meminta AI menjana visualisasi HTML/JavaScript yang mengagumkan: glob 3D berputar di mana bursa saham utama dunia menyala berdasarkan status buka/tutup pasaran.

Di antara dua pembangunan di Linkeum, kadangkala muncul idea yang serta-merta membuat anda ingin menguji sejauh mana AI boleh pergi. Untuk Prompt Tuesday #11 ini, matlamatnya bercita-cita tinggi: meminta Qwen untuk menjana halaman HTML/JavaScript yang mampu memaparkan glob 3D yang berputar, dengan bursa saham terbesar di dunia diwakili oleh titik bercahaya yang berubah status bergantung kepada sama ada pasaran sedang dibuka atau ditutup.

Ideanya ringkas di atas kertas, tetapi sangat visual dalam pelaksanaannya. Setiap pusat kewangan harus muncul sebagai titik hijau yang berdenyut apabila bursa dibuka, atau merah apabila ditutup, dengan keupayaan untuk mengkliknya untuk memaparkan tetingkap kecil yang mengandungi maklumat utamanya.

Prompt yang digunakan dalam Qwen

Seperti yang sering berlaku untuk jenis penjanaan ini, prompt ditulis dalam bahasa Inggeris. Model penjanaan kod secara umumnya lebih memahami arahan teknikal terperinci dalam bahasa ini, terutamanya apabila ia melibatkan penggabungan struktur HTML, logik JavaScript, pemaparan visual, dan interaksi pengguna.

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.

Mengapa prompt ini menarik

Apa yang saya suka tentang prompt ini ialah ia tidak hanya meminta "glob 3D". Ia secara serentak mengenakan pemaparan visual, logik perniagaan, data geografi, dan tingkah laku interaktif, yang benar-benar mendorong AI untuk menghasilkan sesuatu yang hampir dengan produk mini dan bukannya sekadar contoh kod mudah.

Dengan kata lain, kami tidak hanya menguji keupayaan Qwen untuk menulis JavaScript. Kami juga menguji keupayaannya untuk memahami niat reka bentuk berorientasikan kewangan, dengan antara muka yang sudah menyerupai papan pemuka premium.

Beberapa pengubahsuaian dengan Gemini

Hasil pertama yang diperoleh dengan Qwen sudah sangat menjanjikan. Kami dapat melihat titik, animasi, interaksi klik, dan kami segera merasakan bahawa kami sangat hampir dengan hasil yang menakjubkan.

Walau bagaimanapun, beberapa pelarasan terpaksa dilakukan untuk menstabilkan paparan dan meningkatkan pementasan visual. Dengan bantuan Gemini, kami mengubah suai beberapa butiran teknikal dan pembentangan, terutamanya mengenai pemaparan glob, pembingkaian awal, kebolehbacaan benua, dan tingkah laku kamera semasa memuatkan.

Hasil yang menakjubkan

Hasil akhirnya sejujurnya menakjubkan. Kami mendapat glob 3D yang elegan, hidup, dan interaktif, dengan titik bercahaya yang serta-merta memberikan gambaran lantai perdagangan global.

Ini adalah jenis pengalaman yang menarik perhatian pada beberapa saat pertama. Dan yang paling penting, ia bukan sekadar gajet visual: di sebalik animasi ini, anda sudah boleh membayangkan kes penggunaan produk sebenar untuk menjejaki pasaran kewangan utama secara intuitif.

Apa seterusnya?

Ini mungkin bahagian paling menarik dalam Prompt Tuesday #11 ini. Pemaparannya cukup meyakinkan untuk membuatkan saya ingin pergi lebih jauh daripada sekadar artikel blog yang ringkas.

Saya akan cuba mengintegrasikan idea ini nanti ke dalam Linkeum, di bahagian Kewangan. Dengan lapisan data sebenar dan beberapa penambahbaikan tambahan, glob interaktif ini boleh menjadi elemen "kesan wow" yang sangat baik untuk pengguna.