Създаване на интерактивен глобус на световните борси с AI

За този Prompt Tuesday #11 молим AI да генерира впечатляваща HTML/JavaScript визуализация: въртящ се 3D глобус, на който големите световни борси светват в зависимост от техния статус (отворени/затворени).

Между две разработки в Linkeum понякога се появяват идеи, които веднага ви карат да искате да тествате колко далеч може да стигне AI. За този 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 глобус". Той едновременно налага визуално рендиране, бизнес логика, географски данни и интерактивно поведение, което наистина принуждава AI да създаде нещо по-близко до мини-продукт, отколкото просто прост пример за код.

С други думи, ние не тестваме само способността на Qwen да пише JavaScript. Ние също така тестваме способността му да разбере финансово ориентирано намерение за дизайн, с интерфейс, който вече напомня на премиум табло за управление (dashboard).

Няколко фини настройки с Gemini

Първият резултат, получен с Qwen, вече беше много обещаващ. Можехме да видим точките, анимацията, интеракцията при кликване и веднага усетихме, че сме много близо до зрелищна визуализация.

Трябваше обаче да се направят някои корекции, за да се стабилизира показването и да се подобри визуалното представяне. Следователно, с помощта на Gemini настроихме някои технически и презентационни детайли, по-специално относно изобразяването на глобуса, първоначалното рамкиране, четливостта на континентите и поведението на камерата при зареждане.

Зашеметяващ резултат

Крайният резултат е честно казано зашеметяващ. Получаваме елегантен, жив, интерактивен 3D глобус със светещи точки, който веднага създава впечатлението за глобална зала за търговия.

Това е точно типът преживяване, което хваща окото в първите няколко секунди. И преди всичко, това не е просто визуална джаджа: зад тази анимация вече можете да си представите реален случай на употреба на продукта за интуитивно проследяване на основните финансови пазари.

Какво следва?

Това е може би най-интересната част от този Prompt Tuesday #11. Визуализацията е достатъчно убедителна, за да ме накара да искам да отида по-далеч от една проста статия в блог.

Ще се опитам да интегрирам тази идея по-късно в Linkeum, в раздела Финанси. С реален слой от данни и няколко допълнителни подобрения, този интерактивен глобус може да се превърне в отличен елемент за „уау ефект“ за потребителите.