DOODLE PHOTO

Doodle Photo

开始体验 返回导航
Overview
治愈系 涂鸦照片 滤镜工坊
上传一张照片,AI 自动识别主体,生成手绘轮廓和治愈系标签,搭配日系胶片滤镜 —— 把你的照片变成独一无二的涂鸦作品。
3
日系胶片滤镜
11
手绘贴纸类型
8
AI 识别主题
100%
后端离线可用
Workflow
AI 处理流程
从上传到导出,AI 驱动的全自动化涂鸦生成管线。
上传照片
AI 视觉分析
SAM 像素分割
轮廓提取
智能贴纸排版
滤镜渲染
交互编辑
导出 PNG
Features
核心功能
🤖

AI 视觉分析

多模态大模型识别照片主体、主题与情绪,生成治愈系中文标题和精准定位框。

✂️

SAM 像素分割

Meta SAM 模型实现像素级主体分割,OpenCV 提取精确轮廓,非矩形框裁剪。

🎨

手绘风格渲染

Canvas 手绘抖动算法,模拟草稿线条、虚线箭头、不规则轮廓,每笔都独一无二。

🎞️

日系胶片滤镜

3 种像素级滤镜:青森(青调)、夕焼け(暖橙)、霧雨(灰蓝),直接操作 ImageData。

🖐️

交互式编辑

拖拽、缩放、删除装饰元素,手动添加贴纸、文字、手账元素,完全自由创作。

💾

安全降级

后端不可用时前端依然完整可用:滤镜 + 导出。SAM 不可用时降级为手绘椭圆轮廓。

Filters
三款 日系胶片滤镜
基于 Canvas ImageData 像素级色彩处理,非 CSS 滤镜,导出同样画质。

青森

柔和青色调 · 低对比度 · 高光微黄

夕焼け

暖橙色调 · 高光暖黄 · 暗部棕调

霧雨

冷灰蓝调 · 低饱和 · 蓝色雾感

Stickers
11 种 手绘贴纸
全部由 Canvas 手绘函数生成,带抖动效果,每张贴纸都不完全一样。
❤️ 🎵 🌸 ☁️ 😊 🦋 🌿 🌱 💖
Tech Stack
技术栈
⚛️

React 19 + Vite 8

现代化前端框架,Hooks 状态管理,Vite 极速构建

🎨

Canvas 2D API

原生 Canvas 渲染管线:手绘抖动、贝塞尔箭头、像素级滤镜

🤖

AI Vision + SAM

多模态大模型分析 + Meta SAM 像素分割 + OpenCV 轮廓提取

🐍

FastAPI 后端

OpenAI SDK 调用视觉模型,三级降级管线保证鲁棒性

🌀

Tailwind CSS v4

原子化 CSS 框架,快速构建治愈系 UI 界面

🖼️

全尺寸导出

原始分辨率 PNG 输出,Canvas 物理像素渲染,不损失画质

Deep Dive
技术亮点
🎲

确定性随机

Mulberry32 PRNG 基于图片哈希种子,同一张照片每次生成完全一致的装饰布局,结果可复现。

📐

等距轮廓重采样

弧长参数化重采样,每 3px 一个点,细小物体不噪、大型物体不糙。

🗂️

双通道渲染

Canvas 层处理图片+滤镜+轮廓,HTML 叠加层处理可交互元素,混合架构兼顾性能与体验。

🛡️

三级降级管线

SAM 像素分割 → 手绘椭圆轮廓 → 空检测结果,后端任意环节失败都不影响前端使用。

Quick Start
快速开始
# 启动后端 (需要 SAM 模型权重) python server.py # 启动前端开发服务器 npm run dev # 构建生产版本 npm run build