我的作品集自我解释：使用 Gemini 构建 AI 驱动的建筑可视化工具

Source: Dev.to

提交至由 Google AI 主办的新年·新你作品集挑战赛

关于我

我是一名专注于云计算和人工智能的开发者，热衷于构建不仅功能完善，而且可解释的系统。多年来，我一直在使用云原生架构、DevOps 工作流以及 AI 驱动的应用程序，并且注意到一个反复出现的问题：优秀的系统往往难以一眼看懂。

通过这个作品集，我希望超越静态的项目展示。我的目标是创建一个交互式体验，体现我作为开发者的思考方式——注重清晰性、可扩展性和实际影响——同时展示 AI 如何让复杂的架构更易于所有人理解，而不仅仅是工程师。

投资组合

我的作品集是一个 实时部署的应用程序，可视化我的应用架构，并使用 Gemini 实时解释流量如何在系统中流动。它会引导访客了解：

• 入口点（用户 → Cloud Run）
• API 交互
• 数据持久层
• AI 模型交互
• 端到端请求流

🚀 实时演示

该演示让招聘人员、工程师，甚至非技术访客能够了解底层发生的情况 无需阅读架构图或文档。

我是如何构建的

技术栈

• 前端：轻量级网页 UI 用于架构可视化
• 后端：容器化服务部署在 Google Cloud Run
• AI：Gemini（通过 Google AI 工具）用于自然语言架构解释
• 基础设施：Google Cloud（Cloud Run、APIs、IAM）
• 部署：基于容器的 CI‑友好设置
• 源代码：可在 GitHub 获取

使用的 Google AI 工具

• Gemini 模型 用于：
  • 解释架构组件
  • 生成逐步的流量走向说明
  • 根据用户选择的组件自适应说明
• AI Studio 用于快速原型设计和部署
• Gemini APIs 用于优化提示词并集成智能说明

设计决策

• UI 刻意保持简约，让架构和说明成为焦点。
• 将 可解释性 放在华丽视觉之上。
• 设计提示词，使同一架构能够在 不同深度 上进行解释，满足不同观众的需求。
• 项目 开源，让其他开发者可以学习并在此基础上构建。

该应用 无状态、启动快速，能够在 Google Cloud 免费层 内舒适运行，既实用又符合生产环境要求。

开发流程

1. 在 AI Studio 中原型化 – 试验 Gemini 提示词，寻找最佳的架构概念解释方式。
2. 构建可视化层 – 创建可交互组件，响应用户点击。
3. 集成 Gemini API – 将前端连接到 Gemini，实现实时说明。
4. 容器化并部署 – 打包所有内容，部署到 Cloud Run。
5. 开源发布 – 将完整源码发布到 GitHub，供社区使用。

我最自豪的地方

• 🧠 AI 驱动的可解释性 – Gemini 不仅描述组件，还解释 流量为何如此。
• ☁️ 原生云端设计 – 完全容器化并部署在 Cloud Run，遵循真实世界的最佳实践。
• 🎯 面向受众的说明 – 同一架构可以被初级开发者、产品经理或高级工程师理解。
• 🚀 一个会“做事”的作品集 – 与其 说 我懂云架构，不如 展示 给大家看。
• 💻 开源贡献 – 完整源码已在 GitHub 上公开，为开发者社区提供学习资源。
• 🎨 使用 Google AI Studio 构建 – 利用 AI Studio 的快速原型能力，实现快速迭代和无缝部署。

🔗 快速链接

• Live Demo: AI Studio App
• Source Code: GitHub Repository
• Architecture Docs: 请查看 GitHub 仓库中的 README
• Try it yourself: 在实时演示中点击任意组件，即可观看 Gemini 解释你的请求是如何在系统中传递的！ 🎯