Skab en interaktiv globus over verdens aktiebørser med AI

Til denne Prompt Tuesday #11 beder vi AI'en om at generere en imponerende HTML/JavaScript-visualisering: en roterende 3D-globus, hvor verdens store aktiebørser lyser op afhængigt af deres åbningsstatus.

Mellem to udviklingsfaser på Linkeum opstår der nogle gange idéer, der straks giver dig lyst til at teste, hvor langt AI kan gå. For denne Prompt Tuesday #11 var målet ambitiøst: at bede Qwen generere en HTML/JavaScript-side, der er i stand til at vise en roterende 3D-globus, hvor verdens største aktiebørser repræsenteres af lysende punkter, der skifter status afhængigt af, om markedet er åbent eller lukket.

Idéen var simpel på papiret, men meget visuel i sin udførelse. Hvert finanscentrum skulle fremstå som et pulserende grønt punkt, når børsen er åben, eller rødt, når den er lukket, med mulighed for at klikke på det for at vise et lille vindue med dets vigtigste oplysninger.

Prompten brugt i Qwen

Som det ofte er tilfældet med denne type kodegenerering, blev prompten skrevet på engelsk. Kodegenereringsmodeller forstår generelt detaljerede tekniske instruktioner på dette sprog meget bedre, især når det handler om at kombinere HTML-struktur, JavaScript-logik, visuel rendering og brugerinteraktioner.

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.

Hvorfor denne prompt var interessant

Det, jeg kan lide ved denne prompt, er, at den ikke bare beder om "en 3D-globus". Den gennemtvinger samtidig en visuel rendering, forretningslogik, geografiske data og interaktiv adfærd, hvilket virkelig presser AI'en til at producere noget, der kommer tættere på et miniprodukt i stedet for bare et simpelt kodeeksempel.

Med andre ord tester vi ikke kun Qwens evne til at skrive JavaScript. Vi tester også dens evne til at forstå en finansorienteret designintention med en grænseflade, der allerede leder tankerne hen på et premium-dashboard.

Et par finjusteringer med Gemini

Det første resultat opnået med Qwen var allerede meget lovende. Vi kunne se punkterne, animationen, klikinteraktionen, og vi følte med det samme, at vi var meget tæt på en spektakulær rendering.

Der måtte dog foretages nogle justeringer for at stabilisere visningen og forbedre den visuelle præsentation. Med hjælp fra Gemini justerede vi derfor nogle tekniske og præsentationsmæssige detaljer, især med hensyn til rendering af globusen, den indledende indramning, kontinenternes læsbarhed og kameraets adfærd under indlæsning.

Et forbløffende resultat

Slutresultatet er ærligt talt forbløffende. Vi får en elegant, levende og interaktiv 3D-globus med lysende punkter, der straks giver indtryk af et globalt handelsgulv.

Det er præcis den type oplevelse, der fanger øjet de første par sekunder. Og frem for alt er det ikke kun en visuel gadget: Bag denne animation kan du allerede forestille dig en reel anvendelse i produktet for intuitivt at spore store finansielle markeder.

Hvad nu?

Dette er sandsynligvis den mest interessante del af denne Prompt Tuesday #11. Renderingen er overbevisende nok til at give mig lyst til at gå længere end blot en simpel blogartikel.

Jeg vil forsøge at integrere denne idé senere i Linkeum, i sektionen Finans. Med et rigtigt datalag og nogle få yderligere forbedringer kan denne interaktive globus blive et fremragende "wow-effekt"-element for brugerne.