企业官网建设流程全解析

浏览器端图像修复指南：Inpaint-web 用 WebGPU 完成涂抹去物与 4 倍超分

【免费下载链接】inpaint-webA free and open-source inpainting & image-upscaling tool powered by webgpu and wasm on the browser。| 基于 Webgpu 技术和 wasm 技术的免费开源 inpainting & image-upscaling 工具, 纯浏览器端实现。项目地址: https://gitcode.com/GitHub_Trending/in/inpaint-web

Inpaint-web 是一个免费开源的浏览器端图像修复与放大工具：用画笔盖住不想留的东西，浏览器里的模型会自动补全背景；模糊图点一下就能放大 4 倍。全程依赖 WebGPU 加速（不支持时回退 WASM），图片在本地处理、不经过任何服务器。不用安装软件，打开页面就能用。

场景切入：商品图上的那支笔，怎么去掉

它的核心工作流只有一句话：把不要的东西用笔刷涂掉，松开鼠标，模型自动补上。

小林的网店上新了一批粉色包包，商品图拍完后发现桌面上一支笔闯进了镜头。老办法是打开 Photoshop 学"内容识别填充"，新办法是打开 Inpaint-web：选一张内置示例图（如 public/examples/bag.jpeg）或上传自己的图，把画笔大小拖到 40 像素（范围 10–200），沿笔身涂一圈，松开鼠标——几秒后笔消失，背景纹理被自然地填上。涂坏了按 Ctrl+Z 撤销重涂；按住对比滑块左右拖动，可以实时对照修复前后效果。

🖌️ 核心能力拆解：涂抹修复、双引擎加速、4 倍超分、模型缓存

四个能力点都能在上手时直接感知到，每个都在代码里有明确出处。

能力一：涂抹即修复——MI-GAN 模型在浏览器内推理

修复效果来自 MI-GAN 神经网络模型，它不在服务器运行，而是加载进你的浏览器完成推理。

打个比方：这相当于在浏览器里装了一个"图像处理小车间"——模型是老师傅，ONNX Runtime 是工作台，而选哪台"机器"干活，由下面这段代码决定：

// src/adapters/inpainting.ts：加载模型时挑选计算引擎 const capabilities = await getCapabilities() model = await ort.InferenceSession.create(modelBuffer, { executionProviders: [capabilities.webgpu ? 'webgpu' : 'wasm'], })

能力二：WebGPU 优先、WASM 兜底——老电脑也能跑

浏览器支持 WebGPU 就放 GPU 上算，不支持就自动切到多线程 WASM，工具不会罢工。

WebGPU 是浏览器里较新的"直连 GPU"标准。类比一下：以前做图相当于隔着窗口朝厨房喊单，现在 WebGPU 直接给了你一把开烤箱门的钥匙。而兜底逻辑像后厨换设备——高速烤箱（GPU）不能用，就换普通灶台（多核 CPU），菜照样出。能力检测在 src/adapters/util.ts 中完成，会依次探测 WebGPU、WASM、SIMD 和多线程支持。

能力三：4 倍超分——64 像素小块"铺瓷砖"式放大

超分辨率用 RealESRGAN 模型，输出固定为原图 4 倍；大图被切成 64×64 像素的小块逐块放大再拼回，避免浏览器内存爆掉。

这就像铺瓷砖：一块一块铺，每块四周多留 6 像素的重叠（tilePadding=6），接缝就看不出来。

// src/adapters/superResolution.ts：分块放大参数 const tileSize = 64 const tilePadding = 6

能力四：模型只下载一次——localforage 本地缓存

两个 ONNX 模型首次下载后会存进浏览器本地存储，第二次打开页面秒进，无需重复拉取。

类比就是提前备好的菜：第一次做菜要去菜市场（从云端拉模型，页面会显示下载进度），以后直接从自家冰箱（localforage）里拿。缓存逻辑见 src/adapters/cache.ts。

🚀 上手体验：四步跑起来，全程不装任何软件

1. 克隆仓库：git clone https://gitcode.com/GitHub_Trending/in/inpaint-web，进入目录执行npm install；
2. 运行npm run start，用较新的 Chrome 或 Edge 打开本地地址（首次会弹模型下载进度条，完成即缓存）；
3. 上传自己的图片，或点击 7 张内置示例图之一直接开始；超过 4096 像素的大图会被自动压缩，避免处理过慢；
4. 调整画笔大小（10–200 像素），涂掉不想要的区域，松开鼠标自动生成；不满意按 Ctrl+Z 撤销，或点顶部历史缩略图"回到这"；
5. 需要更清晰时点"超分辨率"，逐块进度条实时滚动，完成后点下载保存结果。

整条链路只有 3 条命令、零付费，且每一步都不需要离开浏览器。

📊 数据表现：一张表看清它与传统修图方案的差别

下表不引入任何未经验证的跑分数字，只列代码和 README 里能直接核实的事实。

上图是仓库自带的超分演示：右侧为原图，左侧是同一张狗图放大 4 倍后的结果，毛发边缘的细节明显更实。

适用人群与边界：适合谁，短板在哪

先说结论：如果你只需要"去杂物、去水印、放大模糊图"这三件事，它已经能替代 Photoshop 里的基础修图流程；但别指望它覆盖专业后期。

适合：电商运营处理商品图、自媒体人清理照片杂物、在意隐私不愿上传图片的用户，以及想学 WebGPU 推理管线的开发者（核心代码集中在 src/adapters/ 目录）。

客观局限：

• 修复质量受 MI-GAN 模型能力约束，大面积破损或极复杂纹理（如密集花纹、人像面部）的补全效果，与专业桌面软件仍有差距，仓库中也没有公开的量化对比基准；
• 超分固定 4 倍，没有 2 倍、8 倍选项，且输入超过 4096 像素的图会被先行压缩；
• WebGPU 需要较新的浏览器；旧浏览器会回退 WASM，速度明显变慢；
• 项目目前版本号为 0.1.0，README 路线图里"更好的界面"等条目尚未勾选，属于早期项目。

🔭 收尾展望：下一步是自动选区和内容替换

按 README 中的路线表，团队接下来要接入 Segment Anything 实现"圈一下就能快速选择并去除"，再接入 Stable Diffusion 做图像内容替换——从"手动涂笔刷"进化到"说需求就行"。对使用者来说，意味着操作成本还会继续降低；对开发者来说，浏览器端"修复 + 超分 + 替换"的完整链路一旦跑通，图像处理的门槛将真正只剩一张图。

【免费下载链接】inpaint-webA free and open-source inpainting & image-upscaling tool powered by webgpu and wasm on the browser。| 基于 Webgpu 技术和 wasm 技术的免费开源 inpainting & image-upscaling 工具, 纯浏览器端实现。项目地址: https://gitcode.com/GitHub_Trending/in/inpaint-web