企业官网建设流程全解析

免安装：inpaint-web 在浏览器里修图，3 步擦除污渍、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 是一个免费开源、纯浏览器端运行的图像修复与超分辨率工具。不用装任何桌面软件，只要你的浏览器支持 WebGPU，就能用画笔擦掉照片里的污渍和水印，还能一键把模糊图片放大 4 倍变清晰。它适合电商商品图、老照片、个人照片的日常处理，最大的收益是：图片从头到尾不离开你的电脑。

场景：修图为什么非要装桌面软件

商品图上有一块污渍、一张旧照边缘破损、照片分辨率太低放大就糊——遇到这些情况，很多人的第一反应是打开桌面修图软件。但这意味着：安装、学习选区和图层、大模型占满显卡，流程一长，小需求就不划算了。

inpaint-web 把路线换了：把 AI 修复模型（MI-GAN 修复模型、Real-ESRGAN 超分模型）搬进浏览器，用 WebGPU 或 WebAssembly 在本地跑推理，整个操作就是一个网页——圈一下区域，点一下按钮，等进度条走完。

快速上手：三条命令跑起浏览器图像修复

项目是标准的 Vite + React 工程，本地跑起来只需要三条命令：

git clone https://gitcode.com/GitHub_Trending/in/inpaint-web cd inpaint-web npm install && npm run start

几个第一次使用要知道的点：

• 模型下载：页面加载时会自动下载修复模型并缓存（弹窗带进度条）；超分模型在首次点"Upscale"时按需下载，之后都走本地缓存。
• 没有手头的图？首页自带 shoe、bag、paris 等 7 张示例图（public/examples/），点击直接进编辑器开修。
• 语言：页面右上角可在中、英文之间切换，界面文案走多语言方案。

跑起来后是一个本地服务页面，用 Chrome 打开即可开始。

它能做什么：图像修复与超分两大核心功能

图像修复：用画笔擦掉污渍和水印

进入编辑器后，拖动滑杆调整画笔大小（10~200 像素），在不想保留的区域上涂一圈，松开鼠标，模型就会自动补全背景。修复可以多次叠加，顶部缩略图记录每一步历史，点"回到这"可以回到任意一步，Ctrl+Z 也能撤销。

点"Original"按钮还能拉出一条分割线，左右对比原图和修复结果，方便检查补全得自不自然。

图片超分：一键放大 4 倍变高清

点"Upscale"，图片会被放大 4 倍（Real-ESRGAN x4 模型）。大图会按 64×64 的小块分片处理，每块带 6 像素的边距，避免拼接出接缝，处理过程有实时进度条。

为什么快：WebGPU + WebAssembly 的浏览器端执行原理

网页凭什么能跑 AI 图像处理？靠两块技术：

• WebAssembly（WASM）：把 C++ 图像处理库编译成浏览器能直接执行的二进制格式，可以理解为"能在网页里跑的便携程序"，OpenCV 这类传统图像库就靠它跑在浏览器里。
• WebGPU：浏览器调用显卡的新接口。打个比方：CPU 逐个像素算，像一个人一张一张填色卡；WebGPU 则像上千个工人同时作业，各自负责一块区域，整体速度快一个量级。

项目的调度逻辑很直接（能力检测在 src/adapters/ 的 util.ts，模型调用在 inpainting.ts）：

executionProviders: [capabilities.webgpu ? 'webgpu' : 'wasm']

浏览器支持 WebGPU 就用显卡跑，不支持就回退到 WebAssembly 多线程执行。同一套代码在高性能机和低端设备上都能用，只是快慢不同。整体流水线是：WASM 版 OpenCV 预处理像素 → ONNX 模型推理 → 后处理成 ImageData 画回画布，全程不出浏览器内存。

实战测试：四步擦掉鞋子图上的污渍

用仓库自带的示例图走一遍完整修复流程：

1. 选图：上传自己的照片，或直接点首页的示例图进入编辑器；
2. 标记：把画笔调小，沿污渍边缘多涂一圈，确保完全盖住脏点；
3. 松手触发修复：等进度条走完，污渍区域被自动填充成周围背景；
4. 对比下载：点"Original"拖动分割线对比前后效果，不满意就"Undo"重刷，满意点"Download"保存。

一个小技巧：标记区域宁可比污渍稍大一点，模型靠周围像素推断内容，上下文越多补得越像。

与传统桌面软件对比

差别不在绝对速度——浏览器端推理肯定跑不过专门的工作站——而在成本：免安装、免学习、数据不上行，任何一台能打开 Chrome 的电脑都能用。

已知局限与绕开办法

• 老浏览器跑不了：推理依赖 WebGPU 或 WASM 支持，老版本浏览器会失败。绕开：用最新版 Chrome 或 Edge。
• 超大图会被缩放：前端在上传时自动把长边缩到 4096px 再处理，超高分辨率照片直接丢进去会先被缩一圈。绕开：先在本地把感兴趣区域裁出来再上传。
• 首次运行要联网下模型：模型从远端源下载并用 localforage 缓存在浏览器里，断网状态下无法首次使用。绕开：先在有网环境完成一次下载，之后本地缓存可直接使用。

收尾

inpaint-web 把一个很长的修图流程压缩成了"打开页面、涂一下、点一下"。它替代不了专业桌面软件，但就"擦掉这个、变清晰一点"这类高频小需求来说，免安装、数据不出本机已经足够有吸引力。源码结构清晰，想二次开发可以直接从适配器层看起。

• 项目文档：README.md
• 核心推理代码：src/adapters/

【免费下载链接】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