A tarefa "Segmento de imagem do MediaPipe" permite dividir imagens em regiões com base em categorias para aplicar efeitos visuais, como desfoque de 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 a tarefa para começar a criar seu próprio aplicativo de segmentação de imagens. Você pode conferir, executar e edite o segmento exemplo de código usando apenas seu navegador da Web. Você também pode revisar o código para este exemplo em 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 a configuração do seu ambiente de desenvolvimento para usar tarefas do MediaPipe, incluindo requisitos de versão da plataforma, consulte Guia de configuração para a Web.
Pacotes JavaScript
O código do segmentador de imagens está disponível por meio do MediaPipe @mediapipe/tasks-vision
NPM (em inglês). Você pode
encontrar e fazer o download dessas bibliotecas pelos links fornecidos na plataforma
Guia de configuração.
É 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 uma rede de fornecimento de conteúdo (CDN) adicione o seguinte código na tag do seu 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 modelos treinados disponíveis para o segmentador de imagens, consulte na seção de visão geral da tarefa Modelos.
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. Usar a createFromModelPath()
função com um caminho relativo ou absoluto para o arquivo de modelo treinado.
Se o modelo já estiver carregado na memória, é possível usar
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
Segmentador de imagens com opções de configuração. Para mais informações sobre a tarefa
da configuração, 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 incluirá uma máscara de segmentação
como uma imagem de valor flutuante, em que cada valor flutuante representa a confiança
mapa de pontuação da categoria. |
{True, False} |
True |
displayNamesLocale |
Define o idioma dos rótulos a serem usados para 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 da localidade | en |
resultListener |
Define o listener de resultados 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 segmentador de imagens pode segmentar objetos em imagens em qualquer formato compatível com o navegador host. A tarefa também lida com o pré-processamento de 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 bloquear a linha de execução da interface do usuário. Se você segmentar objetos
quadros de vídeo da câmera de um dispositivo, cada tarefa de segmentação bloqueia
fio Você pode 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 a
Método segmentForVideo() com o modo video para acionar inferências. A
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);
Video
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.
Gerenciar e exibir 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
quando você configurou a tarefa.
As seções abaixo 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 categoria
máscara de confiança. 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 Pascal VOC 2012 (em inglês) no conjunto de dados.
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 vencedora da saída do modelo. A categoria vencedora
tem a pontuação mais alta entre as categorias que o modelo pode reconhecer.
Imagem original e saída de máscara de categoria. Imagem de origem do Pascal VOC 2012 (em inglês) no conjunto de dados.
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.