브라우저 사이드 배경 제거기를 만든 방법
처리해야 할 제품 사진이 300장 있었습니다. Shopify 스토어를 위해 배경을 제거해야 했습니다.
아직 출시되지 않은 이 사진들을 임의의 서버에 업로드하고 싶지 않았습니다. 브라우저에서 로컬로 실행되는 솔루션을 원했습니다.
어떤 방법이 가장 잘 작동하는지 확인하기 위해 두 가지 다른 방법을 테스트했습니다.
방법 1: Canvas API
이 방법은 픽셀 조작을 사용합니다. 모서리에서 색상을 선택하고 유사한 모든 픽셀을 투명하게 설정합니다.
• 장점: 매우 빠름. 추가 다운로드 파일 없음. 메모리 사용량이 거의 없음. • 단점: 배경에 그림자, 그라데이션 또는 질감이 있으면 실패함. 가장자리가 거칠게(jagged) 생성됨.
방법 2: WebAssembly (WASM) + Machine Learning
이 방법은 ONNX Runtime Web을 통해 ML 모델을 사용하여 사람이나 사물을 인식합니다.
• 장점: 머리카락, 털, 복잡한 가장자리를 처리함. 거의 모든 배경에서 작동함. • 단점: 8MB 모델을 다운로드해야 함. CPU와 메모리를 훨씬 더 많이 사용함.
결과
MacBook Pro에서 500장의 이미지를 테스트했습니다. 비교 결과는 다음과 같습니다:
- Canvas 속도: 이미지당 12-18 ms.
- WASM 속도: 이미지당 180-220 ms.
- Canvas 정확도: 500장 중 187장.
- WASM 정확도: 500장 중 412장.
나의 솔루션: 하이브리드 접근 방식
두 가지를 모두 사용하는 도구를 만들었습니다. 먼저 Canvas 방식을 시도합니다. 배경이 너무 복잡하면 ML 모델로 전환합니다. 이렇게 하면 이미지당 평균 40 ms가 소요됩니다.
여러분을 위한 기술적 팁:
getImageData()는 데이터를 GPU에서 CPU로 이동시키기 때문에 지연을 발생시킵니다. 시간을 절약하려면 작업을 배치(batch) 단위로 처리하세요.- 3~5배 더 빠른 속도를 위해 ONNX Runtime에서 WebGL 백엔드를 사용하세요.
- 모델 입력 크기는 256x256을 유지하세요. 크기가 커지면 제품 사진의 경우 큰 이점 없이 처리 속도가 4배 더 느려집니다.
간단한 사진에 대한 빠른 해결책이 필요하다면 Canvas를 사용하세요. 품질이 중요하다면 Machine Learning을 사용하세요.
Optional learning community: https://t.me/GyaanSetuAi