Guia de estilização de rostos para a Web

A tarefa MediaPipe Face Stylizer permite aplicar estilizações de rostos a rostos em uma imagem. Use essa tarefa para criar avatares virtuais em vários estilos.

O exemplo de código descrito nestas instruções está disponível em GitHub. 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 do Estilizador de rostos fornece uma implementação completa desse em JavaScript para sua referência. Esse código ajuda a testar a tarefa a criar seu próprio app de estilização facial. Você pode exibir, executar e editar o exemplo de Estilizador de rostos código usando apenas seu código da navegador.

Configuração

Esta seção descreve as principais etapas para configurar seu ambiente de desenvolvimento especificamente para usar o Estilizador de rosto. Para informações gerais sobre como configurar sua ambiente de desenvolvimento da Web e JavaScript, incluindo a versão da plataforma consulte o Guia de configuração para a Web.

Pacotes JavaScript

O código do Estilizador de rostos está disponível no MediaPipe @mediapipe/tasks-vision NPM (em inglês). Você pode encontrar faça o download dessas bibliotecas seguindo as instruções no artigo de Configuração guia.

Instale os pacotes necessários pelo NPM usando o seguinte comando:

npm install @mediapipe/tasks-vision

Se você quiser importar o código da tarefa com uma rede de fornecimento de conteúdo (CDN) adicione o seguinte código no cabeçalho <head> no seu arquivo HTML:

<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modelo

A tarefa MediaPipe Face Stylizer exige um modelo treinado que seja compatível com esse tarefa. Para mais informações sobre os modelos treinados disponíveis para o Estilizador de rostos, 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

Use uma das funções createFrom...() do Estilizador de rostos para preparar a tarefa. e executar inferências. Use a função createFromModelPath() com um objeto relacionado caminho absoluto para o arquivo do modelo treinado. Se o modelo já tiver sido carregado na memória, use o método createFromModelBuffer().

O exemplo de código abaixo demonstra o uso da função createFromOptions() para para configurar a tarefa. A função createFromOptions permite personalizar Estilizador de rostos com 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 facestylizer = await FaceStylizer.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
      },
    });

Preparar dados

O Estilizador de rostos pode estilizar rostos em imagens em qualquer formato compatível com o host navegador. A tarefa também lida com o pré-processamento de entrada de dados, incluindo redimensionamento, rotação e normalização de valores.

Executar a tarefa

O Estilizador de rostos usa o método stylize() para acionar inferências. A tarefa processa os dados, tenta estilizar os rostos e relata os resultados. As chamadas para o método stylize() do Estilizador de rostos são executadas de forma síncrona e bloqueiam a thread da interface do usuário.

O código a seguir demonstra como executar o processamento com o modelo de tarefas:

const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);

Gerenciar e exibir resultados

O Estilizador de rostos retorna um objeto MPImage com uma estilização da maior um rosto proeminente na imagem de entrada.

Confira abaixo um exemplo dos dados de saída desta tarefa:

O resultado acima foi criado com a aplicação do modelo Color sketch para a seguinte imagem de entrada: