reference: medium - Filtering Image content with Google’s Cloud Vision API for iOS

还记得昨天提到的Google ML Kit是可以直接在行动装置上使用吗？

那如果我是想要透过API方式整合现有的应用程序呢？

我一样可以使用脸部侦测吗？

这就是今天这篇文章的主题啦！

本文开始

注1：以下的环境准备是针对第一次建立专案，之後使用就不会这麽麻烦了

注2：这个工具设定过程会需要绑定信用卡，如果是按照这个系列文操作是不会收费的，
但若对绑信用卡有疑虑或是觉得自己会被Google收取费用 (收费规则是每月用量超过1000单位)，
请自行跳过文章。

Google Cloud Vision API是由Google所开发的视觉处理套件，可以轻松的与应用程序透过API整合。

当然，前置环境准备还是需要的：

1. 准备一个Google帐号

2. 登入Google Cloud Platform

3. 建立专案，这里使用的名称为Face Detection on iThome，你可以：

   • 点选这里开启新增专案连结
   • 从Google Cloud Platform的左侧选单选择「首页」->「资讯主页」，点选画面右侧的「建立专案」

   

4. 建立完成後，你会看到专案的管理资源页面
   

5. 在上方「搜寻产品和资源」的输入框中填入Cloud Vision API，选择第一个结果
   

6. 在Cloud Vision API页面，点选「启用」
   

7. 选择刚刚建立的Face Detection on iThome专案，点选「开启」
   

8. 启用後，会进入API和服务 - Cloud Vision API页面，我们需要建立凭证才可以给应用程序使用API。这里使用的是服务帐户 (Service Account)的验证方式 (有兴趣看其他验证机制的可以看这篇Google文件，这里就不详加阐述)

   • 开启一个新的分页，进入服务帐户页面
   • 在服务帐务页面中，点选刚才新建的专案Face Detection on iThome
     
   • 在「Face Detection on iThome」专案的服务帐户页面中，点选上方「建立服务帐户」
     
   • 在建立服务帐户页面中的第一步，填入
     • 「服务帐户名称」：face_detection_on_ithome
     • 「服务帐户说明」：service account for face detection on iThome
   • 输入完後，点选「建立并继续」
     
   • 在第二步中，「角色」一栏选择：基本 -> 拥有者。让服务帐户直接为专案拥有者 (也就可以使用Cloud Vision API)
     
   • 点选「继续」到第三步，这个步骤可以跳过
   • 点选「完成」建立服务帐户
   • 建立後，会回到服务帐户页面，点选刚才新建的服务帐户face_detection_on_ithome@......
     
   • 进入到服务帐户详细资料页面，依序点选「金钥」->「新增金钥」->「建立新的金钥」
     
     
   • 在跳出视窗中，选择「JSON」格式，点选「建立」後会自动产生金钥并且下载至你的电脑里
     
   • 非常重要 非常重要 非常重要 请妥善保存并记得这个金钥档案的路径 (副档名为.json)，後面会需要用到它

9. 回到步骤7之前开启的API和服务 - Cloud Vision API页面，点选左上角的导览选单 (就是有三条横线的icon)-> 「帐单」
   

10. 在帐单页面中，会出现"这项专案没有帐单帐户"，点选「连结帐单帐户」-> 「建立帐单帐户」
    
    

11. 在跳出的帐户资讯与付款资讯画面填入相关资讯，设定无误完成後会回到帐单页面
    
    
    
    

12. Google Cloud上的环境准备到这边就完成了，接着让我们写Code吧！

开发脸部侦测应用 - 桌面版 (透过 Google Colab)

既然要用Google ML Kit，当然就要用Google Colab来测试 (完全免费，不用担心)。

开启新分页，连线到Google Colab，点选「新增笔记本」

几个简单的快捷键操作记一下：

CTRL + Enter: 执行目前的程序码储存格 (或按储存格左方的▶图示)
SHIFT + Enter: 执行目前的程序码储存格，并且新增一个程序码储存格
CTRL + M B: 在目前鼠标停留处下方插入一个程序码储存格 (或按上方的+程序码按钮)

程序码部分，相关说明在注解中 (下面每一个区块都是一个程序码储存格，请依序执行)：

# 安装Google Cloud Vision API for python
!pip install google-cloud-vision

from google.colab import files
import json
# 上传档案 (请在下方「选择档案」点选後，上传在前面建立的服务帐号金钥) (JSON档案)
uploaded = files.upload()

try:
  json.loads(open(next(iter(uploaded.keys()))).read())
except ValueError as e:
  print('invalid json: %s' % e)
  raise Exception('请选择JSON格式的金钥档案！')

import os
# 设定Google API凭证环境变数
os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = next(iter(uploaded.keys()))

# 汇入使用到的libraries
import io
import cv2
from google.cloud import vision
from PIL import Image

# 定义侦测脸部函数 (使用Google Cloud Vision API)
def detect_face_and_draw(face_file):
  with io.open(face_file, 'rb') as image_file:
    client = vision.ImageAnnotatorClient()
    content = image_file.read()
    image = vision.Image(content=content)
    face = client.face_detection(image=image, max_results=1).face_annotations[0]

  box = [(int(vertex.x), int(vertex.y)) for vertex in face.bounding_poly.vertices]
  img = cv2.imread(face_file)
  img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
  cv2.rectangle(img, box[0], box[2], (0, 255, 0), 2)
  cv2.putText(img, str(format(face.detection_confidence, '.3f')), (box[0][0], box[0][1] - 10), cv2.FONT_HERSHEY_COMPLEX, 0.6, (255, 0, 0))
  image = Image.fromarray(img)
  display(image)

# 定义撷取当前web camera的影像函数
from IPython.display import display, Javascript
from google.colab.output import eval_js
from base64 import b64decode

def take_photo(filename='photo.jpg', quality=0.8):
  js = Javascript('''
    async function takePhoto(quality) {
      const div = document.createElement('div');
      const capture = document.createElement('button');
      capture.textContent = '撷取图片';
      div.appendChild(capture);

      const video = document.createElement('video');
      video.style.display = 'block';
      const stream = await navigator.mediaDevices.getUserMedia({video: true});

      document.body.appendChild(div);
      div.appendChild(video);
      video.srcObject = stream;
      await video.play();

      // Resize the output to fit the video element.
      google.colab.output.setIframeHeight(document.documentElement.scrollHeight, true);

      // Wait for Capture to be clicked.
      await new Promise((resolve) => capture.onclick = resolve);

      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0);
      stream.getVideoTracks()[0].stop();
      div.remove();
      return canvas.toDataURL('image/jpeg', quality);
    }
    ''')
  display(js)
  data = eval_js('takePhoto({})'.format(quality))
  binary = b64decode(data.split(',')[1])
  with open(filename, 'wb') as f:
    f.write(binary)
  return filename

# 侦测图片中的人脸 (请按下方的"撷取图片"按钮撷取影像)
try:
  filename = take_photo()
  detect_face_and_draw(filename)
  
except Exception as err:
  print(str(err))

最後结果：

会在图片中用红色字体标注此人脸侦测的准确率，以及用绿色框框标注人脸位置

可以看到Google Vision API可以侦测出戴口罩且不是正面的人脸，

这个在後续其他方法实作人脸侦测时可以比较看看结果。

Google Colab参考档案在这

下一篇我们将回到行动装置的脸部侦测Google ML Kit！