Custom VisionとPower Appsで作る色診断アプリ
はじめに
パーソナルカラーというものをご存じでしょうか。
人には肌の色や瞳の色などから似合う色というものがあります。
その色を身に着けることで、魅力が引き出されたりします。
人には肌の色や瞳の色などから似合う色というものがあります。
その色を身に着けることで、魅力が引き出されたりします。
かくいう私も、少しでも垢抜けたい思いから、パーソナルカラー診断をしてくれるサロンに行ってまいりました。
無事に自分のパーソナルカラーがわかり、それを参考に洋服を買おうとしたのですが
店頭に行くとどの色がパーソナルカラーなのかがわからない！
店頭に行くとどの色がパーソナルカラーなのかがわからない！
パーソナルカラーは主に4つのグループに分けられます。
スプリング、サマー、オータム、ウィンター
スプリング、サマー、オータム、ウィンター
例えば、下記の黄色はどのグループの黄色かわかりますか？
正解はスプリングです。
上記サイトのような一覧で見比べればわかるのですが、店頭で単体で見るとわかりづらいです。
サロンで色見本の布をもらいましたがいつも持ち歩くわけにもいかない…
サロンの人は見慣れてくればわかるようになると言っていましたが、それまでどうしたらいいのか…
そうだ、アプリにお願いしよう！
上記サイトのような一覧で見比べればわかるのですが、店頭で単体で見るとわかりづらいです。
サロンで色見本の布をもらいましたがいつも持ち歩くわけにもいかない…
サロンの人は見慣れてくればわかるようになると言っていましたが、それまでどうしたらいいのか…
そうだ、アプリにお願いしよう！
ということで、Custom VisionとPower Appsを使って
対象の色をパーソナルカラーの4つのグループに分けてくれるアプリを作りました。
対象の色をパーソナルカラーの4つのグループに分けてくれるアプリを作りました。
必要なもの
・Custom Visionが使えるAzureアカウント
・Power Appsが使えるアカウント
・Power Appsが使えるアカウント
手順
Custom Vision側の設定
Custom Visionにログインをします。
パーソナルカラーの4グループにタグを分けて色を登録します。
パーソナルカラーは主に明度彩度を基準に分けられているので、参考画像からの抽出方法によって差が出ないように気を付けました。
Power Apps側の設定
大枠の手順は参考サイト様と変わらないのでそちらをご覧いただければと思います。
参考サイト様
ここでは、バージョンの違いによる変更部分や追加機能について書いていきます。
Flowのv2対応
FlowのClassify an imageがV2になったのでContentもV2に対応させます。
dataUriToBinary(triggerBody()['Classifyanimage(V2)_ImageContent'])
dataUriToBinary(triggerBody()['Classifyanimage(V2)_ImageContent'])
「画像の追加」機能の追加
その場で写真を撮って判定させる機能に追加して、
フォルダから画像を選んで判定する機能も付けます。
フォルダから画像を選んで判定する機能も付けます。
iPhone上でアプリを動かしたとき、「画像の追加」でカメラ機能を使うこともできます。
[挿入]>[メディア]>[画像の追加]をします。
[OnSelect]項目にパラメータを入れます。
今回はColorImage2というコレクションに画像を一時格納します。
ClearCollect(ColorImage2, UploadedImage1.Image)
プレビュー表示部分を作ります。
[挿入]>[メディア]>[画像]を追加します。
[Image]項目に値を入れます。
First(ColorImage2).Url
First(ColorImage2).Url
判定のためのボタンを作ります。
[挿入]>[ボタン]を追加します。
[OnSelect]項目に値を入れます。
ここの値が大事で、カメラ機能と画像の追加では画像の扱いが変わります。
今回はJSON関数で一度バイナリーを文字列に変換してから、Flowで処理できるようにします。
ここの値が大事で、カメラ機能と画像の追加では画像の扱いが変わります。
今回はJSON関数で一度バイナリーを文字列に変換してから、Flowで処理できるようにします。
ClearCollect(ColorResult,PowerAppsボタン.Run(Substitute(JSON(UploadedImage1.Image,JSONFormat.IncludeBinaryData),"""","")))
今回ここが一番躓いたところなので、
画像の扱いについては下記参考サイト様をご覧ください。
データテーブルについては、Custom Visionの結果を表示するだけなので変更なしです。
動作見本
アプリの動作を録画したので貼り付けようと思ったのですが
サイズの大きさと形式に阻まれできず…
いい方法が見つかったら載せますのでそれまで保留で…(かっこつかない
おわりに
機械学習にあまり詳しくないので、この学習データで正しいのかあまり自信がないのですが、大体の目安になるような結果は出るので良しとしています。
UI部分をもう少し何とかしたいです。
UI部分をもう少し何とかしたいです。
