Yapay Zeka ile dünya borsalarının interaktif bir küresini oluşturun

Bu Prompt Tuesday #11 için yapay zekadan etkileyici bir HTML/JavaScript görselleştirmesi oluşturmasını istiyoruz: büyük dünya borsalarının açık/kapalı durumlarına göre parladığı dönen bir 3D küre.

Linkeum'daki iki geliştirme süreci arasında, bazen yapay zekanın ne kadar ileri gidebileceğini hemen test etme isteği uyandıran fikirler ortaya çıkar. Bu Prompt Tuesday #11 için hedef iddialıydı: Qwen'den, dünyanın en büyük borsalarının piyasanın açık veya kapalı olmasına bağlı olarak durum değiştiren parlayan noktalarla temsil edildiği dönen bir 3D küreyi gösterebilecek bir HTML/JavaScript sayfası oluşturmasını istemek.

Fikir kağıt üzerinde basitti ama uygulaması oldukça görseldi. Her finans merkezi, borsa açıkken yanıp sönen yeşil bir nokta veya kapalıyken kırmızı bir nokta olarak görünmeli ve üzerine tıklandığında ana bilgilerini içeren küçük bir pencere açılabilmeliydi.

Qwen'de kullanılan prompt

Bu tür kod oluşturma işlemlerinde sıkça olduğu gibi, prompt İngilizce yazıldı. Kod oluşturma modelleri, özellikle HTML yapısı, JavaScript mantığı, görsel işleme ve kullanıcı etkileşimlerini birleştirirken bu dildeki ayrıntılı teknik talimatları genellikle daha iyi anlar.

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.

Bu prompt neden ilginçti?

Bu prompt hakkında sevdiğim şey, sadece "bir 3D küre" istememesi. Aynı anda görsel işlemeyi, iş mantığını, coğrafi verileri ve etkileşimli davranışı zorunlu kılıyor; bu da yapay zekayı sadece basit bir kod örneği değil, mini bir ürüne yakın bir şey üretmeye gerçekten zorluyor.

Başka bir deyişle, sadece Qwen'in JavaScript yazma yeteneğini test etmiyoruz. Aynı zamanda premium bir paneli andıran bir arayüzle finans odaklı bir tasarım amacını anlama yeteneğini de test ediyoruz.

Gemini ile birkaç rötuş

Qwen ile elde edilen ilk sonuç zaten çok umut vericiydi. Noktaları, animasyonu, tıklama etkileşimini görebiliyorduk ve hemen muhteşem bir görünüme çok yakın olduğumuzu hissettik.

Ancak, ekranı sabitlemek ve görsel sunumu iyileştirmek için bazı ayarlamalar yapılması gerekiyordu. Gemini'nin yardımıyla, özellikle kürenin işlenmesi, başlangıç çerçevelemesi, kıtaların okunabilirliği ve yükleme sırasında kameranın davranışı gibi bazı teknik ve sunum detaylarına rötuş yaptık.

Büyüleyici bir sonuç

Nihai sonuç açıkçası büyüleyici. Hemen küresel bir ticaret salonu izlenimi veren, parlayan noktalara sahip zarif, canlı, interaktif bir 3D küre elde ediyoruz.

İlk birkaç saniye içinde dikkati çeken türden bir deneyim. Ve her şeyden önce, sadece görsel bir araç değil: bu animasyonun arkasında, önemli finansal piyasaları sezgisel olarak takip etmek için gerçek bir ürün kullanım senaryosu hayal edebilirsiniz.

Sırada ne var?

Bu muhtemelen Prompt Tuesday #11'in en ilginç kısmı. Görünüm, beni basit bir blog yazısının ötesine geçmeye yetecek kadar ikna edici.

Bu fikri daha sonra Linkeum'da Finans bölümüne entegre etmeyi deneyeceğim. Gerçek bir veri katmanı ve birkaç ek iyileştirme ile bu interaktif küre, kullanıcılar için mükemmel bir "vay canına etkisi" unsuru haline gelebilir.