なに？

Azure Custom Visionを使いたいと思ったので、まずは、簡単に試してみます。
まだプレビュー版と言われるような機能だったりして、いろいろな記事もちょっとずつ古くなっていたりするので 2018.4 版のチュートリアルになればと思います。

Azure Custom Vision って何？

画像を認識してくれる（サービスを作ることができる）サービスです。
例えば、「金さん」の写真を集めてこれが金さん、「銀さん」の写真を集めてこれが銀さん、と教えてあげることで、「さてこれは金さん銀さんどっちでしょう？」と判断することができるようになるサービスです。

詳しくは下記。

公式ページ
https://azure.microsoft.com/ja-jp/services/cognitive-services/custom-vision-service/

Qiitaの記事
https://qiita.com/oyngtmhr/items/885a4174412c02e93295
※この記事があれば、わたしの書くのは要らない気もしましたが…

さっそくやってみる

Azureにアカウントを作る

略（がんばって作りましょう！無料期間のうちにいろいろ遊びましょう）

Custom Vision を作る

Azure Portal の「＋リソースの作成」から作りますが、まだプレビューだからか普通には見つからないので、Search で探します。

検索のところに Custom Vision と入れると出てくるので作成をします。
遊ぶだけなのでプランなども Free（F0）を選択しておきましょう。

作成できたら「すべてのリソース」などで見てみると、2つ Cognitive Services というのが出来ているのがわかると思います。なぜ2つ？と思いますが、一つはトレーニング(学習)用で、一つは予測に使われるものみたいです。

さっそく学習させる

最初の例で言うところの、これは金さんだよ、これは銀さんだよ、というのを教える作業です。
「すべてのリソース」から、作成した Custom Vision を選んでください。 _Prediction とついていないものを選択してください。

Quick start → Custom Vision Portal を選択すると別タブが開きます。そのまま Sign in などなど進めてください。
New Project と出てくるので作成。適当な名前やドメインやリソースを指定してください。
（今回はテストなのであまり悩まず作っちゃいましょう、死にはしないし、お金も評価期間なら大丈夫です）

準備が整えばこんな画面がでているはずです。

Add images でどんどん画像を追加していきましょう。ちょうどゲゲゲの鬼太郎の6期がスタートしたのでわわたしは鬼太郎でやってみました。

ここはみなさん好きな画像でやってください。好きな画像でやることが一番の勉強になります。モチベーションも下がらないし。あ、でも、著作権とかそういうのは十分気にしてください。

Google画像検索で ゲゲゲの鬼太郎 1期 で検索して適当に画像を10枚ほどゲット。同じく ゲゲゲの鬼太郎 6期 で検索して10枚ほどゲットします。

Add imagesから画像をアップロードして My Tags に 鬼太郎 1期 とかいれておきます。

同じく 鬼太郎 6期 も作ります。

アップが完了しましたら、右上のTrainを押してください。これで画像とタグについての学習が行われます。

学習結果を確認する

今回以下のような結果がでてきました。

どう読めばいいかというと、

鬼太郎 1期について、
Precision(適合率) は 100% なので、「わたし(AI)が 1期だと判断する画像は 100% 1期でした。」
Recall(再現率) は 50% なので、「わたし(AI)が、1期だと判断できる画像はすべての画像のうちの 50& でした。」
つまり、的中率は高いけど、抜け漏れが多い、という、やればすごい、という感じの結果です。

鬼太郎 6期については、両方 80% くらいなので、
そこそこ的中するしそこそこ抜け漏れも少ない、という優等生的な感じです。

実際に試してみる

本当はAPIとかも作れるのですが、まずは簡単この画面からためしてみます。
右上の Quick Test といいうのを使います。押すとまた画面がでてくるので、画像のURLを指定するなりローカルのファイルを指定したりします。

今回もGoogle画像検索で適当な（さきほど学習に使ったのとは別の）画像を見つけて、食わせてみます。

Probability（たぶん） 94% の確率で 6期
うん、あってます。なかなか自信もって言えてるしさすがです。

次に、1期の別の画像で試してみます。

Probability（たぶん） 4.6% の確率で 1期

というすごい自信のなさで 1期と言ってきました。
（でも、6期の可能性は　ゼロ% だと言ってるので、そっちに関してはなかなかの自信ですね）
もっと画像を増やしたりして精度をあげていく必要がありそうです。

精度については、これを何に使うか？によって精度の必要性はかわってきます。命にかかわるものなのか、単にEntertainmentなのか。ひょっとしたらたった 1% でもあればそれで良いようなユースケースもあるとおもいますので、そこはみなさんの利用用途でご検討ください。

ということで、無事に学習からテストまで終わりました。

APIも使ってみる

PERFORMANCE の Prediction URL というのを選択してください。

するとAPIで扱うためのURLやKeyが表示されます。
これを使ってjQueryでもcurlでもphpでもなんでも好きなように使っていただければよいのですが、今回は簡単なサンプルとしてHTML+jQueryで作ってみます。
画像URL指定でやってみたいと思うので、 If you have an image URL: のところの URL と Prediction-Key というのをメモして、下のようなHTMLに埋め込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
        $(function(){
            $('#js--button').click(function(){
                let imageurl = $('#js--url').val();
                let postdata = '{"Url":"' + imageurl + '"}';
                $.ajax({
                    type: 'POST',
                    url: 'https://{your URL}',
                    data: postdata,
                    headers: {
                        "Prediction-Key": "{your Key}",
                        "Content-Type": "application/json"
                    },
                    dataType: "json",
                    success: function(data) {
                        console.log(data)
                        let text = '';
                        for( let i=0; i<data.Predictions.length; i++ ){
                            text = text + data.Predictions[i].Tag + " --- " + parseFloat(data.Predictions[i].Probability) * 100 + " %";
                            text = text + "\r\n";
                        }
                        $('#js--result').text(text)
                        $('#js--result-img').attr('src',imageurl)
                    }
                });
            });
        });
    </script>
</head>
<body>
    <p>
        image URL: <input id="js--url" type="text">
    </p>
    <p>
        <button id="js--button">check!</button>
    </p>
    <hr>
    <img id="js--result-img" src="" alt="" style="width: 400px;">
    <pre id="js--result">
        ...
    </pre>
</body>
</html>

適当なサーバにあげるか、ローカルで適当なサーバを動かして実行してみてください。
すごい地味目な画面がでてきて、テキストボックスにURLをいれて、check!ボタンを押すと結果が出てくるはずです。

いかがでしたか？？

使うのはとても簡単です。本当に簡単です。
Microsoftさん感謝です。

the future is already here.　it's just not evenly distributed. です。未来はもうすでにココにあるので、それを使って、みなさんも自分のところに未来をもってきましょう。

蛇足

今回はカラーと白黒の画像を与えて学習させてみました。さすがにそれだと面白くない＝100%判断されそうとか思って、6期の画像も白黒に変換してから学習させてみようかな、などとやる前は思っていたのですが、意外や意外に見事に迷ってくれました笑。

AIに与える情報の選別、AIからの示唆を読み取ることの難しさ、なかなかExcitingな世の中になってきたと思います。もはや卜部、陰陽寮の時代に突入ですので、AIからの示唆を読み解く"陰陽部門"を会社に早く作りたいと思います。

Azure Custom Vision で ゲゲゲ絵柄判断（2018）

なに？