集成Clarifai人脸检测API后无法识别人脸的问题求助

一、CSS样式不显示的直接原因 #

你的FaceRecognition.css中类选择器写法错误：
原代码：

bounding-box {
    position: absolute;
    box-shadow: 0 0 0 3px #149df2 inset;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    cursor: pointer;
}

CSS类选择器必须以.开头，修改为：

.bounding-box {
    position: absolute;
    box-shadow: 0 0 0 3px #149df2 inset;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    cursor: pointer;
}

修改后控制台就能正常识别并应用该样式。

二、人脸检测不生效的核心问题 #

1. 图片加载时机与DOM读取不同步 #

onButtonSubmit中先设置imageUrl，随即调用Clarifai API并计算人脸位置，但此时图片可能还未完成加载，document.getElementById('inputimage')获取到的宽高可能为0或不准确，导致计算出的Bounding Box位置错误甚至无法渲染。

修复方案：等待图片加载完成后再计算位置，修改App.js中的onButtonSubmit方法：

onButtonSubmit = () => {
  const inputUrl = this.state.input;
  this.setState({imageUrl: inputUrl});
  
  app.models.predict(Clarifai.FACE_DETECT_MODEL, inputUrl)
    .then(response => {
      // 先判断是否检测到人脸，避免无数据时报错
      if (!response.outputs[0].data.regions || response.outputs[0].data.regions.length === 0) {
        console.log('未检测到人脸');
        this.setState({box: {}});
        return;
      }
      // 获取图片元素
      const image = document.getElementById('inputimage');
      // 图片已加载完成则直接计算，否则监听加载事件
      if (image.complete) {
        this.displayFaceBox(this.calculateFaceLocation(response, image));
      } else {
        image.onload = () => {
          this.displayFaceBox(this.calculateFaceLocation(response, image));
        };
      }
    })
    .catch(err => console.log(err));
}

同时修改calculateFaceLocation，直接传入图片元素避免重复DOM查询：

calculateFaceLocation = (data, image) => {
  const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
  const width = Number(image.width);
  const height = Number(image.height);
  return {
    leftCol: clarifaiFace.left_col * width,
    topRow: clarifaiFace.top_row * height,
    rightCol: width - (clarifaiFace.right_col * width),
    bottomRow: height - (clarifaiFace.bottom_row * height)
  }
}

2. Clarifai模型兼容性问题 #

部分版本的Clarifai SDK中，Clarifai.FACE_DETECT_MODEL常量可能失效，可直接替换为官方人脸检测模型的ID：

app.models.predict('aaa03c23b3724a16a56b629203edc62c', inputUrl)

内容的提问来源于stack exchange，提问作者Arye