EcoSense AI：在60秒内了解您的碳足迹

Source: Dev.to

EcoSense AI – AI 驱动的碳足迹分析器（2026 年地球日）

工作原理

1. 交通 – 通勤方式与距离 🚗
2. 饮食 – 从重肉食到纯素 🍽️
3. 家庭能源 – 化石燃料到 100 % 可再生能源 ⚡
4. 购物 – 快时尚到极简/二手 🛍️

Google Gemini 2.0 Flash 分析答案并返回：

• 一个生态评分（0‑100）以及字母等级
• 以千克计的年度 CO₂ 排放估算（相较于全球平均值）
• 按类别划分的影响细分并配有可视化指示器
• 五条个性化的减排建议
• 可复制并发布的地球日承诺文案

目标是让碳意识变得易于获取且可付诸行动——实用而非说教。

实时演示：（约 60 秒）

功能概述

• 计算年度碳足迹的估算值
• 对生态友好程度进行评分（A+ 到 F）
• 按类别展示影响细分
• 提供五条个性化的减排建议
• 生成可分享的地球日承诺文案

技术栈

• Next.js 16（静态导出）
• Tailwind CSS（自定义地球日主题）
• Google Gemini 2.0 Flash（通过服务器端代理进行 AI 分析）
• Cloudflare Pages（托管 + 无服务器函数）
• Lucide React（图标）

架构

flowchart TD
    Browser["Browser (Static HTML/JS)"]
    API["/api/generate (Cloudflare Function)"]
    Gemini["Google Gemini API"]
    
    Browser --> API --> Gemini
    style Browser fill:#f9f,stroke:#333,stroke-width:2px
    style API fill:#bbf,stroke:#333,stroke-width:2px
    style Gemini fill:#bfb,stroke:#333,stroke-width:2px

• API 密钥仅存放在 Cloudflare Function 中，永不泄露到客户端。
• 前端向 /api/generate 发送结构化提示。
• 函数在服务器端加入 Gemini API 密钥，调用 Gemini REST API，并仅返回生成的文本。

部署步骤

npm install
npm run build
# Deploy
wrangler pages deploy out
# Remember to set GEMINI_API_KEY in Cloudflare Pages environment variables

关键文件

• app/page.tsx – 完整的 React UI，包含步骤向导、用于生态评分的 SVG 环形图以及结果展示。
• functions/api/generate.js – 代理 Gemini API 的 Cloudflare Function（密钥永不到达浏览器）。
• app/globals.css – 自定义的地球日绿色主题。

其他值得注意的组件

• SVG 环形图 用于生态评分——视觉上令人满意。
• 颜色编码的影响徽章（红 → 绿）对应每个选项。
• 结果页面的类别细分柱状图。
• 可复制到剪贴板的地球日承诺，便于社交分享。

对 Google Gemini 的最佳利用方式

Gemini 是核心引擎，它将四个简单输入转化为包含个性化建议的完整环境分析。通过提示工程确保 Gemini 返回一致的 JSON，并提供真实的 CO₂ 估算，使结果真正有用。

构建目的： DEV 周末挑战 – 地球日版
GitHub 查看地址：（replace with actual URL）