Python@AWS LambdaとDjangoを使ってアスキーアート自動生成Webアプリを作ってみた

アスキーアート自動生成Webアプリはこちら
http://asciiart.me/

Transcript

1. Python@AWS Lambdaと Djangoを使ってアスキーアート 自動生成Webアプリを作ってみた PyCon mini Kumamoto 2017/04/23 矢野高宏
2. はじめに • PyConに向けて作ってみたサイト asciiart.me に ついて喋ります • 初心者向けの発表です アスキーアートの自動生成
3. アジェンダ • 自己紹介 • AWS上での開発 • アスキーアート（AA）自動生成 • Pythonコーディングで大事だなと思ったところ • Djangoのこと • AWS Lambdaのこと
4. お前誰よ • 矢野高宏 • プログラマー • 画像処理、画像認識 • 最近、自然言語処理 • DeepLearning • ゲーム制作＠Unity3d • ウェブアプリ作成（勉強中） • Python歴２年くらい
5. 作ろうと思った動機 • 5年前にC#で作ったAA自動生成ソフトをいつか Webアプリ化したかった • PyConあるしネタとしてAWS Lambda@Python への移植を決意 – コードがめちゃくちゃ短くなった（400行くらい） – AWS Lambdaでマルチスレッドが使えなくなったので処 理時間は増えた（1分程度なのでOK）
6. 京アニ • 京アニも注目するPythonとアスキーアート 「小林さんちのメイドラゴン」より
7. アジェンダ • 自己紹介 • AWS上での開発 • アスキーアート（AA）自動生成 • Pythonコーディングで大事だなと思ったところ • Djangoのこと • AWS Lambdaのこと
8. AWSの構成 AA作りたい人
9. AWSの構成 djangoのForm経由で S3に画像アップロード アップロード と同時に Lamda起動 AA化処理後の HTMLを 静的ホスティング しているS3へ保存 AA作りたい人
10. AWSの構成 AA作りたい人 5分後にCutyCaptで AAのキャプチャ画像取得 djangoのForm経由で S3に画像アップロード アップロード と同時に Lamda起動 AA化処理後の HTMLを 静的ホスティング しているS3へ保存
11. AA見たい人 AngularJSで REST Frameworkに S3のリソースのアドレス 問い合わせ、表示 Djangoで Webホスティング
12. 一通り体験できて満足 • Django – Webホスティング – REST Framework – AngularJS連携 • AWS Lambda • S3静的ホスティング • Javascript – AngularJS/Bootstrap/Masonry/Infinite Scroll
13. 開発環境 PyCharm（コード編集に） ssh workspace （EC2システム管理に） ssh同期 （たくさんのファイルは同期できない。 プロジェクト内のコードのみ） AWS マネジメントコンソール S3 lamba
14. アジェンダ • 自己紹介 • AWS上での開発 • アスキーアート（AA）自動生成 • Pythonコーディングで大事だなと思ったところ • Djangoのこと • AWS Lambdaのこと
15. アスキーアート（AA）って？ • 文字で絵を描いていくアート • ルール – フォントはMS Pゴシックまたは モナーフォント – フォントサイズ１６ポイント、高 さ18pixel – 文字幅は３ピクセル～16ピク セルまで様々 – 半角スペース連続で使えない – バックスラッシュ使えない
17. • 文字をラスタ画像化 – 画像として取り扱う あ →
18. AA自動生成のアプローチ（１） 線画化 画像化した文字と 線画化した画像間で 似ているかを調べる あ ラスタ画像化
19. AA自動生成のアプローチ（２） • AAを1行ごとの最短経路探索問題ととらえる – AA一行の書き方の解空間をグラフ構造で表す – グラフ構造ができたらダイクストラ法で解く • ダイクストラ法は最短経路探索が可能 スタート ゴール
20. AAの解空間のグラフ構造化 • 画像を短冊状に切る • AA一行の書き方の解空間をグラフ構造で表す • ノード数は「画像の位置」×「文字の種類」 • コスト（エッジ）は線画化した画像と画像化した文字間で Mean Squared Errorを算出したもの ... ... ... スタートノード （画像の左端） ゴールノード （画像の左端） ... ... ... あ v / A
21. これでAA１行のノード・エッジのグラフ構造ができる v あ v v あ あ … 全文字分 全文字 とのリンク 1画素ずつ ずらして文字を配置。 （文字がエッジになる） 画像と比較（コスト） v v / あ A … 全文字分 詳しく書くと 全文字 とのリンク
22. ダイクストラ法で解く • ノード・エッジのグラフ構造ができ たらそれをダイクストラ法で解く • スタートノードからゴールノードま での最短経路を見つけるための 古典的アルゴリズム • 内部的にどう最短経路を見つけ るかは割愛 • ノードとノード間のコスト（エッジ） が定義できれば解ける スタート ゴール
23. githubにコードある • 詳しくはgithubにコードある – https://github.com/ya-no/asciiart.me • 画像を食わせるとHTMLが出力されるPython プログラム
24. アジェンダ • 自己紹介 • AWS上での開発 • アスキーアート（AA）自動生成 • Pythonコーディングで大事だなと思ったところ • Djangoのこと • AWS Lambdaのこと
25. 文字列はUnicodeに変換 • Python2の話（AWS LambdaはPython2） • 文字コードはテキスト処理のはまりどころ • 外部から文字列を読み込んだら python内部では unicode で取り扱う – Unicode以外はバイト列として扱われる
26. Python高速化（numpy） • 行列演算できるところでfor文はダメ絶対 – 例）numpyのMean Squared Error計算 – 行列演算を使うと５～１０倍速くなった 一緒だね for文 行列演算
27. Matlab • だいぶんオワ（ｒｙ – 個人の感想です • まだまだ必要なことがある！ – 海外アカデミックのデモコード 実行 • ホームエディションで個人で も扱える – 本体15000円、ツールボ ックス5000円 安い！ – 家で趣味で動かすのに どうぞ
29. アジェンダ • 自己紹介 • AWS上での開発 • アスキーアート（AA）自動生成 • Pythonコーディングで大事だなと思ったところ • Djangoのこと • AWS Lambdaのこと
30. django+angularJSの共存 • angularJS側で対応 – $interpolateProviderを使う • django側で対応 – djangoのverbatimタグでdjangoのテンプレートエンジン 処理を無効にする
31. django+angularJSの共存方針 • djangoに任せる – DB、ルーティング、テンプレート、認証関係、 REST API • angularJSに任せる – テンプレート内の細かいViewとビジネスロジック
32. djangoの勉強 • CodingForEntrepreneurs.com – Djangoの動画学習サイト – 無料でもdjangoの基礎講座は全部見れるのでオススメ – サブスクリプションするとみたい動画が全部ダウンロード できるので短期間サブスクリプションするのもあり
33. • DVDのバイリンガルキャプション • Netflix Subtitles Extender for Japanese • コメディがいい – 弾丸トーク（フレンズ、ビッグバンセオリー） 英語の勉強
34. アジェンダ • 自己紹介 • AWS上での開発 • アスキーアート（AA）自動生成 • Pythonコーディングで大事だなと思ったところ • Djangoのこと • AWS Lambdaのこと
35. AWS Lambda@Python • はじめはローカルでテスト – Lambdaはステートレスな１関数なので簡単 • 大体できたらLambda上でテスト – エラーログも十分見れる（CloudWatch） – デプロイはコマンド一発で5～１０秒程度でできる
36. Lambda関数@Pythonの作成 • AmazonLinux＠EC2上で作業 1. yumで各種ライブラリインストール（blas, lapackなど） 2. スワップファイル作る 3. virtualenv作る 4. virtualenv内でpip、pythonライブラリインストール – numpy, pillow, scipyなど 5. lambda関数デプロイ用のフォルダ作成、site-package/dist- packageの中身をフォルダにコピー 6. lambda関数を .py で作成してフォルダにコピー 7. LambdaUploadでAWSにアップロードする • 参考： – https://medium.com/@maebert/machine-learning-on-aws-lambda- 5dc57127aee1
37. LambdaUpload • コマンド一発でライブラリと自作スクリプトをZIPで固めて AWSにデプロイしてくれる – 使ってみたらとても便利だった • AWS Lambdaの関数アップロードをお手軽に - 銀の弾丸 – http://takamints.hatenablog.jp/entry/2016/03/09/launcher-script- for-the-aws-lambda-function • （※発表後追記：AWS公式にも便利なデプロイツールがある そうです）
38. ご清聴ありがとうございました • ちゃんとデプロイする（nginx） • AAがでかいのでもっと小さく、よいものを – GraphCut／DeepLearningを使う – InterestPointの考慮（眼の周りの検知など） • 画像の線画化を高性能化 • LamdaでTensorflow（Keras）を動かす – aws lambda + serverless • ウェブアプリの勉強 – SNSシェア、ログイン機能、コメント、いいねラン キング、・・・