给 Web 应用接入 AI 图片编辑功能：去背景、超分辨率、智能修复的技术方案

ArkhamKnight
0 阅读5分钟

我们在做一个在线图片编辑工具，之前有裁剪、滤镜、加文字这些基础功能。最近产品要加三个 AI 能力——去背景、超分辨率、智能修复（去水印/瑕疵）。

第一反应是肯定不能纯前端做。试过用 TensorFlow.js 在浏览器跑 RMBG 去背景模型，一张图 15 秒，手机上更慢还容易崩，体验不行。只能走后端 API。

这里记录一下技术选型和接入过程。

三个功能对应什么模型

先搞清楚技术本质，选型才不会走弯路。

去背景（Background Removal）：本质是图像分割，把前景抠出来。当前最好的开源模型是 BRIA AI 的 RMBG-2.0，基于 BiRefNet（双边参考网络）架构，训练数据包含超过 15,000 张高质量人工标注图片，覆盖电商、游戏、广告等场景。根据 BRIA 官方的 benchmark 数据，RMBG-2.0 在开源去背景模型中准确率最高（90%），领先于原版 BiRefNet（85%）。在毛发丝、半透明物体这些难点上有明显改善。

超分辨率（Super Resolution）：低分辨率图片放大。Real-ESRGAN 是目前应用最广泛的方案，由腾讯 ARC 实验室的 Xintao Wang 等人提出，论文发表在 ICCV 2021 Workshop（AIM），支持 2x 和 4x 放大，对真实世界照片的处理效果很好。GitHub 上 star 数超过 28k，是这个领域使用最广的开源项目。

智能修复（Inpainting）：给一个区域的 mask，让模型把这个区域"补全"。可以用来去水印、去路人、修瑕疵。目前效果好的方案是 FLUX Inpainting 或者 LaMa（Large Mask Inpainting），前者质量高但慢，后者速度快适合简单场景。

自建 vs API

自建的话需要 GPU 服务器（至少 A10 24GB），三个模型分别部署，加上推理框架、负载均衡、模型更新维护。

算了下账：

  • A10 云服务器月租约 ¥2000-3000
  • 运维：至少 0.5 个 ML 工程师的精力
  • 研发周期：2-3 周搭建 + 持续维护

我们日均调用量预计几百次，团队没有 ML 工程师。几百次调用走 API 每月成本就一两百块。怎么算都是 API 划算。

等日均调用量到了几万次的量级，或者数据隐私要求极高（医疗影像、金融证件这种不允许传到第三方的），再考虑自建。

选平台

三个功能最好一个平台搞定，少对接一家就少一份维护成本。

Remove.bg 只做去背景，功能太单一。Clipdrop 三个都有但速度一般。百度智能云功能全但 SDK 文档接入成本高。

最后用了 WaveSpeedAI。三个功能都有，底层模型就是 RMBG-2.0 和 Real-ESRGAN 这些主流方案。速度实测去背景 2 秒左右、超分辨率 1-2 秒。REST API 接口设计比较标准，接入简单。

后端实现

中间层很薄，转发请求就行：

具体的模型名在 wavespeed.ai/models 上搜对应的关键词就能找到（比如搜 "rmbg" 或 "esrgan"），每个模型的 API 文档页都有现成的调用示例，照着改就行。

后端代码结构很简单，就是转发请求：

const express = require('express');
const router = express.Router();

const API_KEY = process.env.WAVESPEED_API_KEY;
const BASE_URL = 'https://api.wavespeed.ai/api/v3';

async function callAI(model, params) {
  const res = await fetch(`${BASE_URL}/${model}`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(params),
  });
  return res.json();
}

const RMBG_MODEL = 'wavespeed-ai/image-background-remover';
const UPSCALE_MODEL = 'wavespeed-ai/ultimate-image-upscaler';

router.post('/remove-bg', async (req, res) => {
  const result = await callAI(RMBG_MODEL, { image: req.body.image_url });
  res.json({ image: result.data.outputs[0] });
});

// 超分辨率
router.post('/upscale', async (req, res) => {
  const result = await callAI(UPSCALE_MODEL, {
    image: req.body.image_url,
    scale: req.body.scale || 2,
  });
  res.json({ image: result.data.outputs[0] });
});

module.exports = router;

一个下午三个接口写完了。API Key 在 wavespeed.ai/accesskey 创建，注意需要充值后才能激活。

前端踩的坑

代码就不贴了，常规的 React 组件 + loading 状态。说几个实际问题。

跨域。 AI API 返回的图片 URL 是第三方 CDN 的。如果你需要在 Canvas 里操作这张图（去完背景继续编辑），会被 CORS 拦住。我们的处理是后端下载图片后上传到自己的 CDN，返回自己域名的 URL。

大图超时。 有用户传了 15MB 的图，接口直接超时。前端上传前用 Canvas 压缩到 2MB 以内再传。

用户狂点。 上线第一天就有人连续点去背景按钮，一分钟几十次。前端加 debounce + 后端加用户级限流。

保留原图。 处理完必须让用户能看原图、能撤销。不然效果不满意但原图没了，体验极差。

上线后的数据

跑了两周看下来，去背景调用量占总量 65%，是最刚需的功能。超分辨率 25%。修复只有 10%——因为要用户手动画 mask 标区域，门槛高，后面准备做自动水印检测来降低门槛。

去背景好评率 90% 以上。RMBG-2.0 的 BiRefNet 架构对边缘细节保持确实好，毛发、透明物体的处理比之前的 U2-Net 和 MODNet 进步了很多。

超分辨率有个问题：偶尔会"过度锐化"，人像皮肤看着不自然。这是 Real-ESRGAN 训练数据偏向导致的，后面准备试试其他超分模型。

API 月成本大约 ¥150（日均 200 次调用），完全可控。

接入 AI 图片编辑功能比想象中简单。最难的不是技术实现而是产品设计——loading 怎么做、错误怎么提示、用户预期怎么管理。技术层面选好模型 + 选好平台 + 处理好前端交互就行了。有做过类似功能的朋友欢迎交流经验。

avatar
文章
阅读
粉丝