Erkundung der Canvas-Serie: Kombiniert mit Transformers.js, um eine intelligente Bildverarbeitung zu erreichen

Einführung

Ich pflege derzeit ein leistungsstarkes Open-Source-Kreativ-Zeichenbrett. Dieses Zeichenbrett integriert viele interessante Pinsel und Hilfszeichenfunktionen, wodurch Benutzer einen neuen Zeicheneffekt erleben können. Ob auf dem Mobilgerät oder am PC, Sie können ein besseres interaktives Erlebnis und eine bessere Effektdarstellung genießen.

In diesem Artikel werde ich ausführlich erklären, wie Transformers.js kombiniert wird, um eine Hintergrundentfernung und Bildmarkierungssegmentierung zu erreichen. Das Ergebnis ist wie folgt

Link: https://songlh.top/paint-board/

Github: https://github.com/LHRUN/paint-board Willkommen bei Star ⭐️

Transformers.js

Transformers.js ist eine leistungsstarke JavaScript-Bibliothek, die auf Transformers von Hugging Face basiert und direkt im Browser ausgeführt werden kann, ohne auf serverseitige Berechnungen angewiesen zu sein. Das bedeutet, dass Sie Ihre Modelle lokal ausführen können, was die Effizienz steigert und die Bereitstellungs- und Wartungskosten senkt.

Derzeit hat Transformers.js 1000 Modelle auf Hugging Face bereitgestellt, die verschiedene Bereiche abdecken und die meisten Ihrer Anforderungen erfüllen können, wie z. B. Bildverarbeitung, Textgenerierung, Übersetzung, Stimmungsanalyse und andere Verarbeitungsaufgaben, die Sie mit Transformers problemlos erledigen können .js. Suchen Sie wie folgt nach Modellen.

Die aktuelle Hauptversion von Transformers.js wurde auf V3 aktualisiert, die viele tolle Funktionen hinzufügt, Details: Transformers.js v3: WebGPU-Unterstützung, neue Modelle und Aufgaben und mehr ….

Beide Funktionen, die ich diesem Beitrag hinzugefügt habe, nutzen WebGpu-Unterstützung, die nur in V3 verfügbar ist und die Verarbeitungsgeschwindigkeit erheblich verbessert hat, wobei das Parsen jetzt im Millisekundenbereich erfolgt. Es ist jedoch zu beachten, dass es nicht viele Browser gibt, die WebGPU unterstützen. Daher wird empfohlen, für den Besuch die neueste Version von Google zu verwenden.

Funktion 1: Hintergrund entfernen

Um den Hintergrund zu entfernen, verwende ich das Xenova/Modnet-Modell, das so aussieht

Die Verarbeitungslogik kann in drei Schritte unterteilt werden

1. Initialisieren Sie den Status und laden Sie das Modell und den Prozessor.
2. Die Darstellung der Benutzeroberfläche basiert auf Ihrem eigenen Design, nicht auf meinem.
3. Zeigen Sie den Effekt, dies basiert auf Ihrem eigenen Design, nicht auf meinem. Heutzutage ist es beliebter, eine Grenzlinie zu verwenden, um den Kontrasteffekt vor und nach dem Entfernen des Hintergrunds dynamisch anzuzeigen.

Die Codelogik lautet wie folgt: React TS, Einzelheiten finden Sie im Quellcode meines Projekts. Der Quellcode befindet sich in src/components/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

Funktion 2: Bildmarkierungssegmentierung

Die Bildmarkersegmentierung wird mithilfe des Xenova/slimsam-77-uniform-Modells implementiert. Der Effekt ist wie folgt: Sie können auf das Bild klicken, nachdem es geladen wurde, und die Segmentierung wird entsprechend den Koordinaten Ihres Klicks generiert.

Die Verarbeitungslogik kann in fünf Schritte unterteilt werden

1. Initialisieren Sie den Status und laden Sie das Modell und den Prozessor
2. Holen Sie sich das Bild und laden Sie es. Speichern Sie dann die Ladedaten und Einbettungsdaten des Bildes.
3. Hören Sie sich das Bildklickereignis an, zeichnen Sie die Klickdaten auf, unterteilt in positive Marker und negative Marker, generieren Sie nach jedem Klick anhand der dekodierten Klickdaten die Maskendaten und zeichnen Sie dann den Segmentierungseffekt anhand der Maskendaten .
4. Schnittstellenanzeige, dies ist ein beliebiges Spiel für Ihr eigenes Design, nicht meine Vorgabe
5. Klicken Sie, um das Bild entsprechend den Pixeldaten der Maske zu speichern, mit den Originalbilddaten abzugleichen und es dann über die Leinwandzeichnung zu exportieren

Die Codelogik lautet wie folgt: React TS, Einzelheiten finden Sie im Quellcode meines Projekts. Der Quellcode befindet sich in src/components/boardOperation/uploadImage/imageSegmentation.tsx

import { useState, useRef, useEffect, useMemo, MouseEvent, FC } from 'react'
importieren {
  SamModel,
  AutoProzessor,
  RawImage,
  Vortrainiertes Modell,
  Prozessor,
  Tensor,
  SamImageProcessorResult
} von '@huggingface/transformers'

LoadingIcon aus '@/components/icons/loading.svg?react' importieren
PositiveIcon aus '@/components/icons/boardOperation/image-segmentation-positive.svg?react' importieren
NegativeIcon aus '@/components/icons/boardOperation/image-segmentation-negative.svg?react' importieren

Schnittstelle MarkPoint {
  Position: Nummer[]
  Etikett: Nummer
}

const SEGMENTATION_STATUS = {
  LADEN: 0,
  NO_SUPPORT_WEBGPU: 1,
  LOAD_ERROR: 2,
  LOAD_SUCCESS: 3,
  VERARBEITUNG: 4,
  PROCESSING_SUCCESS: 5
}

Typ SegmentationStatusType =
  (Typ des SEGMENTATION_STATUS)[Schlüssel des Typs des SEGMENTATION_STATUS]

const ImageSegmentation: FC<{ url: string }> = ({ url }) => {
  const [markPoints, setMarkPoints] = useState<MarkPoint[]>([])
  const [segmentationStatus, setSegmentationStatus] =
    useState<SegmentationStatusType>()
  const [pointStatus, setPointStatus] = useState<boolean>(true)

  const maskCanvasRef = useRef<HTMLCanvasElement>(null) // Segmentierungsmaske
  const modelRef = useRef<PreTrainedModel>() // Modell
  constprocessorRef = useRef<Processor>() // Prozessor
  const imageInputRef = useRef<RawImage>() // Originalbild
  const imageProcessed = useRef<SamImageProcessorResult>() // Verarbeitetes Bild
  const imageEmbeddings = useRef<Tensor>() // Daten einbetten

  const segmentationTip = useMemo(() => {
    switch (segmentationStatus) {
      Fall SEGMENTATION_STATUS.LOADING:
        return 'Bildsegmentierungsfunktion wird geladen'
      Fall SEGMENTATION_STATUS.NO_SUPPORT_WEBGPU:
        return „WebGPU wird in diesem Browser nicht unterstützt. Um die Bildsegmentierungsfunktion zu nutzen, verwenden Sie bitte die neueste Version von Google Chrome.“
      Fall SEGMENTATION_STATUS.LOAD_ERROR:
        Rückgabe „Bildsegmentierungsfunktion konnte nicht geladen werden“
      Fall SEGMENTATION_STATUS.LOAD_SUCCESS:
        Rückgabe „Bildsegmentierungsfunktion erfolgreich geladen“
      Fall SEGMENTATION_STATUS.PROCESSING:
        return 'Bildverarbeitung...'
      Fall SEGMENTATION_STATUS.PROCESSING_SUCCESS:
        return „Das Bild wurde erfolgreich verarbeitet. Sie können auf das Bild klicken, um es zu markieren. Der grüne Maskenbereich ist der Segmentierungsbereich.“
      Standard:
        zurückkehren ''
    }
  }, [segmentationStatus])

  // 1. Modell und Prozessor laden
  useEffect(() => {
    ;(async () => {
      versuchen {
        if (segmentationStatus === SEGMENTATION_STATUS.LOADING) {
          zurückkehren
        }

        setSegmentationStatus(SEGMENTATION_STATUS.LOADING)
        if (!navigator?.gpu) {
          setSegmentationStatus(SEGMENTATION_STATUS.NO_SUPPORT_WEBGPU)
          zurückkehren
        }const model_id = 'Xenova/slimsam-77-uniform'
        modelRef.current ??= waiting SamModel.from_pretrained(model_id, {
          dtype: 'fp16', // oder "fp32"
          Gerät: 'webgpu'
        })
        ProzessorRef.current ??= Warten auf AutoProcessor.from_pretrained(model_id)

        setSegmentationStatus(SEGMENTATION_STATUS.LOAD_SUCCESS)
      } Catch (Err) {
        console.log('err', err)
        setSegmentationStatus(SEGMENTATION_STATUS.LOAD_ERROR)
      }
    })()
  }, [])

  // 2. Prozessbild
  useEffect(() => {
    ;(async () => {
      versuchen {
        Wenn (
          !modelRef.current ||
          !processorRef.current ||
          !url ||
          segmentationStatus === SEGMENTATION_STATUS.PROCESSING
        ) {
          zurückkehren
        }
        setSegmentationStatus(SEGMENTATION_STATUS.PROCESSING)
        clearPoints()

        imageInputRef.current = Warten auf RawImage.fromURL(url)
        imageProcessed.current = warte auf ProcessorRef.current(
          imageInputRef.current
        )
        imageEmbeddings.current = Warten (
          modelRef.current wie beliebig
        ).get_image_embeddings(imageProcessed.current)

        setSegmentationStatus(SEGMENTATION_STATUS.PROCESSING_SUCCESS)
      } Catch (Err) {
        console.log('err', err)
      }
    })()
  }, [URL, ModelRef.current, ProcessorRef.current])

  // Aktualisierung des Maskeneffekts
  Funktion updateMaskOverlay(mask: RawImage, Scores: Float32Array) {
    const maskCanvas = maskCanvasRef.current
    if (!maskCanvas) {
      zurückkehren
    }
    const maskContext = maskCanvas.getContext('2d') als CanvasRenderingContext2D

    // Leinwandabmessungen aktualisieren (falls unterschiedlich)
    if (maskCanvas.width !== mask.width || maskCanvas.height !== mask.height) {
      maskCanvas.width = mask.width
      maskCanvas.height = mask.height
    }

    // Puffer für Pixeldaten zuweisen
    const imageData = maskContext.createImageData(
      maskCanvas.width,
      maskCanvas.height
    )

    // Beste Maske auswählen
    const numMasks = scores.length // 3
    sei bestIndex = 0
    for (let i = 1; i < numMasks; i) {
      if (scores[i] > scores[bestIndex]) {
        bestIndex = i
      }
    }

    // Maske mit Farbe füllen
    const pixelData = imageData.data
    for (let i = 0; i < pixelData.length; i) {
      if (mask.data[numMasks * i bestIndex] === 1) {
        const offset = 4 * i
        pixelData[offset] = 101 // r
        pixelData[offset 1] = 204 // g
        pixelData[offset 2] = 138 // b
        pixelData[offset 3] = 255 // a
      }
    }

    // Bilddaten in den Kontext ziehen
    maskContext.putImageData(imageData, 0, 0)
  }

  // 3. Dekodierung basierend auf Klickdaten
  const decode = async (markPoints: MarkPoint[]) => {
    Wenn (
      !modelRef.current ||
      !imageEmbeddings.current ||
      !processorRef.current ||
      !imageProcessed.current
    ) {
      zurückkehren
    }// Kein Klick auf die Daten löscht den Segmentierungseffekt direkt
    if (!markPoints.length && maskCanvasRef.current) {
      const maskContext = maskCanvasRef.current.getContext(
        '2d'
      ) als CanvasRenderingContext2D
      maskContext.clearRect(
        0,
        0,
        maskCanvasRef.current.width,
        maskCanvasRef.current.height
      )
      zurückkehren
    }

    // Eingaben für die Dekodierung vorbereiten
    const reshaped = imageProcessed.current.reshaped_input_sizes[0]
    const Punkte = markPoints
      .map((x) => [x.position[0] * umgeformt[1], x.position[1] * umgeformt[0]])
      .flat(Unendlich)
    const labels = markPoints.map((x) => BigInt(x.label)).flat(Infinity)

    const num_points = markPoints.length
    const input_points = new Tensor('float32', point, [1, 1, num_points, 2])
    const input_labels = new Tensor('int64', labels, [1, 1, num_points])

    // Maske generieren
    const { pred_masks, iou_scores } = waiting modelRef.current({
      ...imageEmbeddings.current,
      Eingabepunkte,
      input_labels
    })

    // Nachbearbeitung der Maske
    const masks = waiting (processorRef.current as any).post_process_masks(
      pred_masks,
      imageProcessed.current.original_sizes,
      imageProcessed.current.regeformte_input_sizes
    )

    updateMaskOverlay(RawImage.fromTensor(masks[0][0]), iou_scores.data)
  }

  const clamp = (x: Zahl, min = 0, max = 1) => {
    return Math.max(Math.min(x, max), min)
  }

  const clickImage = (e: MouseEvent) => {
    if (segmentationStatus !== SEGMENTATION_STATUS.PROCESSING_SUCCESS) {
      zurückkehren
    }

    const { clientX, clientY, currentTarget } = e
    const { left, top } = currentTarget.getBoundingClientRect()

    const x = Klammer(
      (clientX - left currentTarget.scrollLeft) / currentTarget.scrollWidth
    )
    const y = Klammer(
      (clientY - top currentTarget.scrollTop) / currentTarget.scrollHeight
    )

    const existingPointIndex = markPoints.findIndex(
      (Punkt) =>
        Math.abs(point.position[0] - x) < 0,01 &&
        Math.abs(point.position[1] - y) < 0,01 &&
        point.label === (pointStatus ? 1 : 0)
    )

    const newPoints = [...markPoints]
    if (existingPointIndex !== -1) {
      // Befindet sich im aktuell angeklickten Bereich eine Markierung, wird diese gelöscht.
      newPoints.splice(existingPointIndex, 1)
    } anders {
      newPoints.push({
        Position: [x, y],
        label: pointStatus ? 1 : 0
      })
    }

    setMarkPoints(newPoints)
    dekodieren(newPoints)
  }

  const clearPoints = () => {
    setMarkPoints([])
    dekodieren([])
  }

  zurückkehren (
    <div className="cardshadow-xl overflow-auto">
      <div className="flex items-center gap-x-3">
        <button className="btn btn-primary btn-sm" onClick={clearPoints}>
          Klare Punkte
        </button>

        <-Taste
          className="btn btn-primary btn-sm"
          onClick={() => setPointStatus(true)}
        >
          {pointStatus ? 'Positiv' : 'Negativ'}
        </button>
      </div>
      <div className="text-xs text-base-content mt-2">{segmentationTip}</div>
      <div
       >



<h2>
  
  
  Abschluss
</h2>

<p>Vielen Dank fürs Lesen. Dies ist der gesamte Inhalt dieses Artikels. Ich hoffe, dieser Artikel ist hilfreich für Sie. Gerne können Sie ihn liken und zu Ihren Favoriten hinzufügen. Wenn Sie Fragen haben, können Sie diese gerne im Kommentarbereich diskutieren!</p>


          

            
        

Das obige ist der detaillierte Inhalt vonErkundung der Canvas-Serie: Kombiniert mit Transformers.js, um eine intelligente Bildverarbeitung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!