今回のPrompt Tuesday #11では、AIに印象的なHTML/JavaScriptの視覚化を生成するよう依頼します。世界の主要な証券取引所が開場状況に応じて点灯する、回転する3D地球儀です。
Linkeumでの開発の合間に、AIがどこまでできるかすぐに試したくなるようなアイデアが浮かぶことがあります。今回のPrompt Tuesday #11の目標は野心的なものでした。Qwenに、回転する3D地球儀を表示できる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.gllibrary (andthree.js) via CDN, along with Tailwind CSS for styling.Here are the exact requirements:
- The Globe: Render a beautiful, dark-themed, highly detailed 3D globe. It should auto-rotate slowly.
- 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.
- 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.
- 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.
- 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.
- 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.htmlfile and run it immediately in my browser.
このプロンプトが興味深かった理由
私がこのプロンプトで気に入っているのは、単に「3D地球儀」を要求しているだけではない点です。同時に、視覚的レンダリング、ビジネスロジック、地理データ、インタラクティブな動作を課すことで、AIが単なるコード例ではなく、ミニ製品に近いものを生成するように強く促しています。
言い換えれば、QwenのJavaScriptを記述する能力をテストしているだけではありません。プレミアムなダッシュボードをすでに彷彿とさせるインターフェースを備えた、金融志向のデザインの意図を理解する能力もテストしているのです。
Geminiによるいくつかの微調整
Qwenで得られた最初の結果は、すでに非常に有望でした。点、アニメーション、クリックによるインタラクションを確認でき、素晴らしいレンダリングに非常に近づいているとすぐに感じました。
ただし、表示を安定させ、視覚的な演出を改善するために、いくつかの調整を行う必要がありました。そのため、Geminiの助けを借りて、特に地球儀のレンダリング、初期のフレーミング、大陸の可読性、読み込み時のカメラの動作など、技術的な詳細やプレゼンテーションの細部を微調整しました。
驚くべき結果
最終的な結果は、率直に言って驚くべきものです。エレガントで活気があり、インタラクティブな3D地球儀が完成し、光る点がすぐにグローバルなトレーディングフロアの印象を与えます。
これはまさに、最初の数秒で目を引くタイプの体験です。そして何よりも、それは単なる視覚的なガジェットではありません。このアニメーションの背後には、主要な金融市場を直感的に追跡するという、実際の製品のユースケースがすでに想像できます。
これからどうする？
これはおそらく、今回のPrompt Tuesday #11で最も興味深い部分です。このレンダリングは、単なるブログ記事の枠を超えてさらに先へ進みたいと思わせるほど説得力があります。
後で、このアイデアをLinkeumの財務セクションに統合してみようと思います。実際のデータレイヤーといくつかの追加の改良により、このインタラクティブな地球儀は、ユーザーにとって優れた「ワオ効果」をもたらす要素になる可能性があります。
