Crearea unui glob interactiv al burselor mondiale cu IA

Pentru acest Prompt Tuesday #11, cerem IA să genereze o vizualizare HTML/JavaScript impresionantă: un glob 3D care se rotește, pe care marile burse mondiale se aprind în funcție de starea lor de deschidere.

Între două dezvoltări la Linkeum, uneori apar idei care te fac imediat să vrei să testezi cât de departe poate merge IA. Pentru acest Prompt Tuesday #11, obiectivul a fost ambițios: să-i cerem lui Qwen să genereze o pagină HTML/JavaScript capabilă să afișeze un glob 3D care se rotește, unde cele mai mari burse din lume sunt reprezentate de puncte luminoase care își schimbă starea în funcție de faptul dacă piața este deschisă sau închisă.

Ideea era simplă pe hârtie, dar foarte vizuală în execuție. Fiecare centru financiar trebuia să apară ca un punct verde care pulsează atunci când bursa este deschisă, sau roșu când este închisă, cu posibilitatea de a face clic pe el pentru a afișa o fereastră mică conținând informațiile sale principale.

Promptul utilizat în Qwen

Așa cum se întâmplă adesea pentru acest tip de generare de cod, promptul a fost scris în engleză. Modelele de generare a codului înțeleg, în general, mai bine instrucțiunile tehnice detaliate în această limbă, mai ales când vine vorba de combinarea structurii HTML, a logicii JavaScript, a redării vizuale și a interacțiunilor utilizatorului.

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.

De ce acest prompt a fost interesant

Ce îmi place la acest prompt este că nu cere doar „un glob 3D”. El impune simultan o redare vizuală, o logică de afaceri, date geografice și un comportament interactiv, ceea ce forțează cu adevărat IA să producă ceva mai apropiat de un mini-produs decât un simplu exemplu de cod.

Cu alte cuvinte, nu testăm doar capacitatea lui Qwen de a scrie JavaScript. Testăm, de asemenea, capacitatea sa de a înțelege o intenție de design orientată spre finanțe, cu o interfață care evocă deja un tablou de bord premium.

Câteva retușuri cu Gemini

Primul rezultat obținut cu Qwen era deja foarte promițător. Am putut vedea punctele, animația, interacțiunea la clic și am simțit imediat că suntem foarte aproape de o redare spectaculoasă.

Cu toate acestea, a trebuit să se facă câteva ajustări pentru a stabiliza afișajul și a îmbunătăți prezentarea vizuală. Cu ajutorul Gemini, am ajustat, prin urmare, câteva detalii tehnice și de prezentare, în special în ceea ce privește redarea globului, încadrarea inițială, lizibilitatea continentelor și comportamentul camerei la încărcare.

Un rezultat uimitor

Rezultatul final este, sincer, uimitor. Obținem un glob 3D elegant, viu, interactiv, cu puncte luminoase care dau imediat impresia unei săli de tranzacționare globale.

Este exact tipul de experiență care atrage privirea în primele secunde. Și, mai presus de toate, nu este doar un gadget vizual: în spatele acestei animații, vă puteți imagina deja un caz real de utilizare a produsului pentru a urmări intuitiv principalele piețe financiare.

Ce urmează?

Aceasta este probabil cea mai interesantă parte a acestui Prompt Tuesday #11. Redarea este suficient de convingătoare pentru a mă face să vreau să merg mai departe de un simplu articol de blog.

Voi încerca să integrez această idee mai târziu în Linkeum, în secțiunea Finanțe. Cu un strat de date real și câteva rafinamente suplimentare, acest glob interactiv ar putea deveni un element excelent de „efect wow” pentru utilizatori.