Creare un globo interattivo delle borse mondiali con l'IA

Per questo Prompt Tuesday #11, chiediamo all'IA di generare una visualizzazione impressionante in HTML/JavaScript: un globo 3D in rotazione dove le principali borse mondiali si illuminano in base al loro stato di apertura.

Tra due sviluppi su Linkeum, a volte ci sono idee che fanno subito venire voglia di testare fin dove può spingersi l'IA. Per questo Prompt Tuesday #11, l'obiettivo era ambizioso: chiedere a Qwen di generare una pagina HTML/JavaScript capace di mostrare un globo 3D in rotazione, con le più grandi borse del mondo rappresentate da punti luminosi che cambiano stato a seconda che il mercato sia aperto o chiuso.

L'idea era semplice sulla carta, ma molto visiva nella sua resa. Ogni piazza finanziaria doveva apparire come un punto verde pulsante quando la borsa è aperta, o rosso quando è chiusa, con la possibilità di cliccarci sopra per visualizzare una piccola finestra contenente le sue informazioni principali.

Il prompt utilizzato su Qwen

Come spesso accade per questo tipo di generazione, il prompt è stato redatto in inglese. I modelli di generazione di codice comprendono generalmente meglio le istruzioni tecniche dettagliate in questa lingua, specialmente quando si tratta di combinare struttura HTML, logica JavaScript, resa visiva e interazioni dell'utente.

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.

Perché questo prompt era interessante

Quello che mi piace di questo prompt è che non chiede solo "un globo in 3D". Impone allo stesso tempo una resa visiva, una logica di business, dati geografici e un comportamento interattivo, il che spinge davvero l'IA a produrre qualcosa di simile a un mini-prodotto piuttosto che a un semplice esempio di codice.

In altre parole, non stiamo solo testando la capacità di Qwen di scrivere JavaScript. Stiamo anche testando la sua capacità di comprendere un intento di design orientato alla finanza, con un'interfaccia che evoca già un cruscotto premium.

Qualche ritocco con Gemini

Il primo risultato ottenuto con Qwen era già molto promettente. Si vedevano i punti, l'animazione, l'interazione al clic, e si intuiva subito di essere molto vicini a una resa spettacolare.

Tuttavia, è stato necessario effettuare alcuni aggiustamenti per stabilizzare la visualizzazione e migliorare la messa in scena visiva. Con l'aiuto di Gemini, abbiamo quindi ritoccato alcuni dettagli tecnici e di presentazione, in particolare sulla resa del globo, l'inquadratura iniziale, la leggibilità dei continenti e il comportamento della telecamera al caricamento.

Un risultato sbalorditivo

Il risultato finale è francamente sbalorditivo. Otteniamo un globo 3D elegante, vivo, interattivo, con punti luminosi che danno immediatamente l'impressione di una sala operativa globale.

È esattamente il tipo di esperienza che cattura l'occhio fin dai primi secondi. E soprattutto, non è solo un gadget visivo: dietro questa animazione si può già immaginare un vero caso d'uso del prodotto per monitorare i principali mercati finanziari in modo intuitivo.

E adesso?

Questa è probabilmente la parte più interessante di questo Prompt Tuesday #11. La resa è sufficientemente convincente da farmi venire voglia di spingermi oltre il semplice articolo di blog.

Cercherò di integrare questa idea più avanti in Linkeum, nella sezione Finanza. Con un vero livello di dati e qualche ulteriore affinamento, questo globo interattivo potrebbe diventare un eccellente elemento "effetto wow" per gli utenti.