Com a tarefa MediaPipe Image Embedder, é possível converter dados de imagem em uma representação numérica para realizar tarefas de processamento de ML relacionadas ao ML, como comparar a semelhança de duas imagens. Nestas instruções, mostramos como usar o incorporador de imagens para apps da Web e do Node.
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 Image Embedder mostra 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 incorporação de imagens. É possível ver, executar e editar o exemplo de código do Image Embedder usando apenas o 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 Image Embedder. Para informações gerais sobre a configuração do ambiente de desenvolvimento para uso de tarefas do MediaPipe, incluindo requisitos de versão da plataforma, consulte o Guia de configuração para Web.
Pacotes JavaScript
O código do incorporador de imagens está disponível no pacote @mediapipe/tasks-vision
NPM do MediaPipe. É possível
encontrar essas bibliotecas e fazer o download delas nos links fornecidos no
Guia de configuração da plataforma.
É 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 um serviço da rede de fornecimento de conteúdo (CDN), adicione o seguinte código na tag no 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 requer um modelo treinado compatível com ela. Para mais informações sobre os modelos treinados disponíveis para o incorporador de imagens, consulte a seção Modelos de visão geral da tarefa.
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, use o
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 do incorporador de imagens do MediaPipe usa a função createFromOptions para configurá-la. A função createFromOptions aceita valores para opções de configuração. Para mais informações sobre
as opções de configuração, consulte Opções de configuração.
O código abaixo demonstra como criar e configurar a tarefa com opções personalizadas:
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. 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 |
l2Normalize |
Define se o vetor de atributo retornado será normalizado com a norma L2. Use essa opção somente se o modelo ainda não tiver uma operação nativa do TFLite L2_NORMALIZATION. Na maioria dos casos, esse já é o caso, e a normalização L2 é, portanto, feita por meio da inferência TFLite sem precisar dessa opção. | Boolean |
False |
quantize |
Define se o embedding retornado precisa ser quantizado em bytes por meio da quantização escalar. Os embeddings são implicitamente considerados padrão de unidade e, portanto, qualquer dimensão tem um valor em [-1.0, 1.0]. Use 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 do host. A tarefa também lida com o pré-processamento da 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 bloqueiam a linha de execução da interface do usuário. Se você quiser extrair
vetores de recursos de frames de vídeo, cada embedding vai bloquear a linha de execução principal.
Você pode evitar isso implementando web workers para executar os métodos embed() e embedForVideo() em outra linha de execução.
Executar a tarefa
O incorporador de imagens usa os métodos embed() (com modo de execução image) e embedForVideo() (com modo de execução video) para acionar inferências. A API Image Embedder retorna os vetores de embedding para a imagem de entrada.
O código a seguir demonstra como executar o processamento com o modelo de tarefa:
Imagem
const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);
Video
const video = document.getElementById("webcam");
const startTimeMs = performance.now();
const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);
Gerenciar e mostrar resultados
Ao executar a inferência, a tarefa do incorporador de imagens retorna um objeto ImageEmbedderResult que contém os vetores de embedding para a imagem ou o frame de entrada.
Veja a seguir um exemplo dos dados de saída dessa 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
Este resultado foi obtido com a incorporação da seguinte imagem:
É possível comparar a semelhança semântica de dois embeddings usando a função ImageEmbedder.cosineSimilarity. Confira um exemplo no código a seguir.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
O código de exemplo do incorporador de imagens mostra como exibir os resultados do incorporador retornados da tarefa. Consulte o exemplo de código para mais detalhes.