Tạo quả địa cầu tương tác các sàn giao dịch chứng khoán thế giới bằng AI

Trong Prompt Tuesday #11 này, chúng tôi yêu cầu AI tạo ra một hình ảnh HTML/JavaScript ấn tượng: một quả địa cầu 3D đang quay, nơi các sàn giao dịch chứng khoán lớn trên thế giới sáng lên tùy thuộc vào trạng thái mở cửa của chúng.

Giữa hai quá trình phát triển trên Linkeum, đôi khi xuất hiện những ý tưởng khiến bạn ngay lập tức muốn kiểm tra xem AI có thể tiến xa đến đâu. Đối với Prompt Tuesday #11 này, mục tiêu rất tham vọng: yêu cầu Qwen tạo ra một trang HTML/JavaScript có khả năng hiển thị một quả địa cầu 3D đang quay, với các sàn giao dịch chứng khoán lớn nhất thế giới được biểu diễn bằng các điểm sáng thay đổi trạng thái tùy thuộc vào việc thị trường đang mở hay đóng.

Ý tưởng này đơn giản trên giấy tờ, nhưng rất trực quan khi thực hiện. Mỗi trung tâm tài chính sẽ xuất hiện như một điểm màu xanh lá cây nhấp nháy khi sàn giao dịch mở cửa, hoặc màu đỏ khi đóng cửa, với khả năng nhấp vào nó để hiển thị một cửa sổ nhỏ chứa thông tin chính của nó.

Prompt được sử dụng trong Qwen

Như thường lệ đối với loại tạo mã này, prompt được viết bằng tiếng Anh. Các mô hình tạo mã thường hiểu các hướng dẫn kỹ thuật chi tiết bằng ngôn ngữ này tốt hơn, đặc biệt là khi kết hợp cấu trúc HTML, logic JavaScript, kết xuất hình ảnh và tương tác của người dùng.

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.

Tại sao prompt này lại thú vị

Điều tôi thích ở prompt này là nó không chỉ yêu cầu "một quả địa cầu 3D". Nó đồng thời áp đặt kết xuất hình ảnh, logic nghiệp vụ, dữ liệu địa lý và hành vi tương tác, điều này thực sự buộc AI phải tạo ra thứ gì đó gần giống với một sản phẩm thu nhỏ chứ không chỉ là một ví dụ mã đơn giản.

Nói cách khác, chúng tôi không chỉ kiểm tra khả năng viết JavaScript của Qwen. Chúng tôi cũng đang kiểm tra khả năng hiểu ý định thiết kế định hướng tài chính của nó, với một giao diện đã gợi lên một bảng điều khiển cao cấp.

Một vài chỉnh sửa với Gemini

Kết quả đầu tiên thu được với Qwen đã rất hứa hẹn. Chúng tôi có thể thấy các điểm, hoạt ảnh, tương tác khi nhấp chuột và chúng tôi ngay lập tức cảm thấy rằng chúng tôi đã rất gần với một kết xuất ngoạn mục.

Tuy nhiên, một số điều chỉnh phải được thực hiện để ổn định màn hình và cải thiện việc dàn dựng hình ảnh. Do đó, với sự trợ giúp của Gemini, chúng tôi đã chỉnh sửa một số chi tiết kỹ thuật và trình bày, đáng chú ý là về kết xuất quả địa cầu, khung hình ban đầu, khả năng đọc của các lục địa và hành vi của camera khi tải.

Một kết quả đáng kinh ngạc

Kết quả cuối cùng thực sự đáng kinh ngạc. Chúng tôi nhận được một quả địa cầu 3D thanh lịch, sống động, tương tác, với các điểm sáng ngay lập tức tạo ấn tượng về một sàn giao dịch toàn cầu.

Đó chính xác là loại trải nghiệm thu hút sự chú ý trong vài giây đầu tiên. Và trên hết, nó không chỉ là một tiện ích hình ảnh: đằng sau hoạt ảnh này, bạn đã có thể tưởng tượng một trường hợp sử dụng sản phẩm thực tế để theo dõi các thị trường tài chính chính một cách trực quan.

Tiếp theo là gì?

Đây có lẽ là phần thú vị nhất của Prompt Tuesday #11 này. Kết xuất đủ sức thuyết phục để khiến tôi muốn tiến xa hơn một bài viết blog đơn giản.

Tôi sẽ cố gắng tích hợp ý tưởng này sau vào Linkeum, trong phần Tài chính. Với một lớp dữ liệu thực và một vài tinh chỉnh bổ sung, quả địa cầu tương tác này có thể trở thành một yếu tố "hiệu ứng wow" tuyệt vời cho người dùng.