这个开源去水印工具运行在纯浏览器前端（运行需要下载不到100M的模型文件），这个适合移除纯色背景上的水印或图像，移除画笔选多了也会按选区移除（这么轻量的纯浏览器前端项目已经不错了）。

开源地址：https://github.com/lxfater/inpaint-web

一、常规开发启动方式

1、从git上面下载项目后需要安装了node环境，npm install、npm run start 即可运行。

2、运行后首次需要下载智能模型，如果网络不好的朋友可能就会卡住用不了。

3、解决模型下载问题。可以去这个地址直接下载用到的模型文件 https://www.modelscope.cn/models/qiqi123/inpaint-web/files

下载后可以放到项目dist\models目录下（如果没有可以创建）

然后修改项目文件 src\adapters\cache.ts 原来下载模型的代码改成本地模型。（这一步可以直接让AI帮你完成，我用的是codebuddy）

我先问了AI 模型文件存放在哪里，然后再跟它说处理本地已下载模型怎么加载。

下面直接贴改动后的代码（src/adapters/cache.ts — 模型路径改为本地静态文件）

import localforage from 'localforage'

export type modelType = 'inpaint' | 'superResolution'

localforage.config({
  name: 'modelCache',
})

export async function saveModel(modelType: modelType, modelBlob: ArrayBuffer) {
  await localforage.setItem(getModel(modelType).name, modelBlob)
}

function getModel(modelType: modelType) {
  if (modelType === 'inpaint') {
    return {
      name: 'migan-pipeline-v2',
      url: '/models/migan_pipeline_v2.onnx',
      backupUrl: '',
    }
  }
  if (modelType === 'superResolution') {
    return {
      name: 'realesrgan-x4',
      url: '/models/realesrgan-x4.onnx',
      backupUrl: '',
    }
  }
  throw new Error('wrong modelType')
}

export async function loadModel(modelType: modelType): Promise<ArrayBuffer> {
  const model = (await localforage.getItem(
    getModel(modelType).name
  )) as ArrayBuffer
  return model
}

export async function modelExists(modelType: modelType) {
  const model = await loadModel(modelType)
  return model !== null && model !== undefined
}

export async function ensureModel(modelType: modelType) {
  if (await modelExists(modelType)) {
    return loadModel(modelType)
  }
  const model = getModel(modelType)
  const response = await fetch(model.url)
  const buffer = await response.arrayBuffer()
  await saveModel(modelType, buffer)
  return buffer
}

export async function downloadModel(
  modelType: modelType,
  setDownloadProgress: (arg0: number) => void
) {
  if (await modelExists(modelType)) {
    return
  }

  async function downloadFromUrl(url: string) {
    console.log('start download from', url)
    setDownloadProgress(0)
    const response = await fetch(url)
    const fullSize = response.headers.get('content-length')
    const reader = response.body!.getReader()
    const total: Uint8Array[] = []
    let downloaded = 0

    while (true) {
      const { done, value } = await reader.read()

      if (done) {
        break
      }

      downloaded += value?.length || 0

      if (value) {
        total.push(value)
      }

      setDownloadProgress((downloaded / Number(fullSize)) * 100)
    }

    const buffer = new Uint8Array(downloaded)
    let offset = 0
    for (const chunk of total) {
      buffer.set(chunk, offset)
      offset += chunk.length
    }

    await saveModel(modelType, buffer)
    setDownloadProgress(100)
  }

  const model = getModel(modelType)
  try {
    await downloadFromUrl(model.url)
  } catch (e) {
    if (model.backupUrl) {
      try {
        await downloadFromUrl(model.backupUrl)
      } catch (r) {
        alert(`Failed to download the backup model: ${r}`)
      }
    }
    alert(`Failed to download the model, network problem: ${e}`)
  }
}

另外vite.config.ts文件改动 — 调整 COEP 策略

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react-swc'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  plugins: [react(), eslintPlugin()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    css: true,
    reporters: ['verbose'],
    coverage: {
      reporter: ['text', 'json', 'html'],
      include: ['src/**/*'],
      exclude: [],
    },
  },
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'credentialless',
    },
  },
})

改完后，npm run start启动项目，浏览器访问终端显示的地址即可。

启动后浏览器运行下载模型就很快了（因为是从项目本地文件加载到IndexedDB的），但是处理图片的速度还是依赖你电脑的性能，我这边处理一张图片要一分钟左右（电脑没有独立显卡）。

二、懒人版体验包

为了避免大家卡在开发环境安装及模型下载处理，我直接把项目npm run fast-build 打包成了网页文件，另外模型文件、 简易web服务器 一并打包！只需要下载我这个懒人包运行里面的miniweb.exe 程序启动web服务器后 浏览器访问程序显示的地址即可快速体验！最好放到纯英文目录下使用，测试图片尺寸不要太多避免电脑带不动。

通过网盘分享的文件：Inpaint-web去水印服务整合包.zip
链接: https://pan.baidu.com/s/19A_H5-S6fYNK4jEP8WCNJg?pwd=iq7b 提取码: iq7b