Guia de incorporação de imagens para Web

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.