Guia de detecção de objetos para Web

A tarefa MediaPipe Object Detector permite detectar a presença e a localização de vários classes de objetos. Essa tarefa usa dados de imagem e gera uma lista de erros resultados, cada um representando um objeto identificado na imagem. O exemplo de código descritas nestas instruções está disponível em CodePen.

Para saber como essa tarefa funciona, acesse o demonstração. Para mais informações sobre os recursos, modelos e de configuração dessa tarefa, consulte a Visão geral.

Exemplo de código

O código de exemplo para o Detector de objetos 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 app de classificação de texto. Você pode exibir, executar e editar o exemplo de código do detector de objetos; usando apenas seu navegador da Web.

Configuração

Esta seção descreve as principais etapas para configurar seu ambiente de desenvolvimento especificamente para usar o Object Detector. Para informações gerais a configuração do seu ambiente de desenvolvimento da Web e JavaScript, incluindo requisitos de versão da plataforma, consulte Guia de configuração para a Web.

Pacotes JavaScript

O código do Object Detector está disponível pelo @mediapipe/tasks-vision do MediaPipe. NPM (em inglês). Você pode encontre e faça o download dessas bibliotecas seguindo as instruções na plataforma Guia de configuração.

Instale os pacotes necessários por meio do NPM usando o seguinte comando:

npm install @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 <head> do seu 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.js"
    crossorigin="anonymous"></script>
</head>

Modelo

A tarefa MediaPipe Object Detector requer um modelo treinado que seja compatível com esse tarefa. Para mais informações sobre modelos treinados disponíveis para o detector de objetos, consulte a visão geral da tarefa na seção 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 ObjectDetector.createFrom...() do detector de objetos 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 a função createFromOptions(), que permite definir mais configurações . Para mais informações sobre as opções de configuração disponíveis, consulte Seção Opções de configuração.

O código abaixo demonstra como criar e configurar essa tarefa:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

Para uma implementação mais completa da criação de uma tarefa do Detector de objetos, 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. Existem duas modos: IMAGEM: o modo para entradas de imagem única. VÍDEO: 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 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
`maxResults`	Define o número máximo opcional de resultados de detecção com maior pontuação como voltar.	Qualquer número positivo	-1 (todos os resultados são retornados)
`scoreThreshold`	Define o limite de pontuação da previsão que substitui o fornecido no os metadados do modelo (se houver). Resultados abaixo desse valor são rejeitados.	Qualquer flutuação	Não definido
`categoryAllowlist`	Define a lista opcional de nomes de categorias permitidos. Se não estiver vazio, resultados de detecção cujo nome de categoria não esteja neste conjunto serão que foram filtradas. Nomes de categorias duplicados ou desconhecidos são ignorados. Essa opção é mutuamente exclusiva com `categoryDenylist` e usando os dois resultarão em erro.	Qualquer string	Não definido
`categoryDenylist`	Define a lista opcional de nomes de categorias que não são permitidos. Se não vazio, os resultados de detecção cujo nome de categoria estiver neste conjunto serão filtrados para fora. Nomes de categorias duplicados ou desconhecidos são ignorados. Essa opção é mutuamente exclusivo com `categoryAllowlist` e usar ambos resulta em um erro.	Qualquer string	Não definido

Preparar dados

O Object Detector pode detectar 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. Para detectar objetos em vídeos, pode usar a API para processar rapidamente um frame por vez, usando o carimbo de data/hora do frame para determinar quando os gestos ocorrem no vídeo.

Executar a tarefa

O Detector de objetos usa detect() para trabalhar em imagens únicas e detectForVideo() trabalhos detectando objetos em frames de vídeo. Os processos da tarefa os dados, tenta reconhecer objetos e informa os resultados.

As chamadas para os métodos detect() e detectForVideo() são executadas. de forma síncrona e bloquear a linha de execução da interface do usuário. Se você reconhecer objetos quadros de vídeo da câmera de um dispositivo, cada classificação bloqueia fio É possível evitar isso implementando workers da Web para executar a detecção em outra conversa.

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

Imagem

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

Vídeo

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Para uma implementação mais completa da execução de uma tarefa do Detector de objetos, consulte o exemplo de código.

Gerenciar e exibir resultados

O Detector de objetos gera um objeto de resultados de detecção para cada execução de detecção. O objeto de resultados contém uma lista de detecções, em que cada detecção inclui uma caixa delimitadora e informações de categoria sobre o objeto detectado, incluindo o nome do objeto e uma pontuação de confiança.

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

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

A imagem abaixo mostra uma visualização da saída da tarefa:

O código de exemplo do Object Detector demonstra como exibir a detecção resultados retornados da tarefa, consulte a exemplo de código para mais detalhes.