A tarefa MediaPipe Image Embedder permite converter dados de imagem em uma representação numérica para realizar tarefas de processamento de imagem relacionadas ao ML, como comparar a semelhança de duas imagens. Estas instruções mostram como usar o incorporador de imagens para apps da Web e do Node.
Para mais informações sobre recursos, modelos e opções de configuração, desta tarefa, consulte a Visão geral.
Exemplo de código
O código de exemplo para o incorporador de imagens fornece uma implementação completa em JavaScript para sua referência. Esse código ajuda a testar a tarefa e comece a criar seu próprio app de incorporação de imagens. Você pode conferir, executar e edite o Exemplo de código do incorporador 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 incorporador de imagens. Para informações gerais a configuração do seu ambiente de desenvolvimento para usar tarefas do MediaPipe, incluindo requisitos de versão da plataforma, consulte Guia de configuração para a Web.
Pacotes JavaScript
O código do incorporador de imagens está disponível por meio do @mediapipe/tasks-vision
do MediaPipe
NPM (em inglês). Você pode
encontrar e fazer o download dessas bibliotecas pelos links fornecidos na plataforma
Guia de configuração.
É possível instalar os pacotes necessários com o seguinte código para preparo local 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 do seu arquivo HTML:
<!-- You can replace jsDelivr with your preferred CDN -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modelo
A tarefa MediaPipe Image Embedder exige um modelo treinado que seja compatível com esse tarefa. Para mais informações sobre os modelos treinados disponíveis para o incorporador de imagens, consulte na seção de visão geral da tarefa 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
Especificar um caminho de modelo
É possível criar uma tarefa com as opções padrão usando o método createFromModelPath()
:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
},
});
Especificar o buffer do modelo
Se o modelo já estiver carregado na memória, é possível usar
Método createFromModelBuffer()
:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
vision,
new Uint8Array(...)
);
Especificar opções personalizadas
A tarefa MediaPipe Image Embedder usa a função createFromOptions
para definir
a tarefa. A função createFromOptions
aceita valores para
de configuração do Terraform. Para mais informações sobre
opções de configuração, consulte Opções de configuração.
O código a seguir demonstra como criar e configurar a tarefa com comandos opções:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "model.tflite"
},
quantize: true
});
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 |
---|---|---|---|
running_mode |
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 |
l2Normalize |
Define se o vetor de atributo retornado deve ser normalizado com a norma L2. Use essa opção somente se o modelo ainda não tiver um L2_NORMALIZATION Op. do TFLite. Na maioria dos casos, esse já é o caso e Assim, a normalização L2 é alcançada por meio da inferência do TFLite sem a necessidade para essa opção. | Boolean |
False |
quantize |
Se o embedding retornado deve ser quantizado em bytes por meio de com a quantização escalar. Os embeddings são implicitamente definidos como unidade-norma e portanto, qualquer dimensão terá um valor em [-1.0, 1.0]. Usar a opção "l2Normalize", se esse não for o caso. | Boolean |
False |
Preparar dados
O incorporador de imagens pode incorporar 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.
As chamadas para os métodos embed()
e embedForVideo()
do incorporador de imagens são executadas.
de forma síncrona e bloquear a linha de execução da interface do usuário. Se você quiser extrair
vetores de recurso de frames de vídeo, cada embedding bloqueará a linha de execução principal.
Para evitar isso, implemente workers da Web para executar as APIs embed()
e
embedForVideo()
em outra linha de execução.
Executar a tarefa
O incorporador de imagens usa o embed()
(com o modo de execução image
) e
Métodos embedForVideo()
(com o modo de execução video
) para acionar
ou inferências. A API Image Embedder retornará os vetores de embedding para o
imagem de entrada.
O código a seguir demonstra como executar o processamento com o modelo de tarefas:
Imagem
const image = document.getElementById("image") as HTMLImageElement; const imageEmbedderResult = imageEmbedder.embed(image);
Vídeo
const video = document.getElementById("webcam"); const startTimeMs = performance.now(); const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);
Gerenciar e exibir resultados
Ao executar a inferência, a tarefa do incorporador de imagens retorna uma
Objeto ImageEmbedderResult
que contém os vetores de embedding para a entrada
imagem ou frame.
Confira abaixo um exemplo dos dados de saída desta tarefa:
ImageEmbedderResult:
Embedding #0 (sole embedding head):
float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
head_index: 0
Esse resultado foi obtido pela incorporação da seguinte imagem:
É possível comparar a semelhança semântica de dois embeddings usando o
função ImageEmbedder.cosineSimilarity
. Confira o código a seguir
exemplo.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
O código de exemplo do incorporador de imagens demonstra como exibir o incorporador resultados retornados da tarefa, consulte a exemplo de código para mais detalhes.