> 웹 프론트엔드 > JS 튜토리얼 > WebGPU는 놀랍습니다. 두 개의 초고속 AI 이미지 처리 도구를 만들었습니다!

WebGPU는 놀랍습니다. 두 개의 초고속 AI 이미지 처리 도구를 만들었습니다!

Linda Hamilton
풀어 주다: 2024-11-06 03:00:02
원래의
763명이 탐색했습니다.

신기술, 특히 AI에 열정을 갖고 있는 웹 엔지니어로서 저는 Microsoft의 onnxruntime-web 라이브러리를 탐색해 왔습니다. 이 강력한 도구를 사용하여 저는 온라인 AI 기반 이미지 처리 플랫폼인 BatchTool을 개발했습니다.

ONNX 런타임 웹은 브라우저와 Node.js에서 ONNX 모델을 실행하기 위한 Javascript 라이브러리입니다. ONNX 런타임 웹은 CPU와 GPU 모두에 최적화된 ONNX 모델 추론 런타임을 제공하기 위해 WebAssembly 및 WebGL 기술을 채택했습니다.

현재 BatchTool은 두 가지 주요 기능을 제공합니다.

  1. 배경 일괄 제거
  2. 일괄 개체/워터마크 제거

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

BatchTool의 주요 기능

  • 개인정보 보호 우선: 로컬 AI 모델 사용 - 서버 업로드가 필요하지 않음
  • AI 기반: 인공 지능을 활용하여 복잡한 작업을 단순화합니다
  • 고성능: WebGPU 가속을 통해 각 이미지를 밀리초 단위로 처리할 수 있습니다
  • 효율적인 일괄 처리: 한 번의 클릭으로 여러 파일을 처리
  • 사용자 친화적: 학습 곡선이 전혀 없는 간단하고 직관적인 인터페이스
  • 크로스 플랫폼: 브라우저에서 작동 - 설치가 필요하지 않음

일괄 배경 제거

모델 다운로드

배경 제거는 브라우저에서 실행되며 서버에 업로드할 필요가 없습니다. 처음 사용시 해당 모델을 다운로드하시면 됩니다. 이후 해당 모델 파일은 브라우저 캐시에 캐시되어 다음 사용시 바로 사용하실 수 있습니다.

다음 화면에 표시됨: WebGPU ✅ 현재 기기가 WebGPU 가속을 지원함을 나타냅니다.

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

이미지 선택

처리할 이미지를 선택한 후 Batch Tool은 현재 실행 중인 환경을 자동으로 감지하고 현재 환경이 WebGPU 가속을 지원하는 경우 WebGPU 가속 모드를 활성화하고, 그렇지 않으면 자동으로 CPU 모드로 전환합니다.

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

이미지 배경이 제거되면 이미지 비교 아이콘을 클릭하여 제거된 배경의 효과를 확인하세요.

이미지 출처: https://pixabay.com/

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

다음으로 일괄 다운로드 버튼을 클릭하면 처리된 모든 이미지를 일괄 다운로드할 수 있습니다.

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

일괄 개체/워터마크 제거

모델 다운로드

배경 제거와 마찬가지로 개체 제거도 브라우저에서 실행되며 서버에 업로드할 필요가 없습니다. 처음 사용할 때만 해당 모델을 다운로드하면 됩니다. 그 이후에는 모델 파일이 브라우저 캐시에 캐시되어 다음에 사용할 때 바로 사용할 수 있습니다.

시나리오 1

이 장면에서는 여러 이미지를 한 번에 선택한 다음 각 이미지에 대해 하나씩 개체 지우기 작업을 수행할 수 있습니다.

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

삭제를 완료한 후 복구된 단일 이미지를 즉시 다운로드하거나, 모든 이미지가 조정될 때까지 기다린 후 한 번에 모두 다운로드할 수 있습니다.

시나리오 2

이 시나리오는 동일한 크기의 여러 이미지에서 동일한 영역의 워터마크를 일괄 삭제하는 데 적합합니다. 단계도 매우 간단합니다. 단 네 단계만 거치면 됩니다.

1.처리할 여러 장의 사진을 선택하세요.
2.동일 영역 워터마크 일괄 삭제 모드를 활성화합니다.

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

3.첫 번째 사진을 선택하고 브러시로 워터마크 영역을 그립니다.
4.리본에서 복구 버튼(지우개 아이콘)을 클릭하세요.

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

이후 프로그램이 자동으로 실행되며 사진 처리가 완료되면 다음 그림과 같이 오른쪽 썸네일에 완성된 로고가 표시됩니다.

WebGPU is Amazing: I Built Two Lightning-Fast AI Image Processing Tools!

시나리오 2는 고정 영역 워터마크를 일괄 제거하는 데 매우 적합하여 작업 효율성이 크게 향상됩니다. 컴퓨터가 WebGPU 가속을 지원하는 경우 처리 속도는 단일 이미지에 대해 평균 수백 밀리초에 불과할 정도로 매우 빠릅니다.

BatchTool의 이미지 처리 기능을 사용해 보시기 바랍니다! 도구를 사용하는 동안 문제가 발생하면 주저하지 말고 의견을 남겨주세요.

위 내용은 WebGPU는 놀랍습니다. 두 개의 초고속 AI 이미지 처리 도구를 만들었습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿