Einen interaktiven Globus der Weltbörsen mit KI erstellen

Für diesen Prompt Tuesday #11 bitten wir die KI, eine beeindruckende HTML/JavaScript-Visualisierung zu erstellen: einen rotierenden 3D-Globus, auf dem die wichtigsten Weltbörsen je nach Öffnungsstatus aufleuchten.

Zwischen zwei Entwicklungen an Linkeum gibt es manchmal Ideen, bei denen man sofort testen möchte, wie weit die KI gehen kann. Für diesen Prompt Tuesday #11 war das Ziel ehrgeizig: Qwen zu bitten, eine HTML/JavaScript-Seite zu generieren, die in der Lage ist, einen rotierenden 3D-Globus anzuzeigen, wobei die größten Börsen der Welt durch leuchtende Punkte dargestellt werden, die ihren Zustand ändern, je nachdem, ob der Markt geöffnet oder geschlossen ist.

Die Idee war auf dem Papier einfach, aber in ihrer Ausführung sehr visuell. Jedes Finanzzentrum sollte als pulsierender grüner Punkt erscheinen, wenn die Börse geöffnet ist, oder als roter Punkt, wenn sie geschlossen ist, mit der Möglichkeit, darauf zu klicken, um ein kleines Fenster mit den wichtigsten Informationen anzuzeigen.

Der in Qwen verwendete Prompt

Wie so oft bei dieser Art der Generierung wurde der Prompt auf Englisch verfasst. Modelle zur Codegenerierung verstehen detaillierte technische Anweisungen in dieser Sprache im Allgemeinen besser, insbesondere wenn es darum geht, HTML-Struktur, JavaScript-Logik, visuelles Rendering und Benutzerinteraktionen zu kombinieren.

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.

Warum dieser Prompt interessant war

Was mir an diesem Prompt gefällt, ist, dass er nicht nur "einen 3D-Globus" verlangt. Er erzwingt gleichzeitig ein visuelles Rendering, Geschäftslogik, geografische Daten und interaktives Verhalten, was die KI wirklich dazu antreibt, etwas zu produzieren, das einem Mini-Produkt nahekommt, und nicht nur ein einfaches Codebeispiel.

Mit anderen Worten: Wir testen nicht nur Qwens Fähigkeit, JavaScript zu schreiben. Wir testen auch seine Fähigkeit, eine finanzorientierte Designabsicht zu verstehen, mit einer Oberfläche, die bereits an ein Premium-Dashboard erinnert.

Ein paar Anpassungen mit Gemini

Das erste mit Qwen erzielte Ergebnis war bereits sehr vielversprechend. Wir konnten die Punkte, die Animation und die Klick-Interaktion sehen und hatten sofort das Gefühl, einem spektakulären Rendering sehr nahe zu sein.

Es mussten jedoch einige Anpassungen vorgenommen werden, um die Anzeige zu stabilisieren und die visuelle Inszenierung zu verbessern. Mit der Hilfe von Gemini haben wir daher einige technische und darstellerische Details optimiert, insbesondere hinsichtlich der Darstellung des Globus, der anfänglichen Ausrichtung, der Lesbarkeit der Kontinente und des Kameraverhaltens beim Laden.

Ein verblüffendes Ergebnis

Das Endergebnis ist ehrlich gesagt verblüffend. Wir erhalten einen eleganten, lebendigen, interaktiven 3D-Globus mit leuchtenden Punkten, der sofort den Eindruck eines globalen Handelssaals vermittelt.

Es ist genau die Art von Erlebnis, die in den ersten Sekunden ins Auge fällt. Und vor allem ist es nicht nur eine visuelle Spielerei: Hinter dieser Animation kann man sich bereits einen echten Produktanwendungsfall vorstellen, um die wichtigsten Finanzmärkte intuitiv zu verfolgen.

Wie geht es weiter?

Dies ist wahrscheinlich der interessanteste Teil dieses Prompt Tuesday #11. Das Rendering ist überzeugend genug, um mich dazu zu bringen, weiter zu gehen als nur einen einfachen Blog-Artikel zu schreiben.

Ich werde versuchen, diese Idee später in Linkeum, im Finanzbereich, zu integrieren. Mit einer echten Datenschicht und einigen zusätzlichen Verfeinerungen könnte dieser interaktive Globus zu einem hervorragenden "Wow-Effekt"-Element für die Nutzer werden.