网页版人脸风格化指南

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

这些说明中介绍的代码示例可在 GitHub 上找到。如需详细了解此任务的功能、模型和配置选项,请参阅概览

代码示例

Face Stylizer 的示例代码提供了此任务的完整 JavaScript 实现,供您参考。此代码可帮助您测试此任务,并开始构建自己的人脸风格化应用。您只需使用 Web 浏览器即可查看、运行和修改 Face Stylizer 示例代码

设置

本部分介绍了专门用于设置开发环境以使用 Face Stylizer 的关键步骤。如需了解有关设置 Web 和 JavaScript 开发环境的一般信息(包括平台版本要求),请参阅 Web 版设置指南

JavaScript 软件包

您可以通过 MediaPipe @mediapipe/tasks-vision NPM 软件包获取 Face Stylizer 代码。您可以按照平台设置指南中的说明查找和下载这些库。

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

npm install @mediapipe/tasks-vision

如果您想使用内容分发网络 (CDN) 服务导入任务代码,请在 HTML 文件的 <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 函数,您可以使用配置选项来自定义美颜工具。

以下代码演示了如何使用自定义选项构建和配置任务:

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

准备数据

人脸美化工具可以使用托管浏览器支持的任何格式为图片中的人脸添加美化效果。该任务还会处理数据输入预处理,包括调整大小、旋转和值归一化。

运行任务

人脸美化工具使用 stylize() 方法触发推理。该任务会处理数据,尝试对面部进行风格化处理,然后报告结果。对 Face Stylizer stylize() 方法的调用会同步运行并阻塞界面线程。

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

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

处理和显示结果

人脸美化工具会返回一个 MPImage 对象,其中包含输入图片中最显眼的人脸的美化效果。

以下是此任务的输出数据示例:

系统生成的一位女士特写,采用铅笔和马克笔素描风格绘制。

上述输出是通过将色彩素描模型应用于以下输入图片而创建的:

用于生成上一个输出的女性照片