Com a tarefa do Estilizador de rostos do MediaPipe, é possível aplicar estilizações de rostos aos 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 no GitHub. 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 estilizador de rostos fornece 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 estilização de rostos. É possível conferir, executar e editar o exemplo de código do Estilizador de rostos usando apenas o navegador da Web.
Configuração
Esta seção descreve as principais etapas para configurar seu ambiente de desenvolvimento especificamente para usar o estilizador facial. Para informações gerais sobre a configuração do ambiente de desenvolvimento Web e JavaScript, incluindo requisitos de versão da plataforma, consulte o Guia de configuração para Web.
Pacotes JavaScript
O código do estilizador facial está disponível no pacote @mediapipe/tasks-vision
NPM do MediaPipe. Você pode encontrar e
fazer o download dessas bibliotecas seguindo as instruções no Guia de
configuração da plataforma.
É possível instalar 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 um serviço da rede de fornecimento de conteúdo (CDN), adicione o seguinte código na tag <head> ao 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 do Estilizador de rostos do MediaPipe requer um modelo treinado compatível com essa tarefa. Para mais informações sobre os modelos treinados disponíveis para o estilizador de rostos, 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
Use uma das funções createFrom...() do estilizador de rostos para preparar a tarefa para
executar inferências. Use a função createFromModelPath() com um caminho relativo ou absoluto para o arquivo de modelo treinado. Se o modelo já estiver carregado na
memória, use o método createFromModelBuffer().
O exemplo de código abaixo demonstra o uso da função createFromOptions() para configurar a tarefa. A função createFromOptions permite personalizar o
estilizador de rostos com 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 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 com suporte no navegador host. 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 rostos e, em seguida, informa os resultados.
As chamadas para o método stylize() do estilizador de rostos são executadas de forma síncrona e bloqueiam a
linha de execução da interface do usuário.
O código a seguir demonstra como executar o processamento com o modelo de tarefa:
const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);
Gerenciar e mostrar resultados
O estilizador de rostos retorna um objeto MPImage com uma estilização do rosto mais
em destaque na imagem de entrada.
Veja a seguir um exemplo dos dados de saída dessa tarefa:
O resultado acima foi criado aplicando o modelo Desenho de cor à seguinte imagem de entrada:
