Guia interativo de segmentação de imagens para Web

A tarefa MediaPipe Interactive Image Segmenter utiliza um local em uma imagem, estima os limites de um objeto nesse local e retorna a segmentação dele como dados da imagem. Estas instruções mostram como usar o segmento de imagem interativo para apps da Web e do nó. Para mais informações sobre os recursos, modelos e opções de configuração dessa tarefa, consulte a Visão geral.

Exemplo de código

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

Configuração

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

Pacotes JavaScript

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

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

npm install --save @mediapipe/tasks-vision

Se você quiser importar o código da tarefa por um serviço da rede de fornecimento de conteúdo (CDN), adicione o seguinte código na 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 MediaPipe Interactive Image Segmenter requer um modelo treinado compatível com ela. Para mais informações sobre os modelos treinados disponíveis para o Interactive Image Segmenter, consulte a seção Modelos de 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 imagem interativo para preparar a tarefa para executar inferências. Use a função createFromModelPath() com um caminho relativo ou absoluto para o arquivo de 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 configurar a tarefa. A função createFromOptions permite personalizar o segmentador de imagem interativo com opções de configuração. Para mais informações sobre as opções de configuração, consulte Opções de configuração.

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

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

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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 se o pixel faz parte do objeto localizado na área de interesse. {True, False} False
outputConfidenceMasks Se definido como True, a saída incluirá uma máscara de segmentação como uma imagem de valor flutuante, em que cada valor flutuante representa a confiança de que o pixel faz parte do objeto localizado na área de interesse. {True, False} True
displayNamesLocale Define o idioma dos rótulos a ser usado para nomes de exibição fornecidos nos metadados do modelo da tarefa, se disponível. O padrão é en para inglês. É possível adicionar rótulos localizados aos metadados de um modelo personalizado usando a API TensorFlow Lite Metadata Writer Código da localidade en

preparar dados

O Segmenter de imagem interativo pode segmentar objetos em imagens em qualquer formato compatível com o navegador do host. A tarefa também lida com o pré-processamento da entrada de dados, incluindo redimensionamento, rotação e normalização de valores.

As chamadas para os métodos segment() e segmentForVideo() do segmento de imagem interativo 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. É possível evitar isso implementando workers da Web para executar segment() e segmentForVideo() em outra linha de execução.

Executar a tarefa

O Segmentador de imagem interativo usa o método segment() para acionar inferências. O segmentador de imagem interativo retorna os segmentos detectados como dados de imagem para uma função de callback definida ao executar uma inferência para a tarefa.

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

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

Gerenciar e mostrar resultados

Ao executar a inferência, a tarefa "Segmento de imagem interativo" retorna os dados de imagem do segmento para uma função de callback. O conteúdo da saída é composto por dados de imagem e pode incluir uma máscara de categoria, de confiança ou ambas, dependendo do que você definiu quando configurou a tarefa.

As seções a seguir explicam melhor os dados de saída dessa tarefa:

Máscara de categoria

As imagens a seguir mostram uma visualização da saída da tarefa para uma máscara de valor de categoria com uma área de interesse indicada. Cada pixel é um valor uint8 que indica se o pixel faz parte do objeto localizado na área de interesse. O círculo preto e branco na segunda imagem indica a área de interesse selecionada.

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

Máscara de confiança

A saída de uma máscara de confiança contém valores flutuantes entre [0, 1] para cada canal de entrada de imagem. Valores mais altos indicam uma confiança maior de que o pixel da imagem faz parte do objeto localizado na área de interesse.

O código de exemplo do Segmentador de imagem interativo demonstra como exibir os resultados de classificação retornados da tarefa. Consulte o exemplo de código para mais detalhes.