用Deepseek 实现一个基于web的扣图应用

背景

因工作需要偶尔要自己拍几张设备图片做一个产品手册,这时需要简单去除一下背景,要求不高,但是也不想自己研究ps这些复杂的图像处理工具了。因此就想研究一下扣图相关算法,并使用Deepseek实现了一个简单的扣图web应用。

扣图算法发展

扣图算法 已经比较成熟,该技术应用广泛,学术界有大量研究,各行各业也有不同的用户需求和应用案例 。

(34 封私信 / 46 条消息) 一文尽享 Matting(抠图)主流开源模型、数据集 - 知乎

通用抠图技术选型--截止2025年4月_分割 sad评价指标-CSDN博客

Deepseek实现

需求

首先总结了下应用需求,作为Deepseek prompt

  • 完整的 Web 平台实现:使用 HTML、CSS 和 JavaScript 开发,可直接部署在云端或 Gitee 等代码托管平台。
  • 多格式图片上传:支持 JPG、PNG、HEIC 等常见图片格式,通过 heic2any 库实现 HEIC 格式的自动转换。
  • 智能背景去除:集成 TensorFlow.js 、 BodyPix 或其他模型,能够自动识别人像并去除背景,实现精准抠图。
  • 图片下载功能:处理完成后,用户可以将带有透明背景的图片以 PNG 格式下载到本地。
  • 用户友好的界面:
    • 响应式设计,适配各种屏幕尺寸
    • 拖放上传功能,操作便捷
    • 实时进度显示和操作反馈
    • 简洁美观的 UI,符合现代设计风格
  • 特点:
    • 使用方法非常简单,整个过程在浏览器中完成,无需后端服务器支持,方便部署和使用。

结果

经过2-3轮的调试优化,Deepseek完成了编程。另外让Deepseek总结了一下应用的功能 、特性和技术,具体如下:

🎯 功能

  • 多格式图片上传:支持JPG、PNG、HEIC等常见格式
  • 智能背景去除:AI自动识别人像并去除背景
  • 结果导出:下载透明背景的PNG图片
  • 实时预览:处理前后对比查看

🛠️ 技术

  • 前端:HTML5、CSS3/Tailwind、JavaScript
  • AI框架:TensorFlow.js(浏览器端机器学习)
  • 图像处理:Canvas API、BodyPix模型,
  • 部署:纯静态部署(Netlify/Vercel)

⚙️ 算法

  • 人像分割:基于BodyPix深度学习模型识别主体

  • 架构: 支持MobileNetV1和ResNet50两种架构

  • 背景去除:边缘采样+颜色范围检测算法

  • 边缘优化:邻域像素平滑处理减少锯齿

运行界面

处理结果

上传图片后提示三种处理方式,快速处理比较保守,人像边缘存在较大处理偏差。

均衡方式的边缘处理较好,但是给人像做了一些误处理。

精确处理比较耗时,处理效果虽然有一点瑕疵,但是基本满足要求了。精确处理使用了ResNet50模型。

开源项目对照

另外找了一个开源的扣图项目,跟deepseek用的算法 进行对比。

一键抠图有多强?19Kstar 的 Rembg 开源神器,5 大实用场景颠覆想象!-阿里云开发者社区

首先创建conda python环境。再安装rembg.

复制代码
conda activate pytorch-xpu
pip install "rembg[cpu,cli]"		# 顺带安装 onnxruntime 
(pytorch-xpu) d:\code>rembg --help
Usage: rembg.exe [OPTIONS] COMMAND [ARGS]...

Options:
  --version  Show the version and exit.
  --help     Show this message and exit.

Commands:
  b  for a byte stream as input
  d  download models
  i  for a file as input
  p  for a folder as input
  s  for a http server


#首次使用会自动下载模型
(pytorch-xpu) D:\code\trae\imageKou>rembg i 1.jpg 1.png
Downloading data from 'https://github.com/danielgatis/rembg/releases/download/v0.0.0/u2net.onnx' to file 'C:\Users\xxxx\.u2net\u2net.onnx'.
100%|###############################################| 176M/176M [00:00<?, ?B/s]

(pytorch-xpu) D:\code\trae\imageKou>

单个案例看, 处理结果比Deepseek调用的算法效果要好一些。综合能力,还需要进行大量测试。

另外一个:

项目首页 - RMBG-1.4:RMBG-1.4是一款由BRIA AI开发的先进背景移除模型,精准分离图像前景与背景,适用于各类商业用途。基于专业数据集训练,确保高效、准确且公平,支持非商业开源使用,让内容创作更便捷。【此简介由AI生成】 - GitCode

,精准分离图像前景与背景,适用于各类商业用途。基于专业数据集训练,确保高效、准确且公平,支持非商业开源使用,让内容创作更便捷。【此简介由AI生成】 - GitCode](https://ai.gitcode.com/mirrors/briaai/RMBG-1.4)

相关推荐
顾安r5 小时前
11.8 脚本网页 星际逃生
c语言·前端·javascript·flask
Hello.Reader5 小时前
Data Sink定义、参数与可落地示例
java·前端·网络
im_AMBER6 小时前
React 17
前端·javascript·笔记·学习·react.js·前端框架
一雨方知深秋6 小时前
2.fs模块对计算机硬盘进行读写操作(Promise进行封装)
javascript·node.js·promise·v8·cpython
谷歌开发者7 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (六)
前端·chrome·学习
一晌小贪欢7 小时前
【Html模板】电商运营可视化大屏模板 Excel存储 + 一键导出(已上线-可预览)
前端·数据分析·html·excel·数据看板·电商大屏·大屏看板
发现你走远了7 小时前
连接模拟器网页进行h5的调试(使用Chrome远程调试(推荐)) 保姆级图文
前端·chrome
街尾杂货店&8 小时前
css - 实现三角形 div 容器,用css画一个三角形(提供示例源码)简单粗暴几行代码搞定!
前端·css
顺凡8 小时前
删一个却少俩:Antd Tag 多节点同时消失的原因
前端·javascript·面试
小白路过8 小时前
CSS transform矩阵变换全面解析
前端·css·矩阵