Vytvoření interaktivního glóbu světových burz s AI

Pro tento Prompt Tuesday #11 žádáme AI, aby vygenerovala působivou vizualizaci v HTML/JavaScriptu: rotující 3D glóbus, na kterém se rozsvěcují hlavní světové burzy v závislosti na tom, zda jsou aktuálně otevřené.

Mezi dvěma fázemi vývoje Linkeum se někdy objeví nápady, které vás okamžitě přimějí otestovat, jak daleko může AI zajít. Pro tento Prompt Tuesday #11 byl cíl ambiciózní: požádat Qwen, aby vygeneroval stránku v HTML/JavaScriptu schopnou zobrazit rotující 3D glóbus, na kterém jsou největší světové burzy reprezentovány svítícími body, jež mění stav v závislosti na tom, zda je trh otevřený, nebo zavřený.

Na papíře to byla jednoduchá myšlenka, ale její provedení bylo velmi vizuální. Každé finanční centrum se mělo zobrazit jako pulzující zelený bod, když je burza otevřená, nebo červený, když je zavřená, s možností na něj kliknout a zobrazit malé okno s hlavními informacemi.

Prompt použitý v Qwen

Jak už to u tohoto typu generování bývá zvykem, prompt byl napsán v angličtině. Modely pro generování kódu obecně lépe chápou podrobné technické instrukce v tomto jazyce, zejména pokud jde o kombinaci struktury HTML, logiky JavaScriptu, vizuálního vykreslování a interakcí s uživatelem.

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.

Proč byl tento prompt zajímavý

Na tomto promptu se mi líbí, že nežádá pouze o „3D glóbus“. Současně vyžaduje vizuální vykreslování, obchodní logiku, geografická data a interaktivní chování, což AI skutečně nutí vytvořit něco, co se blíží miniproduktu, a ne pouze jednoduchý příklad kódu.

Jinými slovy, netestujeme pouze schopnost Qwen psát v JavaScriptu. Testujeme také jeho schopnost porozumět záměru designu orientovaného na finance, s rozhraním, které již evokuje prémiový řídicí panel.

Několik úprav s Gemini

První výsledek získaný pomocí Qwen byl již velmi slibný. Mohli jsme vidět body, animaci, interakci při kliknutí a okamžitě jsme cítili, že jsme velmi blízko velkolepému vizuálu.

Bylo však nutné provést několik úprav, aby se zobrazení stabilizovalo a zlepšila se vizuální prezentace. S pomocí Gemini jsme proto vyladili některé technické a prezentační detaily, zejména pokud jde o vykreslování glóbu, počáteční kompozici, čitelnost kontinentů a chování kamery při načítání.

Ohromující výsledek

Konečný výsledek je upřímně řečeno ohromující. Získáváme elegantní, živý, interaktivní 3D glóbus se svítícími body, který okamžitě navozuje dojem globálního obchodního parketu.

Je to přesně ten typ zážitku, který upoutá pozornost v prvních sekundách. A co je nejdůležitější, není to jen vizuální vychytávka: za touto animací si už lze představit skutečný případ využití produktu pro intuitivní sledování hlavních finančních trhů.

Co dál?

To je pravděpodobně nejzajímavější část tohoto Prompt Tuesday #11. Výsledek je dostatečně přesvědčivý na to, aby mě přiměl jít dál než k pouhému článku na blogu.

Tuto myšlenku se pokusím později integrovat do Linkeum, do sekce Finance. Se skutečnou datovou vrstvou a několika dalšími vylepšeními by se tento interaktivní glóbus mohl stát vynikajícím prvkem s „wow efektem“ pro uživatele.