Quantcast
Viewing all articles
Browse latest Browse all 8922

Custom Vision Service を使用してインテリアの樹種分析

CustomVisionService を 簡単なサイトを作って使えるようにしたい

今週はMicrosoftAzureから画像認識を試したのでそちらの成果を簡単に使えるサイトを作ろうと
思いました。内容はせっかくなので本業にちなんでインテリアの画像から樹種を解析してくれるものを目指しました。
内装を考える時にテーマとなる樹種を一つ決めて組み合わせていくと空間にまとまりが出るので、
自分が良いなと思う家具や内装がどの樹種なのかを調べられると買う家具や似合う色が決まってきて
インテリアを構築する時の参考になると良いなと思いました。

環境

Node.js v10.16.3
Windows 10 pro
Visual Studio Code v1.39.1

概要

①MicrosoftAzureでアカウントを作成
②Microsoft Custom Vision Service を使用して画像解析のプロジェクトを作成、トレーニング
③作成したプロジェクトをAPIとして使用する
④APIを取得する為のコードを書く

参考資料

主に①~②の参考にいつもどおり先陣の知恵をお借りします。
【資料1】Microsoft Custom Vision Service を使用した鼓膜画像認識

③、④はこの資料を参考に。
【資料2】Node.jsでAzure Face APIを使ってみる

随時わからない所があるので補足でネットサーフィンしたログを
【資料3】[axios] axios の導入と簡単な使い方
【資料3】JavaScript テキストボックスの値を取得/設定する

①MicrosoftAzureでアカウントを作成

【資料1】を参考に、、、

②Microsoft Custom Vision Service を使用して画像解析のプロジェクトを作成

【Microsoft Custom Vision】の演習に沿って新たなプロジェクトを作ります。

Image may be NSFW.
Clik here to view.
image.png

プロジェクトを開いたら画像を追加から画像をアップロードします。
Image may be NSFW.
Clik here to view.
image.png

今回は樹種を分析したいので、色味の違う樹種を三種類、
ウォルナット、チーク、メイプルの画像を用意しました。
また、分析結果が何に対してなのかわかりやすいように、用意した画像の項目を家具と部屋にわけました。

Image may be NSFW.
Clik here to view.
image.png

≪家具タグ≫
Image may be NSFW.
Clik here to view.
image.png

≪部屋タグ≫
Image may be NSFW.
Clik here to view.
image.png

分析結果

トレーニングで検証してみると、
Image may be NSFW.
Clik here to view.
image.png

99.8%家具。ちゃんと見極めてます。
材質は72.1%チーク。
7.2%のメイプルは、、、床材ですかね。
写真の要素を読み取ってくれました。

③作成したプロジェクトをAPIとして使用する

Image may be NSFW.
Clik here to view.
image.png

性能タブから公開し、予測URLを発行する。
Image may be NSFW.
Clik here to view.
image.png

④APIを取得する為のコードを書く

フォルダ構成は前回と同じ。
Image may be NSFW.
Clik here to view.
image.png

フォルダを作成し、中に >node_modules:node.jsのデータが入っているフォルダ
            >public:htmlデータを入れるフォルダ
             >index.html:サイトを構成する静的ファイル
            >index.js:作成したpublicの静的ファイルをexpressで表示させるコード
            >gitignore:herokuで実装する時に不要なデータを送らないよう指定するファイル
            >package-lock.json:npm init -yで作成される
            >package.json:npm init -yで作成される
             インストールしたライブラリデータ等のパッケージが登録されている
            >Procfile:Herokuを起動するのに必要なファイル

上記のファイルを作成し、Herokuまたは
http://localhost:8080/
で起動させ、確認しながら進める。

今回のコードを起動必要なライブラリは

npminit-ynpmibody-parserexpressnpmiaxios

をそれぞれターミナルに入力し、インストール。

index.html

<!DOCTYPEhtml><html><head><title>Step01</title>
<scriptsrc="https://unpkg.com/vue"></script>
</head>
<body><p>画像URL<spanid="span1"></span></p><formname="form1"> <inputtype="text"name="text1"value="red"size="100" > <!--<input>タグ内でtype="url" を指定するとURL入力欄の作成name="text1" フォーム部品の名前  value="red"送信される値を指定size="100"表示される文字数maxlength="" 入力できる最大文字数の指定--></form>
<inputtype="button"value="解析"onclick="clickBtn1()"><inputtype="button"value="クリア"onclick="clickBtn2()"><script>'use strict';// JavaScript内でuse strict を宣言すると、コードがstrict(厳格)モードで実行されるようになる。 //strictモードでは、より的確なエラーチェックが行われ、 //これまでエラーにならなかったような曖昧な実装がエラー扱いになるfunctionclickBtn1(){ // clickBtn1をクリックされた時の値を取得constt1=document.form1.text1.value; //form1のtext1のvalueに入力値をt1に代入 document.getElementById("span1").textContent=t1;}functionclickBtn2(){document.getElementById("span1").textContent="";}constaxios=require('axios');// axiosを読み込む。require使う場合constsubscriptionKey='';//キーを指定consturiBase='https://url';constimageUrl=ti;// Request parameters.constparams={'returnFaceId':'true','returnFaceLandmarks':'false','returnFaceAttributes':'age,gender,headPose,smile,facialHair,glasses,'+'emotion,hair,makeup,occlusion,accessories,blur,exposure,noise'};constconfig={baseURL:uriBase,method:'post',headers:{'Content-Type':' application/json','Prediction-Key':subscriptionKey},data:'{"url": '+'"'+imageUrl+'"}',params:params,}axios.request(config).then(res=>{constjsonResponse=JSON.stringify(res.data,null,'');console.log('JSON Response\n');console.log(jsonResponse);}).catch(error=>console.log(error.response.data));</script>
</body>
</html>

Image may be NSFW.
Clik here to view.
image.png

簡単なボタンが出来ました。
試しに画像のURL入力し解析をクリック。

Image may be NSFW.
Clik here to view.
image.png

ちゃんと の"span1"に反映されている為t1にはきちんと代入されているはず。

Image may be NSFW.
Clik here to view.
image.png

コードがうまく動かない。

ターミナルにヘロクのログを見るコードを打ち込んでみる。

herokulogs-t
エラー
2019-12-03T13:11:14.837911+00:00heroku[router]:at=infomethod=GETpath="/"host=s191127-sample.herokuapp.comrequest_id=1d9cfa53-4255-4901-8d40-72a1df83f945fwd="114.69.33.94"dyno=web.1connect=1msservice=4msstatus=304bytes=237protocol=https2019-12-03T13:11:54.832593+00:00heroku[router]:at=infomethod=GETpath="/"host=s191127-sample.herokuapp.comrequest_id=886df22d-3db7-4f66-8b38-92045a51b489fwd="114.69.33.94"dyno=web.1connect=1msservice=2msstatus=304bytes=237protocol=https2019-12-03T13:12:00.185770+00:00heroku[router]:at=infomethod=GETpath="/"host=s191127-sample.herokuapp.comrequest_id=5fe36a9e-5f40-4bfb-8bdf-6084058293c6fwd="114.69.33.94"dyno=web.1connect=1msservice=3msstatus=304bytes=237protocol=https2019-12-03T13:12:33.770914+00:00heroku[router]:at=infomethod=GETpath="/"host=s191127-sample.herokuapp.comrequest_id=474ad7cc-d4b9-4d21-9b81-05d9e0d0cf81fwd="114.69.33.94"dyno=web.1connect=1msservice=2msstatus=304bytes=237protocol=https2019-12-03T13:17:58.000000+00:00app[api]:Buildstartedbyusersayu5713@gmail.com2019-12-03T13:18:10.733484+00:00heroku[web.1]:Restarting2019-12-03T13:18:10.737606+00:00heroku[web.1]:Statechangedfromuptostarting2019-12-03T13:18:10.486482+00:00app[api]:Releasev4createdbyusersayu5713@gmail.com2019-12-03T13:18:10.486482+00:00app[api]:Deploye73341abbyusersayu5713@gmail.com2019-12-03T13:18:10.000000+00:00app[api]:Buildsucceeded2019-12-03T13:18:11.420251+00:00heroku[web.1]:StoppingallprocesseswithSIGTERM2019-12-03T13:18:11.483511+00:00heroku[web.1]:Processexitedwithstatus1432019-12-03T13:18:12.514200+00:00heroku[web.1]:Startingprocesswithcommand`node index.js`2019-12-03T13:18:14.818512+00:00app[web.1]:serverstart!(heroku)2019-12-03T13:18:15.462076+00:00heroku[web.1]:Statechangedfromstartingtoup2019-12-03T13:18:17.019143+00:00heroku[router]:at=infomethod=GETpath="/"host=s191127-sample.herokuapp.comrequest_id=94efca27-f6a1-48a6-8ca7-ee2305b16ed5fwd="114.69.33.94"dyno=web.1connect=1msservice=22msstatus=200bytes=1087protocol=https2019-12-03T13:52:15.499404+00:00heroku[web.1]:Idling2019-12-03T13:52:15.508200+00:00heroku[web.1]:Statechangedfromuptodown2019-12-03T13:52:19.993362+00:00heroku[web.1]:StoppingallprocesseswithSIGTERM2019-12-03T13:52:20.117700+00:00heroku[web.1]:Processexitedwithstatus1432019-12-03T13:57:16.000000+00:00app[api]:Buildstartedbyusersayu5713@gmail.com2019-12-03T13:57:28.515154+00:00heroku[web.1]:Statechangedfromdowntostarting2019-12-03T13:57:28.121717+00:00app[api]:Deployba7a5e71byusersayu5713@gmail.com2019-12-03T13:57:28.121717+00:00app[api]:Releasev5createdbyusersayu5713@gmail.com2019-12-03T13:57:28.000000+00:00app[api]:Buildsucceeded2019-12-03T13:57:30.578721+00:00heroku[web.1]:Startingprocesswithcommand`node index.js`2019-12-03T13:57:32.601844+00:00app[web.1]:serverstart!(heroku)2019-12-03T13:57:34.225781+00:00heroku[web.1]:Statechangedfromstartingtoup2019-12-03T13:57:37.046079+00:00heroku[router]:at=infomethod=GETpath="/"host=s191127-sample.herokuapp.comrequest_id=4111dd64-a841-43a0-a582-e4e4bd3ac757fwd="114.69.33.94"dyno=web.1connect=1msservice=27msstatus=200bytes=2243protocol=https2019-12-03T14:32:17.716968+00:00heroku[web.1]:Idling2019-12-03T14:32:17.721462+00:00heroku[web.1]:Statechangedfromuptodown2019-12-03T14:32:18.890822+00:00heroku[web.1]:StoppingallprocesseswithSIGTERM2019-12-03T14:32:18.992477+00:00heroku[web.1]:Processexitedwithstatus143^Cバッチジョブを終了しますか(Y/N)?Y

(´;ω;`)ウゥゥ
今回はここで断念です、、、
どうにも力不足…また出直します。。。
ありがとうございました!!


Viewing all articles
Browse latest Browse all 8922

Trending Articles