Skapa en interaktiv glob över världens aktiebörser med AI

För denna Prompt Tuesday #11 ber vi AI att generera en imponerande HTML/JavaScript-visualisering: en roterande 3D-glob där världens stora aktiebörser tänds baserat på om de är öppna eller stängda.

Mellan två utvecklingspass på Linkeum dyker det ibland upp idéer som genast ger dig lust att testa hur långt AI kan gå. För denna Prompt Tuesday #11 var målet ambitiöst: att be Qwen generera en HTML/JavaScript-sida som kan visa en roterande 3D-glob, där världens största aktiebörser representeras av lysande punkter som ändrar status beroende på om marknaden är öppen eller stängd.

Idén var enkel på papperet, men mycket visuell i sitt utförande. Varje finanscentrum skulle framträda som en pulserande grön punkt när börsen är öppen, eller röd när den är stängd, med möjlighet att klicka på den för att visa ett litet fönster med dess huvudinformation.

Prompten som användes i Qwen

Som ofta är fallet för den här typen av generering skrevs prompten på engelska. Kodgenereringsmodeller förstår i allmänhet detaljerade tekniska instruktioner på detta språk mycket bättre, särskilt när det handlar om att kombinera HTML-struktur, JavaScript-logik, visuell rendering och användarinteraktioner.

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.

Varför den här prompten var intressant

Det jag gillar med den här prompten är att den inte bara ber om "en 3D-glob". Den tvingar samtidigt fram en visuell rendering, affärslogik, geografisk data och interaktivt beteende, vilket verkligen driver AI:n att producera något som närmar sig en miniprodukt istället för bara ett enkelt kodexempel.

Med andra ord testar vi inte bara Qwens förmåga att skriva JavaScript. Vi testar också dess förmåga att förstå en finansinriktad designintention, med ett gränssnitt som redan för tankarna till en premium-dashboard.

Några justeringar med Gemini

Det första resultatet som erhölls med Qwen var redan mycket lovande. Vi kunde se punkterna, animationen, klickinteraktionen, och vi kände direkt att vi var mycket nära en spektakulär rendering.

Men vissa justeringar var tvungna att göras för att stabilisera skärmen och förbättra den visuella iscensättningen. Med hjälp av Gemini justerade vi därför några tekniska detaljer och presentationsdetaljer, särskilt vad gäller renderingen av globen, den initiala inramningen, kontinenternas läsbarhet och kamerans beteende vid inläsning.

Ett häpnadsväckande resultat

Slutresultatet är uppriktigt sagt häpnadsväckande. Vi får en elegant, levande, interaktiv 3D-glob, med lysande punkter som omedelbart ger intrycket av ett globalt handelsgolv.

Det är precis den typ av upplevelse som fångar ögat de första sekunderna. Och framför allt är det inte bara en visuell pryl: bakom denna animation kan man redan föreställa sig ett verkligt produktanvändningsfall för att intuitivt spåra viktiga finansmarknader.

Vad händer härnäst?

Detta är förmodligen den mest intressanta delen av denna Prompt Tuesday #11. Renderingen är tillräckligt övertygande för att få mig att vilja gå längre än en enkel bloggartikel.

Jag kommer att försöka integrera denna idé senare i Linkeum, i finanssektionen. Med ett riktigt datalager och några ytterligare förfiningar kan denna interaktiva glob bli ett utmärkt "wow-effekt"-element för användarna.