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.