kivantium活動日記

プログラムを使っていろいろやります

絵を添削してもらった

響け!ユーフォニアムに登場するキャラクターの誕生日(1/7)に合わせてイラストを描きました。

f:id:kivantium:20220109061507p:plain:w600
描いたイラスト

描いている途中で創作+機械学習Advent Calendarで紹介されていた添削サービスの存在を思い出したので、ついでに添削をお願いしてみました。以下その記録です。

メイキング

響け! ユーフォニアムの作中に川沿いのベンチがたびたび登場します。このベンチは宇治川の河川敷に設置されている実在のベンチをモデルにしていて、ファンの間では久美子ベンチとして親しまれています。私も実際に見に行ったことがあります。

奏がこのベンチに座るシーンはアニメでは描写されていないと記憶しているので、その様子を描いてみようと思いました。 自分に画力が足りないことは分かっているのでとりあえず完成させることを目指してズルを重ねました。

久美子ベンチの作中での描写は真正面からの構図が多いのですが、正面顔を描くのが苦手な自覚があるので顔が斜めになるように斜めからの構図を選択しました。この発想がまずズルいです。

「久美子ベンチ」で検索して斜めから撮影している写真を探したら聖地巡礼の記録ブログにちょうどいい写真がありました。

blog.goo.ne.jp

この写真をiPadで表示してその上に紙を置き、だいたいの形をなぞりました。第二のズルです。 板などを適当に描いてから適当にキャラクターを置いて下書きとし、iPadのカメラで写真を撮ってクリスタに取り込みました。1月なので冬服にしました。

f:id:kivantium:20220107123106j:plain:w600
iPadで撮影した下書き

この時点では写真の影響で左からの構図でしたが、1期1話の久美子がベンチの上で驚くシーン(15:08あたり)が印象的だったのでそのシーンに合わせて左右反転して右からの構図にしました。 最初は写真の上に線画レイヤーを置いてフリーハンドでなぞり書きしていたのですが、線がまっすぐ引けなかったのでパース定規に頼ることにしました。これはクリスタの機能なのでズルじゃないと思います。

f:id:kivantium:20220107123921j:plain:w600
クリスタでパース定規を設定している様子

ベンチの板の横線を定規で引くことだけを考えていたため一点透視図法を選びました。定規のラインが下書きに合うようにアイレベルと消失点を調整してから、ベンチのラインをパース定規で引きました。横線以外は下書きに合わせてフリーハンドで描いてベンチの線画を終えました。

次に人物を描きます。誓いのフィナーレ終盤のバスのシーン(「悔しくて死にそうです!」の直前)で奏が右から写っていたのでそれを参考にして描きました。ただし、このシーンでは手足が隠れたり画面外に出たりしているので参考にすることができません。手足の描写を省略してバストアップの構図にすることも考えましたが、そうすると顔が大きくなるのでボロが出そうです。どうせ添削してもらうなら全身を描いたほうが勉強になると思ったのもあって足先まで描くことにしました。pixivで探すと近い構図のイラストがあったのでそれらを参考にしました。

参考にしたバスのシーンではコンクールに負けた直後で機嫌が悪かったので誕生日イラストにふさわしくない顔をしていました。画像を探したら去年の公式の誕生日イラストがポーズ的にもちょうどよかったのでこれを使いました。

これを見ながらラフを描いたのですが、どうしても似なかったので最終手段として顔画像をイラストに貼り付けて目・口・鼻の位置を修正しました。これは言い逃れできないズルです。

f:id:kivantium:20220109062149j:plain:w600
ラフ
f:id:kivantium:20220109062256j:plain:w600
位置を修正している様子

このラフから線画を書き起こしました。

f:id:kivantium:20220109062612j:plain:w600
線画

線画が完成したら残りは色を塗るだけです。お手本からスポイトで色を吸いつつ同じように下塗りをしました。

f:id:kivantium:20220109062657j:plain:w600
下塗り

乗算レイヤーや加算(発光)レイヤーを使いながらお手本になるべく近くなるように陰影やハイライトを入れました。手や足は参考にできるものがなかったので自力で塗りました。そのため下に行くにつれてどんどんクオリティが下がっています。

f:id:kivantium:20220109062948j:plain:w600
陰影やハイライトを入れた結果

ここからさらに久美子ベンチであることが分かるような背景を入れたかったのですが、自分の現在の画力では描けば描くほど絵が汚れていくだけだったので結局全て消しました。しかし、白だけだと寂しかったので作中の演出としてよく登場する水色の枠を入れて、それを完成品としました。出来上がったのが冒頭に貼ったイラストです。

添削をお願いする

創作+機械学習Advent Calendarに投稿されていたワカドリさんの記事sessaというサービスが紹介されていました。添削されたところで自分には再現できなくて意味がないのではないかと思っていましたが、物は試しで一度頼んでみることにしました。

添削者の募集

sessaの添削依頼には添削者を指定して依頼するモードと、添削内容を公開して添削者を募集するモードがあります。どの添削者が良いか分からなかったので募集モードを選びました。先生一覧を見ると相場は一回3000円くらいだったので3000円で募集しました。(決済画面になってから消費税が別途必要だと言われたのは体験が悪かったです)sessaのアカウントはTwitterと連携しているのですが、添削依頼は匿名で行われる仕組みになっているらしく、依頼中で明示しない限り依頼者のアカウントは分からないようです。また、添削者には守秘義務が課せられています。

依頼文は以下のように書きました。

響け!ユーフォニアムの久石奏が作中に登場するベンチ(通称久美子ベンチ)に座っている絵を描きました。顔はアニメの模写で、身体とベンチは複数の写真を参考にしました。

全体的に見てほしいですが、特に添削してほしいのは以下の4点です。
・スカートが身体に張り付いていて固く見えます。どうしたら柔らかい印象を出せるでしょうか。
・手と足は特に改善する必要があると思います。どのように修正すれば良いでしょうか。この姿勢で座っている参考資料を見つけるのに苦労したのでポーズ集等の良い資料をご存知でしたら合わせて知りたいです。
・陰影の入れ方がよく分かりませんでした。特に足と靴がうまく描けなかったのでほとんどベタ塗りのままになっています。
・背景がうまく描けなかったので白バックと図形で誤魔化しています。このベンチは河川敷に設置されていて、左側に木が生えており後ろに坂があるのが特徴です(「久美子ベンチ」で検索すると画像が出てきます)。この特徴が伝わるような簡単な描き方があれば知りたいです。

以上よろしくお願いします。

書き上がった直後に募集して一晩待っていたら翌朝には9人からの応募がありました。その中から応募コメントに具体的なことを描いてくれていた@reihou19さんを選んで依頼しました。添削実績が0件でどのような添削をする方なのか分からない点は不安でしたが、西宮神社を走るスーパークリークのイラストをTLで見かけたことがあったのが後押しになりました。

添削結果はsessaのサイトで公開されています(公開を許可しないこともできます)。ちなみに添削に出したイラストは冒頭に貼ったものより前のバージョンなのでベンチの上に影がなかったり青枠の位置がズレていたりと少し相違があります。

sessa.me

sessaでは添削結果の著作権は依頼者のものになるので、添削結果を自由に使うことができます。せっかくなので1枚ずつ見ていきます。

f:id:kivantium:20220107134406p:plain:w600
添削結果1枚目

背景の「簡単な書き方」を聞いたので適当に色を塗っただけの背景になることを想定していたのですが、想定以上のクオリティの添削結果が帰ってきました。3000円でここまでやってもらって良いんだろうか……。

f:id:kivantium:20220107134943p:plain:w600
添削結果2枚目

ズルしたところがしっかり見抜かれていて大変心苦しくなります。

  • 「ちゃんと京アニ風の顔立ちになっています」→スクショを下に重ねて位置調整したからです、ごめんなさい……
  • 「下に行くにつれて自信が無い感じになっています」→下に行くにつれて参考資料がなくなっていったからです……

f:id:kivantium:20220107135546p:plain:w600
添削結果3枚目

今回の添削で一番ドキッとしたのはこの3枚目です。

  • 「かなり高いところから、見下ろしていることになります」→画像にはありませんが、添削本文に「ざっくりですが、成人男性の目の位置くらいになっています。」という記述もありました。今回参考にした久美子ベンチの画像の撮影者を調べたらまさに成人男性でした。イラストだけからここまでズルが見抜かれてしまうものなんですね……
  • 「水平線が傾いている」→ベンチを描く時に一点透視図法のパース定規を使ったため、板の短辺のパースは一切考慮していませんでした。これもまたイラストを見るだけで見抜かれてしまうようです。

f:id:kivantium:20220107140452p:plain:w600
添削結果4枚目

  • 「3分割法」→全く意識していなかったのでいつも真ん中に主題を置いていました。そういえば写真のテクニックでそんな話を聞いたことがあるような気も……
  • 「ミディアムショット」→顔を大きく描くとボロが出ると思った逃げの姿勢が見抜かれています。
  • 「見て描いたとはいえ顔めちゃくちゃきれいですね」→ごめんなさい……。とはいえ塗りはスポイトで吸ったくらいで残りは真面目にやったのでそこだけは良いのかも……

f:id:kivantium:20220107141922p:plain:w600
添削結果5枚目

  • 「肘から先は、こちら側に向きます」→長袖だったので腕を描く時に肘の存在を意識していなかったのが見抜かれています
  • 「奏は久美子よりも胸が大きい設定だったと思う」→そんなことないだろうと思って検索したら「奏の胸は結構大きくて胸のことだけ久美子は奏を羨ましがってる」と書いてあるまとめブログが出てきたのでそういう設定らしいです。方言を敬遠して原作を読んでないにわかであることまで見抜かれました
  • ポーズ集の紹介はありがたいです(だらっとしたポーズカタログ3 ─なかよし女子高生の放課後

f:id:kivantium:20220107142652p:plain:w600
添削結果6枚目

  • 「光の方向は午後なので背中側からです」→実在の場所だから方角を考えるという発想は全くありませんでした。画面奥側に窓があるバスのシーンを見て奥に光源を設定した安易さが指摘されたようで耳が痛い……
  • 「右側は外側にシワシワしています」→参考にしたシーンを見返すと確かに反対側にシワが入っていました。これはちゃんと見ないとダメでした。

f:id:kivantium:20220107143305p:plain:w600
添削結果7枚目

  • 木→この説明を見ても描ける気がしませんが、これはそのうちできるようにならないといけないんだろう……
  • 石→写真を使うなんて邪道だと思っていましたが、この結果を見せられるとやり方を覚えるほうが良さそうです。どうせここまでズルを重ねているわけなので使えるものは徹底的に使うべきです

f:id:kivantium:20220107143720p:plain:w600
添削結果8枚目

  • 靴→頑張って書き直します
  • 「写真加工で作る風景イラスト」→出版されたのは知っていたものの写真加工はズルだと思って全く見ていなかった本。この技術は習得したほうがよさそう。
  • 「キャラ背景の描き方教室」→立ち読みしたときにレベルが高すぎて参考にならないと思って買っていなかった本。付録のペンがすごいという話をたびたび聞くので購入を検討してもよさそう。
  • 「背景画の描き方」→知らなかった本。かも仮面先生のイラストはたびたび見かけるので興味あります。

5枚目で紹介されてたポーズ集はこれです。

せっかくなので最後に添削結果を大きく貼っておきます

f:id:kivantium:20220109070555j:plain:w400
添削結果

添削してくれた方はユーフォニアム好きとのことで、非常に熱のこもった添削をしていただけました。ありがとうございました。

添削結果を参考に2022年はもっと練習したいと思います。うまくなりたい。

1/9 編集内容

  • 色塗り工程を追記
  • キャラクター名で検索したときに自分のイラストが上位に出てくると体験が悪いのでフルネーム呼びをなるべく避けた

はてなブログにAdventarのAdvent Calendarを埋め込む

現在開催中の創作+機械学習 Advent Calendar 2021で、AdventarのAdvent Calendarを埋め込んでいる人がいたのでやり方を調べてみました。

調べてみるとこのAdventarの埋め込み機能はnote向けに実装されている機能のようでした。

はてなブログはこの埋め込みに対応していないので自力でこの機能を再現する必要があります。 noteが生成したHTMLを読んだところ、次のHTMLを手動で入力すればはてなブログでも同様の埋め込みが実現できることが分かりました。

<iframe src="https://adventar.org/calendars/<カレンダーID>/embed" width="xxx" height="xxx" frameborder="0" loading="lazy"></iframe>

widthheightは明示的に指定しないとデザインが崩れました。最適な値はよく分かりませんがnoteでは620x362で表示されていたので同じ値を設定しておきます。

創作+機械学習 Advent Calendar 2021を例にすると次のようになります。

<iframe src="https://adventar.org/calendars/6442/embed" width="620" height="362" frameborder="0" loading="lazy"></iframe>

親要素にtext-align: centerを指定すると中央揃えできます(<center>タグでもいいですが既に廃止されているので避けたほうが良いらしいです)

<div style="text-align: center">
<iframe src="https://adventar.org/calendars/6442/embed" width="620" height="362" frameborder="0" loading="lazy"></iframe>
</div>

より良い方法があれば教えてください。

銀髪美少女botを作った

この記事は創作+機械学習 Advent Calendar 2021の1日目です。

はじめに

Deep Learningが画像認識コンテストで優勝して以降、機械学習をはじめとする人工知能技術の研究開発は一大ムーブメントとなり、第3次AIブームと呼ばれる状況にあります。このブログでは機械学習を二次元画像に応用した記事を何回か書いてきましたが、機械学習は画像だけではなく音声や言語など様々な分野で応用されています。このAdvent Calendarでは皆様に機械学習の創作への応用事例を紹介していただきます。どんな記事が投稿されるのか楽しみにしています。また、このAdvent Calendarを読んだ方の中に自分でも機械学習をやってみようと思ってくださる方が一人でもいらっしゃれば大変嬉しいです。

12/1時点では10名の方に参加表明をいただいています。参加者の皆様にはこの場を借りてお礼申し上げます。まだまだ枠に余裕がありますので、記事を読んで自分も参加したいと思った方は是非飛び入り参加してみてください。 adventar.org

二次元イラスト収集サイト にじさーち

この記事では現在開発中の二次元イラスト収集サイトにじさーちと、そのデータベースを利用して作った銀髪美少女botを紹介します。にじさーちの開発中のバージョンは記事にしていたのですが、現在のバージョンは記事にしていなかったのでここで紹介しようと思います。

nijisearch.kivantium.net

画像の収集

にじさーちはTwitterに投稿された二次元美少女イラストを収集の対象としています。Twitterに毎日投稿される数多くの画像の中から美少女イラストだけを収集するために機械学習を利用しています。収集対象かどうかの判定は2段階で行っています。まず最初にPyTorchでファインチューニングしたモデルをONNXで利用する - kivantium活動日記で紹介したSqueezenetを使ってイラスト or イラストではない の2クラス分類を行います。イラストであると判定された画像に対してさらにIllustration2Vecによってタグ付けを行い、girlを含むタグが付いた画像を美少女イラストと判定して収集対象にしています。全ての画像に対してIllustration2Vecを呼び出すと計算機の負荷が大きかったため、まず軽量なモデルでスクリーニングを行う運用になりました。

どのツイートに対してイラストを含むかの判定を行うかも問題になるのですが、今のところ絵師リストの監視や、フォロワーのRT・いいねなどを対象にしています。お気に入り数が多い画像ツイートをTweet検索を用いて取得する方法なども検討したのですが、イラストを含む画像のヒット率が低かったです。また、最近はシャドウバンによってイラストが検索結果に表示されないことが増えているため、イラストを描く人やイラストをよくRTする人のアカウントを直接監視することが今後より重要になっていくと考えています。なお、pixiv等で知らない絵師を発見した場合は手動で登録することもあります。

画像の表示

こうして収集したイラストはデータベースに登録され、Djangoを用いて構築されたサイトで表示されています。デザインにはBootstrapMasonryを利用しています。なお、Twitterに投稿されたツイートの表示は、Twitter開発者利用規約のI-Bで許可されており、 著作権法第四十七条の五で定められた軽微利用の範囲でサムネイル画像等の表示を行っています。

Twitter利用規約がなかなか厄介で、ツイートを表示するときにはDisplay Requirementsに従う必要があるほか、削除されたツイートの内容を表示してはいけないなどの細かい規定があります。これに従うためにツイートの表示にはTwitterが提供する埋め込み機能を利用し、サムネイル画像のキャッシュなどは持たないようにしているのですが、これによりサイトの動作がかなり重くなっているように感じています。読み込み速度の改善は大きな課題です。

f:id:kivantium:20211130130049p:plain:w600
画像詳細ページのスクリーンショット。Illustration2Vecによるタグの表示とツイート埋め込みによる画像表示を行っている https://nijisearch.kivantium.net/status/1461207355572383750/

また、現在はIllustration2Vecによるタグ表示が中心になっていますが、Illustration2Vecでタグ付けができるキャラクター数はかなり限られています。同一キャラクターを判定する機械学習モデルを現在開発中なので、これを用いてキャラクターの自動タグ付けを可能にしたいと思っています。

銀髪美少女bot

こうしてTwitterに投稿されたイラストを日々収集していたある日、銀髪美少女好きのフォロイーが「銀髪美少女を自動で収集したい」的な発言をしているのを見かけました。Illustration2Vecに silver hair タグが存在するので、銀髪美少女データベースが既に手元にある状態でした。こうしてにじさーちからスピンオフしたプロジェクトが銀髪美少女botです。

f:id:kivantium:20211130133901j:plain:w500
https://twitter.com/silverhair_bot

仕組み

にじさーちに登録された画像のうちsilver hairまたはwhite hairタグがついていて500回以上RTされているものを5分に1度ランダムに1つ選んでリツイートしています。銀髪と白髪は非常に似ていてほとんど区別がつかないため、このような運用にしました。また、新着画像がどちらかのタグを含んでいた場合は50いいね以上でリツイートするようにしています。こうすることで過去の名作と直近の作品がバランスよく閲覧できるだろうと考えています。なお、上記のルールを満たさなかった場合でも目視判定して手動でRTすることがあります。

f:id:kivantium:20211130135022p:plain:w400
silver hairタグでにじさーちを検索した例 https://nijisearch.kivantium.net/search/?&tag=silver%20hair

ちなみに、にじさーちはRSS機能を提供しているので特定のタグの新着画像をSlackチャンネルに投稿するなどの使い方もできます。タグ検索したときに出てくる「検索結果: XXXX件」の右側のRSSマークをクリックするとRSSが表示されます。(maidタグのRSSの例

今後の課題

まず、イラストかそうでないかの判定が甘いことが第一の課題です。よくある誤判定の例としては、コスプレ画像をイラストと判定してしまうミスがあります。コスプレ画像は人間が見ればひと目でイラストでない画像だと見抜くことができるのですが、イラストと似たような色合いになっているため機械学習はうまく区別することができないようです。誤判定した画像を学習データに加えて何度も再学習しているのですが、未だに数多くの誤判定が起こっています。また、そもそも何をイラストと定義するべきかの問題もあります。ソシャゲのスクリーンショットもよく誤ってリツイートしてしまうのですが、キャラクターが描写されているイラストであることには変わりありません。ソシャゲのスクリーンショットを負例に加えて学習すると全体として精度が落ちる懸念があるため、今のところ正例にも負例にも加えずに学習させています。ソシャゲ以外にも、アニメのスクリーンショットや漫画の購入報告・無断転載画像など、イラストではあるのだが収集したくない画像はたくさんあります。コミケサークルカットを収集するべきかどうかも微妙な問題でした。画像が投稿された文脈を理解して収集するかどうかを判断するのは機械学習には難しいので人手によるスクリーニングに頼っているのが現状です。

髪色の判定も微妙な問題です。同じ髪の色でも光の当たり方によっては別の色で塗られることがあります。銀髪や白髪は特に色が薄いので光の影響を受けやすいように感じています。髪色が微妙な場合は髪色のタグが何もつかないことが多いのですが、極端な場合は別の髪色タグがつくこともあります。

髪色判定に失敗する画像の例。設定上灰色の髪とされているキャラなのだが、blonde hairタグがついている (https://nijisearch.kivantium.net/status/1133960305183039488/)

また、水色の髪と銀髪の区別も難しいと感じています(誤判定されるイラストの例)。設定上の髪色が水色の場合でも、銀髪設定のキャラとほとんど同じ色で塗られることがあるのでキャラごとに設定上の色が何なのかを調べる必要があります。これは画像だけで判定するのが不可能なのでキャラ判定を導入しないと解決できないと考えています。

以上、機械学習を用いてイラストを収集する事例について紹介しました。明日は@amane_lyricさんの「そのキャラを好きになった理由を探る」です。お楽しみに。

pybind11とxtensorによるPythonとC++の連携

前回の記事でNumCppを試しましたが、全ての配列を2次元配列で扱う仕様がいまいちだったのでEigenを使ったほうが良さそうだという結論になりました。 kivantium.hateblo.jp

この記事ではxtensorという別のライブラリを試してみます。xtensorの開発はQuantStackという会社が中心になって行われているようです。Webサイトを見る限りJupyterLabなどのOSSを開発している会社のようですが、どうやって儲けているのかいまいち分かりませんでした……

インストール

READMEを見るとcondaでのインストールが推奨されているのですが、header-onlyライブラリなのでソースコードを落とすだけで使うことが出来ます。Pythonバインディングを使うためには3つのプロジェクトが必要になります。ここでは作業ディレクトリで以下のコマンドを実行した場合を説明します。

git clone https://github.com/xtensor-stack/xtensor.git
git clone https://github.com/xtensor-stack/xtl.git
git clone https://github.com/xtensor-stack/xtensor-python.git

簡単な例

前回と同様に足し算の例で試してみます。以下のC++コードを example.cpp という名前で保存します。

#include <pybind11/pybind11.h>
#include <xtensor/xmath.hpp>
#define FORCE_IMPORT_ARRAY
#include <xtensor-python/pyarray.hpp>

xt::pyarray<double> add_arrays(xt::pyarray<double>& input1, xt::pyarray<double>& input2) {
    return input1 + input2;
}

PYBIND11_MODULE(example, m)
{
    xt::import_numpy();
    m.def("add_arrays", &add_arrays);
}

コンパイルコマンドは以下の通りです。長いですが、pybind11のコンパイルコマンドをC++14向けに変更してxtensorのディレクトリを追加しただけです。

c++ -O3 -Wall -shared -std=c++14 -fPIC $(python3 -m pybind11 --includes) -I xtensor/include/ -I xtl/include/ -I xtensor-python/include/ -DNUMCPP_INCLUDE_PYBIND_PYTHON_INTERFACE example.cpp -o example$(python3-config --extension-suffix)

コンパイルしたC++コードを実行するPythonコードは以下の通りです。

import numpy as np
import example

a = np.asarray([1, 2, 3, 4]) 
b = np.asarray([2, 3, 4, 5])

print(example.add_arrays(a, b)) # [3. 5. 7. 9.]

期待通りの1次元配列 (numpy.ndarray) が返ってきています(戻り値のコピーが行われているかどうかは調べてないです)。

2次元・3次元の場合も期待通りの結果になります。

import numpy as np
import example

a = np.asarray([[1, 2], [3, 4]])
b = np.asarray([[2, 3], [4, 5]])
print(example.add_arrays(a, b))
# [[3. 5.]
#  [7. 9.]]

a = np.asarray([[[1], [2]], [[3], [4]]]) 
b = np.asarray([[[2], [3]], [[4], [5]]]) 
print(example.add_arrays(a, b))
# [[[3.]
#   [5.]]
# 
#  [[7.]
#   [9.]]]

EigenのときはVectorとMatrixを区別する必要がありましたが、xtensorは次元数に関わらず同じ関数が使えるのでよりNumPyに近い使用感を実現できています。 他の関数の使用感は確認していませんが、チートシートを見る限りではかなりNumPyを再現できているように見えます。また、BLASバインディングを提供するxtensor-blasというプロジェクトもあるようなので、速度を求める人の需要もある程度は満たせそうな気がします。もう少し試してみてもいいかもしれません。

pybind11とNumCppによるPythonとC++の連携

Pythonで書いたコードの速度が遅いときに一部の関数だけC++で記述したい場合があります。pybind11を使えばC++Pythonを比較的容易に連携させることができるのですが、NumPyオブジェクトをC++に渡したときの処理の記述が非常に面倒です。そこでNumPyのC++版として開発されているライブラリのNumCppを使って、NumPyオブジェクトの受け渡しを行う方法を検討しました。

TL; DR 現時点ではNumCppよりもEigenを使うほうが良さそうです

pybind11だけを使った場合

まずはpybind11だけでNumPyを使うとどうなるかについて説明します。pybind11ドキュメントのNumPyのページにある足し算を行う例を紹介します。

py::array_t<double> add_arrays(py::array_t<double> input1, py::array_t<double> input2) {
    py::buffer_info buf1 = input1.request(), buf2 = input2.request();

    /* shapeのチェックは省略 */

    auto result = py::array_t<double>(buf1.size);

    py::buffer_info buf3 = result.request();

    double *ptr1 = static_cast<double *>(buf1.ptr);
    double *ptr2 = static_cast<double *>(buf2.ptr);
    double *ptr3 = static_cast<double *>(buf3.ptr);

    for (size_t idx = 0; idx < buf1.shape[0]; idx++)
        ptr3[idx] = ptr1[idx] + ptr2[idx];

    return result;
}

行列の要素にアクセスするためにわざわざポインタを経由する必要がある上に、単なる行列の足し算をわざわざループで書き直す必要があります。この例は1次元配列でしたが、2次元以上になるとさらに処理が面倒になります。そこでC++の行列演算ライブラリを組み合わせて簡単に記述できるようにします。

pybind11は公式でEigenとの連携をサポートしているのですが、Eigenを使う方法は既に日本語解説が存在しているのでここではNumCppを使ってみます。

NumCppを使った場合

インストール

pybind11のインストールはpipを使う方法が一番簡単です。その他の方法はドキュメントのInstalling the libraryを参照してください。

pip install pybind11

NumCppはheader-onlyライブラリなのでファイルをダウンロードするだけです。ここでは作業ディレクトリにcloneすることにします。

git clone https://github.com/dpilger26/NumCpp.git

簡単な例

NumCppを使って二つの行列の和を求める関数を書いてみます。

以下のC++ファイルを example.cpp という名前で保存します。

#include <pybind11/pybind11.h>
#include <pybind11/numpy.h>

#include <NumCpp.hpp>

namespace py=pybind11;

py::array_t<double> add_arrays(py::array_t<double, py::array::c_style> input1, py::array_t<double, py::array::c_style> input2) {
    auto array1 = nc::pybindInterface::pybind2nc(input1);
    auto array2 = nc::pybindInterface::pybind2nc(input2);
    auto sum = array1 + array2;
    return nc::pybindInterface::nc2pybind(sum);
}

PYBIND11_MODULE(example, m) {
    m.def("add_arrays", &add_arrays);
}

Linuxの場合コンパイルは以下のように行います。

c++ -O3 -Wall -shared -std=c++14 -fPIC $(python3 -m pybind11 --includes) -I NumCpp/include/ -DNUMCPP_INCLUDE_PYBIND_PYTHON_INTERFACE example.cpp -o example$(python3-config --extension-suffix)

これはpybind11のコンパイルコマンドに NumCppのヘッダファイルの場所指定 (-I NumCpp/include/) と NumCppのpybind11オプション (-DNUMCPP_INCLUDE_PYBIND_PYTHON_INTERFACE) を追加してC++14を指定 (-std=c++14) したものです。CMakeを使う方法などもありますが、複雑なのでここでは解説しません。

コンパイルに成功すると example.cpython-***.so のようなファイルが生成されます。これを読み込むPythonプログラムは以下のようになります。

import numpy as np
import example

a = np.asarray([1, 2, 3, 4]) 
b = np.asarray([2, 3, 4, 5])
print(example.add_arrays(a, b).shape) # [[3. 5. 7. 9.]]  

正しく実行できているように見えるのですが、1次元配列同士の和なのに2次元配列が返ってきています。ドキュメントによると、NumCppのNdArrayクラスは2次元配列として実装されているため、1次元配列は1xNの2次元配列として扱う仕様になっているそうです。

2次元配列は問題なく処理できます。

import numpy as np
import example

a = np.asarray([[1, 2], [3, 4]]) 
b = np.asarray([[2, 3], [4, 5]])
print(example.add_arrays(a, b)) 
# [[3. 5.]
#  [7. 9.]]

しかし、3次元配列を渡すとエラーが起こります。

import numpy as np
import example

a = np.asarray([[[1], [2]], [[3], [4]]]) 
b = np.asarray([[[2], [3]], [[4], [5]]]) 
print(example.add_arrays(a, b)) 

エラーメッセージ

File: NumCpp/include/NumCpp/PythonInterface/PybindInterface.hpp
    Function: pybind2nc
    Line: 88
    Error: input array must be no more than 2 dimensional.Traceback (most recent call last):
  File "test.py", line 6, in <module>
    print(example.add_arrays(a, b)) 
ValueError: File: NumCpp/include/NumCpp/PythonInterface/PybindInterface.hpp
    Function: pybind2nc
    Line: 88
    Error: input array must be no more than 2 dimensional.

多次元配列についてのissueを見る限り3次元以上の配列はまだ実装されてなさそうなので、現時点でNumPy互換と呼ぶのはちょっと難しいかもしれません。

おまけ: Eigenを使った場合

参考としてEigenを使った場合を示しておきます。MatrixをRowMajorにすることと、VectorとMatrixを区別することだけ気をつければそんなに難しくないので、よりメジャーなEigenを使うほうが良い場合が多いと思います。

#include <pybind11/pybind11.h>
#include <pybind11/eigen.h>

#include <Eigen/Dense>

namespace py = pybind11;

using RowMatrixXd = Eigen::Matrix<double, Eigen::Dynamic, Eigen::Dynamic, Eigen::RowMajor>;

template <typename T>
T add_arrays(Eigen::Ref<const T> input1, Eigen::Ref<const T> input2) {
    return input1 + input2;
}

PYBIND11_MODULE(example, m)
{
    m.def("add_vectors", &add_arrays<Eigen::VectorXd>);
    m.def("add_matrices", &add_arrays<RowMatrixXd>);
}

Pythonはこんな感じです。

import numpy as np
import example

a = np.asarray([1, 2, 3, 4]) 
b = np.asarray([2, 3, 4, 5])
print(example.add_vectors(a, b))  # array([3., 5., 7., 9.])

a = np.asarray([[1, 2], [3, 4]])
b = np.asarray([[2, 3], [4, 5]])
print(example.add_matrices(a, b))
# array([[3., 5.],
#        [7., 9.]])

参考文献

1つ目の記事のコメントによるとxtensorというライブラリがあり、これもpybind11連携ができるようなのですが、インストールにcondaが必要そうなのでまだ試していません。誰か試していただけると嬉しいです。

追記 xtensorを試しました。condaは必要ありませんでした。 kivantium.hateblo.jp

創作+機械学習 Advent Calendar 2021 を開催します

このAdvent Calendarは創作(小説、漫画、アニメ、イラスト、映画、音楽、ゲーム等)と機械学習に関連した記事を投稿してもらい、優れた記事を書いた方に賞を贈呈する企画です。

2019年に@thetenthartさん主催の創作+機械学習LT会というイベントがあったのですが、コロナの影響で第2回が開催できていませんでした。そこで@thetenthartさんと@xbar_usuiさんの協力を得て、Advent Calendarという形で後継のイベントを企画させていただきました。皆様のご参加をお待ちしております。

adventar.org

f:id:kivantium:20211104124330p:plain:w600
告知画像(@yumu_7さんに作っていただきました)

ルール

  • 参加の意思表示はAdventarに記事公開日を登録することで行います。
  • 登録日になったら創作(小説、漫画、アニメ、イラスト、映画、音楽、ゲーム等)と機械学習に関連する記事を公開してください(追記: 「記事」はインターネット上で自由に閲覧できるものであれば形式は問いません。ブログ・動画・漫画などを想定しています。機械学習で生成した創作物のみでも良いですが、機械学習がどう使われているかが分かる解説があることが望ましいです。)
  • 2021年内に記事を公開された方を賞の審査対象とします(追記: 空き枠に後から登録することも可能です)
  • 2022年1月に参加者の相互投票で優秀賞を決定します。
  • 賞に関する連絡を送る場合がありますので、Twitter@kivantiumからのDMを受信できる状態にするか、メールアドレスなどの連絡先を記事中に記載してください。
  • 記事を投稿してくださった方にはコミケや技術書典等で出版する同人誌への投稿を後日依頼する可能性があります。

記事の書き方

  • 記事の冒頭に創作+機械学習 Advent Calendar 2021 の記事であることを明記してください。
  • 記事の内容は創作と機械学習に関連していればなんでもありです。未完成のものや企画案などでも大丈夫です。
  • 機械学習の定義はなるべく広く取ります。あなたが機械学習だと思うものが機械学習です。
  • 記事は日本語または英語で書いてください。
  • 一人で複数の記事を投稿しても問題ありません。カレンダーの枠が埋まった場合は2枚目を作成します。

テーマの例

  • 画像関係: 画像分類・画像生成・自動着色・超解像など
  • 言語関係: 小説生成・チャットボットなど
  • 音声関係: 音楽生成・声質変換など
  • 創作支援: 機械学習による創作支援ツールの紹介・ツールに支援されて作った作品の紹介など
  • その他: ゲームの自動プレイ・推薦システムの構築など

上に挙げた以外のテーマでももちろん大丈夫です。未完成のものやアイデア段階の記事も歓迎します。「〜というデータを集めて、自動で〜する機械学習モデルを作りたいと思っています。協力者募集」みたいな感じでも問題ありません。2019年のLT会のスライドも参考になると思います。

参考までに本ブログで関係しそうな過去記事を紹介しておきます。

賞について

以下の賞を用意しています。審査員特別賞を提供してくださる方がいらっしゃったら連絡してください。

  • 最優秀賞 (1名) 賞金20000円
  • 優秀賞(2〜3名)賞金10000円
  • 審査員特別賞
    • @kivantium賞(機械学習の使い方に新しさを感じる記事を書いた方に授与)
    • @thetenthart賞(創作支援に役立ちそうな記事を書いた方に授与)
    • @xbar_usui賞(機械学習を知らない人でも楽しめる記事を書いた方に授与)

賞金はAmazonギフトカードでの支払いを予定していますが、希望があれば銀行振込やビットコイン支払いなどにも柔軟に対応します。 皆様の投稿をお待ちしております。

【宣伝】創作と機械学習に関するDiscordサーバーがあるので、興味がある方はご参加ください。本Advent Calendarの運営についてもこのDiscordで議論しています

招待リンク: https://discord.gg/jQNXjkrqGU

FlaskでWebSocketを使う

WebSocketを使うとリアルタイム性の高いWebアプリケーションを作ることができます。今回はFlaskでWebSocketを使うライブラリのFlask-SocketIOを使って、複数のブラウザでテキストボックスを同期するアプリを作成します。

インストール

Flask-SocketIOはpipでインストールできます。

pip install flask-socketio

サンプル

Google Documentの同時編集みたいなイメージで、以下の機能を持つアプリを作成します。

  • 接続中のユーザー数が表示される
  • 接続中のユーザー全員でテキストボックスに入力した内容が同期される

DOMの操作はjQueryで行うことにします。作成したソースコードは以下の通りです。

server.py

from flask import Flask, render_template, request
from flask_socketio import SocketIO, send, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'

# cors_allowed_originは本来適切に設定するべき
socketio = SocketIO(app, cors_allowed_origins='*')

# ユーザー数
user_count = 0
# 現在のテキスト
text = ""

@app.route('/')
def index():
    return render_template('index.html')

# ユーザーが新しく接続すると実行
@socketio.on('connect')
def connect(auth):
    global user_count, text
    user_count += 1
    # 接続者数の更新(全員向け)
    emit('count_update', {'user_count': user_count}, broadcast=True)
    # テキストエリアの更新
    emit('text_update', {'text': text})


# ユーザーの接続が切断すると実行
@socketio.on('disconnect')
def disconnect():
    global user_count
    user_count -= 1
    # 接続者数の更新(全員向け)
    emit('count_update', {'user_count': user_count}, broadcast=True)


# テキストエリアが変更されたときに実行
@socketio.on('text_update_request')
def text_update_request(json):
    global text
    text = json["text"]
    # 変更をリクエストした人以外に向けて送信する
    # 全員向けに送信すると入力の途中でテキストエリアが変更されて日本語入力がうまくできない
    emit('text_update', {'text': text}, broadcast=True, include_self=False)


if __name__ == '__main__':
    # 本番環境ではeventletやgeventを使うらしいが簡単のためデフォルトの開発用サーバーを使う
    socketio.run(app, debug=True)

templates/index.html

<html>
  <head>
    <title>FlaskでWebSocket</title>
  </head>
  <body>
    <p>現在の接続者数<span id="user_count"></span></p>
    <textarea id="text" name="text" rows="10" cols="60"></textarea>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script type="text/javascript" charset="utf-8">
      var socket = io();

      // 接続者数の更新
      socket.on('count_update', function(msg) {
        $('#user_count').html(msg.user_count);
      });
      
      // テキストエリアの更新
      socket.on('text_update', function(msg) {
        $('#text').val(msg.text);
      });
      
      // テキストエリアが変更されると呼び出される
      $('#text').on('change keyup input', function() {
        socket.emit('text_update_request', {text: $(this).val()});
      });
    </script>
  </body>
</html>

グローバル変数で接続者数をカウントするのはスレッドセーフではないのですが、GitHubでの作者コメントを読む限りでは通常このコードで問題ないようです。

python server.pyで実行して、ブラウザの画面を複数開くと同期している様子を見ることができます。 入力や削除の様子まで同期されていることが分かると思います。

f:id:kivantium:20211018102437g:plain

以上です。

広告コーナー