PythonでAI画像認識アプリを作りました！【Day57】

しばらく更新の間隔があいてしまいました💦

今日はPythonでAI画像認識アプリを作ったので、

その紹介をしたいと思います!

今回の記事はAIの中身について詳しく言及するというより、

アプリの作り方を一から紹介するので、

Progateがひとまず終わった方、Rails等他の言語をやってる方もぜひ見てください！

こちらからクリック↓

ShikiSya

どういうアプリか

Pythonを用いてAIの一種である、深層学習によって写真の四季を判定します

どういう知識があれば作れるのか

このアプリを作るには大まかに分けて3つの技術が必要となります。

箇条書きで必要な言語を書きました。

• AIの仕組みを理解し、コードに落とし込む技術　　
• Python
• Keras（Tensorflowを簡単に書くためのラッパー）
• Tensorflow（AIを作る）
• アプリの見た目を作る技術
• HTML（見た目を描画する）
• CSS（HTMLを装飾する）
• Chart.js（アニメ付きグラフを表示する）
• Bootstrap（HTML・CSSを書きやすくする）
• Adobe XD（見た目をスケッチするツール）
• Pythonの結果を見た目に反映させる技術
• Flask（PythonのデータをHTMLに渡す）

どういう手順で作ったか。

1. ざっくりとイメージをする
2. Pythonで中身を書いていく
3. 見た目をAdobe XDで書いていく
4. HTML&CSSでコーディングしていく
5. デプロイする

こんな感じです。詳しく見ていきましょう！

①ザックリ考える

画像を判別するアプリを作る上で何が面白いか考えました！

人間でも判別しにくいものを判別出来たら面白いな！と思い、

四季という抽象的なテーマにしました。

そしてそのために必要な工程を考え、中身を実装していきました。

②Pythonで中身を書いていく

以下のような手順で進めていきました。

1. ニューラルネットワーク転移学習するためにKerasでモデルを組む
2. 学習用データとして、Flickr APIから大量の画像をDLする
3. 学習させ、その結果をHTMLにFlaskで渡す

この時参考にさせていただいたサイトはこちら↓

ykubot.com

aidiary.hatenablog.com

③見た目をAdobe XDで作っていく

Pythonで中身を書くことが出来たので、次はコーディングの目安になるように

Adobe XDで見た目を作っていきます。

Adobe XDは無料で使えるプロトタイプ作成ツールです。

公式チュートリアルもしっかりしていて、

1日触ってれば使えるようになるぐらい簡単です！おススメ！↓

helpx.adobe.com

そしてこんな風にプロトタイプを作成しました！

デザインするうえで気を付けたことは、

• 高級感を出すために、白黒・セリフ付きフォントを基調にする
• 四季というテーマがわかりやすいように背景にでっかく写真を貼る。

です！

WEBデザインの基本は本を読んで、勉強しました👀

この本めっちゃおすすめです

SBクリエイティブ:いちばんよくわかるWebデザインの基本きちんと入門

あとは他の方が作ったWEBアプリとかをザーッとみて、

自分のイメージに合うものを選んで参考にさせていただきました。

ここで探すといいと思います！↓

www.eggineer.com

④HTML&CSSでコーディングしていく

実際にコーディングしていきます。

Adobe XDでプロトタイプを丁寧に作っていたので、それに沿って行くだけです！

ただ、僕の場合Twitterからの流入が殆どだと思ったので、

スマホでも見やすくなるように気を付けました。

Bootstrapも使ったのですが、あんまり仕組みを理解できておらず、

Flexboxと混ざってあんまり真価を発揮できなかったので次回は気を付けたいです…

また、結果画面のグラフではChart.jsを使いました。

JSは殆ど触ったことがないのですが

書き方が完全に独立している上、日本語のドキュメントがしっかりあったので、

楽々導入できました！

www.webprofessional.jp

⑤デプロイする

あとはデプロイするだけ！だったのですが、ここで死ぬほど詰まりました…

herokuにアップロードできない（3日目）
（Git苦手）（もはや郵送でpushしたい）（意味不明）

— ひぐ (@zerebom_3) 2018年9月14日

↑限界になっている僕

WEB系の方にとっては常識らしいのですが、

デプロイする場合は、最初にデプロイして徐々にpushするといいそうです。

そうすると、どこでエラーが起こったのかわかりやすいので…

ここの知見はのちほどQiitaで纏めるかもしれないです。

参考にしたサイト:

qiita.com

AI部分の大雑把な解説

画像の引用元：

news.mynavi.jp

AIと言われても中身何しているか全然わからないですよね！

ここでは簡単に解説します。

今回はニューラルネットワークの転移学習という技術を使っています。

ニューラルネットワークとは、

人間の神経細胞を数学的にモデル化した特徴分類器です。

ディープラーニング（＝深層学習）はそのニューラルネットワークを何層にもして高性能にしたものと言えます。

 

入力画像が与えられてそれに対して、今まで学習した画像データと参照して、

この画像はこのカテゴリだ！と判定しているわけです。（死ぬほどざっくりした解説）

そして転移学習とは学習済みのモデルの最後の部分だけ、入れ替えたものです。

これにより、少量の画像データでも学習を行い、分類器として力を発揮できるのです

と、まあめちゃくそざっくりとした解説ですね(笑)

詳しく知りたい人はAidemyの教材（無料）で学ぶといいかもしれないです！

aidemy.net

おわりに

以上です！アプリを作ると

• 成果物として形に残る
• 各技術とのつながりを理解できる
• 周辺知識も身につく
• 楽しい！！

いいことばかりです！ぜひみなさんも基礎が終わったらアプリを作ってみてください！

めちゃくちゃざっくり書いたので、ここ詳しく聞きたい！

って言うのがあったら是非コメントやTwitter(@zerebom_3)で連絡ください！

では～