# Nuxt 4 + MediaPipe：如何在浏览器中实现本地 AI 人脸分析？

做图片分析工具时，一个常见的架构是：用户上传图片，服务器调用 AI 模型，再将结果返回浏览器。

但如果只是检测人脸关键点、计算面部比例，有没有必要把用户照片发送到服务器？

其实没有。MediaPipe Face Landmarker 可以直接在浏览器里运行，让图片分析完全在客户端完成。

下面分享一种适用于 Nuxt 4 的实现思路。

一、为什么选择浏览器本地推理？

对于人脸照片这类个人数据，本地推理有几个明显优势：

隐私： 无需把照片上传到应用服务器。
成本： 不需要为每次图片分析支付服务器推理费用。
体验： 模型加载完成后，可以直接处理本地图片。
部署： 静态页面与客户端模型可以分开管理。

但需要注意，本地推理不等于绝对安全。第三方脚本、日志和持久化存储仍然需要检查。

二、安装 MediaPipe

MediaPipe 提供了 @mediapipe/tasks-vision，可以直接用于浏览器端的计算机视觉任务。

bash 复制代码

npm install @mediapipe/tasks-vision

同时需要准备 Face Landmarker 的模型文件，以及对应版本的 WASM 资源。

本例假设资源放在：

arduino 复制代码

public/
  models/
    face_landmarker.task
  wasm/
    ...

WASM 文件需要从当前安装版本的 MediaPipe 包中复制，不是创建一个空目录就能运行。

三、避免 Nuxt SSR 环境报错

Nuxt 4 支持服务端渲染，但人脸分析依赖浏览器环境。

为了避免在 SSR 阶段初始化模型，可以在用户选择照片后，再动态加载 MediaPipe。

以下是一个简化的客户端调用示例：

typescript 复制代码

let detectorPromise: Promise<any> | null = null;

async function getDetector() {
  if (!detectorPromise) {
    detectorPromise = (async () => {
      const {
        FilesetResolver,
        FaceLandmarker
      } = await import("@mediapipe/tasks-vision");

      const vision =
        await FilesetResolver.forVisionTasks("/wasm");

      return FaceLandmarker.createFromOptions(vision, {
        baseOptions: {
          modelAssetPath: "/models/face_landmarker.task"
        },
        runningMode: "IMAGE",
        numFaces: 1
      });
    })().catch((error) => {
      detectorPromise = null;
      throw error;
    });
  }

  return detectorPromise;
}

这里有两个关键点。

第一，只有执行 getDetector() 时才会加载模型。不要在 SSR 阶段调用它。

第二，通过共享 Promise 避免重复初始化模型，同时在初始化失败后允许重试。

实际项目还可以根据设备兼容性选择 CPU 或 GPU 推理，并处理模型下载失败等情况。

四、读取用户照片并进行检测

用户选择图片后，可以使用 createImageBitmap 解码，再交给 Face Landmarker 处理。

javascript 复制代码

async function analyzeImage(file: File) {
  const detector = await getDetector();
  const bitmap = await createImageBitmap(file);

  try {
    const result = detector.detect(bitmap);

    if (!result.faceLandmarks.length) {
      throw new Error("No face detected");
    }

    return result.faceLandmarks[0];
  } finally {
    bitmap.close();
  }
}

这里的 detect() 适用于静态图片。它是同步推理调用，在低性能设备上可能阻塞主线程。

对于连续视频分析，还需要使用对应的视频运行模式和时间戳。

另外，实际项目应当验证文件类型、图片尺寸、文件大小以及人脸数量。

五、如何利用关键点计算面部比例？

Face Landmarker 返回的关键点包含归一化坐标。

开发者可以利用这些坐标分析：

左右对称性
眼睛之间的距离
面部不同区域的比例
下颌与面部轮廓关系

但这里有个容易出错的细节：归一化的 x、y 坐标分别以图片宽度和高度为基准。

计算二维距离时，应当先将它们转换到一致的坐标单位。

此外，即使坐标计算完全正确，相机透视、头部旋转和表情仍然可能影响测量结果。

六、真实应用场景：PSL Rating AI

我正在开发一个基于浏览器本地分析的人脸几何测量工具：

PSL Rating AI --- Free Browser-Based Face Analysis

用户选择正面照片后，工具通过人脸关键点分析面部对称性、比例、眼部几何关系和下半脸结构。

分析在浏览器内完成，不需要把照片上传到应用服务器。

工具还提供一个实验性的 0--8 PSL 评分和相应的测量解释。

需要强调的是，PSL 是一种非正式的外貌评分框架，并不是经过科学验证的吸引力评价体系。工具仅面向 18 岁以上用户，供娱乐和探索使用。

这里介绍的是技术实现思路，并非线上项目的完整源代码。

七、上线前需要检查什么？

对于浏览器 AI 应用，我通常建议重点检查以下方面：

模型加载失败能否重新尝试？
用户上传无效照片时有没有明确反馈？
图片分析时是否存在不必要的网络请求？
旧设备上推理是否造成明显卡顿？
关闭页面后是否清理临时图片资源？
评分结果是否说明算法的局限性？

这些问题对实际用户体验的影响，可能比模型的初始化代码更大。

总结

Nuxt 4 与 MediaPipe Face Landmarker 可以组合实现浏览器端的人脸关键点检测。

这种方案不需要服务器执行图片推理，适合隐私敏感、计算量可控的在线工具。

不过，真正上线时仍然需要处理模型加载、性能优化、输入验证以及结果解释等问题。

参考资料：