ساخت یک کره تعاملی از بورس‌های جهانی با هوش مصنوعی

برای این Prompt Tuesday #11، از هوش مصنوعی می‌خواهیم یک تصویرسازی چشمگیر HTML/JavaScript تولید کند: یک کره سه‌بعدی در حال چرخش که در آن بورس‌های بزرگ جهانی بر اساس وضعیت باز یا بسته بودنشان روشن می‌شوند.

در میان توسعه‌های مختلف روی Linkeum، گاهی ایده‌هایی به ذهن می‌رسد که بلافاصله می‌خواهید آزمایش کنید هوش مصنوعی تا کجا می‌تواند پیش برود. برای این Prompt Tuesday #11، هدف بلندپروازانه بود: از Qwen بخواهیم یک صفحه HTML/JavaScript تولید کند که بتواند یک کره سه‌بعدی در حال چرخش را نمایش دهد، در حالی که بزرگترین بورس‌های جهان با نقاط درخشانی نشان داده می‌شوند که وضعیت آنها بسته به باز یا بسته بودن بازار تغییر می‌کند.

این ایده روی کاغذ ساده بود، اما در اجرا بسیار بصری و جذاب. هر مرکز مالی باید در زمان باز بودن بورس به عنوان یک نقطه سبز تپنده، و در زمان بسته بودن به رنگ قرمز ظاهر می‌شد، با این قابلیت که با کلیک روی آن، پنجره کوچکی شامل اطلاعات اصلی آن نمایش داده شود.

پرامپت استفاده شده در Qwen

همانطور که اغلب در این نوع تولیدات اتفاق می‌افتد، پرامپت به زبان انگلیسی نوشته شده است. مدل‌های تولید کد معمولاً دستورالعمل‌های فنی دقیق را در این زبان بهتر درک می‌کنند، به خصوص زمانی که پای ترکیب ساختار 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.

چرا این پرامپت جالب بود

چیزی که من در مورد این پرامپت دوست دارم این است که فقط یک "کره سه‌بعدی" درخواست نمی‌کند. بلکه همزمان رندر بصری، منطق تجاری، داده‌های جغرافیایی و رفتار تعاملی را تحمیل می‌کند، که واقعاً هوش مصنوعی را مجبور می‌کند چیزی نزدیک به یک محصول کوچک (مینی پروداکت) تولید کند تا فقط یک نمونه کد ساده.

به عبارت دیگر، ما فقط توانایی Qwen را برای نوشتن JavaScript آزمایش نمی‌کنیم. ما همچنین توانایی آن را برای درک یک هدف طراحی مبتنی بر امور مالی، با رابط کاربری که از قبل یک داشبورد ممتاز را تداعی می‌کند، می‌سنجیم.

چند تغییر کوچک با Gemini

اولین نتیجه به دست آمده با Qwen از قبل بسیار امیدوارکننده بود. ما می‌توانستیم نقاط، انیمیشن و تعامل کلیک را ببینیم، و بلافاصله احساس کردیم که به یک رندر تماشایی بسیار نزدیک هستیم.

با این حال، برای تثبیت نمایش و بهبود جلوه بصری، نیاز به انجام تنظیماتی بود. با کمک Gemini، برخی جزئیات فنی و نمایشی را تغییر دادیم، به ویژه در مورد رندر کره، کادربندی اولیه، خوانایی قاره‌ها و رفتار دوربین هنگام بارگذاری.

یک نتیجه شگفت‌انگیز

نتیجه نهایی صادقانه بگویم شگفت‌انگیز است. ما یک کره سه‌بعدی ظریف، زنده و تعاملی با نقاط درخشان دریافت می‌کنیم که بلافاصله حس یک سالن معاملات جهانی را القا می‌کند.

این دقیقاً همان تجربه‌ای است که در چند ثانیه اول چشم‌ها را خیره می‌کند. و مهمتر از همه، این فقط یک گجت بصری نیست: در پشت این انیمیشن، شما از قبل می‌توانید یک مورد استفاده واقعی از محصول را برای ردیابی بصری بازارهای مالی اصلی تصور کنید.

قدم بعدی چیست؟

این احتمالاً جالب‌ترین بخش از این Prompt Tuesday #11 است. رندر به اندازه‌ای متقاعدکننده است که مرا ترغیب می‌کند فراتر از یک مقاله ساده وبلاگ پیش بروم.

سعی خواهم کرد این ایده را بعداً در Linkeum، در بخش مالی (Finance) ادغام کنم. با یک لایه داده واقعی و چند اصلاح اضافی، این کره تعاملی می‌تواند به یک عنصر فوق‌العاده برای ایجاد "اثر شگفتی" در کاربران تبدیل شود.