Δημιουργία μιας διαδραστικής υδρογείου των παγκόσμιων χρηματιστηρίων με AI

Για αυτό το Prompt Tuesday #11, ζητάμε από την AI να δημιουργήσει μια εντυπωσιακή οπτικοποίηση HTML/JavaScript: μια περιστρεφόμενη 3D υδρόγειο όπου τα μεγάλα παγκόσμια χρηματιστήρια φωτίζονται ανάλογα με την κατάσταση λειτουργίας τους.

Ανάμεσα σε δύο φάσεις ανάπτυξης στο Linkeum, υπάρχουν μερικές φορές ιδέες που αμέσως σου δίνουν την επιθυμία να δοκιμάσεις μέχρι πού μπορεί να φτάσει η AI. Για αυτό το Prompt Tuesday #11, ο στόχος ήταν φιλόδοξος: να ζητήσουμε από το Qwen να δημιουργήσει μια σελίδα HTML/JavaScript ικανή να εμφανίζει μια περιστρεφόμενη 3D υδρόγειο, με τα μεγαλύτερα χρηματιστήρια του κόσμου να αντιπροσωπεύονται από φωτεινά σημεία που αλλάζουν κατάσταση ανάλογα με το αν η αγορά είναι ανοιχτή ή κλειστή.

Η ιδέα ήταν απλή στα χαρτιά, αλλά πολύ οπτική στην εκτέλεσή της. Κάθε οικονομικό κέντρο έπρεπε να εμφανίζεται ως ένα πράσινο σημείο που πάλλεται όταν το χρηματιστήριο είναι ανοιχτό, ή κόκκινο όταν είναι κλειστό, με τη δυνατότητα να κάνεις κλικ πάνω του για να εμφανιστεί ένα μικρό παράθυρο με τις κύριες πληροφορίες του.

Το prompt που χρησιμοποιήθηκε στο Qwen

Όπως συμβαίνει συχνά για αυτόν τον τύπο δημιουργίας, το prompt γράφτηκε στα αγγλικά. Τα μοντέλα παραγωγής κώδικα συνήθως κατανοούν καλύτερα τις λεπτομερείς τεχνικές οδηγίες σε αυτήν τη γλώσσα, ειδικά όταν πρόκειται για το συνδυασμό δομής HTML, λογικής JavaScript, οπτικής απόδοσης και αλληλεπιδράσεων χρήστη.

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.

Γιατί αυτό το prompt ήταν ενδιαφέρον

Αυτό που μου αρέσει σε αυτό το prompt είναι ότι δεν ζητά απλώς "μια 3D υδρόγειο". Ταυτόχρονα επιβάλλει μια οπτική απόδοση, επιχειρηματική λογική, γεωγραφικά δεδομένα και διαδραστική συμπεριφορά, γεγονός που πραγματικά ωθεί την AI να παράγει κάτι πιο κοντά σε ένα μίνι-προϊόν παρά σε ένα απλό παράδειγμα κώδικα.

Με άλλα λόγια, δεν δοκιμάζουμε μόνο την ικανότητα του Qwen να γράφει JavaScript. Δοκιμάζουμε επίσης την ικανότητά του να κατανοεί μια σχεδιαστική πρόθεση προσανατολισμένη στα οικονομικά, με μια διεπαφή που ήδη παραπέμπει σε ένα premium ταμπλό.

Μερικές μικροαλλαγές με το Gemini

Το πρώτο αποτέλεσμα που αποκτήθηκε με το Qwen ήταν ήδη πολύ ελπιδοφόρο. Μπορούσαμε να δούμε τα σημεία, το animation, την αλληλεπίδραση με το κλικ, και αμέσως νιώσαμε ότι είμαστε πολύ κοντά σε μια θεαματική απόδοση.

Ωστόσο, χρειάστηκε να γίνουν κάποιες ρυθμίσεις για να σταθεροποιηθεί η προβολή και να βελτιωθεί η οπτική παρουσίαση. Με τη βοήθεια του Gemini, τροποποιήσαμε κάποιες τεχνικές λεπτομέρειες και λεπτομέρειες παρουσίασης, κυρίως σχετικά με την απόδοση της υδρογείου, το αρχικό καδράρισμα, την αναγνωσιμότητα των ηπείρων και τη συμπεριφορά της κάμερας κατά τη φόρτωση.

Ένα εκπληκτικό αποτέλεσμα

Το τελικό αποτέλεσμα είναι ειλικρινά εκπληκτικό. Έχουμε μια κομψή, ζωντανή, διαδραστική 3D υδρόγειο, με φωτεινά σημεία που δίνουν αμέσως την εντύπωση μιας παγκόσμιας αίθουσας συναλλαγών.

Είναι ακριβώς το είδος της εμπειρίας που τραβάει τα βλέμματα στα πρώτα δευτερόλεπτα. Και πάνω απ' όλα, δεν είναι απλώς ένα οπτικό gadget: πίσω από αυτό το animation, μπορείς ήδη να φανταστείς μια πραγματική περίπτωση χρήσης προϊόντος για τη διαισθητική παρακολούθηση των κύριων χρηματοπιστωτικών αγορών.

Τι ακολουθεί;

Αυτό είναι ίσως το πιο ενδιαφέρον μέρος αυτού του Prompt Tuesday #11. Η απόδοση είναι αρκετά πειστική για να με κάνει να θέλω να προχωρήσω πέρα από ένα απλό άρθρο στο blog.

Θα προσπαθήσω να ενσωματώσω αυτήν την ιδέα αργότερα στο Linkeum, στην ενότητα των Οικονομικών. Με ένα πραγματικό επίπεδο δεδομένων και μερικές πρόσθετες βελτιώσεις, αυτή η διαδραστική υδρόγειος θα μπορούσε να γίνει ένα εξαιρετικό στοιχείο "wow effect" για τους χρήστες.