Guia de classificação de imagens para Web

A tarefa MediaPipe Image Classifier permite realizar a classificação em imagens. É possível usar essa tarefa para identificar o que uma imagem representa em um conjunto de categorias definidas durante o treinamento. Estas instruções mostram como usar o classificador de imagens para apps Node e da Web.

Para ver essa tarefa em ação, confira a demonstração. 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 classificador de imagens 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 classificação de imagens. É possível ver, executar e editar o exemplo do classificador de imagens usando apenas seu 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 classificador de imagens. Para informações gerais sobre como configurar seu ambiente de desenvolvimento para usar as tarefas do MediaPipe, incluindo requisitos de versão da plataforma, consulte o Guia de configuração para a Web.

Pacotes JavaScript

O código do classificador de imagens está disponível no pacote @mediapipe/tasks-vision NPM do MediaPipe. Você pode encontrar e baixar essas bibliotecas nos links fornecidos no guia de configuração da plataforma.

É possível instalar os pacotes necessários com o seguinte código para teste local usando este comando:

npm install @mediapipe/tasks-vision

Se você quiser importar o código da tarefa usando um serviço de rede de fornecimento de conteúdo (CDN), adicione o seguinte código à tag <head> no arquivo HTML:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

Modelo

A tarefa MediaPipe Image Classifier exige um modelo treinado compatível com essa tarefa. Para mais informações sobre os modelos treinados disponíveis para o classificador de imagens, 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 do classificador de imagens createFrom...() 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 classificador de imagens 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 createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

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
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
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íveis. 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
maxResults Define o número máximo opcional de resultados de classificação com pontuação mais alta a serem retornados. Se for < 0, todos os resultados disponíveis serão retornados. Qualquer número positivo -1
scoreThreshold Define o limite de pontuação de previsão que substitui o fornecido nos metadados do modelo, se houver. Resultados abaixo desse valor são rejeitados. Qualquer ponto flutuante Não definido
categoryAllowlist Define a lista opcional de nomes de categorias permitidos. Se não estiver vazio, os resultados de classificação cujo nome de categoria não estiver neste conjunto serão filtrados. Nomes de categorias duplicados ou desconhecidos são ignorados. Essa opção é mutuamente exclusiva com categoryDenylist, e usar as duas resulta em um erro. Qualquer string Não definido
categoryDenylist Define a lista opcional de nomes de categorias que não são permitidos. Se não estiver vazio, os resultados de classificação cujo nome de categoria estiver neste conjunto serão filtrados. Nomes de categorias duplicados ou desconhecidos são ignorados. Essa opção é mutuamente exclusiva com categoryAllowlist, e usar as duas resulta em um erro. Qualquer string Não definido
resultListener Define o listener de resultados para receber os resultados da classificação de forma assíncrona quando o classificador de imagens está no modo de transmissão ao vivo. Só pode ser usado quando o modo de execução está definido como LIVE_STREAM N/A Não definido

Preparar dados

O classificador de imagens pode classificar objetos em imagens de 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 classify() e classifyForVideo() do classificador de imagens são executadas de forma síncrona e bloqueiam a linha de execução da interface do usuário. Se você classificar objetos em frames de vídeo da câmera de um dispositivo, cada classificação vai bloquear a thread principal. Para evitar isso, implemente web workers para executar classify() e classifyForVideo() em outra linha de execução.

Executar a tarefa

O classificador de imagens usa o método classify() com o modo de imagem e o método classifyForVideo() com o modo video para acionar inferências. A API Image Classifier vai retornar as categorias possíveis para os objetos na imagem de entrada.

O código a seguir demonstra como executar o processamento com o modelo de tarefa:

Imagem

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

Vídeo

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

Para uma implementação mais completa da execução de uma tarefa de classificador de imagens, consulte o exemplo.

Processar e mostrar resultados

Ao executar a inferência, a tarefa do classificador de imagens retorna um objeto ImageClassifierResult que contém a lista de categorias possíveis para os objetos na imagem ou frame de entrada.

Confira abaixo um exemplo dos dados de saída dessa tarefa:

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

Esse resultado foi obtido ao executar o classificador de pássaros em:

Fotografia em close de um pardal-doméstico

O exemplo de código do classificador de imagens mostra como exibir os resultados da classificação retornados da tarefa. Consulte o exemplo para mais detalhes.