Stwórz interaktywny globus giełd światowych dzięki AI

W tym Prompt Tuesday #11 prosimy sztuczną inteligencję o wygenerowanie imponującej wizualizacji w HTML/JavaScript: obracającego się globusa 3D, na którym główne światowe giełdy świecą w zależności od ich statusu otwarcia.

Pomiędzy kolejnymi etapami prac nad Linkeum czasami pojawiają się pomysły, które od razu sprawiają, że chce się sprawdzić, jak daleko może posunąć się AI. W przypadku tego Prompt Tuesday #11 cel był ambitny: poprosić Qwen o wygenerowanie strony HTML/JavaScript zdolnej do wyświetlania obracającego się globusa 3D, na którym największe światowe giełdy są reprezentowane przez świecące punkty, zmieniające swój stan w zależności od tego, czy rynek jest otwarty, czy zamknięty.

Pomysł był prosty na papierze, ale bardzo wizualny w realizacji. Każde centrum finansowe miało pojawiać się jako pulsujący zielony punkt, gdy giełda jest otwarta, lub czerwony, gdy jest zamknięta, z możliwością kliknięcia go w celu wyświetlenia małego okienka z najważniejszymi informacjami.

Prompt użyty w Qwen

Jak to często bywa w przypadku tego typu generowania kodu, prompt został napisany w języku angielskim. Modele generujące kod na ogół lepiej rozumieją szczegółowe instrukcje techniczne w tym języku, zwłaszcza gdy trzeba połączyć strukturę HTML, logikę JavaScript, renderowanie wizualne i interakcje użytkownika.

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.

Dlaczego ten prompt był interesujący

W tym prompcie podoba mi się to, że nie prosi tylko o "globus 3D". Jednocześnie narzuca renderowanie wizualne, logikę biznesową, dane geograficzne i interaktywne zachowanie, co naprawdę zmusza sztuczną inteligencję do stworzenia czegoś zbliżonego do mini-produktu, a nie tylko prostego przykładu kodu.

Innymi słowy, nie testujemy tylko zdolności Qwen do pisania w JavaScript. Testujemy również jego zdolność do zrozumienia intencji projektowych zorientowanych na finanse, z interfejsem, który już przypomina pulpit nawigacyjny premium.

Kilka poprawek z Gemini

Pierwszy wynik uzyskany z Qwen był już bardzo obiecujący. Widzieliśmy punkty, animację, interakcję po kliknięciu i od razu poczuliśmy, że jesteśmy bardzo blisko spektakularnego rezultatu.

Zaszła jednak potrzeba wprowadzenia kilku korekt w celu ustabilizowania wyświetlania i poprawy wizualnej oprawy. Z pomocą Gemini poprawiliśmy kilka szczegółów technicznych i wizualnych, w szczególności dotyczących renderowania globusa, początkowego kadrowania, czytelności kontynentów i zachowania kamery podczas ładowania.

Oszałamiający efekt

Efekt końcowy jest szczerze mówiąc oszałamiający. Otrzymaliśmy elegancki, żywy, interaktywny globus 3D ze świecącymi punktami, który natychmiast sprawia wrażenie globalnego parkietu giełdowego.

To dokładnie ten rodzaj doświadczenia, który przyciąga wzrok w pierwszych sekundach. Co najważniejsze, to nie tylko wizualny gadżet: za tą animacją można już sobie wyobrazić prawdziwy przypadek użycia produktu do intuicyjnego śledzenia głównych rynków finansowych.

Co dalej?

To prawdopodobnie najciekawsza część tego Prompt Tuesday #11. Wizualizacja jest na tyle przekonująca, że zachęca mnie do pójścia o krok dalej niż zwykły wpis na blogu.

Postaram się zintegrować ten pomysł później w Linkeum, w sekcji Finanse. Z prawdziwą warstwą danych i kilkoma dodatkowymi ulepszeniami, ten interaktywny globus mógłby stać się doskonałym elementem typu "efekt wow" dla użytkowników.