יצירת גלובוס אינטראקטיבי של בורסות העולם בעזרת AI

עבור Prompt Tuesday #11 זה, אנו מבקשים מה-AI ליצור המחשה ויזואלית מרשימה ב-HTML/JavaScript: גלובוס 3D מסתובב שבו הבורסות הגדולות בעולם נדלקות בהתאם לסטטוס הפתיחה שלהן.

בין שני פיתוחים ב-Linkeum, לפעמים צצים רעיונות שמיד עושים חשק לבדוק עד לאן ה-AI יכול להגיע. עבור ה-Prompt Tuesday #11 הזה, המטרה הייתה שאפתנית: לבקש מ-Qwen ליצור עמוד HTML/JavaScript המסוגל להציג גלובוס 3D מסתובב, כאשר הבורסות הגדולות בעולם מיוצגות על ידי נקודות זוהרות שמשנות מצב בהתאם לאם השוק פתוח או סגור.

הרעיון היה פשוט על הנייר, אך ויזואלי מאוד בביצועו. כל מרכז פיננסי היה צריך להופיע כנקודה ירוקה פועמת כאשר הבורסה פתוחה, או אדומה כאשר היא סגורה, עם האפשרות ללחוץ עליה כדי להציג חלון קטן המכיל את המידע העיקרי שלה.

הפרומפט שהשתמשנו בו ב-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.

למה הפרומפט הזה היה מעניין

מה שאני אוהב בפרומפט הזה הוא שהוא לא רק מבקש "גלובוס 3D". הוא כופה בו זמנית עיבוד ויזואלי, לוגיקה עסקית, נתונים גיאוגרפיים והתנהגות אינטראקטיבית, מה שבאמת דוחף את ה-AI לייצר משהו שקרוב יותר למיני-מוצר מאשר סתם דוגמת קוד פשוטה.

במילים אחרות, אנחנו לא רק בודקים את היכולת של Qwen לכתוב ב-JavaScript. אנחנו גם בודקים את היכולת שלו להבין כוונת עיצוב המכוונת לפיננסים, עם ממשק שכבר מזכיר לוח בקרה יוקרתי.

כמה התאמות קטנות עם Gemini

התוצאה הראשונה שהושגה עם Qwen כבר הייתה מבטיחה מאוד. יכולנו לראות את הנקודות, האנימציה, האינטראקציה בלחיצה, ומייד הרגשנו שאנחנו קרובים מאוד לעיבוד מרהיב.

עם זאת, היה צורך לבצע כמה התאמות כדי לייצב את התצוגה ולשפר את הבימוי הוויזואלי. בעזרת Gemini, התאמנו כמה פרטים טכניים וויזואליים, במיוחד בכל הנוגע לעיבוד הגלובוס, המסגור ההתחלתי, קריאות היבשות והתנהגות המצלמה בעת הטעינה.

תוצאה מדהימה

התוצאה הסופית היא בכנות מדהימה. אנחנו מקבלים גלובוס 3D אלגנטי, חי ואינטראקטיבי, עם נקודות זוהרות שנותנות מיד את הרושם של חדר מסחר עולמי.

זו בדיוק סוג החוויה שתופסת את העין בשניות הראשונות. ומעל הכל, זה לא רק גאדג'ט ויזואלי: מאחורי האנימציה הזו, אפשר כבר לדמיין מקרה שימוש אמיתי במוצר למעקב אינטואיטיבי אחר השווקים הפיננסיים המרכזיים.

ומה עכשיו?

זה כנראה החלק המעניין ביותר ב-Prompt Tuesday #11 הזה. העיבוד מספיק משכנע כדי לגרום לי לרצות ללכת מעבר למאמר בלוג פשוט.

אנסה לשלב את הרעיון הזה מאוחר יותר ב-Linkeum, בחלק של הפיננסים. עם שכבת נתונים אמיתית וכמה שכלולים נוספים, הגלובוס האינטראקטיבי הזה יכול להפוך לאלמנט "אפקט וואו" מצוין עבור המשתמשים.