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

by Takahiro Yano

Slide 1

Slide 1 text

Python@AWS Lambdaと Djangoを使ってアスキーアート自動生成Webアプリを作ってみた PyCon mini Kumamoto 2017/04/23 矢野高宏

Slide 2

Slide 2 text

はじめに • PyConに向けて作ってみたサイト asciiart.me について喋ります • 初心者向けの発表ですアスキーアートの自動生成

Slide 3

Slide 3 text

アジェンダ • 自己紹介 • AWS上での開発 • アスキーアート（AA）自動生成 • Pythonコーディングで大事だなと思ったところ • Djangoのこと • AWS Lambdaのこと

Slide 4

Slide 4 text

お前誰よ • 矢野高宏 • プログラマー • 画像処理、画像認識 • 最近、自然言語処理 • DeepLearning • ゲーム制作＠Unity3d • ウェブアプリ作成（勉強中） • Python歴２年くらい

Slide 5

Slide 5 text

作ろうと思った動機 • 5年前にC#で作ったAA自動生成ソフトをいつか Webアプリ化したかった • PyConあるしネタとしてAWS Lambda@Python への移植を決意 – コードがめちゃくちゃ短くなった（400行くらい） – AWS Lambdaでマルチスレッドが使えなくなったので処理時間は増えた（1分程度なのでOK）

Slide 6

Slide 6 text

京アニ • 京アニも注目するPythonとアスキーアート「小林さんちのメイドラゴン」より

Slide 7

Slide 7 text

Slide 8

Slide 8 text

AWSの構成 AA作りたい人

Slide 9

Slide 9 text

AWSの構成 djangoのForm経由で S3に画像アップロードアップロードと同時に Lamda起動 AA化処理後の HTMLを静的ホスティングしているS3へ保存 AA作りたい人

Slide 10

Slide 10 text

AWSの構成 AA作りたい人 5分後にCutyCaptで AAのキャプチャ画像取得 djangoのForm経由で S3に画像アップロードアップロードと同時に Lamda起動 AA化処理後の HTMLを静的ホスティングしているS3へ保存

Slide 11

Slide 11 text

AA見たい人 AngularJSで REST Frameworkに S3のリソースのアドレス問い合わせ、表示 Djangoで Webホスティング

Slide 12

Slide 12 text

一通り体験できて満足 • Django – Webホスティング – REST Framework – AngularJS連携 • AWS Lambda • S3静的ホスティング • Javascript – AngularJS/Bootstrap/Masonry/Infinite Scroll

Slide 13

Slide 13 text

開発環境 PyCharm（コード編集に） ssh workspace （EC2システム管理に） ssh同期（たくさんのファイルは同期できない。プロジェクト内のコードのみ） AWS マネジメントコンソール S3 lamba

Slide 14

Slide 14 text

Slide 15

Slide 15 text

アスキーアート（AA）って？ • 文字で絵を描いていくアート • ルール – フォントはMS Pゴシックまたはモナーフォント – フォントサイズ１６ポイント、高さ18pixel – 文字幅は３ピクセル～16ピクセルまで様々 – 半角スペース連続で使えない – バックスラッシュ使えない

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

• 文字をラスタ画像化 – 画像として取り扱うあ →

Slide 18

Slide 18 text

AA自動生成のアプローチ（１）線画化画像化した文字と線画化した画像間で似ているかを調べるあラスタ画像化

Slide 19

Slide 19 text

AA自動生成のアプローチ（２） • AAを1行ごとの最短経路探索問題ととらえる – AA一行の書き方の解空間をグラフ構造で表す – グラフ構造ができたらダイクストラ法で解く • ダイクストラ法は最短経路探索が可能スタートゴール

Slide 20

Slide 20 text

AAの解空間のグラフ構造化 • 画像を短冊状に切る • AA一行の書き方の解空間をグラフ構造で表す • ノード数は「画像の位置」×「文字の種類」 • コスト（エッジ）は線画化した画像と画像化した文字間で Mean Squared Errorを算出したもの ... ... ... スタートノード（画像の左端）ゴールノード（画像の左端） ... ... ... あ v / A

Slide 21

Slide 21 text

これでAA１行のノード・エッジのグラフ構造ができる v あ v v ああ … 全文字分全文字とのリンク 1画素ずつずらして文字を配置。（文字がエッジになる）画像と比較（コスト） v v / あ A … 全文字分詳しく書くと全文字とのリンク

Slide 22

Slide 22 text

ダイクストラ法で解く • ノード・エッジのグラフ構造ができたらそれをダイクストラ法で解く • スタートノードからゴールノードまでの最短経路を見つけるための古典的アルゴリズム • 内部的にどう最短経路を見つけるかは割愛 • ノードとノード間のコスト（エッジ）が定義できれば解けるスタートゴール

Slide 23

Slide 23 text

githubにコードある • 詳しくはgithubにコードある – https://github.com/ya-no/asciiart.me • 画像を食わせるとHTMLが出力されるPython プログラム

Slide 24

Slide 24 text

Slide 25

Slide 25 text

文字列はUnicodeに変換 • Python2の話（AWS LambdaはPython2） • 文字コードはテキスト処理のはまりどころ • 外部から文字列を読み込んだら python内部では unicode で取り扱う – Unicode以外はバイト列として扱われる

Slide 26

Slide 26 text

Python高速化（numpy） • 行列演算できるところでfor文はダメ絶対 – 例）numpyのMean Squared Error計算 – 行列演算を使うと５～１０倍速くなった一緒だね for文行列演算

Slide 27

Slide 27 text

Matlab • だいぶんオワ（ｒｙ – 個人の感想です • まだまだ必要なことがある！ – 海外アカデミックのデモコード実行 • ホームエディションで個人でも扱える – 本体15000円、ツールボックス5000円安い！ – 家で趣味で動かすのにどうぞ

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Slide 30

Slide 30 text

django+angularJSの共存 • angularJS側で対応 – $interpolateProviderを使う • django側で対応 – djangoのverbatimタグでdjangoのテンプレートエンジン処理を無効にする

Slide 31

Slide 31 text

django+angularJSの共存方針 • djangoに任せる – DB、ルーティング、テンプレート、認証関係、 REST API • angularJSに任せる – テンプレート内の細かいViewとビジネスロジック

Slide 32

Slide 32 text

djangoの勉強 • CodingForEntrepreneurs.com – Djangoの動画学習サイト – 無料でもdjangoの基礎講座は全部見れるのでオススメ – サブスクリプションするとみたい動画が全部ダウンロードできるので短期間サブスクリプションするのもあり

Slide 33

Slide 33 text

• DVDのバイリンガルキャプション • Netflix Subtitles Extender for Japanese • コメディがいい – 弾丸トーク（フレンズ、ビッグバンセオリー）英語の勉強

Slide 34

Slide 34 text

Slide 35

Slide 35 text

AWS Lambda@Python • はじめはローカルでテスト – Lambdaはステートレスな１関数なので簡単 • 大体できたらLambda上でテスト – エラーログも十分見れる（CloudWatch） – デプロイはコマンド一発で5～１０秒程度でできる

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

LambdaUpload • コマンド一発でライブラリと自作スクリプトをZIPで固めて AWSにデプロイしてくれる – 使ってみたらとても便利だった • AWS Lambdaの関数アップロードをお手軽に - 銀の弾丸 – http://takamints.hatenablog.jp/entry/2016/03/09/launcher-script- for-the-aws-lambda-function • （※発表後追記：AWS公式にも便利なデプロイツールがあるそうです）

Slide 38

Slide 38 text

ご清聴ありがとうございました • ちゃんとデプロイする（nginx） • AAがでかいのでもっと小さく、よいものを – GraphCut／DeepLearningを使う – InterestPointの考慮（眼の周りの検知など） • 画像の線画化を高性能化 • LamdaでTensorflow（Keras）を動かす – aws lambda + serverless • ウェブアプリの勉強 – SNSシェア、ログイン機能、コメント、いいねランキング、・・・