Canvas 시리즈 탐색: Transformers.js와 결합하여 지능형 이미지 처리 달성

소개

저는 현재 강력한 오픈소스 크리에이티브 드로잉 보드를 관리하고 있습니다. 이 드로잉 보드에는 많은 흥미로운 브러시와 보조 드로잉 기능이 통합되어 있어 사용자가 새로운 드로잉 효과를 경험할 수 있습니다. 모바일이든 PC이든 더 나은 인터랙티브 경험과 효과 표시를 즐길 수 있습니다.

이 글에서는 Transformers.js를 결합하여 배경 제거 및 이미지 마킹 분할을 구현하는 방법을 자세히 설명하겠습니다. 결과는 다음과 같습니다

링크: https://songlh.top/paint-board/

Github: https://github.com/LHRUN/paint-board Star ⭐️에 오신 것을 환영합니다

Transformers.js

Transformers.js는 서버측 계산에 의존하지 않고 브라우저에서 직접 실행할 수 있는 Hugging Face Transformers를 기반으로 하는 강력한 JavaScript 라이브러리입니다. 이는 모델을 로컬에서 실행하여 효율성을 높이고 배포 및 유지 관리 비용을 줄일 수 있음을 의미합니다.

현재 Transformers.js는 다양한 도메인을 포괄하는 Hugging Face에 1000개 모델을 제공하고 있으며, 이는 이미지 처리, 텍스트 생성, 번역, 감정 분석 및 기타 작업 처리 등 대부분의 요구 사항을 충족할 수 있으며 Transformers를 통해 쉽게 달성할 수 있습니다. .js 다음과 같이 모델을 검색하세요.

Transformers.js의 현재 주요 버전이 V3으로 업데이트되어 많은 훌륭한 기능과 세부 정보가 추가되었습니다. Transformers.js v3: WebGPU 지원, 새 모델 및 작업 등….

이 게시물에 추가한 두 기능은 모두 V3에서만 사용할 수 있는 WebGpu 지원을 사용하며 이제 밀리초 단위의 구문 분석 기능을 통해 처리 속도가 크게 향상되었습니다. 다만, WebGPU를 지원하는 브라우저가 많지 않다는 점 참고하시고 방문하시려면 최신 버전의 구글을 이용하시는 것을 권장드립니다.

기능 1: 배경 제거

배경을 제거하기 위해 저는 다음과 같은 Xenova/modnet 모델을 사용합니다

처리 로직은 세 단계로 나눌 수 있습니다

1. 상태를 초기화하고 모델과 프로세서를 로드합니다.
2. 인터페이스 디스플레이는 제가 디자인한 것이 아닌 여러분이 직접 디자인한 것입니다.
3. 효과를 보여주세요. 이것은 내 디자인이 아닌 여러분 자신의 디자인을 기반으로 합니다. 요즘에는 배경을 제거하기 전과 후에 대비 효과를 동적으로 표시하기 위해 경계선을 사용하는 것이 더 인기가 있습니다.

코드 로직은 다음과 같습니다. React TS. 자세한 내용은 내 프로젝트의 소스 코드를 참조하세요. 소스 코드는 src/comComponents/boardOperation/uploadImage/index.tsx에 있습니다.

import { useState, FC, useRef, useEffect, useMemo } from 'react'
import {
  env,
  AutoModel,
  AutoProcessor,
  RawImage,
  PreTrainedModel,
  Processor
} from '@huggingface/transformers'

const REMOVE_BACKGROUND_STATUS = {
  LOADING: 0,
  NO_SUPPORT_WEBGPU: 1,
  LOAD_ERROR: 2,
  LOAD_SUCCESS: 3,
  PROCESSING: 4,
  PROCESSING_SUCCESS: 5
}

type RemoveBackgroundStatusType =
  (typeof REMOVE_BACKGROUND_STATUS)[keyof typeof REMOVE_BACKGROUND_STATUS]

const UploadImage: FC<{ url: string }> = ({ url }) => {
  const [removeBackgroundStatus, setRemoveBackgroundStatus] =
    useState<RemoveBackgroundStatusType>()
  const [processedImage, setProcessedImage] = useState('')

  const modelRef = useRef<PreTrainedModel>()
  const processorRef = useRef<Processor>()

  const removeBackgroundBtnTip = useMemo(() => {
    switch (removeBackgroundStatus) {
      case REMOVE_BACKGROUND_STATUS.LOADING:
        return 'Remove background function loading'
      case REMOVE_BACKGROUND_STATUS.NO_SUPPORT_WEBGPU:
        return 'WebGPU is not supported in this browser, to use the remove background function, please use the latest version of Google Chrome'
      case REMOVE_BACKGROUND_STATUS.LOAD_ERROR:
        return 'Remove background function failed to load'
      case REMOVE_BACKGROUND_STATUS.LOAD_SUCCESS:
        return 'Remove background function loaded successfully'
      case REMOVE_BACKGROUND_STATUS.PROCESSING:
        return 'Remove Background Processing'
      case REMOVE_BACKGROUND_STATUS.PROCESSING_SUCCESS:
        return 'Remove Background Processing Success'
      default:
        return ''
    }
  }, [removeBackgroundStatus])

  useEffect(() => {
    ;(async () => {
      try {
        if (removeBackgroundStatus === REMOVE_BACKGROUND_STATUS.LOADING) {
          return
        }
        setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.LOADING)

        // Checking WebGPU Support
        if (!navigator?.gpu) {
          setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.NO_SUPPORT_WEBGPU)
          return
        }
        const model_id = 'Xenova/modnet'
        if (env.backends.onnx.wasm) {
          env.backends.onnx.wasm.proxy = false
        }

        // Load model and processor
        modelRef.current ??= await AutoModel.from_pretrained(model_id, {
          device: 'webgpu'
        })
        processorRef.current ??= await AutoProcessor.from_pretrained(model_id)
        setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.LOAD_SUCCESS)
      } catch (err) {
        console.log('err', err)
        setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.LOAD_ERROR)
      }
    })()
  }, [])

  const processImages = async () => {
    const model = modelRef.current
    const processor = processorRef.current

    if (!model || !processor) {
      return
    }

    setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.PROCESSING)

    // load image
    const img = await RawImage.fromURL(url)

    // Pre-processed image
    const { pixel_values } = await processor(img)

    // Generate image mask
    const { output } = await model({ input: pixel_values })
    const maskData = (
      await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(
        img.width,
        img.height
      )
    ).data

    // Create a new canvas
    const canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D

    // Draw the original image
    ctx.drawImage(img.toCanvas(), 0, 0)

    // Updating the mask area
    const pixelData = ctx.getImageData(0, 0, img.width, img.height)
    for (let i = 0; i < maskData.length; ++i) {
      pixelData.data[4 * i + 3] = maskData[i]
    }
    ctx.putImageData(pixelData, 0, 0)

    // Save new image
    setProcessedImage(canvas.toDataURL('image/png'))
    setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.PROCESSING_SUCCESS)
  }

  return (
    <div className="card shadow-xl">
      <button
        className={`btn btn-primary btn-sm ${
          ![
            REMOVE_BACKGROUND_STATUS.LOAD_SUCCESS,
            REMOVE_BACKGROUND_STATUS.PROCESSING_SUCCESS,
            undefined
          ].includes(removeBackgroundStatus)
            ? 'btn-disabled'
            : ''
        }`}
        onClick={processImages}
      >
        Remove background
      </button>
      <div className="text-xs text-base-content mt-2 flex">
        {removeBackgroundBtnTip}
      </div>
      <div className="relative mt-4 border border-base-content border-dashed rounded-lg overflow-hidden">
        <img
          className={`w-[50vw] max-w-[400px] h-[50vh] max-h-[400px] object-contain`}
          src={url}
        />
        {processedImage && (
          <img
            className={`w-full h-full absolute top-0 left-0 z-[2] object-contain`}
            src={processedImage}
          />
        )}
      </div>
    </div>
  )
}

export default UploadImage

기능 2: 이미지 마커 분할

이미지 마커 분할은 Xenova/slimsam-77-uniform 모델을 사용하여 구현됩니다. 효과는 다음과 같습니다. 이미지가 로드된 후 클릭하면 클릭한 좌표에 따라 분할이 생성됩니다.

처리 로직은 5단계로 나눌 수 있습니다

1. 상태를 초기화하고 모델과 프로세서를 로드합니다
2. 이미지를 가져와 로드한 후 데이터 로딩 및 삽입 데이터를 이미지에 저장합니다.
3. 이미지 클릭 이벤트를 듣고 클릭 데이터를 기록하고 양수 마커와 음수 마커로 구분한 후 각 클릭 후 디코딩된 클릭 데이터에 따라 마스크 데이터를 생성한 다음 마스크 데이터에 따라 분할 효과를 그립니다. .
4. 인터페이스 디스플레이, 이것은 내 취향이 아닌 자신만의 디자인으로 임의로 플레이할 수 있습니다
5. 클릭하여 이미지를 저장하고 마스크 픽셀 데이터에 따라 원본 이미지 데이터와 일치시킨 다음 캔버스 드로잉을 통해 내보냅니다

코드 로직은 다음과 같습니다. React TS. 자세한 내용은 내 프로젝트의 소스 코드를 참조하세요. 소스 코드는 src/comComponents/boardOperation/uploadImage/imageSegmentation.tsx에 있습니다.

'react'에서 { useState, useRef, useEffect, useMemo, MouseEvent, FC } 가져오기
수입 {
  샘모델,
  자동프로세서,
  원시 이미지,
  사전 훈련된 모델,
  프로세서,
  텐서,
  Sam이미지프로세서결과
} '@huggingface/transformers'에서

'@/comComponents/icons/loading.svg?react'에서 LoadingIcon 가져오기
'@/comComponents/icons/boardOperation/image-segmentation-긍정적인.svg?react'에서 PositiveIcon을 가져옵니다.
'@/comComponents/icons/boardOperation/image-segmentation-negative.svg?react'에서 NegativeIcon을 가져옵니다.

인터페이스 MarkPoint {
  위치: 숫자[]
  라벨: 번호
}

const SEGMENTATION_STATUS = {
  로드 중: 0,
  NO_SUPPORT_WEBGPU: 1,
  LOAD_ERROR: 2,
  로드_성공: 3,
  처리 중: 4,
  처리_성공: 5
}

유형 SegmentationStatusType =
  (SEGMENTATION_STATUS 유형)[SEGMENTATION_STATUS 유형 키]

const 이미지 분할: FC<{ url: string }> = ({ URL }) => {
  const [markPoints, setMarkPoints] = useState<MarkPoint[]>([])
  const [segmentationStatus, setSegmentationStatus] =
    useState<SegmentationStatusType>()
  const [pointStatus, setPointStatus] = useState(true)

  const MaskCanvasRef = useRef<HTMLCanvasElement>(null) // 분할 마스크
  const modelRef = useRef<PreTrainedModel>() // 모델
  const processorRef = useRef<processor>() // 프로세서
  const imageInputRef = useRef<RawImage>() // 원본 이미지
  const imageProcessed = useRef<SamImageProcessorResult>() // 처리된 이미지
  const imageEmbeddings = useRef<tensor>() // 데이터 삽입

  const 분할Tip = useMemo(() => {
    스위치(분할상태) {
      케이스 SEGMENTATION_STATUS.LOADING:
        '이미지 분할 기능 로딩 중'을 반환합니다.
      사례 SEGMENTATION_STATUS.NO_SUPPORT_WEBGPU:
        return '이 브라우저에서는 WebGPU가 지원되지 않습니다. 이미지 분할 기능을 사용하려면 최신 버전의 Google Chrome을 사용하세요.'
      사례 SEGMENTATION_STATUS.LOAD_ERROR:
        '이미지 분할 기능을 로드하지 못했습니다'를 반환합니다.
      사례 SEGMENTATION_STATUS.LOAD_SUCCESS:
        '이미지 분할 기능이 성공적으로 로드되었습니다'를 반환합니다.
      사례 SEGMENTATION_STATUS.PROCESSING:
        '이미지 처리...'를 반환합니다.
      사례 SEGMENTATION_STATUS.PROCESSING_SUCCESS:
        return '이미지가 성공적으로 처리되었습니다. 이미지를 클릭하여 표시할 수 있습니다. 녹색 마스크 영역은 분할 영역입니다.'
      기본:
        반품 ''
    }
  }, [분할상태])

  // 1. 모델 및 프로세서 로드
  useEffect(() => {
    ;(비동기 () => {
      노력하다 {
        if (segmentationStatus === SEGMENTATION_STATUS.LOADING) {
          반품
        }

        setSegmentationStatus(SEGMENTATION_STATUS.LOADING)
        if (!navigator?.gpu) {
          setSegmentationStatus(SEGMENTATION_STATUS.NO_SUPPORT_WEBGPU)
          반품
        }const model_id = '제노바/slimsam-77-uniform'
        modelRef.current ??= SamModel.from_pretrained(model_id, {
          dtype: 'fp16', // 또는 "fp32"
          장치: 'webgpu'
        })
        processorRef.current ??= AutoProcessor.from_pretrained(model_id)를 기다립니다.

        setSegmentationStatus(SEGMENTATION_STATUS.LOAD_SUCCESS)
      } 잡기 (오류) {
        console.log('err', 오류)
        setSegmentationStatus(SEGMENTATION_STATUS.LOAD_ERROR)
      }
    })()
  }, [])

  // 2. 프로세스 이미지
  useEffect(() => {
    ;(비동기 () => {
      노력하다 {
        만약에 (
          !modelRef.current ||
          !processorRef.current ||
          !url ||
          분할 상태 === SEGMENTATION_STATUS.PROCESSING
        ) {
          반품
        }
        setSegmentationStatus(SEGMENTATION_STATUS.PROCESSING)
        클리어포인트()

        imageInputRef.current = RawImage.fromURL(url)을 기다립니다.
        imageProcessed.current = processorRef.current(를 기다립니다.
          imageInputRef.current
        )
        imageEmbeddings.current = 대기(
          modelRef.current를 그대로 사용
        ).get_image_embeddings(imageProcessed.current)

        setSegmentationStatus(SEGMENTATION_STATUS.PROCESSING_SUCCESS)
      } 잡기 (오류) {
        console.log('err', 오류)
      }
    })()
  }, [url, modelRef.current, processorRef.current])

  // 마스크 효과 업데이트
  함수 updateMaskOverlay(마스크: RawImage, 점수: Float32Array) {
    const 마스크캔버스 = 마스크캔버스Ref.current
    if (!maskCanvas) {
      반품
    }
    const MaskContext = MaskCanvas.getContext('2d') as CanvasRenderingContext2D

    // 캔버스 크기 업데이트(다른 경우)
    if (maskCanvas.width !== 마스크.폭 || 마스크캔버스.높이 !== 마스크.높이) {
      마스크캔버스.폭 = 마스크.폭
      마스크캔버스.높이 = 마스크.높이
    }

    // 픽셀 데이터에 대한 버퍼 할당
    const imageData = MaskContext.createImageData(
      마스크캔버스.폭,
      마스크캔버스.높이
    )

    // 최적의 마스크 선택
    const numMasks = Score.length // 3
    bestIndex = 0으로 놔두세요
    for (let i = 1; i 



<h2>
  
  
  결론
</h2>

<p>읽어주셔서 감사합니다. 이것이 이 글의 전체 내용입니다. 이 글이 여러분에게 도움이 되기를 바라며, 좋아요와 즐겨찾기는 환영합니다. 궁금하신 점은 댓글로 편하게 토론해주세요!</p>


          

            
        </tensor></processor>

위 내용은 Canvas 시리즈 탐색: Transformers.js와 결합하여 지능형 이미지 처리 달성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!