Luo interaktiivinen maapallo maailman pörsseistä tekoälyn avulla

Tässä Prompt Tuesday #11:ssä pyydämme tekoälyä luomaan vaikuttavan HTML/JavaScript-visualisoinnin: pyörivän 3D-maapallon, jossa maailman suuret pörssit syttyvät niiden aukiolotilan mukaan.

Kahden Linkeumin kehitysvaiheen välillä syntyy toisinaan ideoita, jotka saavat heti haluamaan kokeilla, kuinka pitkälle tekoäly voi mennä. Tämän Prompt Tuesday #11:n tavoite oli kunnianhimoinen: pyytää Qweniä luomaan HTML/JavaScript-sivu, joka pystyy näyttämään pyörivän 3D-maapallon, jossa maailman suurimmat pörssit on esitetty hohtavina pisteinä, jotka muuttavat tilaansa sen mukaan, onko markkina auki vai kiinni.

Idea oli paperilla yksinkertainen, mutta toteutukseltaan hyvin visuaalinen. Jokaisen finanssikeskuksen tuli näkyä sykkivänä vihreänä pisteenä pörssin ollessa auki tai punaisena sen ollessa kiinni, ja sitä napsauttamalla piti avautua pieni ikkuna, joka sisältää sen tärkeimmät tiedot.

Qwenissä käytetty kehote

Kuten tämäntyyppisessä koodintuotannossa usein tapahtuu, kehote kirjoitettiin englanniksi. Koodia generoivat mallit ymmärtävät yleensä paremmin tämän kielen yksityiskohtaisia teknisiä ohjeita, varsinkin kun kyse on HTML-rakenteen, JavaScript-logiikan, visuaalisen renderöinnin ja käyttäjän vuorovaikutusten yhdistämisestä.

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.

Miksi tämä kehote oli mielenkiintoinen

Pidän tässä kehotteessa siitä, että se ei pyydä vain "3D-maapalloa". Se vaatii samanaikaisesti visuaalista renderöintiä, liiketoimintalogiikkaa, maantieteellistä dataa ja interaktiivista käyttäytymistä, mikä todella pakottaa tekoälyn tuottamaan jotain, joka on lähempänä minituotetta kuin vain yksinkertaista koodiesimerkkiä.

Toisin sanoen emme vain testaa Qwenin kykyä kirjoittaa JavaScriptiä. Testaamme myös sen kykyä ymmärtää rahoitukseen suuntautuvaa suunnitteluautkiota käyttöliittymällä, joka tuo jo mieleen premium-kojelauta.

Muutama hienosäätö Geminin kanssa

Qwenillä saatu ensimmäinen tulos oli jo erittäin lupaava. Näimme pisteet, animaation ja napsautusvuorovaikutuksen, ja tunsimme heti, että olimme hyvin lähellä näyttävää lopputulosta.

Oli kuitenkin tehtävä joitain säätöjä näytön vakauttamiseksi ja visuaalisen esityksen parantamiseksi. Geminin avulla hienosäädimme joitain teknisiä ja esityksellisiä yksityiskohtia, erityisesti koskien maapallon renderöintiä, alkuperäistä rajausta, maanosien luettavuutta ja kameran käyttäytymistä latauksen aikana.

Ällistyttävä tulos

Lopputulos on rehellisesti sanottuna ällistyttävä. Saamme tyylikkään, elävän ja interaktiivisen 3D-maapallon hohtavilla pisteillä, joka antaa välittömästi vaikutelman globaalista kaupankäyntisalista.

Juuri tällainen kokemus kiinnittää huomion ensimmäisten sekuntien aikana. Ja ennen kaikkea se ei ole vain visuaalinen vimpain: tämän animaation takana voi jo kuvitella todellisen tuotteen käyttötapauksen päärahoitusmarkkinoiden intuitiiviseen seurantaan.

Mitä seuraavaksi?

Tämä on luultavasti mielenkiintoisin osa tätä Prompt Tuesday #11:tä. Renderöinti on tarpeeksi vakuuttava saadakseen minut haluamaan mennä yksinkertaista blogiartikkelia pidemmälle.

Yritän integroida tämän idean myöhemmin Linkeumiin, Talous-osioon. Todellisella datakerroksella ja muutamilla lisäparannuksilla tästä interaktiivisesta maapallosta voisi tulla erinomainen "vau-efekti" -elementti käyttäjille.