lxfater / inpaint-web

A free and open-source inpainting & image-upscaling tool powered by webgpu and wasm on the browser。| 基于 Webgpu 技术和 wasm 技术的免费开源 inpainting & image-upscaling 工具, 纯浏览器端实现。
https://inpaintweb.lxfater.com/
GNU General Public License v3.0
4.94k stars 551 forks source link

Some problems when viewing from China. #58

Closed liudonghua123 closed 8 months ago

liudonghua123 commented 9 months ago

Hi, I found a few problems when viewing this app from China.

  1. models download from huggingface is always failed, I tried to change the host of the download links of models to hf-mirror.com, but is still have some CORS problems. Maybe need to fallback to use the self-hosted models which could download using huggingface-cli.
  2. the onnxruntime-web libs from jsdelivr could not download sometimes, I also tried unpkg, both of them are not stable. Maybe use self-hosted instead of CDN.

And I tried to run the app from github codespace, and I found some problems when running npm run start, the typescript version conflicts, some type errors related to ora (onnxruntime-web) and so on ...

lxfater commented 8 months ago

fix models download problem!!

liudonghua123 commented 8 months ago

But I still got some other errors/warnings when start to run this project.

image

  1. git clone https://github.com/lxfater/inpaint-web.git
  2. cd inpaint-web
  3. npm install
  4. npm run build
  5. npm start
Details ```shell @liudonghua123 ➜ /workspaces/inpaint-web (main) $ git log -1 commit 01136bf1f9a0085f24c1b724d427e6b9addc2b11 (grafted, HEAD -> main, origin/main, origin/HEAD) Author: lxfater Date: Thu Jan 25 13:45:41 2024 +0800 Merge remote-tracking branch 'origin/main' @liudonghua123 ➜ /workspaces/inpaint-web (main) $ npm i > inpaint-web@0.1.0 postinstall > paraglide-js compile --project ./project.inlang ℹ [paraglide] Compiling inlang project at "./project.inlang". ℹ [paraglide] Sucessfully compiled the project. > inpaint-web@0.1.0 prepare > husky install husky - Git hooks installed up to date, audited 890 packages in 5s 157 packages are looking for funding run `npm fund` for details 42 vulnerabilities (37 moderate, 5 high) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. @liudonghua123 ➜ /workspaces/inpaint-web (main) $ npm run build > inpaint-web@0.1.0 build > tsc && vite build src/Editor.tsx:318:32 - error TS2339: Property 'at' does not exist on type 'HTMLImageElement[]'. 318 const currRender = renders.at(-1) ?? original ~~ src/Editor.tsx:469:31 - error TS2339: Property 'at' does not exist on type 'HTMLImageElement[]'. 469 const newFile = renders.at(-1) ?? file ~~ src/adapters/superResolution.ts:40:16 - error TS2503: Cannot find namespace 'ort'. 40 inputTensor: ort.Tensor, ~~~ src/adapters/superResolution.ts:41:12 - error TS2503: Cannot find namespace 'ort'. 41 session: ort.InferenceSession, ~~~ src/adapters/superResolution.ts:58:28 - error TS2304: Cannot find name 'ort'. 58 const outputTensor = new ort.Tensor( ~~~ src/adapters/superResolution.ts:121:24 - error TS2304: Cannot find name 'ort'. 121 const tile = new ort.Tensor('float32', tileData, [ ~~~ src/adapters/superResolution.ts:184:15 - error TS2345: Argument of type 'Float32Array' is not assignable to parameter of type 'Uint8Array | PromiseLike'. Type 'Float32Array' is not assignable to type 'Uint8Array'. Types of property '[Symbol.toStringTag]' are incompatible. Type '"Float32Array"' is not assignable to type '"Uint8Array"'. 184 resolve(imgProcess(src_rgb)) ~~~~~~~~~~~~~~~~~~~ src/adapters/superResolution.ts:199:3 - error TS2304: Cannot find name 'ort'. 199 ort.env.wasm.wasmPaths = ~~~ src/adapters/superResolution.ts:202:5 - error TS2304: Cannot find name 'ort'. 202 ort.env.wasm.numThreads = 1 ~~~ src/adapters/superResolution.ts:205:7 - error TS2304: Cannot find name 'ort'. 205 ort.env.wasm.numThreads = navigator.hardwareConcurrency ?? 4 ~~~ src/adapters/superResolution.ts:208:7 - error TS2304: Cannot find name 'ort'. 208 ort.env.wasm.simd = true ~~~ src/adapters/superResolution.ts:210:5 - error TS2304: Cannot find name 'ort'. 210 ort.env.wasm.proxy = true ~~~ src/adapters/superResolution.ts:212:22 - error TS2304: Cannot find name 'ort'. 212 console.log('env', ort.env.wasm) ~~~ src/adapters/superResolution.ts:246:3 - error TS2531: Object is possibly 'null'. 246 ctx.putImageData(imageData, 0, 0) ~~~ src/adapters/superResolution.ts:261:19 - error TS2304: Cannot find name 'ort'. 261 model = await ort.InferenceSession.create(modelBuffer, { ~~~ src/adapters/superResolution.ts:272:27 - error TS2304: Cannot find name 'ort'. 272 const imageTensor = new ort.Tensor('float32', imageTersorData, [ ~~~ src/adapters/util.ts:77:22 - error TS2339: Property 'gpu' does not exist on type 'Navigator'. 77 return !navigator?.gpu && !(await navigator.gpu?.requestAdapter()) ~~~ src/adapters/util.ts:77:47 - error TS2339: Property 'gpu' does not exist on type 'Navigator'. 77 return !navigator?.gpu && !(await navigator.gpu?.requestAdapter()) ~~~ Found 18 errors. @liudonghua123 ➜ /workspaces/inpaint-web (main) $ @liudonghua123 ➜ /workspaces/inpaint-web (main) $ npm run start > inpaint-web@0.1.0 start > vite --host The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details. VITE v5.0.2 ready in 575 ms ➜ Local: http://localhost:5173/ ➜ Network: http://172.16.5.4:5173/ ➜ press h + enter to show help 11:54:12 AM [vite] warning: /workspaces/inpaint-web/src/App.tsx 22:10 warning 'stateLanguageTag' is assigned a value but never used @typescript-eslint/no-unused-vars ✖ 1 problem (0 errors, 1 warning) Plugin: vite-plugin-eslint File: /workspaces/inpaint-web/src/App.tsx 11:54:14 AM [vite] warning: /workspaces/inpaint-web/src/utils.ts 69:23 warning Forbidden non-null assertion @typescript-eslint/no-non-null-assertion ✖ 1 problem (0 errors, 1 warning) Plugin: vite-plugin-eslint File: /workspaces/inpaint-web/src/utils.ts 11:54:14 AM [vite] warning: /workspaces/inpaint-web/src/adapters/cache.ts 83:5 warning Unexpected console statement no-console 87:20 warning Forbidden non-null assertion @typescript-eslint/no-non-null-assertion 91:12 warning Unexpected constant condition no-constant-condition 126:9 warning Unexpected alert no-alert 129:5 warning Unexpected alert no-alert ✖ 5 problems (0 errors, 5 warnings) Plugin: vite-plugin-eslint File: /workspaces/inpaint-web/src/adapters/cache.ts 11:54:15 AM [vite] warning: /workspaces/inpaint-web/src/Editor.tsx 87:24 warning Forbidden non-null assertion @typescript-eslint/no-non-null-assertion 88:25 warning Forbidden non-null assertion @typescript-eslint/no-non-null-assertion 185:9 warning Unexpected console statement no-console 200:9 warning Unexpected console statement no-console 204:9 warning Unexpected console statement no-console 264:6 warning React Hook useEffect has missing dependencies: 'onloading' and 'scaledBrushSize'. Either include them or remove the dependency array react-hooks/exhaustive-deps 315:6 warning React Hook useEffect has a missing dependency: 'originalImg'. Either include it or remove the dependency array react-hooks/exhaustive-deps 411:5 warning React Hook useMemo has a missing dependency: 'draw'. Either include it or remove the dependency array react-hooks/exhaustive-deps 467:7 warning Unexpected console statement no-console 482:7 warning Unexpected console statement no-console 488:7 warning Unexpected console statement no-console 492:6 warning React Hook useCallback has unnecessary dependencies: 'original.naturalHeight' and 'original.naturalWidth'. Either exclude them or remove the dependency array react-hooks/exhaustive-deps ✖ 12 problems (0 errors, 12 warnings) Plugin: vite-plugin-eslint File: /workspaces/inpaint-web/src/Editor.tsx 11:54:15 AM [vite] warning: /workspaces/inpaint-web/src/adapters/inpainting.ts 7:15 warning 'modelType' is defined but never used @typescript-eslint/no-unused-vars 165:3 warning Unexpected console statement no-console 201:3 warning Unexpected console statement no-console 210:3 warning Unexpected console statement no-console 211:3 warning Unexpected console statement no-console 248:3 warning Unexpected console statement no-console 250:3 warning Unexpected console statement no-console 252:3 warning Unexpected console statement no-console 254:3 warning Unexpected console statement no-console 266:3 warning Unexpected console statement no-console 268:3 warning Unexpected console statement no-console ✖ 11 problems (0 errors, 11 warnings) Plugin: vite-plugin-eslint File: /workspaces/inpaint-web/src/adapters/inpainting.ts ```
liudonghua123 commented 8 months ago

I downloaded the models from https://hf-mirror.com/ and served locally in my forks to fix the problems.

And onnxruntime-web from jsdelivr is also a problem in China. Maybe use the related npm package locally is a good choice.

lxfater commented 8 months ago

It's not a code problem, it's a user network problem that will not be fixed after one attempt.