Cách tôi xây dựng công cụ xóa nền ngay trên trình duyệt

Tôi có 300 ảnh sản phẩm cần xử lý. Tôi cần xóa nền của chúng để phục vụ cho một cửa hàng Shopify.

Tôi không muốn tải những bức ảnh chưa công bố này lên một máy chủ lạ nào đó. Tôi muốn một giải pháp chạy cục bộ ngay trên trình duyệt.

Tôi đã thử nghiệm hai phương pháp khác nhau để xem phương pháp nào hoạt động tốt nhất.

Method 1: Canvas API Phương pháp này sử dụng việc thao tác pixel. Bạn chọn một màu từ góc ảnh và đặt tất cả các pixel tương tự thành trong suốt.

• Ưu điểm: Cực kỳ nhanh. Không cần tải thêm tệp bổ sung. Hầu như không tốn bộ nhớ. • Nhược điểm: Sẽ thất bại nếu nền có bóng đổ, hiệu ứng chuyển màu (gradient) hoặc vân bề mặt (texture). Nó tạo ra các cạnh bị răng cưa.

Method 2: WebAssembly (WASM) + Machine Learning Phương pháp này sử dụng một mô hình ML thông qua ONNX Runtime Web để hiểu đâu là người hoặc vật thể.

• Ưu điểm: Xử lý tốt tóc, lông thú và các cạnh phức tạp. Hoạt động trên hầu hết mọi loại nền. • Nhược điểm: Bạn phải tải xuống một mô hình nặng 8MB. Nó tiêu tốn nhiều CPU và bộ nhớ hơn nhiều.

The Results Tôi đã thử nghiệm 500 hình ảnh trên một chiếc MacBook Pro. Dưới đây là bảng so sánh:

  • Tốc độ Canvas: 12-18 ms mỗi ảnh.
  • Tốc độ WASM: 180-220 ms mỗi ảnh.
  • Độ chính xác của Canvas: 187 trên 500 ảnh.
  • Độ chính xác của WASM: 412 trên 500 ảnh.

My Solution: The Hybrid Approach Tôi đã xây dựng một công cụ sử dụng cả hai. Nó sẽ thử phương pháp Canvas trước. Nếu nền quá phức tạp, nó sẽ chuyển sang mô hình ML. Cách này đạt tốc độ trung bình là 40 ms mỗi ảnh.

Technical Tips for You:

  • getImageData() gây ra sự chậm trễ vì nó di chuyển dữ liệu từ GPU sang CPU. Hãy thực hiện các thao tác theo lô (batch) để tiết kiệm thời gian.
  • Sử dụng WebGL backend trong ONNX Runtime để đạt tốc độ nhanh hơn gấp 3-5 lần.
  • Nên giữ kích thước đầu vào cho các mô hình ở mức 256x256. Kích thước lớn hơn sẽ khiến quá trình chậm hơn gấp 4 lần mà không mang lại nhiều lợi ích cho ảnh sản phẩm.

Nếu bạn cần một giải pháp nhanh chóng cho các bức ảnh đơn giản, hãy dùng Canvas. Nếu bạn cần chất lượng, hãy dùng Machine Learning.

Source: https://dev.to/saba_khan_50d6d6e112c484f/how-i-built-a-browser-side-background-remover-and-benchmarked-canvas-vs-webassembly-5bf2

Optional learning community: https://t.me/GyaanSetuAi