A tarefa MediaPipe Interactive Image Segmenter usa um local em uma imagem, estima os limites de um objeto nesse local e retorna a segmentação do objeto como dados de imagem. Estas instruções mostram como usar o Interactive Image Segmenter para apps da Web e do Node. 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 exemplo de código do Interactive Image Segmenter oferece uma implementação completa dessa tarefa em JavaScript para sua referência. Esse código ajuda a testar a tarefa e começar a criar seu próprio app de segmentação de imagens interativo. É possível visualizar, executar e editar o Interactive Image Segmenter exemplo usando apenas o navegador da Web.
Configuração
Esta seção descreve as principais etapas para configurar seu ambiente de desenvolvimento e projetos de código especificamente para usar o Interactive Image Segmenter. Para informações gerais sobre como configurar seu ambiente de desenvolvimento para usar as tarefas do MediaPipe, incluindo os requisitos de versão da plataforma, consulte o guia de configuração para a Web.
Pacotes JavaScript
O código do Interactive Image Segmenter 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.
Para instalar os pacotes necessários com o código a seguir para preparo local, use o comando abaixo:
npm install --save @mediapipe/tasks-vision
Se você quiser importar o código da tarefa usando um serviço de rede de distribuição de conteúdo (CDN) adicione o código a seguir na tag no arquivo HTML:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>
Modelo
A tarefa MediaPipe Interactive Image Segmenter exige 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 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 Interactive Image Segmenter para preparar a tarefa para executar inferências. Use a função createFromModelPath() com um caminho relativo ou absoluto para o arquivo 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 Interactive Image Segmenter 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 a seguir 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
Essa 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 se o pixel faz parte do
objeto localizado na área de interesse. |
{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 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 serem usados para os 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 de localidade | en |
Preparar dados
O Interactive Image Segmenter pode segmentar objetos em imagens em qualquer formato compatível com o navegador host. A tarefa também processa 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 Interactive Image Segmenter 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 vai 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 Interactive Image Segmenter usa o método segment() para acionar inferências. O Interactive Image Segmenter 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);