A tarefa do estilizador de rostos do MediaPipe permite aplicar estilizações a rostos em uma imagem. Você pode usar 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 desta tarefa, consulte a Visão geral.
Exemplo de código
O código de exemplo do Face Stylizer oferece uma implementação completa dessa tarefa em JavaScript para sua referência. Esse código ajuda a testar essa tarefa e começar a criar seu próprio app de estilização de rosto. Você pode conferir, executar e editar o exemplo de código do Face Stylizer usando apenas seu navegador da Web.
Configuração
Esta seção descreve as principais etapas para configurar seu ambiente de desenvolvimento específicamente para usar o Face Stylizer. Para informações gerais sobre a configuração do ambiente de desenvolvimento da Web e do JavaScript, incluindo os requisitos de versão da plataforma, consulte o Guia de configuração para Web.
Pacotes JavaScript
O código do Face Stylizer está disponível no pacote @mediapipe/tasks-vision
NPM do MediaPipe. Para encontrar e
fazer o download dessas bibliotecas, siga as instruções no guia de
configuração da plataforma.
Você pode 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 uma rede de fornecimento de conteúdo (CDN), adicione o código abaixo à tag <head> no 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 MediaPipe Face Stylizer requer um modelo treinado compatível com essa tarefa. Para mais informações sobre os modelos treinados disponíveis para o Face Stylizer, consulte a seção Modelos da 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 Face Stylizer 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
Face Stylizer 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 Face Stylizer pode estilizar rostos em imagens em qualquer formato compatível com o navegador host. A tarefa também processa a entrada de dados, incluindo redimensionamento, rotação e normalização de valores.
Executar a tarefa
O Face Stylizer usa o método stylize() para acionar inferências. A tarefa
processa os dados, tenta estilizar rostos e informa os resultados.
As chamadas para o método stylize() do Face Stylizer são executadas de forma síncrona e bloqueiam a
linha de execução da interface do usuário.
O código abaixo demonstra como executar o processamento com o modelo de tarefa:
const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);
Processar e mostrar resultados
O Face Stylizer retorna um objeto MPImage com uma estilização do rosto mais
proeminente na imagem de entrada.
Confira a seguir um exemplo dos dados de saída desta tarefa:
A saída acima foi criada aplicando o modelo Color sketch à seguinte imagem de entrada:
