Para este Prompt Tuesday #11, pedimos à IA para gerar uma visualização impressionante em HTML/JavaScript: um globo 3D em rotação onde as principais bolsas de valores se iluminam de acordo com o seu status de abertura.
Entre dois desenvolvimentos no Linkeum, às vezes surgem ideias que dão imediatamente vontade de testar até onde a IA pode ir. Para este Prompt Tuesday #11, o objetivo era ambicioso: pedir ao Qwen para gerar uma página HTML/JavaScript capaz de exibir um globo 3D em rotação, com as maiores bolsas de valores do mundo representadas por pontos luminosos que mudam de estado dependendo se o mercado está aberto ou fechado.
A ideia era simples no papel, mas muito visual na sua execução. Cada centro financeiro devia aparecer como um ponto verde pulsante quando a bolsa está aberta, ou vermelho quando está fechada, com a possibilidade de clicar nele para exibir uma pequena janela com as suas informações principais.
O prompt usado no Qwen
Como costuma acontecer neste tipo de geração, o prompt foi redigido em inglês. Os modelos de geração de código geralmente compreendem melhor as instruções técnicas detalhadas neste idioma, especialmente quando se trata de combinar estrutura HTML, lógica JavaScript, renderização visual e interações do utilizador.
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.
Por que este prompt foi interessante
O que eu gosto neste prompt é que ele não pede apenas "um globo em 3D". Ele impõe ao mesmo tempo uma renderização visual, lógica de negócios, dados geográficos e comportamento interativo, o que realmente força a IA a produzir algo mais próximo de um mini-produto do que um simples exemplo de código.
Por outras palavras, não estamos apenas a testar a capacidade do Qwen para escrever JavaScript. Estamos também a testar a sua capacidade de compreender uma intenção de design orientada para as finanças, com uma interface que já evoca um painel de controlo premium.
Alguns retoques com o Gemini
O primeiro resultado obtido com o Qwen já era muito promissor. Podíamos ver os pontos, a animação, a interação ao clicar, e percebemos imediatamente que estávamos muito perto de uma renderização espetacular.
No entanto, foram necessários alguns ajustes para estabilizar a exibição e melhorar a encenação visual. Com a ajuda do Gemini, retocámos alguns detalhes técnicos e de apresentação, nomeadamente a renderização do globo, o enquadramento inicial, a legibilidade dos continentes e o comportamento da câmara ao carregar.
Um resultado impressionante
O resultado final é francamente impressionante. Obtemos um globo 3D elegante, vivo e interativo, com pontos luminosos que dão imediatamente a impressão de uma sala de negociação global.
É exatamente o tipo de experiência que chama a atenção nos primeiros segundos. E acima de tudo, não é apenas um gadget visual: por trás desta animação, já podemos imaginar um verdadeiro caso de uso do produto para acompanhar os principais mercados financeiros de forma intuitiva.
E agora?
Esta é provavelmente a parte mais interessante deste Prompt Tuesday #11. A renderização é convincente o suficiente para me dar vontade de ir além de um simples artigo de blog.
Vou tentar integrar esta ideia mais tarde no Linkeum, na secção de Finanças. Com uma verdadeira camada de dados e alguns refinamentos adicionais, este globo interativo pode tornar-se um excelente elemento de "efeito uau" para os utilizadores.
