A tarefa MediaPipe Interactive Image Segmenter usa uma localização em uma imagem, estima os limites da um objeto nesse local e retorna a segmentação do objeto como imagem dados. Estas instruções mostram como usar o segmentador de imagens interativo para nó e Web apps. Para mais informações sobre recursos, modelos e configurações dessa tarefa, consulte a Visão geral.
Exemplo de código
O código de exemplo para o segmentador de imagem interativo fornece uma implementação completa desse em JavaScript para sua referência. Esse código ajuda a testar a tarefa para começar a criar seu próprio aplicativo interativo de segmentação de imagens. Você pode exibir, executar e editar o segmentador de imagens interativas exemplo de código usando apenas seu navegador da Web. Você também pode revisar o código deste exemplo 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 interativo. 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 imagem interativo está disponível no 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 imagem interativo do MediaPipe requer um modelo treinado que seja compatível com essa tarefa. Para mais informações sobre os modelos treinados disponíveis para o segmentador de imagens interativas, 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 interativo 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
Segmentação interativa de imagens com opções de configuração. Para mais informações sobre configurações
opções, consulte Opções de configuração.
O código a seguir demonstra como criar e configurar a tarefa com comandos opções:
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
o objeto 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
que o pixel é parte do objeto localizado na área de interesse. |
{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 |
Preparar dados
O segmentador de imagem interativo pode segmentar objetos em imagens em qualquer formato suportado pelo 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 interativo 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 imagem interativo usa o método segment() para acionar inferências. A
O segmentador de imagens interativo 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:
const image = document.getElementById("image") as HTMLImageElement; interactiveSegmenter.segment( image, { keypoint: { x: event.offsetX / event.target.width, y: event.offsetY / event.target.height } }, callback);