Guia de segmentação de imagens para a Web

A tarefa "Segmento de imagem do MediaPipe" permite dividir imagens em regiões com base em categorias para aplicar efeitos visuais, como desfoque do plano de fundo. Esses mostram como usar o segmentador de imagens para apps da Web e de nó. Para mais informações sobre os recursos, modelos e opções de configuração do para esta tarefa, consulte a Visão geral.

Exemplo de código

O código de exemplo para o segmentador de imagens fornece uma implementação completa em JavaScript para sua referência. Esse código ajuda a testar essa tarefa e começar a criar seu próprio app de segmentação de imagens. É possível visualizar, executar e editar o código de exemplo do Segmentador de imagens usando apenas o navegador da Web. Você também pode conferir o código desse exemplo no GitHub.

Configuração

Esta seção descreve as principais etapas para configurar seu ambiente de desenvolvimento e projetos de código especificamente para usar o segmentador de imagens. Para informações gerais sobre como configurar seu ambiente de desenvolvimento para usar tarefas do MediaPipe, incluindo os requisitos da versão da plataforma, consulte o Guia de configuração para a Web.

Pacotes JavaScript

O código do segmentador de imagem está disponível no pacote @mediapipe/tasks-vision NPM do MediaPipe. É possível encontrar e fazer o download dessas bibliotecas nos links fornecidos no guia de configuração da plataforma.

É possível instalar os pacotes necessários com o seguinte código para preparação local usando este comando:

npm install --save @mediapipe/tasks-vision

Se você quiser importar o código da tarefa usando uma rede de fornecimento de conteúdo (CDN), adicione o seguinte código à tag no arquivo HTML:

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modelo

A tarefa do segmentador de imagens do MediaPipe requer um modelo treinado que seja compatível com essa tarefa. Para mais informações sobre os modelos treinados disponíveis para o Image Segmenter, consulte a seção "Modelos" da visão geral da tarefa.

Selecione e faça o download de um modelo e armazene-o no diretório do projeto:

<dev-project-root>/app/shared/models/

Criar a tarefa

Use uma das funções createFrom...() do segmentador de imagens para preparar a tarefa para executar inferências. Use a função createFromModelPath() com um caminho relativo ou absoluto para o arquivo do modelo treinado. Se o modelo já estiver carregado na memória, use o método createFromModelBuffer().

O exemplo de código abaixo demonstra o uso da função createFromOptions() para para configurar a tarefa. A função createFromOptions permite personalizar Segmentação de imagens com opções de configuração. Para mais informações sobre a configuração de tarefas, consulte Opções de configuração.

O código a seguir demonstra como criar e configurar a tarefa com comandos opções:

runningMode = "IMAGE";

async function createImageSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

Para uma implementação mais completa da criação de uma tarefa de Segmentação de imagens, consulte o exemplo de código.

Opções de configuração

Esta tarefa tem as seguintes opções de configuração para aplicativos da Web:

Nome da opção Descrição Intervalo de valor Valor padrão
outputCategoryMask Se definido como True, a saída incluirá uma máscara de segmentação como uma imagem uint8, em que cada valor de pixel indica a categoria vencedora . {True, False} False
outputConfidenceMasks Se definido como True, a saída inclui uma máscara de segmentação como uma imagem de valor flutuante, em que cada valor flutuante representa o mapa de pontuação de confiança da categoria. {True, False} True
displayNamesLocale Define o idioma dos rótulos a serem usados para os nomes de exibição fornecidos no metadados do modelo da tarefa, se disponíveis. O padrão é en para inglês. É possível adicionar rótulos localizados aos metadados de um modelo personalizado usando a API Metadata Writer do TensorFlow Lite; Código de localidade en
resultListener Define o listener de resultado para receber os resultados da segmentação de forma assíncrona quando o segmentador de imagens está no modo LIVE_STREAM. Só pode ser usado quando o modo de corrida está definido como LIVE_STREAM N/A N/A

Preparar dados

O Image Segmenter pode segmentar objetos em imagens em qualquer formato aceito pelo navegador host. A tarefa também processa a entrada de dados, incluindo redimensionamento, rotação e normalização de valores.

As chamadas para os métodos segment() e segmentForVideo() do segmentador de imagens são executadas de forma síncrona e bloqueiam a linha de execução da interface do usuário. Se você segmentar objetos em frames de vídeo da câmera de um dispositivo, cada tarefa de segmentação bloqueará a linha de execução principal. Para evitar isso, implemente workers da Web para executar segment() e segmentForVideo() em outra linha de execução.

Executar a tarefa

O segmentador de imagens usa o método segment() com o modo de imagem e a Método segmentForVideo() com o modo video para acionar inferências. O O segmentador de imagens retorna os segmentos detectados como dados de imagem para um callback que você define ao executar uma inferência para a tarefa.

O código a seguir demonstra como executar o processamento com o modelo de tarefas:

Imagem

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

Vídeo

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Para uma implementação mais completa da execução de uma tarefa do segmentador de imagens, consulte o exemplo de código.

Processar e mostrar resultados

Ao executar a inferência, a tarefa do Segmentador de imagem retorna os dados de imagem do segmento para um função de callback. O conteúdo da saída depende do outputType definido ao configurar a tarefa.

As seções a seguir mostram exemplos dos dados de saída desta tarefa:

Confiança da categoria

As imagens a seguir mostram uma visualização da saída da tarefa para uma máscara de confiança de categoria. A saída da máscara de confiança contém valores flutuantes entre [0, 1]:

Imagem original e saída de máscara de confiança de categoria. Imagem de origem do conjunto de dados Pascal VOC 2012.

Valor da categoria

As imagens a seguir mostram uma visualização da saída da tarefa para uma categoria máscara de valor. O intervalo da máscara de categoria é [0, 255], e cada valor de pixel representa o índice de categoria vencedor da saída do modelo. O índice da categoria vencedora tem a maior pontuação entre as categorias que o modelo pode reconhecer.

Saída da máscara de categoria e da imagem original. Imagem de origem do conjunto de dados Pascal VOC 2012.

O código de exemplo do segmentador de imagens demonstra como exibir a segmentação resultados retornados da tarefa, consulte a exemplo de código para mais detalhes.