网页版人脸风格化指南

借助 MediaPipe Face Stylizer 任务，你可以对图片中的人脸应用人脸风格化。您可以使用此任务创建各种样式的虚拟头像。

您可在 GitHub 如需详细了解功能、模型和配置选项部分，请参阅概览。

代码示例

Face Stylizer 的示例代码提供了上述示例的完整实现，供您参考。此代码可帮助您测试此任务开始构建您自己的人脸风格化应用。您可以查看、运行修改“人脸风格设置”示例使用 Web 服务器代码。

设置

本部分介绍设置开发环境的关键步骤专门用于使用人脸风格化工具有关如何设置 Web 和 JavaScript 开发环境，包括平台版本要求，请参阅网页版设置指南。

JavaScript 软件包

人脸风格化程序代码可通过 MediaPipe @mediapipe/tasks-vision 获取 NPM 软件包。您可以请按照平台设置指南。

您可以使用以下命令通过 NPM 安装所需的软件包：

npm install @mediapipe/tasks-vision

如果您要使用内容分发网络 (CDN) 导入任务代码服务，请将以下代码添加到 <head>标记之间：

<!-- 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>

型号

MediaPipe Face Stylizer 任务需要一个与此训练兼容的模型，任务。如需详细了解适用于 Face Stylizer 且经过训练的模型，请参阅任务概览的“模型”部分。

选择并下载模型，然后将其存储在项目目录中：

<dev-project-root>/app/shared/models/

创建任务

使用其中一个 Face Stylizer createFrom...() 函数为运行推理。将 createFromModelPath() 函数与相对函数或经过训练的模型文件的绝对路径。如果您的模型已经加载到您可以使用 createFromModelBuffer() 方法。

以下代码示例演示了如何使用 createFromOptions() 函数来设置任务。借助 createFromOptions 函数，您可以自定义具有配置选项的 Face Stylizer。

以下代码演示了如何使用自定义的选项：

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"
      },
    });

准备数据

人脸风格化工具能够以主机支持的任何格式对图片中的人脸进行风格化处理。该任务还会处理数据输入预处理，包括调整大小、旋转和值归一化。

运行任务

Face Stylizer 使用 stylize() 方法来触发推理。任务处理数据、尝试对人脸进行风格化处理，然后报告结果。对 Face Stylizer stylize() 方法的调用会同步运行，并阻止用户界面线程。

以下代码演示了如何使用任务模型执行处理：

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

处理和显示结果

人脸风格化程序会返回一个风格化程度最高的 MPImage 对象，输入图片中突出显示的人脸。

以下示例展示了此任务的输出数据：

以上输出是通过应用颜色草图创建的映射到以下输入图片：