# pixel-cake-demo

**Repository Path**: suxiaohu/pixel-cake-demo

## Basic Information

- **Project Name**: pixel-cake-demo
- **Description**: pixel-cake-demo 修图工具
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-21
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Pixel Cake Demo

一个基于 Vue 3 + TypeScript + Vite 前端和 FastAPI 后端的图像处理演示项目，提供图像抠图和美颜功能。

## 项目介绍

Pixel Cake Demo 是一个展示图像处理能力的 Web 应用，通过简洁的界面让用户体验 AI 抠图和图像美颜功能。项目采用前后端分离架构，前端使用现代化的 Vue 3 技术栈，后端基于高性能的 FastAPI 框架。

## 功能特性

- **AI 抠图**: 智能识别图像中的人物主体，实现一键抠图
- **图像美颜**: 提供磨皮和清晰度调节功能，优化人像效果
- **RESTful API**: 提供标准化的接口，方便与其他系统集成
- **实时预览**: 前端实时展示处理效果，所见即所得

## 技术栈

### 前端
- Vue 3 - 渐进式 JavaScript 框架
- TypeScript - 类型安全的 JavaScript 超集
- Vite - 下一代前端构建工具
- Axios - Promise HTTP 客户端

### 后端
- Python 3.10+ - 现代编程语言
- FastAPI - 高性能 Web 框架
- Pillow (PIL) - Python 图像处理库
- NumPy - 数值计算库
- OpenCV - 计算机视觉库

## 项目结构

```
pixel-cake-demo/
├── backend/                    # 后端服务目录
│   ├── main.py                # FastAPI 主程序，包含 API 接口定义
│   ├── image_ops.py           # 图像处理函数实现
│   ├── requirements.txt       # Python 依赖列表
│   └── README.md              # 后端启动说明
├── frontend/                   # 前端应用目录
│   ├── src/
│   │   ├── components/        # Vue 组件
│   │   │   ├── ImageEditor.vue # 图像编辑器组件
│   │   │   └── HelloWorld.vue  # 示例组件
│   │   ├── App.vue            # 根组件
│   │   ├── main.ts            # 应用入口
│   │   └── style.css          # 全局样式
│   ├── index.html             # HTML 模板
│   ├── package.json           # 项目配置
│   ├── vite.config.ts         # Vite 构建配置
│   └── README.md              # 前端开发说明
├── demo.md                    # 演示计划文档
└── README.md                  # 项目说明文档
```

## 快速开始

### 环境要求

- Node.js 18.0+ 
- Python 3.10+
- pip 包管理器

### 后端设置

1. 进入后端目录：
```bash
cd backend
```

2. 创建并激活虚拟环境（推荐）：
```bash
python -m venv venv
# Linux/macOS
source venv/bin/activate
# Windows
venv\Scripts\activate
```

3. 安装依赖：
```bash
pip install -r requirements.txt
```

4. 启动后端服务：
```bash
python main.py
```

后端服务默认运行在 `http://localhost:8000`

### 前端设置

1. 进入前端目录：
```bash
cd frontend
```

2. 安装依赖：
```bash
npm install
```

3. 启动开发服务器：
```bash
npm run dev
```

前端默认运行在 `http://localhost:5173`

## API 文档

### 健康检查

**GET** `/`

检查服务是否正常运行。

**响应示例**
```json
{
  "status": "ok"
}
```

### 图像抠图

**POST** `/api/matting`

上传图像并执行 AI 抠图。

**请求格式**: `multipart/form-data`

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| file | File | 是 | 要处理的图像文件 |

**响应示例**: `image/png`

返回处理后的透明背景 PNG 图像。

### 图像美颜

**POST** `/api/beautify`

上传图像并应用美颜效果。

**请求格式**: `multipart/form-data`

| 参数 | 类型 | 必填 | 默认值 | 说明 |
|------|------|------|--------|------|
| file | File | 是 | - | 要处理的图像文件 |
| smooth | int | 否 | 0 | 磨皮强度，范围 0-10 |
| sharp | int | 否 | 0 | 清晰度强度，范围 0-10 |

**响应示例**: `image/jpeg`

返回处理后的 JPEG 图像。

## 前端使用说明

1. 打开浏览器访问 `http://localhost:5173`
2. 点击上传区域选择要处理的图像
3. 选择需要的处理功能：
   - **抠图模式**: 一键抠出图像主体
   - **美颜模式**: 调节磨皮和清晰度滑块
4. 处理完成后可下载结果图像

## 依赖说明

### 后端主要依赖

- `fastapi` - Web 框架
- `uvicorn` - ASGI 服务器
- `pillow` - 图像处理
- `numpy` - 数值计算
- `python-multipart` - 文件上传解析
- `opencv-python` - 计算机视觉（可选）

### 前端主要依赖

- `vue` - 核心框架
- `axios` - HTTP 请求
- `vite` - 构建工具

## 浏览器支持

支持所有现代浏览器：
- Chrome 88+
- Firefox 85+
- Safari 14+
- Edge 88+

## 贡献指南

1. Fork 本仓库
2. 创建功能分支：`git checkout -b feature/your-feature`
3. 提交改动：`git commit -m 'Add some feature'`
4. 推送分支：`git push origin feature/your-feature`
5. 提交 Pull Request

## 许可证

本项目采用 MIT 许可证开源，详情请查看 LICENSE 文件。

## 致谢

- [Vue.js](https://vuejs.org/) - 渐进式框架
- [FastAPI](https://fastapi.tiangolo.com/) - 现代 Web 框架
- [Pillow](https://python-pillow.org/) - Python 图像库