저는 현재 강력한 오픈소스 크리에이티브 드로잉 보드를 관리하고 있습니다. 이 드로잉 보드에는 많은 흥미로운 브러시와 보조 드로잉 기능이 통합되어 있어 사용자가 새로운 드로잉 효과를 경험할 수 있습니다. 모바일이든 PC이든 더 나은 인터랙티브 경험과 효과 표시를 즐길 수 있습니다.
이 글에서는 Transformers.js를 결합하여 배경 제거 및 이미지 마킹 분할을 구현하는 방법을 자세히 설명하겠습니다. 결과는 다음과 같습니다
링크: https://songlh.top/paint-board/
Github: https://github.com/LHRUN/paint-board Star ⭐️에 오신 것을 환영합니다
Transformers.js는 서버측 계산에 의존하지 않고 브라우저에서 직접 실행할 수 있는 Hugging Face Transformers를 기반으로 하는 강력한 JavaScript 라이브러리입니다. 이는 모델을 로컬에서 실행하여 효율성을 높이고 배포 및 유지 관리 비용을 줄일 수 있음을 의미합니다.
현재 Transformers.js는 다양한 도메인을 포괄하는 Hugging Face에 1000개 모델을 제공하고 있으며, 이는 이미지 처리, 텍스트 생성, 번역, 감정 분석 및 기타 작업 처리 등 대부분의 요구 사항을 충족할 수 있으며 Transformers를 통해 쉽게 달성할 수 있습니다. .js 다음과 같이 모델을 검색하세요.
Transformers.js의 현재 주요 버전이 V3으로 업데이트되어 많은 훌륭한 기능과 세부 정보가 추가되었습니다. Transformers.js v3: WebGPU 지원, 새 모델 및 작업 등….
이 게시물에 추가한 두 기능은 모두 V3에서만 사용할 수 있는 WebGpu 지원을 사용하며 이제 밀리초 단위의 구문 분석 기능을 통해 처리 속도가 크게 향상되었습니다. 다만, WebGPU를 지원하는 브라우저가 많지 않다는 점 참고하시고 방문하시려면 최신 버전의 구글을 이용하시는 것을 권장드립니다.
배경을 제거하기 위해 저는 다음과 같은 Xenova/modnet 모델을 사용합니다
처리 로직은 세 단계로 나눌 수 있습니다
코드 로직은 다음과 같습니다. 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
이미지 마커 분할은 Xenova/slimsam-77-uniform 모델을 사용하여 구현됩니다. 효과는 다음과 같습니다. 이미지가 로드된 후 클릭하면 클릭한 좌표에 따라 분할이 생성됩니다.
처리 로직은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!