Custom Vision

Custom Vision APIをJavascriptから呼び出す

概要

MicroSoftのCustom Vison APIをJavaScriptで呼び出した話。

はじめに

MicroSoft提供のCustom Vison、利用者が画像にタグを付けることで思い通りのモデルを作れる、機械学習初心者にはもってこいのサービスです。APIを実行するのに苦労したので、備忘録として書いていきたいです。

プロジェクト作成～キー取得

これらのページを参考にプロジェクトを作成しました。

※ Azureのアカウントが必要です。MicrosoftのアカウントでもCustomVisonは試せますが、APIを実行できません。(APIを実行すると「HTTP 401 Access Denied (invalid subscription key)」が発生します。)

API実行

手軽にできそうなHTML+JavaScriptで試すことにしました。仕様が変わるかもしれませんが、2018年5月27日現在は下記のコードで動作確認できました。(各種キー情報はよしなに書き換えてください)

HTML

<!DOCTYPE html>
<html>
<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
    <div>
      <input id="inputFile"  name="file" type="file" accept="image/*"></input>
      <div>最大ファイルサイズ：4MB</div>
        <div>
            <button onclick="sendImage()">
              送信
            </button>
        </div>
    </div>

<script type="text/javascript">

    function sendImage(){
        var params = {
            // Request parameters
            "iterationId": "イテレーションIDをいれる",
            // "application": "{string}",
        };

        $.ajax({
            url: "https://southcentralus.api.cognitive.microsoft.com/customvision/v1.0/Prediction/プロジェクトIDをいれる/image?" + $.param(params),
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Content-Type","multipart/form-data");
                xhrObj.setRequestHeader("Prediction-key","{Prediction-Keyを入れる}");
            },
            type: "POST",
            data: $("input[name='file']").prop("files")[0],
            processData: false,
            contentType: false
        })
        .done(function(data) {
            alert("success");
        })
        .fail(function() {
            alert("error");
        });
    }

</script>
</body>
</html>

Custom Vision Prediction PredictImageにMicrosoftが使い方などを書いてくれているのですが、それでも自分はハマリました、、、。以下、ハマりポイントです。

  • params.application ってなに？
    • よくわからないけどなくてもいいっぽい！削除 してOK
  • POSTのdataには何を渡す？
    • fileをそのまま渡せばOKでした。
      FormDaraを渡したり、Base64エンコードしたり、かなり遠回りしました、、、
  • ajaxのIllegal invocationってエラーがでるよ？
    • ajaxのオプションにprocessData: false,contentType: false を設定すればOK
      送信時にajaxがパラメータを整形しようとしてるらしいです。

0 件のコメント :

コメントを投稿