สร้างลูกโลกแบบโต้ตอบของตลาดหุ้นทั่วโลกด้วย AI

สำหรับ Prompt Tuesday #11 นี้ เราขอให้ AI สร้างการแสดงผล HTML/JavaScript ที่น่าประทับใจ: ลูกโลก 3 มิติที่หมุนได้ ซึ่งตลาดหุ้นหลักๆ ของโลกจะสว่างขึ้นตามสถานะการเปิด/ปิด

ระหว่างการพัฒนา Linkeum บางครั้งก็มีแนวคิดที่ทำให้คุณอยากทดสอบทันทีว่า AI จะทำได้ไกลแค่ไหน สำหรับ Prompt Tuesday #11 เป้าหมายนั้นท้าทายมาก: ขอให้ Qwen สร้างหน้า HTML/JavaScript ที่สามารถแสดงลูกโลก 3 มิติที่หมุนได้ โดยมีตลาดหุ้นที่ใหญ่ที่สุดในโลกแสดงเป็นจุดสว่าง ซึ่งจะเปลี่ยนสถานะขึ้นอยู่กับว่าตลาดเปิดหรือปิดอยู่

แนวคิดนี้ดูเรียบง่ายบนกระดาษ แต่การแสดงผลนั้นชัดเจนมาก ศูนย์กลางทางการเงินแต่ละแห่งจะปรากฏเป็นจุดสีเขียวที่กะพริบเมื่อตลาดหุ้นเปิด หรือสีแดงเมื่อปิด พร้อมความสามารถในการคลิกเพื่อแสดงหน้าต่างเล็กๆ ที่มีข้อมูลหลัก

พรอมต์ที่ใช้ใน 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.

ทำไมพรอมต์นี้จึงน่าสนใจ

สิ่งที่ฉันชอบเกี่ยวกับพรอมต์นี้คือ มันไม่ได้แค่ขอ "ลูกโลก 3 มิติ" เท่านั้น แต่ยังบังคับให้มีการแสดงผลด้วยภาพ ตรรกะทางธุรกิจ ข้อมูลทางภูมิศาสตร์ และพฤติกรรมเชิงโต้ตอบในเวลาเดียวกัน ซึ่งผลักดันให้ AI สร้างสิ่งที่ใกล้เคียงกับมินิโปรดักต์มากกว่าแค่ตัวอย่างโค้ดง่ายๆ

พูดอีกอย่างก็คือ เราไม่ได้กำลังทดสอบแค่ความสามารถของ Qwen ในการเขียน JavaScript เท่านั้น เรายังกำลังทดสอบความสามารถในการทำความเข้าใจความตั้งใจในการออกแบบที่มุ่งเน้นด้านการเงิน ด้วยอินเทอร์เฟซที่ทำให้นึกถึงแดชบอร์ดระดับพรีเมียมอยู่แล้ว

ปรับแต่งเล็กน้อยด้วย Gemini

ผลลัพธ์แรกที่ได้จาก Qwen นั้นมีแนวโน้มที่ดีมาก เราสามารถมองเห็นจุด แอนิเมชัน การโต้ตอบจากการคลิก และรู้สึกได้ทันทีว่าเราเข้าใกล้การแสดงผลที่น่าทึ่งแล้ว

อย่างไรก็ตาม จำเป็นต้องมีการปรับแต่งบางอย่างเพื่อให้การแสดงผลมีเสถียรภาพและปรับปรุงการนำเสนอภาพให้ดียิ่งขึ้น ด้วยความช่วยเหลือจาก Gemini เราได้ปรับแต่งรายละเอียดทางเทคนิคและการนำเสนอเล็กน้อย โดยเฉพาะอย่างยิ่งเกี่ยวกับการเรนเดอร์ลูกโลก การกำหนดกรอบเริ่มต้น ความสามารถในการอ่านของทวีปต่างๆ และพฤติกรรมของกล้องขณะโหลด

ผลลัพธ์ที่น่าทึ่ง

ผลลัพธ์สุดท้ายนั้น น่าทึ่งมาก เราได้ลูกโลก 3 มิติที่สวยงาม มีชีวิตชีวา โต้ตอบได้ พร้อมจุดสว่างที่ให้ความรู้สึกถึงพื้นที่ซื้อขายระดับโลกในทันที

มันเป็นประสบการณ์ประเภทที่ดึงดูดสายตาในช่วงสองสามวินาทีแรก และที่สำคัญที่สุด มันไม่ได้เป็นเพียงอุปกรณ์ตกแต่งภาพเท่านั้น เบื้องหลังแอนิเมชันนี้ คุณสามารถจินตนาการถึงกรณีการใช้งานผลิตภัณฑ์จริงเพื่อติดตามตลาดการเงินหลักได้อย่างสังหรณ์ใจ

จะทำอย่างไรต่อไป?

นี่อาจเป็นส่วนที่น่าสนใจที่สุดของ Prompt Tuesday #11 นี้ การแสดงผลนั้นน่าเชื่อถือพอที่จะทำให้ฉันอยากไปไกลกว่าแค่บทความบล็อกธรรมดาๆ

ฉันจะพยายามรวมแนวคิดนี้เข้ากับ Linkeum ในภายหลังในส่วนการเงิน ด้วยเลเยอร์ข้อมูลจริงและการปรับแต่งเพิ่มเติมเล็กน้อย ลูกโลกแบบโต้ตอบนี้อาจกลายเป็นองค์ประกอบ "ว้าวเอฟเฟกต์" ที่ยอดเยี่ยมสำหรับผู้ใช้