tag:crieit.net,2005:https://crieit.net/tags/%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86/feed Crieitでタグ「画像処理」に投稿された最近の記事 2018-12-30T23:58:47+09:00 https://crieit.net/tags/%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86/feed tag:crieit.net,2005:PublicArticle/14702 2018-12-30T23:51:11+09:00 2018-12-30T23:58:47+09:00 https://crieit.net/posts/AI-waifu2x-multi <p>この記事は<a href="https://crieit.net/advent-calendars/2018/technology">個人開発サービスに用いられている技術 Advent Calendar 2018</a> の24日目です。</p> <hr /> <p><a href="https://crieit.now.sh/upload_images/b7cd2a7b0390f16e647143ecb198b14b5c28d9ba696b5.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/b7cd2a7b0390f16e647143ecb198b14b5c28d9ba696b5.png?mw=700" alt="waifu2x_ogp_jp.png" /></a></p> <hr /> <p>こんにちは、2z（Twitter： <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01">@2zn01</a> ）です。</p> <p>普段は会社員でWeb系の開発エンジニアとして働き、週末に趣味で個人開発をしています。</p> <p>昨年末に、画像・動画の解像度をあげてくれる「waifu2x-multi」というサービスを開発しました。</p> <p>■waifu2x-multi<br /> <a target="_blank" rel="nofollow noopener" href="https://waifu2x.me/">https://waifu2x.me/</a></p> <ul> <li>Before</li> </ul> <p><a href="https://crieit.now.sh/upload_images/b276150e28d0ae3f2595f098f39280945c28d9d887bf8.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/b276150e28d0ae3f2595f098f39280945c28d9d887bf8.png?mw=700" alt="miku_small_noisy_lanczos3.png" /></a></p> <p>　　　　↓</p> <ul> <li>After</li> </ul> <p><a href="https://crieit.now.sh/upload_images/b347814fd79c210e5bfa6cced5ce00055c28d9f7d8951.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/b347814fd79c210e5bfa6cced5ce00055c28d9f7d8951.png?mw=700" alt="miku_small_noisy_waifu2x.png" /></a></p> <hr /> <p>デモ動画は以下のYouTubeからご覧ください。</p> <p><a target="_blank" rel="nofollow noopener" href="https://www.youtube.com/embed/7O_BMgC0DjI">https://www.youtube.com/embed/7O_BMgC0DjI</a></p> <hr /> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">※今さらリリース報告です！画像をきれいに拡大する「waifu2x」というサービス/OSSがあります！一つ一つの画像を指定して変換するのが面倒なので、複数画像のアップロードに対応し、一括で変換できるサービスを作りました！！（2016年2月に）ぜひ使ってみてください！<a target="_blank" rel="nofollow noopener" href="https://t.co/REOo3XOEgV">https://t.co/REOo3XOEgV</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/yTUh63Nvmw">pic.twitter.com/yTUh63Nvmw</a></p>— 2z＠みんなのAI「AIメーカー」開発中 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1033628537033437184?ref_src=twsrc%5Etfw">2018年8月26日</a></blockquote> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">※今さらリリース報告の第2弾です！画像をきれいに拡大する「waifu2x」ですが、動画対応させてリリースしました！！（2018年2月ぐらいに）動画のコマごとに拡大するため、めっちゃ時間かかりますが、このプレビューではGPUサーバを10台同時に立てて並列処理させてます！<a target="_blank" rel="nofollow noopener" href="https://t.co/cCDWUcaS2X">https://t.co/cCDWUcaS2X</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/mSID2DjUE4">pic.twitter.com/mSID2DjUE4</a></p>— 2z＠みんなのAI「AIメーカー」開発中 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1033652915364233217?ref_src=twsrc%5Etfw">2018年8月26日</a></blockquote> <hr /> <p>この後に開発することになるAIメーカーはこの「waifu2x-multi」の開発を通して学んだことを活かして作っています。</p> <p>難易度的には、「 waifu2x-multi　＞　AIメーカー 」だと思っているので、AIメーカーを1か月ほどでリリースできたのはこの開発をしてたところが大きいです。</p> <p>この記事では、この「waifu2x-multi」で使っている技術をまとめたいと思います。</p> <h2 id="作ったもの"><a href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE">作ったもの</a></h2> <p>waifu2xというサービス／OSS（オープンソースソフトウェア）はご存知でしょうか？<br /> 簡単にいえば、AI（人工知能）を使って小さな画像を綺麗に拡大するサービスです。</p> <p>公式のwaifu2xは以下のURLでサービス提供されています。</p> <p><a target="_blank" rel="nofollow noopener" href="http://waifu2x.udp.jp/">http://waifu2x.udp.jp/</a></p> <p>また、GitHubでプログラムもオープンソースで公開されています。</p> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/nagadomi/waifu2x">https://github.com/nagadomi/waifu2x</a></p> <p>私が作ったものは、「waifu2x」のOSS（オープンソースソフトウェア）へ以下の機能を追加した、公式とは別の派生サービスになります。</p> <ol> <li>複数ファイルのアップロード・拡大機能</li> <li>動画の拡大機能</li> <li>専有サーバによる高速な拡大処理</li> <li>サイズ制限の緩和</li> </ol> <p>こちらは以下のURLで公開しています。</p> <p>■waifu2x-multi （上記1のみ対応）<br /> <a target="_blank" rel="nofollow noopener" href="https://waifu2x.me/">https://waifu2x.me/</a></p> <p>■waifu2x-multi Pro （上記1～4のすべてに対応）<br /> <a target="_blank" rel="nofollow noopener" href="https://mng.waifu2x.me/">https://mng.waifu2x.me/</a></p> <h2 id="画面／利用イメージ"><a href="#%E7%94%BB%E9%9D%A2%EF%BC%8F%E5%88%A9%E7%94%A8%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8">画面／利用イメージ</a></h2> <p>デモ動画は以下のYouTubeからご覧ください。</p> <p><a target="_blank" rel="nofollow noopener" href="https://www.youtube.com/embed/7O_BMgC0DjI">https://www.youtube.com/embed/7O_BMgC0DjI</a></p> <h5 id="・まとめて一括変換"><a href="#%E3%83%BB%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E4%B8%80%E6%8B%AC%E5%A4%89%E6%8F%9B">・まとめて一括変換</a></h5> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">※今さらリリース報告です！画像をきれいに拡大する「waifu2x」というサービス/OSSがあります！一つ一つの画像を指定して変換するのが面倒なので、複数画像のアップロードに対応し、一括で変換できるサービスを作りました！！（2016年2月に）ぜひ使ってみてください！<a target="_blank" rel="nofollow noopener" href="https://t.co/REOo3XOEgV">https://t.co/REOo3XOEgV</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/yTUh63Nvmw">pic.twitter.com/yTUh63Nvmw</a></p>— 2z＠みんなのAI「AIメーカー」開発中 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1033628537033437184?ref_src=twsrc%5Etfw">2018年8月26日</a></blockquote> <h5 id="・動画対応"><a href="#%E3%83%BB%E5%8B%95%E7%94%BB%E5%AF%BE%E5%BF%9C">・動画対応</a></h5> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">※今さらリリース報告の第2弾です！画像をきれいに拡大する「waifu2x」ですが、動画対応させてリリースしました！！（2018年2月ぐらいに）動画のコマごとに拡大するため、めっちゃ時間かかりますが、このプレビューではGPUサーバを10台同時に立てて並列処理させてます！<a target="_blank" rel="nofollow noopener" href="https://t.co/cCDWUcaS2X">https://t.co/cCDWUcaS2X</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/mSID2DjUE4">pic.twitter.com/mSID2DjUE4</a></p>— 2z＠みんなのAI「AIメーカー」開発中 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1033652915364233217?ref_src=twsrc%5Etfw">2018年8月26日</a></blockquote> <h2 id="なぜ開発したか？"><a href="#%E3%81%AA%E3%81%9C%E9%96%8B%E7%99%BA%E3%81%97%E3%81%9F%E3%81%8B%EF%BC%9F">なぜ開発したか？</a></h2> <h3 id="・waifu2xの凄さに驚いた"><a href="#%E3%83%BBwaifu2x%E3%81%AE%E5%87%84%E3%81%95%E3%81%AB%E9%A9%9A%E3%81%84%E3%81%9F">・waifu2xの凄さに驚いた</a></h3> <p>「waifu2x」は2015年5月17年に公開され、瞬く間に話題になりました。<br /> 作者の方が以下のブログ記事にまとめていらっしゃいます。</p> <p>■二次元画像を拡大したいと思ったことはありませんか？<br /> <a target="_blank" rel="nofollow noopener" href="http://ultraist.hatenablog.com/entry/2015/05/17/183436">http://ultraist.hatenablog.com/entry/2015/05/17/183436</a></p> <p>画像を綺麗に拡大する精度の凄さに驚きました。</p> <p>ちょうどディープラーニングが話題になり出した時期でもあり、私も興味を持ち、早速触ってみたのが開発のきっかけです！</p> <h3 id="・複数画像へ対応すればもっと便利！"><a href="#%E3%83%BB%E8%A4%87%E6%95%B0%E7%94%BB%E5%83%8F%E3%81%B8%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8C%E3%81%B0%E3%82%82%E3%81%A3%E3%81%A8%E4%BE%BF%E5%88%A9%EF%BC%81">・複数画像へ対応すればもっと便利！</a></h3> <p>「waifu2x」を触っているうちに、一つ一つの画像ごとにアップロードするのが大変と感じてました。</p> <p>そこで、複数画像の拡大に対応すれば、もっと便利に使えるのではと考えました！</p> <h3 id="・技術的な興味で動画対応させてみたかった"><a href="#%E3%83%BB%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E8%88%88%E5%91%B3%E3%81%A7%E5%8B%95%E7%94%BB%E5%AF%BE%E5%BF%9C%E3%81%95%E3%81%9B%E3%81%A6%E3%81%BF%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F">・技術的な興味で動画対応させてみたかった</a></h3> <p>「waifu2x」を使って動画拡大する試みをやっている方がいて、自分も挑戦してみたいと考えました。</p> <p>ただ、その試みもLinuxのコンソール上でスクリプトをたたいて実行するものしかなかったため、web上でできるようにすれば、利用者のハードルも下がると思い、作りました！</p> <h2 id="システム構成"><a href="#%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A7%8B%E6%88%90">システム構成</a></h2> <h3 id="・waifu2x-multi"><a href="#%E3%83%BBwaifu2x-multi">・waifu2x-multi</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://waifu2x.me/">https://waifu2x.me/</a></p> <p>＜特徴＞</p> <ul> <li>GPUインスタンスは全ユーザで共有</li> </ul> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/273248/a0874370-13e9-3721-b353-996264c4c44d.png" alt="waifu2x-multi-システム構成図.png" /></p> <ul> <li>ユーザがアップロードした画像はひとつのGPUインスタンスで変換処理してレスポンスを返すため、複数のユーザが同時に利用した場合は、その分、変換待ちが発生してしまう</li> </ul> <h3 id="・waifu2x-multi Pro"><a href="#%E3%83%BBwaifu2x-multi+Pro">・waifu2x-multi Pro</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://mng.waifu2x.me/">https://mng.waifu2x.me/</a></p> <p>＜特徴＞</p> <ul> <li>ユーザごとに専有のGPUインスタンスを生成</li> <li>複数インスタンスを同時に立てることもでき、その場合は画像／動画を並列に処理できる</li> </ul> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/273248/6add224c-a474-d563-fb64-424d9d0f9b21.png" alt="waifu2x-multi-Pro-システム構成図.png" /></p> <ul> <li>ユーザがアップロードした画像／動画はフロントサーバによってAmazon EFSへ格納してタスク化</li> <li>裏側で控えているバックエンドサーバによって、専有のGPUインスタンス（waifu2xサーバ）を立ち上げ、画像／動画の変換処理をwaifu2xサーバへ投げかける</li> <li>waifu2xサーバはタスクがすべて終わるまで、Amazon EFSに格納された画像／動画を変換処理していく</li> <li>変換処理がすべて終わったら、バックエンドサーバによってwaifu2xサーバのインスタンスを停止</li> </ul> <h2 id="動画変換の仕組み"><a href="#%E5%8B%95%E7%94%BB%E5%A4%89%E6%8F%9B%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF">動画変換の仕組み</a></h2> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/273248/6f7343a8-5f9b-0ad7-1484-24dc90101aeb.png" alt="waifu2x-multi-Pro-動画変換の仕組み.png" /></p> <ul> <li>ユーザからアップロードされた動画ファイルはwaifu2xサーバ上で、ffmpegを使って「各コマごとの画像」と「音声」へ分割</li> <li>各コマごとに分割された画像はすべてwaifu2xサーバで拡大処理</li> <li>すべてのコマ画像を拡大後、ffmpegを使って「変換後の各コマ画像」と「音声」を結合して動画を生成</li> </ul> <p>インスタンスの設定で起動数を指定できるようにしており、複数インスタンスを立ち上げた場合には、上記の画像の各コマの拡大は複数インスタンスで並行して処理されます。</p> <h2 id="使用している技術"><a href="#%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E6%8A%80%E8%A1%93">使用している技術</a></h2> <h3 id="Linux"><a href="#Linux">Linux</a></h3> <p>クラウドのホスティングは、Amazon Web Services（以下、AWS）を使用しており、Amazon EC2でサーバを立てています。<br /> サーバのOSはLinuxでAmazon Linux 2を使っています。</p> <p><a target="_blank" rel="nofollow noopener" href="https://aws.amazon.com/jp/ec2/" target="_blank" rel="noopener">Amazon EC2（安全でスケーラブルなクラウド上の仮想サーバー）| AWS</a></p> <h3 id="Apache"><a href="#Apache">Apache</a></h3> <p>フロントエンドのwebサーバはApacheを使っています。</p> <p><a target="_blank" rel="nofollow noopener" href="https://httpd.apache.org/" target="_blank" rel="noopener">Welcome! - The Apache HTTP Server Project</a></p> <h3 id="Nginx"><a href="#Nginx">Nginx</a></h3> <p>バックエンドのwebサーバはNginxを使っています。</p> <p><a target="_blank" rel="nofollow noopener" href="https://nginx.org/">https://nginx.org/</a></p> <h3 id="MySQL"><a href="#MySQL">MySQL</a></h3> <p>Amazon RDSを使ってMySQLを立てています。</p> <p><a target="_blank" rel="nofollow noopener" href="https://www.mysql.com/jp/" target="_blank" rel="noopener">fw_error_www</a></p> <p><a target="_blank" rel="nofollow noopener" href="https://aws.amazon.com/jp/rds/" target="_blank" rel="noopener">Amazon RDS（マネージドリレーショナルデータベース）| AWS</a></p> <h3 id="Amazon EFS"><a href="#Amazon+EFS">Amazon EFS</a></h3> <p>有料版ではマルチインスタンスで動くので、複数のインスタンスでデータを共有できるようにAWSのAmazon EFSというネットワークファイルシステムを使っています。</p> <p><a target="_blank" rel="nofollow noopener" href="https://aws.amazon.com/jp/efs/" target="_blank" rel="noopener">Amazon EFS（EC2 用フルマネージド型ファイルシステム）| AWS</a></p> <p>データが残り続けるとヤバイことになるので、1か月を経過したらデータは削除するようにしています。</p> <h3 id="PHP"><a href="#PHP">PHP</a></h3> <p>フロントサーバ側のプログラムはPHPを使って実装しました。<br /> フレームワークはZend Frameworkを使用しています。</p> <p><a target="_blank" rel="nofollow noopener" href="http://www.php.net/" target="_blank" rel="noopener">PHP: Hypertext Preprocessor</a></p> <p><a target="_blank" rel="nofollow noopener" href="https://framework.zend.com/" target="_blank" rel="noopener">Home - Zend Framework</a></p> <h3 id="LuaJIT"><a href="#LuaJIT">LuaJIT</a></h3> <p>バックエンドサーバ側のプログラムはLuaJITを使って実装しました。<br /> 僕もそんなに詳しくわけではなく、TorchがLuaJITで動くので、それで使っているだけです。</p> <p><a target="_blank" rel="nofollow noopener" href="http://luajit.org/" target="_blank" rel="noopener">The LuaJIT Project</a></p> <h3 id="Torch"><a href="#Torch">Torch</a></h3> <p>学技術計算の為の、機械学習ライブラリです。</p> <p><a target="_blank" rel="nofollow noopener" href="http://torch.ch/" target="_blank" rel="noopener">Torch | Scientific computing for LuaJIT.</a></p> <h3 id="waifu2x"><a href="#waifu2x">waifu2x</a></h3> <p>waifu2xのプログラム、学習済みモデルはGitHub上でオープンソースで公開されています。</p> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/nagadomi/waifu2x" target="_blank" rel="noopener">GitHub - nagadomi/waifu2x: Image Super-Resolution for Anime-Style Art</a></p> <h3 id="ffmpeg"><a href="#ffmpeg">ffmpeg</a></h3> <p>動画と音声、画像の変換に使用しています。</p> <ul> <li>動画　→　音声、コマごとの画像</li> <li>音声 ＋ コマごとの画像　→　動画</li> </ul> <p><a target="_blank" rel="nofollow noopener" href="https://www.ffmpeg.org/">ffmpeg</a></p> <h3 id="jQuery"><a href="#jQuery">jQuery</a></h3> <p>クライアント側のJavaScriptは、jQueryを使って実装しました。</p> <p><a target="_blank" rel="nofollow noopener" href="https://jquery.com/" target="_blank" rel="noopener">jQuery</a></p> <h3 id="Stripe"><a href="#Stripe">Stripe</a></h3> <p>有料版の課金の仕組みはStripeを使っています。<br /> JavaScirptとPHPの短いコードで導入できるので、簡単でした。</p> <p><a target="_blank" rel="nofollow noopener" href="https://stripe.com/jp">Stripe</a></p> <h3 id="Paypal"><a href="#Paypal">Paypal</a></h3> <p>海外の人からクレジットカードが使えないからPaypalも使えるようにしてよ！とお問い合わせがあったので、Paypalからの課金にも対応しました。<br /> これも実装の手間はそんなになく、Stripeと同じくくらい簡単に導入できました。</p> <p><a target="_blank" rel="nofollow noopener" href="https://www.paypal.com/">Paypal</a></p> <p>また、日本の方からはクレジットカードの情報を入れたくないので、Paypal対応してという声もありました。</p> <p>ちなみにStripeとPaypalの使用比率は半々ぐらいです。<br /> ただし、Paypalの使用率が高いのは海外の方が多いですね。</p> <h2 id="最後に"><a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a></h2> <p>今回、waifu2x-multiで使っている技術についてご紹介しました。</p> <p>ちなみにAWSのインスタンスを起動から停止まで管理するプログラムを書いたのはこのときが初めてです。<br /> リリースする前のデバッグ時には、インスタンスの制御に失敗してインスタンスが起動しっぱなしになってしまったこともあり、開発には色々と苦労しました。</p> <p>でも、そのときのノウハウがAIメーカーに活かされ、AIメーカーではインスタンスの管理に悩まされることはほとんどありませんでした。</p> <p>サービスを開発したときには、そのときに得られたノウハウ、ソースコードが自分の資産となります。<br /> サービスの開発スピードは、どれだけサービス作りの経験を積んできたかに尽きるかと思っています。自分の中でこうやれば作れるなというイメージができたら、こっちのもんです。</p> <p>最初はそのイメージが現実と乖離してリリースまで大変な目にあうこともあるかもしれませんが、やればやったほど、あ！これはあのときのこれを使えばいけるなぁ～！とかイメージがどんどん具体化していきます。</p> <p>また、それはソースコードの資産が貯まっているのもあいまって、指数関数的に開発スピードが速くなる可能性もあります。<br /> （これはもちろん、資産として使えるようにプログラムを書いていることが前提にはなりますが、、）</p> <p>なので、皆さんもどんどん自分のサービス作りをやっていきしましょう！</p> <hr /> <p>この記事に少しでも興味をもって頂けましたら、本ブログの<a target="_blank" rel="nofollow noopener" href="http://blog.hatena.ne.jp/no2z1/sukimanote.hatenablog.com/subscribe">読者登録</a>やTwitter： <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01">@2zn01</a>をフォローして頂くと更新の励みになります！</p> <p>よろしくお願いします！</p> 2z＠AIメーカー