Interaktív földgömb létrehozása a világ tőzsdéiről mesterséges intelligenciával

Ebben a Prompt Tuesday #11-ben arra kérjük az AI-t, hogy hozzon létre egy lenyűgöző HTML/JavaScript vizualizációt: egy forgó 3D földgömböt, amelyen a világ legnagyobb tőzsdéi a nyitvatartási állapotuktól függően világítanak.

Két Linkeum-fejlesztés között néha felmerülnek olyan ötletek, amelyek miatt azonnal tesztelni akarjuk, meddig is mehet el az AI. Ehhez a Prompt Tuesday #11-hez a cél ambiciózus volt: arra kértük a Qwen-t, hogy generáljon egy HTML/JavaScript oldalt, amely képes megjeleníteni egy forgó 3D földgömböt, ahol a világ legnagyobb tőzsdéit világító pontok jelzik, amelyek attól függően változtatják az állapotukat, hogy a piac nyitva vagy zárva van.

Az ötlet papíron egyszerű volt, de a megvalósítása rendkívül vizuális. Minden pénzügyi központnak pulzáló zöld pontként kellett megjelennie, amikor a tőzsde nyitva van, vagy piros pontként, amikor zárva van, azzal a lehetőséggel, hogy rákattintva egy kis ablak jelenjen meg a legfontosabb információkkal.

A Qwenben használt prompt

Ahogy az az ilyen típusú kódgenerálásnál lenni szokott, a prompt angolul íródott. A kódgeneráló modellek általában jobban megértik a részletes technikai utasításokat ezen a nyelven, különösen akkor, ha a HTML struktúra, a JavaScript logika, a vizuális renderelés és a felhasználói interakciók ötvözéséről van szó.

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.

Miért volt érdekes ez a prompt

Ami tetszik ebben a promptban, az az, hogy nem csak "egy 3D földgömböt" kér. Ugyanakkor megköveteli a vizuális renderelést, az üzleti logikát, a földrajzi adatokat és az interaktív viselkedést is, ami valóban arra kényszeríti az AI-t, hogy olyasmit hozzon létre, ami közelebb áll egy mini-termékhez, mint egy egyszerű kódpéldához.

Más szóval, nem csak a Qwen JavaScript-írási képességét teszteljük. Azt a képességét is teszteljük, hogy megért-e egy pénzügyi orientáltságú tervezési szándékot egy olyan felülettel, amely már most is egy prémium irányítópultot idéz.

Néhány módosítás a Geminivel

A Qwen segítségével kapott első eredmény már így is nagyon ígéretes volt. Láthattuk a pontokat, az animációt, a kattintási interakciót, és azonnal éreztük, hogy nagyon közel vagyunk egy látványos rendereléshez.

A megjelenítés stabilizálása és a vizuális beállítások javítása érdekében azonban el kellett végezni néhány módosítást. A Gemini segítségével ezért finomítottunk néhány technikai és prezentációs részleten, különösen a földgömb renderelésén, a kezdeti keretezésen, a kontinensek olvashatóságán és a kamera betöltéskori viselkedésén.

Lenyűgöző eredmény

A végeredmény őszintén szólva lenyűgöző. Egy elegáns, élénk, interaktív 3D földgömböt kapunk, a világító pontok azonnal egy globális kereskedési parkett benyomását keltik.

Pontosan ez az a fajta élmény, amely az első néhány másodpercben megragadja a tekintetet. És mindenekelőtt ez nem csak egy vizuális modul: e mögött az animáció mögött már most el lehet képzelni egy valós termékfelhasználási esetet a főbb pénzügyi piacok intuitív nyomon követésére.

Mi a következő lépés?

Valószínűleg ez a Prompt Tuesday #11 legérdekesebb része. A renderelés elég meggyőző ahhoz, hogy arra késztessen, egy egyszerű blogcikknél tovább menjek.

Később megpróbálom ezt az ötletet integrálni a Linkeum Pénzügy szakaszába. Egy valódi adatréteggel és néhány további finomítással ez az interaktív földgömb kiváló "hűha-hatású" elemmé válhat a felhasználók számára.