A tarefa do segmentador de imagens do MediaPipe permite dividir imagens em regiões com base em categorias predefinidas para aplicar efeitos visuais, como desfoque de plano de fundo. Estas instruções mostram como usar o Image Segmenter para apps da Web e do Node. Para mais informações sobre os recursos, modelos e opções de configuração desta tarefa, consulte a Visão geral.
Exemplo de código
O código de exemplo para o Image Segmenter oferece uma implementação completa dessa tarefa 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 Image Segmenter. 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 código abaixo à 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 imagem do MediaPipe exige um modelo treinado 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
configurar a tarefa. A função createFromOptions permite personalizar o
segmentador 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 abaixo demonstra como criar e configurar a tarefa com opções personalizadas:
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 segmentador 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 inclui uma máscara de segmentação
como uma imagem uint8, em que cada valor de pixel indica o valor da 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 nos metadados do modelo da tarefa, se disponível. O padrão é en para
o inglês. É possível adicionar rótulos localizados aos metadados de um modelo personalizado
usando a API Writer de metadados 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 execução 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 o
método segmentForVideo() com o modo video para acionar inferências. O
segmentador de imagens 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 abaixo demonstra como executar o processamento com o modelo de tarefa:
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 imagens retorna os dados da imagem do segmento para uma
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].
Saída da máscara de confiança da imagem original e da 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 máscara de valor de categoria. 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 imagem original e categoria. Imagem de origem do conjunto de dados Pascal VOC 2012.
O código de exemplo do segmentador de imagens demonstra como mostrar os resultados de segmentação retornados pela tarefa. Consulte o exemplo de código para mais detalhes.