Een interactieve wereldbol van wereldbeurzen maken met AI

Voor deze Prompt Tuesday #11 vragen we de AI om een indrukwekkende HTML/JavaScript-weergave te genereren: een draaiende 3D-wereldbol waarop de grote wereldbeurzen oplichten op basis van hun openingsstatus.

Tussen twee ontwikkelingen aan Linkeum door, zijn er soms ideeën waardoor je meteen wilt testen hoe ver AI kan gaan. Voor deze Prompt Tuesday #11 was het doel ambitieus: Qwen vragen een HTML/JavaScript-pagina te genereren die een draaiende 3D-wereldbol kan weergeven, met de grootste beurzen ter wereld weergegeven door lichtgevende punten die van status veranderen afhankelijk van of de markt open of gesloten is.

Het idee was simpel op papier, maar erg visueel in de uitvoering. Elk financieel centrum moest verschijnen als een pulserende groene stip wanneer de beurs open is, of rood wanneer deze gesloten is, met de mogelijkheid om erop te klikken om een klein venster met de belangrijkste informatie weer te geven.

De prompt gebruikt in Qwen

Zoals vaak het geval is bij dit soort generaties, was de prompt in het Engels opgesteld. Modellen voor codegeneratie begrijpen gedetailleerde technische instructies in deze taal over het algemeen beter, vooral als het gaat om het combineren van HTML-structuur, JavaScript-logica, visuele weergave en gebruikersinteracties.

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.

Waarom deze prompt interessant was

Wat ik leuk vind aan deze prompt is dat het niet zomaar om "een 3D-wereldbol" vraagt. Het legt tegelijkertijd een visuele weergave, bedrijfslogica, geografische gegevens en interactief gedrag op, wat de AI echt dwingt om iets te produceren dat in de buurt komt van een miniproduct in plaats van een eenvoudig codevoorbeeld.

Met andere woorden, we testen niet alleen Qwen's vermogen om JavaScript te schrijven. We testen ook het vermogen om een op financiën gerichte ontwerpintentie te begrijpen, met een interface die al doet denken aan een premium dashboard.

Een paar aanpassingen met Gemini

Het eerste resultaat dat met Qwen werd verkregen, was al veelbelovend. We konden de punten zien, de animatie, de klik-interactie, en we voelden meteen dat we heel dicht bij een spectaculaire weergave waren.

Er moesten echter enkele aanpassingen worden gedaan om de weergave te stabiliseren en de visuele enscenering te verbeteren. Met de hulp van Gemini hebben we daarom enkele technische en presentatiedetails aangepast, met name over de weergave van de wereldbol, de initiële kadrering, de leesbaarheid van de continenten en het gedrag van de camera bij het laden.

Een verbluffend resultaat

Het eindresultaat is ronduit verbluffend. We krijgen een elegante, levendige, interactieve 3D-wereldbol, met lichtgevende punten die onmiddellijk de indruk wekken van een wereldwijde handelsvloer.

Het is precies het soort ervaring dat de eerste paar seconden de aandacht trekt. En bovenal is het niet alleen een visuele gadget: achter deze animatie kun je je al een echte productgebruikscasus voorstellen om de belangrijkste financiële markten intuïtief te volgen.

Wat nu?

Dit is waarschijnlijk het meest interessante deel van deze Prompt Tuesday #11. De weergave is overtuigend genoeg om me zin te geven verder te gaan dan een eenvoudig blogartikel.

Ik ga proberen dit idee later te integreren in Linkeum, in de sectie Financiën. Met een echte datalaag en wat extra verfijningen zou deze interactieve wereldbol een uitstekend "wow-effect"-element voor gebruikers kunnen worden.