【個人開発】鉛筆画の作画プロセスを生成するAI「スケッチメーカー」を作りました！



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スケッチメーカーでAIに鉛筆画のスケッチを描いてもらいました！<br><br>スケッチメーカーでは画像をアップロードすると、それをもとにAIが鉛筆画のスケッチを描いてくれます！ <a href="https://t.co/zRKASfmkuX">https://t.co/zRKASfmkuX</a> <a href="https://twitter.com/hashtag/%E3%82%B9%E3%82%B1%E3%83%83%E3%83%81%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#スケッチメーカー</a> <a href="https://t.co/clsHWlpcUZ">pic.twitter.com/clsHWlpcUZ</a></p>&mdash; 2z / AIメーカー (@2zn01) <a href="https://twitter.com/2zn01/status/1349882145276235776?ref_src=twsrc%5Etfw">January 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

---


明けましておめでとうございます。
趣味でWebサービスの個人開発をしている、2z（Twitter： [@2zn01](https://twitter.com/2zn01) ）です。

普段は以下のようなサービスを開発・運営していますので、興味があるものがございましたら、ぜひとも使ってみて頂けると嬉しいです！

* AIメーカー
https://aimaker.io/
誰でも簡単にAIを作ったり、試したりできるサービスです。
使ったAIを活用するためのAPIも提供していますので、ぜひご活用ください。

* 文字起こすくん
https://text.aimaker.io/recognize-bot/
画像、音声、動画をアップするだけで簡単に文字起こし・書き起こしできるサービスです。話者の識別も可能になりました！    

* テロップメーカー
https://text.aimaker.io/recognize-video/
動画をアップロードするだけで、動画内の音声を認識して文字起こしを行い、自動で動画に字幕・テロップをつけるサービスです。こちらも話者の識別が可能になりました！


# 今回作ったもの

今回は

この「AIメーカー」で鉛筆画の作画プロセスを生成するAIを試せる「スケッチメーカー」という機能を作りましたので、ご紹介します。

* スケッチメーカー    
https://watchclub.house/

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【お知らせ】<br>画像からAIが鉛筆画のスケッチをしてくれる「スケッチメーカー」という機能をリリースしました！🎉<br><br>写真やイラスト、Twitterのアイコンからもスケッチできるので、ぜひ試してみてくださいー！🙌<br><br>頑張って作ったので、いいねやRTしてくれると嬉しいです！🙏<a href="https://t.co/KWGHS8g2qt">https://t.co/KWGHS8g2qt</a></p>&mdash; 2z / AIメーカー (@2zn01) <a href="https://twitter.com/2zn01/status/1350226287726497793?ref_src=twsrc%5Etfw">January 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# 何ができるの？

画像をアップロードすると、その画像を鉛筆画として作画した際のプロセスを動画もしくはGIFアニメーションで生成することができます。

言葉で説明するよりも、実際に見てもらった方が分かりやすいと思います。

以下のように、画像をアップロードすると、画像を鉛筆画として作画するプロセスの動画が生成することができます。

![スケッチメーカー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273248/73bbf8a1-c40a-20df-1145-84b81899d07b.png)



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スケッチメーカーでAIに鉛筆画のスケッチを描いてもらいました！<br><br>スケッチメーカーでは画像をアップロードすると、それをもとにAIが鉛筆画のスケッチを描いてくれます！ <a href="https://t.co/zRKASfmkuX">https://t.co/zRKASfmkuX</a> <a href="https://twitter.com/hashtag/%E3%82%B9%E3%82%B1%E3%83%83%E3%83%81%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#スケッチメーカー</a> <a href="https://t.co/clsHWlpcUZ">pic.twitter.com/clsHWlpcUZ</a></p>&mdash; 2z / AIメーカー (@2zn01) <a href="https://twitter.com/2zn01/status/1349882145276235776?ref_src=twsrc%5Etfw">January 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


他にもこんな感じで生成することができます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スケッチメーカーでAIに鉛筆画のスケッチを描いてもらいました！<br><br>スケッチメーカーでは画像をアップロードすると、それをもとにAIが鉛筆画のスケッチを描いてくれます！ <a href="https://t.co/KFdaCgvcey">https://t.co/KFdaCgvcey</a> <a href="https://twitter.com/hashtag/%E3%82%B9%E3%82%B1%E3%83%83%E3%83%81%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#スケッチメーカー</a> <a href="https://twitter.com/hashtag/%E3%81%84%E3%82%89%E3%81%99%E3%81%A8%E3%82%84?src=hash&amp;ref_src=twsrc%5Etfw">#いらすとや</a> <a href="https://t.co/paDt5a5xl9">pic.twitter.com/paDt5a5xl9</a></p>&mdash; 2z / AIメーカー (@2zn01) <a href="https://twitter.com/2zn01/status/1350100118834298880?ref_src=twsrc%5Etfw">January 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# システム構成図

スケッチメーカーのシステム構成図は以下の通りです。

![スケッチメーカー-システム構成図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273248/d1ce8aa3-701f-b914-eeb0-16e8143d38cb.png)


Amazon Web Services（以下、AWS）を使ってサービスを構築しました。

大きな構成としては、主にユーザからのリクエストを受け付けるフロントサーバと機械学習の処理を取り扱うバックエンドサーバの2つです。


# 使用技術

### Linux

クラウドのホスティングはAWSで、EC2でサーバを立てています。
サーバのOSはLinuxでフロントサーバ側はAmazon Linux2、バックエンドサーバ側はUbuntuを使っています。

### Apache

webサーバはApacheを使っています。
Nginxもありますが、Apacheは普段から使っており、設定方法も把握しているため、いつも通りの安定の選択としました。


### MySQL（Amazon RDS）

データベースはMySQL（Amazon RDS）を使用しています。

### NFS（Amazon EFS）

各インスタンスでファイルを共有するため、NFS（ネットワークファイルシステム）として、Amazon EFSを使用しています。

### PHP

フロントサーバのプログラムはPHPを使って実装しています。

### Python

バックエンドサーバのプログラムはPythonを使っています。
また、フロントサーバ側からバックエンド処理を呼び出すためのAPIは、「FastAPI」というフレームワークを使って実装しています。

* FastAPI    
https://fastapi.tiangolo.com/ja/



# 仕組み

画像から鉛筆画の作画プロセスを生成する部分に関しては、以下の論文・コードをご覧ください。

* 論文    
[Sketch Generation with Drawing Process Guided by Vector Flow and Grayscale](https://arxiv.org/abs/2012.09004)
* コード    
GitHub上にコードも公開されています。    
[TZYSJTU / Sketch-Generation-with-Drawing-Process-Guided-by-Vector-Flow-and-Grayscale](https://github.com/TZYSJTU/Sketch-Generation-with-Drawing-Process-Guided-by-Vector-Flow-and-Grayscale)

[論文](https://arxiv.org/abs/2012.09004)によると、与えられた画像（I）をもとに3つの処理（ETF、Q、G）が行われ、最終的には出力（R）を得るという流れとなります。

![処理の流れ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273248/bdaf00af-e72d-fe24-7bcb-4df01e7bdec8.png)

また、そのプロセスで進捗を画像で出力していくことで、作画プロセス（制作過程）を見ることができます。

![制作過程](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273248/cb267309-dca8-8415-8aec-9e2b5985485a.png)

そして、最後に作画プロセスごとに出力されたすべての画像（コマ）を結合することで、動画およびアニメーションGIFを生成することができます。


もう少し詳しく仕組みを知りたい方は、日本語で記事を書いている方がいらっしゃいましたので、以下の記事をご覧ください。

* [AIで画像から鉛筆画を描く](http://cedro3.com/ai/sketch/)



# 最後に

今回は鉛筆画の作画プロセスを生成するAI「スケッチメーカー」について、ご紹介しました。
以下のURLよりぜひ試して遊んでみてください！

■URL
https://aimaker.io/sketch-art/

実際に試して頂いた方のスケッチはTwitterのハッシュタグ「 [#スケッチメーカー](https://twitter.com/search?q=%23%E3%82%B9%E3%82%B1%E3%83%83%E3%83%81%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC&src=typed_query&f=live) 」から見ることができます。皆さんもぜひ試して頂いた際には、試した結果をTwitterにシェアして頂けると嬉しいです！

また、このサービスに少しでも興味をもって頂けましたら、ぜひともフォローやいいね、リツイートで応援お願いします！

* はてなブックマーク
    * [この記事をブックマーク](https://b.hatena.ne.jp/entry/s/qiita.com/2zn01/items/5b8805e8791afe75f852)
    * [「スケッチメーカー」をブックマーク](https://b.hatena.ne.jp/entry/s/aimaker.io/sketch-art/)
    * [「AIメーカー」をブックマーク](https://b.hatena.ne.jp/entry/s/aimaker.io/)
* Twitter： [@2zn01](https://twitter.com/2zn01)
* Qiita： [@2zn01](https://qiita.com/2zn01)
* note： [@2zn01](https://note.mu/2zn01)


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スケッチメーカーでAIに鉛筆画のスケッチを描いてもらいました！<br><br>スケッチメーカーでは画像をアップロードすると、それをもとにAIが鉛筆画のスケッチを描いてくれます！ <a href="https://t.co/zRKASfmkuX">https://t.co/zRKASfmkuX</a> <a href="https://twitter.com/hashtag/%E3%82%B9%E3%82%B1%E3%83%83%E3%83%81%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#スケッチメーカー</a> <a href="https://t.co/clsHWlpcUZ">pic.twitter.com/clsHWlpcUZ</a></p>&mdash; 2z / AIメーカー (@2zn01) <a href="https://twitter.com/2zn01/status/1349882145276235776?ref_src=twsrc%5Etfw">January 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>