A tarefa do detector de objetos do MediaPipe permite detectar a presença e a localização de várias classes de objetos. Essa tarefa usa dados de imagem e gera uma lista de resultados de detecção, cada um representando um objeto identificado na imagem. Você pode visualizar, executar e editar o exemplo do Object Detector usando apenas seu navegador da Web.
Para mais informações sobre os recursos, modelos e opções de configuração dessa tarefa, consulte a Visão geral.
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 sobre como configurar seu ambiente de desenvolvimento da Web e JavaScript, incluindo requisitos de versão da plataforma, consulte o guia de configuração para a Web.
Pacotes JavaScript
O código do detector de objetos está disponível no pacote NPM @mediapipe/tasks-vision do MediaPipe. Para encontrar e baixar essas bibliotecas, siga as instruções no guia de configuração da plataforma.
É possível instalar os pacotes necessários pelo NPM usando o seguinte 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 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.mjs"
crossorigin="anonymous"></script>
</head>
Modelo
A tarefa do MediaPipe Object Detector exige um modelo treinado compatível com ela. Para mais informações sobre os 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 do Object Detector ObjectDetector.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(), que permite definir mais opções de
configuração. Para mais informações sobre as opções de configuração disponíveis, consulte a seção Opções de configuração.
O código a seguir 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 de detector de objetos, consulte o exemplo de código.
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 detecção com pontuação mais alta a serem retornados. | Qualquer número positivo | -1 (todos os resultados são retornados) |
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 da detecçã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 detecçã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 |
Preparar dados
O Object Detector pode detectar 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. Para detectar objetos em vídeos, você 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 com imagens únicas e
detectForVideo() para detectar objetos em frames de vídeo. A tarefa processa 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 bloqueiam a linha de execução da interface do usuário. Se você reconhecer 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 a detecção em
outra linha de execução.
O código a seguir demonstra como executar o processamento com o modelo de tarefa:
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 de detector de objetos, consulte o exemplo de código.
Processar e mostrar 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 uma 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 dessa 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 a seguir mostra uma visualização da saída da tarefa:
O exemplo de código do Object Detector mostra como exibir os resultados da detecção retornados da tarefa. Consulte o exemplo de código para mais detalhes.