A tarefa do Detector de objetos do MediaPipe permite detectar a presença e o local 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. O exemplo de código descrito nestas instruções está disponível no CodePen.
Para conferir 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 código de exemplo do Detector de objetos fornece 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 texto. É possível ver, executar e editar o exemplo de código do Detector de objetos usando apenas o navegador da Web.
Configuração
Nesta seção, descrevemos as principais etapas para configurar seu ambiente de desenvolvimento especificamente para usar o Detector de objetos. Para informações gerais sobre a configuração do ambiente de desenvolvimento Web e JavaScript, incluindo requisitos da versão da plataforma, consulte o Guia de configuração para Web.
Pacotes JavaScript
O código do detector de objetos está disponível no pacote @mediapipe/tasks-vision
NPM do MediaPipe. É possível
encontrar e fazer o download dessas bibliotecas seguindo as instruções no
Guia de configuração da plataforma.
É possível instalar 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 um serviço da
rede de fornecimento de conteúdo (CDN), adicione o seguinte código na 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.js"
crossorigin="anonymous"></script>
</head>
Modelo
A tarefa do Detector de objetos do MediaPipe requer um modelo treinado compatível com ela. Para mais informações sobre os modelos treinados disponíveis para o Object Detector, 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. Use a função createFromModelPath() com um caminho relativo ou absoluto para o arquivo de 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 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. 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 ser usado para 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 da localidade | en |
maxResults |
Define o número máximo opcional de resultados de detecção com a melhor pontuação a ser retornado. | 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). Os resultados abaixo desse valor são rejeitados. | Qualquer ponto flutuante | Não definido |
categoryAllowlist |
Define a lista opcional de nomes de categorias permitidas. Se não estiver vazio, os resultados da detecção com o nome de categoria que não estiver nesse conjunto serão filtrados. Nomes de categoria duplicados ou desconhecidos são ignorados.
Essa opção é mutuamente exclusiva com categoryDenylist, e o uso
de ambos 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 com o nome de categoria nesse conjunto serão filtrados. Nomes de categoria duplicados ou desconhecidos são ignorados. Essa opção é mutuamente
exclusiva com categoryAllowlist, e o uso de ambos resulta em um erro. |
Qualquer string | Não definido |
preparar dados
O detector de objetos pode detectar objetos em imagens em qualquer formato compatível com o navegador do host. A tarefa também lida com o pré-processamento da 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 de cada 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() para detectar objetos em frames de vídeo. A tarefa processa
os dados, tenta reconhecer objetos e, em seguida, relata 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 bloqueará a linha de execução
principal. É possível evitar isso implementando 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);
Video
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 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 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.
Veja a seguir 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 abaixo mostra uma visualização da saída da tarefa:
O código de exemplo do Detector de objetos mostra como exibir os resultados da detecção retornados da tarefa. Consulte o exemplo de código para mais detalhes.