构建透明 AI 窗口：我的 Gemini API 之旅

Source: Dev.to

Introduction

我一直对科幻电影中出现的未来感界面着迷。这个项目的诞生源于想要打造一个动态的玻璃拟态（glass‑morphism）网页 UI，不仅外观炫酷，还能把你的摄像头变成实时壁纸，并且由 AI 提供动力。

The “Why”

主要目标是实验多模态 AI 的能力，特别是 Google 的 Gemini API，并探索如何将其整合到具备上下文感知的界面中。我想看看能否创建一个 UI，根据摄像头“看到”的内容做出反应并提供信息。

The “How” (Tech Stack)

• Google Gemini API: 用于 AI 驱动的实时分析和响应。
• Vanilla JavaScript: 负责摄像头视频流、UI 交互以及与 Gemini API 的通信。动态提示和上下文注入是切换 AI 模式的关键。
• Tailwind CSS & Modern CSS: 为玻璃拟态 UI 提供样式并确保响应式布局。
• BroadcastChannel API: 在多个浏览器标签页/窗口之间同步窗口状态和摄像头视频流。

Key Features

• Transparent Window: 作为透明覆盖层，背景使用摄像头实时画面。
• Cross‑Tab Syncing: 通过 BroadcastChannel API 在不同浏览器标签页之间同步摄像头画面和 UI 状态。
• AI Modes: 集成的 Gemini AI 提供基于摄像头画面的不同交互模式，例如提供实用信息的 Futuristic HUD（未来化抬头显示）和提供幽默点评的 Snarky Critic（讽刺评论员）。
• 可调节的 UI 元素，用于摄像头画面的缩放和位置。

Lessons Learned

这个项目是一次很好的学习经历，尤其是对 Gemini 等多模态模型的多样性有了更深的理解。动态构建提示并根据所选 AI 模式注入上下文，对获得多样且相关的响应至关重要。它也凸显了 Web 技术如何组合，创造出真正交互式且新颖的用户体验。