Створення інтерактивного глобуса світових бірж за допомогою ШІ

У цьому випуску Prompt Tuesday #11 ми просимо ШІ згенерувати вражаючу візуалізацію на HTML/JavaScript: 3D-глобус, що обертається, на якому найбільші світові біржі підсвічуються залежно від їхнього статусу відкриття.

У перервах між розробкою Linkeum іноді виникають ідеї, які відразу хочеться протестувати, щоб дізнатися, наскільки далеко може зайти ШІ. Для цього Prompt Tuesday #11 мета була амбітною: попросити Qwen згенерувати сторінку HTML/JavaScript, здатну відображати 3D-глобус, що обертається, де найбільші біржі світу представлені точками, що світяться і змінюють свій стан залежно від того, відкритий ринок чи закритий.

Ідея була простою на папері, але дуже наочною у виконанні. Кожен фінансовий центр повинен був відображатися як пульсуюча зелена точка, коли біржа відкрита, або червона, коли вона закрита, з можливістю натиснути на неї, щоб відобразити невелике вікно з основною інформацією.

Промпт, використаний у 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.

Чому цей промпт був цікавим

Що мені подобається в цьому промпті, так це те, що він не просто просить «3D-глобус». Він одночасно задає візуальний рендеринг, бізнес-логіку, географічні дані та інтерактивну поведінку, що дійсно змушує ШІ створювати щось близьке до міні-продукту, а не просто простий приклад коду.

Іншими словами, ми не тільки тестуємо здатність Qwen писати на JavaScript. Ми також тестуємо його здатність розуміти фінансово-орієнтований дизайн з інтерфейсом, який вже нагадує преміальну панель управління.

Кілька доопрацювань за допомогою Gemini

Перший результат, отриманий за допомогою Qwen, вже був дуже багатообіцяючим. Ми бачили точки, анімацію, реакцію на кліки і відразу відчули, що дуже близькі до ефектного результату.

Однак було потрібно внести кілька коригувань, щоб стабілізувати відображення і поліпшити візуальну постановку. За допомогою Gemini ми допрацювали деякі технічні деталі та елементи презентації, зокрема, що стосуються рендерингу глобуса, початкового кадрування, читабельності континентів і поведінки камери під час завантаження.

Приголомшливий результат

Кінцевий результат відверто приголомшливий. Ми отримуємо елегантний, живий, інтерактивний 3D-глобус із точками, що світяться, який відразу ж створює враження глобального торгового залу.

Це саме той тип досвіду, який впадає в очі з перших секунд. І, що найголовніше, це не просто візуальний гаджет: за цією анімацією вже можна уявити реальний сценарій використання продукту для інтуїтивного відстеження основних фінансових ринків.

Що далі?

Це, мабуть, найцікавіша частина цього Prompt Tuesday #11. Результат досить переконливий, щоб мені захотілося піти далі простої статті в блозі.

Пізніше я постараюся інтегрувати цю ідею в Linkeum, у розділ «Фінанси». З реальним шаром даних і кількома додатковими поліпшеннями цей інтерактивний глобус може стати відмінним елементом «вау-ефекту» для користувачів.