AI 智绘相册 (Smart Gallery MVP)

#1. 产品概述

AI 智绘相册 是一个基于 Web 的智能图片管理 MVP（最小可行性产品）。它利用 Google Gemini 2.5 Flash 多模态大模型的能力，实现了图片的自动识别、自动打标和智能分类。用户无需手动整理，即可通过 AI 生成的标签快速筛选照片。

注意：虽然本项目目前以 React SPA (单页应用) 形式运行以便于演示，但其核心逻辑（AI 调用、组件结构）与 Next.js 客户端组件完全兼容，可轻松迁移至 Next.js 框架。

#2. 核心功能

📸 智能上传

• ▸支持点击按钮选择或直接拖拽上传多张图片。
• ▸前端实时预览，无需等待后端处理。

🤖 AI 深度分析

• ▸集成 gemini-2.5-flash 模型。
• ▸自动描述：为每张照片生成 20 字以内的中文短描述。
• ▸自动分类：分析画面内容，生成 1-3 个智能标签（如：#风景、#美食、#宠物）。

🏷️ 动态筛选

• ▸系统自动聚合所有照片的标签。
• ▸顶部导航栏动态生成分类按钮，点击即可过滤特定类型的照片。

💾 本地隐私存储

• ▸采用 LocalStorage 模拟数据库。
• ▸数据存储在用户浏览器本地，刷新页面数据不丢失，且保护用户隐私。

#3. 技术栈

• ▸前端框架: React 18
• ▸UI 样式: Tailwind CSS (利用 CDN 快速构建)
• ▸AI SDK: @google/genai (Google GenAI SDK for Web)
• ▸构建/运行: ES Modules (浏览器原生支持)

#4. 数据结构设计

应用核心状态 photos 是一个 PhotoData 对象数组：

interface PhotoData {
  id: string;          // 唯一标识符
  url: string;         // 图片 Base64 数据
  description: string; // AI 生成的中文描述
  tags: string[];      // AI 生成的分类标签数组
  timestamp: number;   // 上传时间戳
}

#5. 交互流程

1. ▸初始化: 应用加载时从 LocalStorage 读取历史数据。
2. ▸上传: 用户拖入图片 -> FileReader 读取为 Base64。
3. ▸推理:
   • ▸构建 Prompt: "分析这张图片...返回 JSON"。
   • ▸调用 ai.models.generateContent。
4. ▸解析: AI 返回 JSON 格式文本 -> 解析为对象 {description, tags}。
5. ▸存储: 更新 React State -> 触发 useEffect 写入 LocalStorage。
6. ▸展示: 列表根据当前选中的 Tag 进行 .filter() 渲染。

#6. 未来规划 (Roadmap)

作为 MVP，本项目验证了核心价值。后续可扩展方向：

• ▸[ ] 迁移至 Next.js: 利用 Server Actions 处理 AI 请求，隐藏 API Key。
• ▸[ ] 云端存储: 接入 Supabase 或 AWS S3 存储原始图片。
• ▸[ ] 向量搜索: 利用 Embedding 实现"搜索红色的车"等语义搜索功能。
• ▸[ ] 用户系统: 增加多用户登录与相册分享功能。