Web Worker 이미지 처리 기초
Web Worker는 무거운 이미지 계산을 페이지 UI 스레드와 나눠, 처리 중에도 인터페이스가 더 잘 반응하게 합니다.
이미지 데이터는 여전히 브라우저 안에서 오가며, 이 구조 자체가 원격 업로드를 뜻하지는 않습니다.
메인 스레드에는 사용자 인터페이스 작업이 있습니다.
브라우저 페이지는 일반적으로 기본 스레드에서 JavaScript를 실행합니다. 해당 스레드는 레이아웃, 페인팅 및 입력도 조정합니다. 하나의 긴 계산이 차지하면 클릭이 지연되고 애니메이션이 중지될 수 있으며 브라우저는 페이지가 응답하지 않는다는 경고를 표시할 수 있습니다.
이미지 편집기에는 추론이 시작되기 전에 많은 기본 스레드 책임이 있습니다.
- 파일 선택, 붙여넣기 또는 삭제를 수신합니다.
- 이미지를 디코딩하고 표시합니다.
- 진행 상황 및 오류 상태를 업데이트합니다.
- 미리보기 캔버스를 그립니다.
- 추가 및 지우기 브러시 이동을 처리합니다.
- 다운로드 또는 클립보드 작업을 준비합니다.
분할 모델의 수치 작업을 동일한 스레드에 배치하면 해당 작업이 직접 경쟁하게 됩니다. 작업자는 보다 명확한 경계를 만듭니다.
메시지 기반 경계
에디터와 워커는 일반 변수를 공유하지 않습니다. 그들은 메시지를 보내 소통합니다. 단순화된 흐름은 다음과 같습니다.
- 편집자가 워커를 생성하거나 재사용합니다.
- 작업자에게 추론 런타임 및 모델을 초기화하도록 요청합니다.
- 이미지 데이터를 준비하고 추론 요청을 보냅니다.
- 작업자는 데이터를 모델의 예상 입력으로 변환합니다.
- 작업자가 모델을 실행하고 마스크 값을 생성합니다.
- 마스크 또는 결과 데이터를 다시 보냅니다.
- 편집기는 미리보기를 합성하고 수정하거나 내보낼 수 있습니다.
메시지에는 올바른 요청에 대한 응답을 일치시키기에 충분한 컨텍스트가 포함되어야 합니다. 이전 작업이 완료되기 전에 사용자가 다른 이미지를 선택하는 경우 이는 중요합니다. 인터페이스는 새 소스에 대해 이전 결과를 표시하지 않아야 합니다.
이미지 데이터 복사 및 전송
작은 문자 메시지를 보내는 것은 저렴합니다. 브라우저가 전체 버퍼를 복사해야 하는 경우 수백만 개의 픽셀 값을 보내는 데 비용이 많이 들 수 있습니다. 대신 웹 API는 특정 바이너리 버퍼의 소유권을 이전할 수 있습니다. 전송된 버퍼는 송신측에서 사용 가능한 복제본을 유지하지 않고도 수신자가 사용할 수 있게 됩니다.
이러한 최적화에는 설계 제약이 따른다. 전송 후 발신자는 여전히 데이터를 소유하고 있는 것처럼 동일한 버퍼를 계속 사용할 수 없습니다. 편집자는 별도의 디스플레이 표현을 유지하거나 전용 추론 버퍼를 생성하거나 나중에 필요한 것을 재구성할 수 있습니다.
모든 구현이 정확히 동일한 위치에서 전송을 사용하는 것은 아닙니다. 일반적인 교훈은 스레드 분리로 인해 데이터 이동이 사라지지 않는다는 것입니다. 이미지 크기, 버퍼 크기 및 변환 횟수는 여전히 대기 시간과 메모리에 영향을 미칩니다.
Easy Background Remover가 워커에 넣는 것
Easy Background Remover는 기기 내 분할을 위해 브라우저 추론 런타임과 함께 웹 작업자를 사용합니다. 무거운 자동 컷아웃 단계는 마스크를 생성합니다. 그런 다음 편집기는 합성된 결과를 표시하고 CPU-캔버스 브러시 미세 조정을 지원합니다.
이러한 분리는 실패에 더 유용한 경계를 제공합니다. 작업자가 추론 중에 초기화할 수 없거나 충돌이 발생하는 경우 인터페이스는 영구적으로 고정된 탭을 유일한 신호로 사용하는 대신 작업자 관련 오류를 보고할 수 있습니다.
또한 로컬 처리 주장을 이해하기 쉽게 유지합니다. 확장 페이지에서 자체 작업자로 픽셀을 보내는 것은 원격 컷아웃 API에 대한 업로드가 아니라 브라우저 환경 내에서의 통신입니다. 첫 번째 세션에서는 재사용 가능한 모델 자산을 별도로 다운로드할 수 있습니다. 처음 실행이 모델을 다운로드하는 이유를 참조하세요.
작업자는 즉시 계산을 수행하지 않습니다.
작업자는 원시 장치 기능이 아닌 응답성을 향상시킵니다. 모델은 브라우저가 제공할 수 있는 내용에 따라 여전히 CPU, GPU 또는 기타 런타임 리소스를 사용합니다. 큰 입력은 작은 입력보다 시간이 더 오래 걸리고 더 많은 메모리가 필요할 수 있습니다.
몇 가지 제한 사항이 남아 있습니다.
- 모델 초기화에는 실제 비용이 듭니다.
- 픽셀 버퍼는 복사되면 양쪽에서 메모리를 차지합니다.
- 크기 조정 및 형식 변환에 시간이 걸립니다.
- 메모리가 부족한 장치는 큰 이미지를 처리하는 데 어려움을 겪을 수 있습니다.
- 더 많은 작업자가 경합을 줄이는 대신 증가시킬 수 있습니다.
- 내보내기 및 캔버스 업데이트에는 여전히 메인 스레드가 포함될 수 있습니다.
5개의 이미지에 대해 5개의 추론 작업자를 시작하는 것이 자동으로 5배 더 빠른 것은 아닙니다. 작업자들은 동일한 기계를 공유합니다. 병렬 작업은 메모리 대역폭과 실행 리소스를 놓고 경쟁할 수 있지만 각 모델 인스턴스는 자체 메모리 비용을 부담할 수 있습니다.
진행 상황 보고는 협조적입니다.
작업자는 상태 메시지를 보낼 수 있지만 어느 정도의 진행률이 정확하다고 느낄지는 자동으로 알 수 없습니다. 모델 다운로드, 런타임 초기화, 입력 준비, 추론, 마스크 변환 및 미리 보기 렌더링은 타이밍이 다른 별도의 단계입니다.
일부 단계에는 측정 가능한 바이트 수가 있습니다. 단일 모델 실행에서는 “시작됨” 및 "완료됨"만 노출될 수 있습니다. 따라서 균일하게 진행되는 부드러운 백분율은 정밀한 측정이라기보다는 외관상 그럴 수 있습니다.
유용한 진행 UI에서는 가능한 경우 모델 준비, 이미지 처리 또는 결과 구축 등의 단계를 지정합니다. 또한 설명 없이 스피너를 떠나는 대신 실패 및 취소를 처리합니다.
취소는 스피너를 숨기는 것 이상입니다.
사용자가 이미지를 닫거나 다시 시작하면 인터페이스는 오래된 요청의 최종 응답을 무시할 수 있습니다. 기본 계산을 즉시 중지하려면 런타임에서 추가 지원이 필요하거나 작업자를 종료하고 다시 생성해야 할 수도 있습니다.
작업자를 종료하는 것은 결정적이지만 초기화된 상태는 삭제됩니다. 다음 작업에서는 모델을 다시 로드하고 초기화해야 할 수도 있습니다. 짧은 작업의 경우 결과를 오래된 것으로 표시하는 것이 모든 것을 해체하는 것보다 저렴할 수 있습니다.
올바른 선택은 메모리 압력, 작업 기간 및 런타임 기능에 따라 달라집니다. 사용자의 관점에서 중요한 규칙은 오래된 작업이 현재 편집 내용을 덮어쓰면 안 된다는 것입니다.
오류도 경계를 넘어야 합니다
작업자 내부의 예외는 일반적인 기본 스레드 예외가 되지 않습니다. 작업자는 사용 가능한 오류를 보고해야 하며 편집자는 작업자 수준 오류를 수신해야 합니다.
좋은 오류 처리는 최소한 다음을 구별합니다.
- 모델 자산을 사용할 수 없습니다.
- 모델 초기화에 실패했습니다.
- 이미지 디코딩 또는 입력 준비에 실패했습니다.
- 추론이 실패했습니다.
- 작업자가 예기치 않게 멈췄습니다.
- 결과는 더 이상 현재 요청에 속하지 않습니다.
이는 일반적인 "문제가 발생했습니다"보다 실행 가능성이 더 높습니다. 특히 첫 실행 설정과 일반 이미지 처리에 다른 해결 방법이 있는 경우 더욱 그렇습니다.
작업자 출력은 여전히 첫 번째 마스크일 뿐입니다.
스레드 아키텍처는 그 자체로 모호한 가장자리를 개선하지 않습니다. 작업자는 모피, 투명한 소재, 좁은 끈 또는 원하는 그림자가 여전히 누락된 기술적으로 유효한 마스크를 반환할 수 있습니다. 그것은 세분화와 의도에 관한 질문입니다.
추론 후 편집자의 작업이 다시 시작됩니다. 작업 좌표계에 맞게 마스크 크기를 조정하고, 미리보기를 합성하고, 사용자가 이를 다듬고, 현재 상태를 내보낼 수 있습니다. 마스크 해상도와 미리보기 크기는 이러한 좌표계를 혼동해서는 안 되는 이유를 설명합니다.
간결한 정신 모델
작업자를 메시지 창 뒤의 지역 전문가로 생각하십시오.
- 편집자는 상호작용을 소유합니다.
- 작업자는 무거운 추론 작업을 담당합니다.
- 이진 이미지 데이터가 정의된 경계를 넘습니다.
- 작업자는 모든 가장자리에 대한 최종 판단이 아닌 마스크를 반환합니다.
- 편집자는 현재 상태, 검토, 개선 및 내보내기에 대한 책임을 집니다.
모델의 픽셀 자체 보기를 보려면 기기 내 컷아웃 모델이 보는 것을 계속 진행하세요. 엔드투엔드 실제 개요는 로컬 배경 제거 작동 방식을 참조하세요.