cover

你知道怡君跟雅婷哪個名字比較「年輕」嗎?前陣子火紅的年齡計算器 how-old.net 其實是微軟 Oxford 計劃中的一部份,而且有開放 Face API 給大家使用!就算圖形辨識與機器學習對我們來說太艱深,但透過 API 我們仍然可以站在巨人肩膀上,就讓我們一起來看看如何搭配 Google Image Search 與 Face API 將「菜市場名」做個有趣的視覺化吧!

想要算「菜市場名」的年紀,我們先假設以姓名做 Google 圖片搜尋得到的照片有足夠的代表性,接著只要將這些姓名的年紀算出來再平均就可以了。因此,我們這次要做的視覺化原理相當簡單:

  1. 前端程式透過 crossorigin.me 取得 Google Image Search 結果
  2. 使用 Microsoft Project Oxford Face API 算出前 20 名照片的年齡
  3. 利用 D3.js 呈現年齡的分布與平均值

然而,裡面牽涉到不少細節,所以我們主要將著重在解說如何使用 Face API ,但仍會將作品原始碼釋出供大家參考。

Face API 簡介

Project Oxford 的臉部辨識 API 是一個網路服務 API ,我們提供照片檔或是網址,這個 API 以 JSON 格式告訴我們照片中人物的性別、年紀等資訊。這個網址位於 https://api.projectoxford.ai/face/v0/detections ,但我們直接連接他是沒有用的,我們必須透過 HTTP Post 動作提供照片資訊給它才行。

在那之前,要注意這組 API 限制了存取的量與頻率;一分鐘內不能超過 20 次,而一個月的上限則是 5000 次。對程式化的專案捱說其實蠻少的,但做為教學用途我想也足夠了。

這組 API 為了限制存取量,在使用時要求用戶提供一個訂用碼,我們可以透過微軟 Azure 帳戶取得,但微軟的網站設計得實在是不甚友善,他的設計引導人到需要 13 個步驟才能取得;我在這邊一步一步示範給大家看照著網站指引會如何取得 Face API 的訂用碼。 (你也可以直接申請 Microsoft Azure 帳號 ( 步驟 5 開始 ),如果已有 Azure 帳號與訂用帳戶也可以直接跳到步驟 7 )

取得Face API 訂用碼

步驟 1 / 連上 這個網站 他會告訴你要註冊帳號 ( 右方的綠色 SIGN UP 按鈕 )

step-01

步驟 2 / 填寫好煩的註冊資訊

step-02

步驟 3 / 收信認證電子郵件的所有權

step-03 step-03-2

步驟 4 / 那就登入吧,回到剛剛的這個網站,再點一次 SIGN UP。出現悲劇性搞不懂的畫面:

step-04

步驟 5 / 點選註冊 Windows Azure ,再次填寫註冊表單,只是這次還要填信用卡跟做手機認證,夠煩了吧

step-05

步驟 6 / 聽說只要一分鐘,所以我去喝了個咖啡。完成後,點擊出現的「開始管理我的服務」按鈕

step-06

步驟 7 / 進入服務管理頁面後,先找到 Marketplace ,點選「購買應用程式與服務」,找到 Face API ,點選後接著按網頁右下角的「→」符號。別擔心,我不是詐騙集團,這個 API ( 目前還 ) 是免費的:

step-07

步驟 8 / 確認 Free 方案有選取,再次點擊右下角的「→」圖示:

step-08

步驟 9 / 點選購買,再次聲明小編不是詐騙集團,這個 API ( 至少目前 ) 是免費的,別擔心被扣款:

step-09

步驟 10 / 回到 Marketplace 畫面,我們所「購買」的 Face API 正在建立,要花一點時間,再去泡個咖啡吧:

step-10

步驟 11 / 若你很不幸的跟小編一樣「佈建失敗」,那就必須刪除 ( 點擊 FaceAPI 後位於網頁最下方有刪除鈕 ) 後回到步驟 7 重來:

step-11

步驟 12 / 佈建成功,點選左方的「FaceAPIs」進入,然後點擊螢幕下方的「管理」按鈕

step-12

步驟 13 / 畫面會出現打馬賽克的 Primary Key ,點擊右方的「Show」即可取得使用 API 必須的 Subscription Key。

step-13

步驟 12 與步驟 13 小編在操作時忘了截圖,想要再次操作來截圖時,花了半個小時才找到方法回到剛剛的管理畫面;就算這 13 個步驟轉換率都有 50% ,乘起來最終轉換率大概也只有 0.00152% ,更何況是想要再次登入都有困難,若是新創公司做一個這樣的網站想賺錢,大概很快就倒了。這樣的產品對使用者太不友善,我覺得微軟真的要加加油,不然要翻身真的會很難。

使用 Face API

Face API 使用並不複雜,可以透過 AJAX POST 要求做到。 Face API 提供一些參數讓我們設定要不要做特定的分析:

  • analyzesFaceLandmark: 分析五官位置
  • analyzesAge: 計算年齡
  • analyzesGender: 分析性別
  • analyzesHeadPose: 計算頭部姿勢

這幾個參數都是布林值,以 GET 參數的方式傳遞,我們可以將他們寫成一個 hash,然後用 jQuery 的 params 函式來轉換:

  params = $.param({
    analyzesFaceLandmark: false, // 不算五官位置
    analyzesAge: true,           // 要算年齡
    analyzesGender: true,        // 要算性別
    analyzesHeadPose: false      // 不算頭部姿勢
  });

若將上例參數傳給 Face API ,則我們只會得到性別跟年齡的計算結果。

除了參數我們還需要傳送照片, Face API 接受直接傳送照片檔、或是以網址的方式來傳送照片;為求簡單,我們只示範用網址傳照片的方式。

我們試著利用 jQuery 的 AJAX 函式取得下面這張圖的資訊:

cc0-portrait

圖片網址為 http://i.imgur.com/ted82gO.jpg ,將網址包在 Request Body 中,程式碼大致上如下,照抄即可:

  var ajaxcall = $.ajax({
    url: 'https://api.projectoxford.ai/face/v0/detections?' + params, // 使用剛剛產生的 params 變數
    type: 'post',
    contentType: "application/json; charset=utf-8",
    traditional: true,
    data: JSON.stringify({ url: "http://i.imgur.com/ted82gO.jpg" }) // 圖片網址
  });

因為照片中可能會有好幾個人,所以回傳值是一個陣列。我們可以從取得的計算結果中取得年紀跟性別的資訊:

  ajaxcall.done(function(data) {
    console.log(data[0].attributes.age);    // 年紀 - 只取第一個人的資料
    console.log(data[0].attributes.gender); // 性別 - 只取第一個人的資料
  });

就上圖為例,取得的結果是 46 歲的男性。不太準喔!

圖片搜尋

因為我們想要把年齡判讀與姓名搜尋串接在一起,我們利用 crossorigin.me 與 Google Image Search 。 crossorigin.me 的概念跟用法在先前的文章「誰說前端爬不了資料?使用 crossorigin.me」有談到,沒概念的朋友可以去看看,簡單的說就是讓你可以純前端跨網域的讀取資料:

  var query = "婉君";
  var baseUrl = "http://crossorigin.me/https://www.google.com.tw/search" +
                "?hl=zh-TW&site=imghp&tbm=isch&q=";  // 使用 crossorigin.me
  var googleAjax = $.ajax({
    url:  baseUrl+query+'&oq='+query, // query 即為實際上搜尋的字詞
    method: "get"
  }).done(data) {
    var imgs = $(data).find(".images_table img");
  });

上例將搜尋結果得到的所有圖片存在 imgs 變數中,因此我們只要修改 query 變數就可以取到不同的圖片資訊了。中間產生內容的部份細節我們略過,直接來看看 Google 圖片搜尋「婉君」前幾張的年齡吧:

婉君的平均年齡婉君的平均年齡是  13.1 歲,是個小妹妹! ( N/A 者代表程式無法找到臉,我們會略過不計 )

菜市場名年齡大比拼

參考「歷屆大學考試分發入學榜單查詢服務」的菜市場名統計,我們利用 99 學年度的最常見女性名字來計算平均年齡,他們分別是:「雅婷」、「怡君」、「雅涵」、「佳穎」與「雅雯」。

逐一取得年齡資料後,我們用橫軸做為年齡,縱軸則按姓名分,將圈圈畫到圖表上;圈圈的大小則代表該年齡 / 姓名的人數,結果如下圖:

Face API Age Chart for Common Names

可以看出平均年齡而言雅婷最年輕,佳穎最老了,而怡君、佳穎整體來說都是較老的名字,雅涵則是各個年紀都有人使用。

由於 Face API 使用頻率限制以及 Google Image Search 圖片解析度較低導致的辨識力限制,這裡很粗糙的只將前 20 筆有獲得結果的數據拿來使用,因此有不同姓名的數據量不同的狀況。更嚴謹的做法是取更多的資料來做運算,而且由於年齡辨識準確度的問題,這樣的結果僅供參考,不過就 API 運用示意來說,我想這樣就足夠了。


結語

我們利用 Microsoft Face API 、 Google Image Search 、 Crossorigin.me 配合 D3.js 做出了個姓名與年齡的視覺化,是不是覺得很有趣呢?這樣的 API 一定還有更多的運用空間,比方說我們製作的另一個例子「關鍵字上色 – 使用 Google 圖片搜尋」利用 ColorThief 、 Google 圖片搜尋與 Crossorigin.me 快速分析出我們所輸入的關鍵字顏色,也相當有意思。大家可以想想看還有沒有什麼有趣的應用,參考這篇之後不妨自己也來做一個吧!

( portrait photo credit: pixabay (cc0) & splitshire (free use without attribution). found on zerospace.asika.tw. thanks! )


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *