クリエイター手抜きプロジェクト[466]Mac+AI編 Google Cloud Visionでランドマークとして認識された範囲をPhotoshopで描画する
── 古籏一浩 ──

投稿:  著者:



今回は、Google Cloud VisionでAI(人工知能)が図形のどこをランドマークとして認識したのかを、Photoshopで描画します。認識範囲はJSON形式で矩形座標として返されます。

また、何をランドマークとして認識したのかも返してくれます。そこで、認識された名前をレイヤー名とし、認識範囲を赤い枠線としてPhotoshopのレイヤーに描画することにします。

まず、Photoshopで処理する前に、AIで認識させたい画像を用意します。日本の景観はうまく認識されないことが多いので、最初は海外の世界遺産など有名な図形を用意するとよいでしょう(エベレスト、クレムリン、エッフェル塔、ホワイトハウスなど)。

画像はひとつのフォルダにまとめて入れておきます。また、日本語ファイル名の場合は、英文字と英数字の組み合わせにしておきます。画像の形式はJPEGのみです(以下のプログラムの file=*.jpg のjpgを変更することで、PNG形式などにも対応させることができます)。

画像を用意したら、以下のシェルスクリプトをテキストエディタに入力します。入力したらai.shのように拡張子を.shにして保存します。

なお、Google Cloud Visionを使用する際には、API Keyが必要になります。以下のコードの★がAPI Keyになりますので、取得したAPI Keyを指定してください。




cd $1
file=*.jpg
for i in ${file}
do
echo '{"requests":[{"image":{"content":"' > ./temp.json
openssl base64 -in $i | cat >> temp.json
echo '"},"features":[{
"type":"LANDMARK_DETECTION",
"maxResults":5
}]}]}' >> temp.json
curl -k -s -H "Content-Type: application/json" https://vision.googleapis.com/v1/images:annotate?key=★
--data-binary @./temp.json > "$i.LANDMARK.txt"
rm ./temp.json
done

次に、ターミナル.app(アプリケーションフォルダ>ユーティリティ>ターミナル)を起動し、上記のプログラムを保存したフォルダに移動します。ターミナルでcdと入力し、直後に半角空白を入力します。

その後、上記プログラムが入ったフォルダを、ファインダーからドラッグドロップします。すると、自動的にフォルダパスが入力されます。入力されたらリターンキーを押します。

次に、以下のように入力します。なお、ai.shは保存したプログラムのファイル名です。とりあえず、ここではai.shとして進めます。

chomod +x ai.sh

これで実行できるようになりました。次にターミナルで以下のように入力します。

./ai.sh 画像が入ったフォルダ名

あとはリターンキーを押せば、自動的にGoogle Clound Visionを使って画像解析が行われます。すると、画像フォルダの中に以下のような「画像ファイル名.LANDMARK.txt」というテキストファイル(JSONファイル)が生成されます。

e.jpg.LANDMARK.txt

このようなファイルができていれば準備完了です。

次に、以下のプログラムを入力します。入力したらPhotoshopかESTKから実行します。最初に画像があるフォルダを聞いてきます。フォルダを選択すれば自動的に画像が表示され、赤い四角形が描画されます。

// PhotoshopでAIの認識範囲を線で描画する
var saveUnit = preferences.rulerUnits;
preferences.rulerUnits = Units.PIXELS;
(function(){
var folderObj = Folder.selectDialog("フォルダを選択してください");
if (!folderObj){ return; }
var apiText = "*.LANDMARK.txt";
var fileList = folderObj.getFiles(apiText);
for(var i=0; i<fileList.length; i++){
var f = fileList[i].open("r");
if (!f){ continue; }
// JSONデータを読み込みオブジェクトとして利用できるようにする
var jsondata = fileList[i].read();
eval("var data = "+jsondata);
var param = data.responses[0].landmarkAnnotations;
if (!param){ continue; }
for(var j=0; j<param.length; j++){
if (!param[j].boundingPoly){ continue; }
var imageFile = fileList[i].fsName.split(".LANDMARK.txt")[0];
app.open(new File(imageFile));
// レイヤーを作成する
var doc = app.activeDocument;
var lay = doc.artLayers.add();
lay.name = param[j].description;
var coords = param[j].boundingPoly.vertices;
var p = [];
for(var k=0; k<coords.length; k++){
var x = parseFloat(coords[k].x);
var y = parseFloat(coords[k].y);
p.push([x,y]);
}
doc.selection.select(p);
doc.selection.stroke(setColor(255, 0, 0), 2);
app.activeDocument.selection.deselect();
}
}
})();
preferences.rulerUnits = saveUnit;
// RGB Color Object
function setColor (r,g,b){
RGBColor = new SolidColor();
RGBColor.red = r;
RGBColor.green = g;
RGBColor.blue = b;
return RGBColor;
}

なお、画像が開かれない場合は、Google Cloud Visionでの解析結果でランドマークとして認識されなかった可能性があります。JPSONファイルをテキストエディタやブラウザで開いて、内容を確認してください。"boundingPoly" の文字がなければ、ランドマークとしては認識されなかったことになります。

Google Clound Visionは最初の3か月は無料ですが、それを超えると有料になります。一日1000回までのリクエストは無料となっています。また、初回に限って3万円分使える特典があります。

ですが、あまりに大量にリクエストすると、思わぬ金額になってしまうかもしれないので、注意しつつ利用してください。


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/


ファイル名。たかがファイル名だけど、案外とトラブルを起こしやすいもののひとつかもしれません。同じ仕事をしても、一人は思わぬトラブルがあって仕事がはかどらないのに対して、もう一人はほとんどトラブルもなく終わってしまったりすることもあります。

もともとコンピューターは英語がベースなので、英語以外はおまけ扱い、また英語ベースのプログラムで様々な処理を行っています。

ですから、ファイル名に日本語や空白や特殊記号、プログラムで使用される演算記号(+-/*|^&%)を入れるとトラブルの原因になります。

肝心な部分にアルファベット26文字のみ、もしくはアンダースコア(_)しか使わない人がいます。些細なことですが、コンピューターの基礎部分(経緯)を知っていれば、後々のトラブルを防ぐことができます。

・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/


・Premiere Pro & Media Encoder自動化サンプル集
http://www.amazon.co.jp/dp/4802090471/


・JavaScriptによるデータビジュアライゼーション入門
http://www.amazon.co.jp/dp/4873117461/


・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/


・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/


・Adobe JavaScriptリファレンス
http://www.amazon.co.jp/dp/B00FZEK6J6/


・データビジュアライゼーションのためのD3.js徹底入門
http://www.amazon.co.jp/dp/4797368861


・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/


・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/