# photo-critical-react

**Repository Path**: azlll/photo-critical-react

## Basic Information

- **Project Name**: photo-critical-react
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-29
- **Last Updated**: 2026-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📸 锐评图片

一个有趣的网页应用，使用 AI 视觉模型对用户上传的照片进行犀利点评。拍得好就大力夸赞，拍得不好就强烈吐槽（但绝不带脏字）！

该程序使用Trae CN + Kimi K2.5开发，智能体SOLO coder，作者程小朱。from TraeFriends 南宁-20260326

## ✨ 功能特性

- **图片上传**：支持点击上传和拖拽上传
- **AI 视觉分析**：调用豆包 doubao-seed-1-6-vision 模型进行智能分析
- **25种人物风格**：李云龙、唐僧、孙悟空、林黛玉、郭德纲等经典角色任你选择
- **流式输出**：实时显示 AI 的点评内容
- **动画反馈**：根据评分显示👍赞或👎数落动画，配合撒花效果

## 🚀 快速开始

### 环境要求

- Node.js 18+
- npm 或 yarn

### 安装依赖

```bash
npm install
```

### 环境配置

复制 `.env.example` 为 `.env`（或直接编辑 `.env`），配置以下参数：

```env
# 豆包 API 配置（必填）
VITE_DOUBAO_API_KEY=your_api_key_here

# 模型名称（可选，默认使用 doubao-seed-1-6-vision）
VITE_DOUBAO_MODEL=doubao-seed-1-6-vision

# API 基础地址（可选，默认使用火山引擎北京节点）
VITE_DOUBAO_BASE_URL=https://ark.cn-beijing.volces.com/api/v3

# 默认人物风格（可选，默认李云龙）
VITE_DEFAULT_CHARACTER=liyunlong
```

#### 获取 API Key

1. 访问 [火山引擎控制台](https://console.volcengine.com/)
2. 注册/登录账号
3. 进入「机器学习平台」→「模型推理」→「在线推理」
4. 创建推理接入点，获取 API Key
5. 确保已开通 doubao-seed-1-6-vision 模型的调用权限

### 开发模式

```bash
npm run dev
```

应用将在 <http://localhost:5173/> 启动

### 构建生产版本

```bash
npm run build
```

构建产物将输出到 `dist/` 目录

### 预览生产版本

```bash
npm run preview
```

## 📁 项目结构

```
PhotoCriticalComment/
├── .env                          # 环境配置文件
├── package.json
├── vite.config.js                # Vite + TailwindCSS 配置
├── index.html
└── src/
    ├── components/               # React 组件
    │   ├── CharacterSelect.jsx   # 人物风格选择器
    │   ├── ImageUploader.jsx     # 图片上传组件
    │   ├── AnalysisResult.jsx    # 分析结果展示
    │   ├── FeedbackOverlay.jsx   # 赞/数落动画覆盖层
    │   └── Confetti.jsx          # 撒花动画组件
    ├── constants/
    │   └── characters.js         # 25个人物风格配置
    ├── services/
    │   └── api.js                # Doubao API 调用封装
    ├── App.jsx                   # 主应用组件
    ├── main.jsx                  # 应用入口
    └── index.css                 # 全局样式 + TailwindCSS
```

## 🎭 人物风格列表

| 人物   | 风格特点                   |
| ---- | ---------------------- |
| 李云龙  | 铁血军人，粗犷豪放，口头禅"老子""他娘的" |
| 唐僧   | 慈悲为怀，啰啰嗦嗦，凡事讲因果        |
| 孙悟空  | 桀骜不驯，火眼金睛，嘴上不饶人        |
| 猪八戒  | 好吃懒做，贪图美色，说话幽默         |
| 曹操   | 枭雄气概，文采斐然，霸气侧漏         |
| 林黛玉  | 多愁善感，心思细腻，语带幽怨         |
| 王熙凤  | 泼辣干练，伶牙俐齿，笑里藏刀         |
| 诸葛亮  | 运筹帷幄，儒雅犀利，引经据典         |
| 关羽   | 义薄云天，傲气冲天，目中无人         |
| 张飞   | 猛将风范，声如洪钟，直言不讳         |
| 鲁迅   | 犀利深刻，一针见血，讽刺大师         |
| 海明威  | 硬汉风格，简洁有力，直击要害         |
| 郭德纲  | 相声大师，损人不带脏字，幽默风趣       |
| 小沈阳  | 东北风格，搞笑幽默，接地气          |
| 容嬷嬷  | 尖酸刻薄，扎心高手，毒舌老太         |
| 华妃   | 后宫霸气，恃宠而骄，言辞凌厉         |
| 甄嬛   | 聪慧过人，表面温柔，暗藏锋芒         |
| 爱因斯坦 | 科学视角，理性分析，偶尔调皮         |
| 谢尔顿  | 天才宅男，直言不讳，不解风情         |
| 老子   | 道家智慧，无为而治，玄妙点评         |
| 孔子   | 儒家风范，循循善诱，寓贬于褒         |
| 二哈   | 哈士奇视角，拆家式点评，欢乐无穷       |
| ...  | 更多人物等你探索               |

## 🔧 技术栈

- **框架**：React 19 + Vite 8
- **样式**：TailwindCSS 4
- **构建工具**：Vite
- **AI 模型**：豆包 doubao-seed-1-6-vision

## 📋 使用流程

1. 选择锐评人物风格（默认李云龙）
2. 点击或拖拽上传照片
3. 等待 AI 流式输出分析结果
4. 根据评分查看赞👍或数落👎动画

## 🌐 部署上线

### 静态托管（推荐）

构建完成后，将 `dist/` 目录部署到任意静态托管服务：

- **Vercel**：`vercel --prod`
- **Netlify**：拖拽 `dist/` 文件夹到部署区域
- **GitHub Pages**：使用 `gh-pages` 分支
- **腾讯云 COS** / **阿里云 OSS**：上传 `dist/` 内容
- **Nginx**：配置静态资源服务

### Docker 部署

```dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
```

### 注意事项

- 由于应用是纯前端实现，API Key 会暴露在浏览器中
- 生产环境建议：
  - 使用后端代理转发 API 请求
  - 或配置 API Key 的调用频率限制
  - 或使用环境变量注入方式部署

## 📝 配置说明

### 环境变量

| 变量名                      | 必填 | 默认值                                        | 说明         |
| ------------------------ | -- | ------------------------------------------ | ---------- |
| `VITE_DOUBAO_API_KEY`    | ✅  | -                                          | 豆包 API Key |
| `VITE_DOUBAO_MODEL`      | ❌  | `doubao-seed-1-6-vision`                   | 模型名称       |
| `VITE_DOUBAO_BASE_URL`   | ❌  | `https://ark.cn-beijing.volces.com/api/v3` | API 基础地址   |
| `VITE_DEFAULT_CHARACTER` | ❌  | `liyunlong`                                | 默认人物风格 ID  |

### 添加新人物风格

编辑 `src/constants/characters.js`：

```javascript
// 在 CHARACTERS 数组中添加
{ id: 'newcharacter', name: '新人物', description: '人物描述' }

// 在 CHARACTER_PROMPTS 对象中添加
newcharacter: '你现在是新人物。说话风格...'
```

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

MIT License