用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)

相关推荐
金梦人生5 小时前
Css性能优化
前端·css
Holin_浩霖5 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖5 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇5 小时前
CSS属性继承与特殊值
前端·css
kevlin_coder5 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生5 小时前
JS 性能优化
前端·javascript
peachSoda75 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
hbqjzx5 小时前
记录一个自动学习的脚本开发过程
开发语言·javascript·学习
我有一棵树5 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex