A tarefa MediaPipe Image Segmenter permite dividir imagens em regiões com base em categorias predefinidas para aplicar efeitos visuais, como o desfoque do plano de fundo. Estas instruções mostram como usar o Segmentador de imagens 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 Segmenter de imagem oferece 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 de segmentação de imagens. É possível ver, executar e editar o exemplo de código do Segmentador de imagens usando apenas o navegador da Web. Também é possível revisar o código deste 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 imagem. 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 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 do Segmenter de imagem do MediaPipe requer um modelo treinado compatível com ela. Para mais informações sobre os modelos treinados disponíveis para o 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 Segmenter de imagem 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 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 ver uma implementação mais completa da criação de uma tarefa do Segmentador de imagem, 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 |
---|---|---|---|
runningMode |
Define o modo de execução da tarefa. Há dois
modos: IMAGE: o modo para entradas de imagem única. VIDEO: o modo para frames decodificados de um vídeo ou em uma transmissão ao vivo de dados de entrada, como de uma câmera. |
{IMAGE, VIDEO } |
IMAGE |
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 o valor da categoria vencedora. |
{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 o mapa
de pontuação de confiança da categoria. |
{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 Segmentador de imagens 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 Segmenter de imagem 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 imagens usa o método segment()
com o modo de imagem e o
método segmentForVideo()
com o modo video
para acionar inferências. Ele retorna os segmentos detectados como dados de imagem para uma função de callback que você definiu ao executar a inferência para a tarefa.
O código a seguir demonstra como executar o processamento com o modelo de tarefa:
Imagem
const image = document.getElementById("image") as HTMLImageElement; imageSegmenter.segment(image, callback);
Video
async function renderLoop(): void { const video = document.getElementById("video"); let startTimeMs = performance.now(); imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo); requestAnimationFrame(() => { renderLoop(); }); }
Para conferir uma implementação mais completa da execução de uma tarefa de segmentação de imagem, consulte o exemplo de código.
Gerenciar e mostrar resultados
Ao executar a inferência, a tarefa "Segmento de imagem" retorna os dados da imagem do segmento para uma função de callback. O conteúdo da saída depende do outputType
definido
quando você configurou a tarefa.
As seções abaixo mostram exemplos dos dados de saída dessa tarefa:
Confiança da categoria
As imagens abaixo 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 categoria e da imagem original. 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 da categoria vencedora da saída do modelo. O índice de categorias
vencedor tem a pontuação mais alta entre as categorias que o modelo consegue reconhecer.
Saída original da máscara de imagem e categoria. Imagem de origem do conjunto de dados Pascal VOC 2012.
O código de exemplo do Segmentador de imagem demonstra como exibir os resultados de segmentação retornados da tarefa. Consulte o exemplo de código para mais detalhes.