たくあんポリポリ

勉強したことを載せていきます。最近、技術系の記事はZennに書いています。(https://zenn.dev/chittai)

GoogleVisionAPI で 猫の絵を判定するアプリを作ってみた

GoogleVisionAPI を使用して猫の絵をスコアリングしてランキング登録できるアプリを作ってみた。

GoogleVisionAPI とは

以下の記事で紹介しているため、割愛する。
c-taquna.hatenablog.com

どんなアプリか

猫の絵を描いてスコアリングしてランク付けまでします。

使い方を説明します。
まず、以下のURLにアクセスしていただくとトップページに飛びます。

☆PC版
Drawing

スマホ版(かなり中途半端な状態2017/7/28)
Drawing


白く塗りつぶされた領域があるとおもうのですが、そこに猫の絵を描きます。
f:id:c_taquna:20170726004708p:plain

こんな感じ。
f:id:c_taquna:20170726004712p:plain

絵を書き終えたら JUDGE ボタンを押します。
f:id:c_taquna:20170726004716p:plain

そうすると、絵のスコアと RANK ボタンが出てきます。
f:id:c_taquna:20170726004720p:plain

実はこのページの下部には Ranking があるので、RANKボタンを押して登録します。
f:id:c_taquna:20170726004724p:plain

RANKボタンを押すと・・・
f:id:c_taquna:20170726004729p:plain

登録されました!こんな感じで自分が描いた猫の絵をスコアリングしてランキングまで作成します。

使用している環境について

処理の概要

HTMLのCanvasを使用して絵を書くためのスペースを作成する。

以下のサイトを参考にすれば何の問題もなくCanvasで絵が描けるようになります。

【参考にしたサイト】
㉗HTML5+jQueryでお絵かき

絵を描ける様にした後は、描いた絵のデータをGoogleVisionAPIに渡す。

GoogleVisionAPIにdataを渡すためには以下の要領に従い、POST用のデータをJSONリクエスト形式で作成します。

【参考にしたサイト】
Cloud Vision API のリクエストとレスポンス  |  Google Cloud Vision API ドキュメント  |  Google Cloud Platform

このJSON形式リクエストにある"content:" に絵のデータについて記述する必要があります。どのように絵をデータ化するかというと、描いた絵をBase64に変換します。"content:"にはその値を入れます。

【参考にしたサイト】
Canvasで描画した画像を送信してサーバに保存する - Qiita

APIの処理は基本的にバックエンドのRailsで処理しています。jQueryからRailsに処理を渡すために、$.ajaxにて上記で作成したJSONリクエストデータをRailsに渡します。そうすると、
裏ではJSONリクエストデータを引数としたAPIを叩くメソッドが実行されAPIの結果を取得します。

【参考にしたサイト】
jQuery.ajax の data の型
JavaScriptからRailsのAPIを叩く方法 - Qiita

GoogleVisionAPIから受け取った結果の処理を行う。

GoogleVisionAPIから受け取る結果もJSON形式でです。もし、自分が描いた絵が猫だと判定されていれば、結果のlabelの中に "cat" があるはずです。

そのため、受け取った結果から "cat" のlabel があるかを探し、あったらそのlabelのスコアを取ってくるような処理になっています。なければ、「Your picture is not Cat! Score is 0!」と表示されます。

つまり、スコアの判定はGoogle先生次第です。

Ranking処理を行う。

Rankingの処理については、RANKボタンを押すと同時に、スコアを$.ajax にてRailsに送ります。裏では受け取ったスコアをDBに登録する処理をかいたメソッドが実行されます。

そうすることでスコアをDBに登録することができます。問題なく登録できたらRankingを再描画してリアルタイムで反映しています。再描画の処理はDBからデータを持ってきてjQueryのeach で各データの処理を行っています。

なんか他にも色々あるけど、長くなるので大まかな処理の概要だけの説明で終わりです。

ハマったところとその対応

かなりあるので、それはまた別記事で。。

課題

このご時世にスマホに対応していない。。。。

まとめ

フロントからバックエンドまで一人で作成しましたが、大変。特に、最初はBaaSのFirebaseを使用して作成したのですが、APIキーを隠すためにバックエンドをRailsで書き直したり。でもやっぱり何かを作るのは非常に楽しい。
firebase.google.com

参考にしたサイト

他の項目で記載しているので割愛。参考にしたサイトが他にもあったらあらためて記載します。