【超訳】Free-Form Image Inpainting with Gated Convolution【論文まとめ】
はじめに
前回、FC-FEGANのまとめをしたが、これはDeepfillv2の正統進化だったので、Deepfillv2の論文も読む必要がある。論文の内容自体は落合先生の論文のまとめ方を使って簡単に済ませ、アーキテクチャ全振りでまとめる。ちなみに、この論文は下のFigure 1のようなことができる。
論文
どんなもの?
自由な形のマスクで画像を消して、ユーザの好ましい方向性の編集になるようなガイド線を与えることで、画像を補間・修正することができるシステム。 ユーザの不必要な部位を取り除き、画像のレイアウトを修正し、透かしをきれいにし、顔を編集し、そして画像内に新しいオブジェクトをインタラクティブに作成することができるようになる。
先行研究と比べてどこがすごい?
最新の論文に比べて、Places2の自然画像とCelebA-HQの顔画像において、より高品質に自由に画像編集ができるようになった。さらに、semantic(意味のある)、Non-Local(局所的でない)、Free-Form Masks(自由な形のマスク)、User-Guided Option(ユーザが指定できる)である。
技術や手法のキモはどこ?
従来の畳み込みの欠点であった、マスク部分とそうでない部分(さらにその境界)を区別せずに全ての入力を同じフィルタで等価に扱うことをGated Convolutionで克服した。さらに密な画像のパッチにおいて、スペクトルを標準化するSN-Patch GANを提案し、シンプルな式で高速に、安定的に訓練することができるようになった。
どうやって有効だと検証した?
Places2の自然画像とCelebA-HQの顔画像を他手法とを物体の消去、画像編集で比較。また、50人に対して、画像が本物画像か生成画像かを判定してもらう調査で、88.7%が生成画像を本物と信じた。ちなみに本物画像の本物判定率は94.3%である。
議論はある?
特に見当たらない。あえていうなら、Global Discriminatorは本当に必要ないのか。SC-FEGANを読んだ後だと、髪やイヤリングなどの複雑な構造を復元できないことと、色を入力に受け取れないこと、大部分を消去してゴリゴリとスケッチ描いて復元できなさそうなところ。
次に読むべき論文は?
Guilin Liu, Fitsum A Reda, Kevin J Shih, Ting-Chun Wang, Andrew Tao, and Bryan Catanzaro. 2018. Image Inpainting for Irregular Holes Using Partial Convolutions. arXiv preprint arXiv:1804.07723 (2018).
Takeru Miyato, Toshiki Kataoka, Masanori Koyama, and Yuichi Yoshida. 2018. Spectral normalization for generative adversarial networks. arXiv preprint arXiv:1802.05957 (2018).
かな。あとSC-FEGAN(未来形)。
アーキテクチャ詳細
Gated ConvolutionとSN-Patch GANをまとめる。
Gated Convolution
なぜ普通のCNNは自由形式の画像編集がダメなのか
入力をチャンネルとして、座標におけるチャンネルのマップを出力する普通のCNNは以下のように計算される。
ただし、はそれぞれ出力マップの軸、軸であり、とはカーネルサイズ、、は畳み込みフィルタ、とは入力と出力を表す。簡単のため、バイアスは無視した。 普通のCNNでは同じフィルタが全ての位置に適用されて出力が計算される。画像分類や物体検出では問題ないが、画像編集では穴の外側に有効なピクセルがあったり、マスク部分は浅い層では不鮮明なピクセル、深い層では合成されたピクセルとなっている。これは訓練時に曖昧さを発生させ、色のずれやブラー、はっきりとしたエッジへの反応(ジャギ)のような、視覚効果をもたらしてしまう(ここ参照)。
Partial Convolution(部分畳み込み)
近年、部分畳み込みベースのアーキテクチャが提案され、有効なピクセルのみを畳み込むようにマスキングと再標準化が行われる。数学的には以下のようになり、
はそれぞれのバイナリマスク(0無効、1有効)を表し、は要素ごとの積(アダマール積)を表す。部分畳み込み後に、マスクを更新する必要があり、以下の式によって、新しいが伝搬する。
部分畳み込みは不定形のマスクの画像編集を改善したが、問題が残った。
- 有効・無効をヒューリスティックに全ての空間を分類する(0か1のみで、マスクの大きさが考慮されない)。
- 追加のユーザの入力を受け取るのに適さない。
Gated Convolution(ゲート付き畳み込み)
画像編集ネットワークのためのゲート付き畳み込みを提案した。制約の強いマスクの更新式の代わりに、ゲート付き畳み込みは自動的にデータから柔軟にマスクを学習する。次の式で表すことができ、
ただし、は出力を0から1にするためのシグモイド関数で、は活性化関数(ReLUまたはLeakyReLU)である。とは異なる畳み込みフィルタである。
ゲート付き畳み込みは、それぞれのそれぞれのチャンネルとそれぞれの空間位置に対して、動的に特徴選択の構造を学習することができる。興味深いことに、背景、マスク、スケッチだけではなく、いくつかのチャンネルではセマンティックセグメンテーションも学習する(Figure 3)。深い層ではゲート付き畳み込みはマスクされた領域とスケッチ情報をそれぞれのチャンネルで強調するように学習し、良い画像編集結果を生成する。
SN-Patch GAN
様々な形・場所における複数の穴を自由に画像編集するタスクを考える。global and local GANs、MarkovianGANs、perceptual loss、spectral-normalized GANsより、SN-Patch GANという自由な形式で画像編集できるネットワークを開発した(Figure 4)。
Markovian patchesの特徴統計を捉えるために、カーネルサイズ5でストライド2の畳み込みを6層重ねた。そして、の異なる場所とセマンティクスに注目した特徴マップにGANを直接適用した。我々の訓練データではそれぞれの場所の領域が入力画像全体を覆うので、グローバルDiscriminatorが重要ではなかった。
近年提案された重みを標準化するテクニックとして、spectral normalizationを採用し、より安定的な訓練を確立した。本物か偽物か見分けるために、目的関数としてヒンジ損失を用いた。
ただし、はspectral-normalized discriminatorであり、は画像編集のネットワークで不完全画像を受け取る。6つの損失を使うPartialConvとは異なり、pixel-wise 再構築損失とSN-PatchGANの損失のハイパーパラメータ1:1の目的関数とした。
終わりに
Gated Convolutionの普通のConvolutionが画像編集・修復ではダメな理由の議論が面白い。しかし、人間は普通のCNNとGatedを意識して切り替えずに、写真を見て画像を想像上で編集できるし、訓練を積めば自由に写真を元にして絵を描くことができる。今の深層学習はアーキテクチャをタスクに合わせて変えていってるけど、人間はもっと汎用的にタスクをこなしているはずだ。でもこの汎用的ってなんなのかね?やっぱり計算機はシリコン製だからシリコン脳として作る必要があるのかな。
この形式いいね。毎日書けそう(書けない)。
【超訳】SC-FEGAN: Face Editing Generative Adversarial Network with User's Sketch and Color【論文まとめ】
前略
SC-FEGAN1がQiitaで紹介2されており、素晴らしい画像の変換精度で驚いた。ハゲをフサフサにするところは笑ったけど。 実装意欲が湧いてきたので、論文を読んで超訳英語を書いたので、ここに残す。私の英語スキルは微妙なので注意。また、超訳どころか、ところどころ異次元翻訳してます(産業界での問題点とかそういう部分ね)。間違ってたらこっそり教えてください。
論文まとめ
概要
自由なマスクやスケッチ、色を与えることで、画像を編集することができる最新のシステムを開発した。従来とは異なり、自由な色や形を入力として使うことができる。スタイル損失を追加したネットワークを訓練することで、大部分を消去しても、現実的な画像を生成できる。我々の提案したSC-FEGANはユーザーの直感的な入力で高品質な画像を生成することに適している。
導入
既存の技術と提案手法の紹介
- Deepfillv23 : スケッチの入力を受け取れる。色は入力に受け取れない。
- GuidedInpating4 : 他の部分画像の入力を受け取り、欠損部を修復する。細部を修復できない。
- Ideepcolor5 : 白黒画像に対して、色の入力を受け取れる。オブジェクトの構造を変えたり、欠損部を修復できない。
- FaceShop6 : スケッチと色を入力として受け取れる。修復部分のエッジがいびつになる。大部分が消されていると意味のある合成画像を生成できない。
SC-FEGAN(提案手法) : SN-patchGANのDiscriminator使用(エッジの歪みを改善できる)。大部分が消されても顔画像を編集できるように従来の損失のみならず、スタイル損失を同時に使う。スケッチと色を入力として受け取れる。
提案手法の概要
関連技術
市販の画像編集ソフトによる加工はプロじゃないとできないよね。だけど、GANの進化で絵が下手くそな俺にも簡単に編集できるようになってきたぜ! 深層学習を使用した流行りの画像編集手法のうち、画像補間と画像変換の分野の成果について話すよ!(異次元翻訳)
画像変換
画像補間 : 画像補間は、1)消去部分を補間する、2)ユーザの入力に対して適切に画像を補間する、の2タスクがある。過去の研究で、消去部分の補間画像の生成が試みられた。
- U-netを使用したアーキテクチャ11 : U-netとローカル・グローバルDiscriminatorを使用した。新しく塗りつぶした部分と完全に補間された画像のそれぞれ両方に対して、Discreminatorは生成画像が本物か偽物かを判断する。
- Deepfillv112 : 四角いマスクとグローバル・ローカルDiscriminatorを使用して、コンテクストなattentionを使用することで、性能が大きく上がった。しかし、エッジの修復が雑。
- Deepfillv2 : Deepfillv1から、四角いマスクをフリーフォームのマスクに、ローカル・グローバルDiscriminatorをSN-patchGANのDiscriminatorに変更した。さらにマスク部分を学習するGated Convolutional layerを使用した。 提案したネットワークはDeepfillのCoarse-Refined netではなくU-netを使用した。end-to-endで学習できるようになった。
手法
トレーニングデータ
CelebA-HQ13データセットを使用。 29000枚の2セットのトレーニングデータセットと1000枚のテストデータ。512×512にリサイズしてからスケッチや色を適用した。 目を精細に表現するために目の部分のフリーフォームマスクを使用した。また、適切なスケッチと色をsegmentation GFC14で作成(重要ステップ)。髪の部分は顔のパーツと形などが異なるので、ランダムにマスクを適用した。
- 目の部分のフリーフォームマスク : Deepfillv2に似た手法を使った。ただし、顔画像を訓練する際に、目の複雑な部分を表現するために、目の部分が始点となるようにランダムなフリーフォームマスクを適用した。また、ランダムにGFCを使って髪のマスクを追加した。
- スケッチとカラードメイン : スケッチと色についてはFaceShopに似た手法を使用した。ただし、ビットマップをベクタに変換するAutoTrace15ではなく、HEDエッジ検出器16を使用して、ユーザの入力を顔画像に変換するスケッチ画像を生成するようにした。
その後、曲線部をスムージングして細かいエッジを消去。カラー画像の生成は3サイズのメディアンフィルタを適用後、20回バイラテラルフィルタを使用。GFCでセグメント化し、各セグメントの中央値の色を適用。 スケッチデータを作るときには、ヒストグラム均等化をして、HEDをかける。曲線はスムージングして、小さいオブジェクトは消す。 最後に、上述した処理によって得られたフリーフォームマスクとカラー画像を乗算し、カラーブラシした画像を取得する(Figure 2)。
ネットワークアーキテクチャ
U-netとSN-patchGANを基にしたネットワーク。end-to-endであり、512×512の画像に対して、高品質な画像を生成し、安定的で高速な学習ができるようになった。 入力は以下の通り(詳細は下のGenerator、Discriminatorの項目にある)。
- Generatorが受け取る入力
- RGB画像
- マスクを挿入した画像
- Discriminatorが受け取る入力
- 補間済み画像
- オリジナル画像
敵対的トレーニングを向上するために、Discriminatorにユーザーの入力を与えた。従来のGANに様々なロスを追加した。
Generator
- U-netを使用した。
- 各層はGated Convolution Layerを使用した。その後ろに入力と出力以外全てにLRNを適用した。
- エンコーダの入力(512×512×9)について、
- 編集部をマスキングしたRGB画像(3チャネル)、
- 消去領域の構造を説明するバイナリスケッチ(1チャネル)、
- マスクのカラー画像(3チャネル)、
- バイナリマスク(1チャネル)、
- マスク部をノイズ(1チャネル)。
- 2ストライドで7回ダウンサンプル。
- アップサンプルの前にdilated convolutionsを適用した。
- 逆畳み込み(transposed convolutions)でアップサンプルした。
- 出力以外のそれぞれの層でleaky ReLUを適用し、出力はtanhとした。
- 結果的に16層のネットワークで、512×512のRGB画像を出力した。
- ロス計算前に生成画像に対して、マスク領域以外を元画像に戻した。
- Generatorの損失はPartialConv17のもので、per-pixel losses, perceptual loss, style loss, total variance lossと一般的なGANの損失を適用。
- Figure 3のようになる。
Discriminator
DiscriminatorはSN-PatchGANの構造を使用した。Deepfillv2とは違って、GANの損失にReLUは適用しなかった。また、3×3の畳み込みカーネルを使用して、gradient penalty lossを適用した。Discriminatorがゼロに近い値のパッチを出力しないように、式を追加した。以下の式が、損失関数の全容である。
Generatorはによって、Discriminatorはによって訓練される。とは追加の損失で、髪型のような大きな領域を編集する場合に重要である。各項は以下の通りである。
Ground truthとGeneratorの距離
であり、は特徴量の数、はバイナリマスクマップ、はGeneratorの出力である。消去部分により大きな重みを与えるためにを使った。
知覚損失
距離であるが、ImageNetで事前学習済みのVGG-1618の特徴空間に射影した後の画像から計算する。
は入力が与えられた時の、VGG-16の番目の特徴マップであり、は消去されていない部分を直接Ground truthにしたの補間画像である。はVGG-16から選択された層で、pool1、pool2、pool3を使用した。
スタイル損失
グラム行列を使って2画像の内容を比較する。スタイル損失は以下の式で計算され、
はグラム行列であり、VGG-16のそれぞれの特徴マップの自己相関を計算する(はとのどっち?)。特徴マップがの形状の時、グラム行列の出力はの形状となる。
総変動損失
はfast-neural-style19で提案され、知覚損失からのcheckerboard artifacts(GANでよく見るチェス盤のような変な縞模様、ご注文は機械学習ですか?の記事20で紹介された英語記事21がわかりやすい)を改善する。以下の式で計算され、
は消去部分の領域である。
WGAN-GP22の損失
WGAN-GPの損失は訓練を改善し、次の式で計算される
はとからのDiscreminatorの入力間の直線に沿って、均等にサンプルされたデータ点である(つまり、生成画像と本物画像の間の直線を均等にサンプルした点のことで、Qiitaの記事23がわかりやすい)。この式は生成画像を高品質にするのに重要である。
我々の研究では、を使用した。
結果
近年の成果と顔編集の結果を比較した。全ての実験はNVIDIA(R) Tesla(R) V100 GPU、Power9 @ 2.3GHz CPU、Tensorflow v1.12、CUDA v10、Cudnn v7、 Python3で行った。テストでは、入力のサイズと形状に関わらず、512×512の解像度を得るのに、GPUで44ms、CPUで53msかかった。 (ソースコードはここ)。
画像を除去した場合の結果比較
Coarse-Refined構造とU-netの構造の結果を比較した。Deepfillv2で使われたCoarse-Refined構造は修復段階で出力にブラーをかけた。これは出力の損失が常にcoarse networkの損失よりも小さいためであることを我々は発見した。coarse networkは不完全画像を使って修復領域の粗い推定を生成する。この粗い画像はrefined networkに渡される。このような仕組みで、Ground truthと不完全画像の粗い修復の間の変換をrefined networkに学習させる。畳み込み処理によってこれを実現するために、入力データへのブラー処理は簡易的な方法として行われる。checkerboard artifactsは改善されるが、多くのメモリと訓練時間を要する。 Figure 4に我々のシステムにCoarse-Refined構造のネットワークを使用した結果を示した。我々のシステムは知覚損失とスタイル損失によってその問題を改善している。Figure 5はVGGの損失の有無の比較結果である。最近の研究であるDeepfillv1の公開されたテストシステムとの比較も行なった。Figure 6はフリーフォームマスクにおいて、構造と形状の質が良い結果となったことを示している。
顔画像の編集と修復
Figure 7はスケッチと色の入力による様々な結果を示している。 - 直感的にヘアスタイル、顔、眼、口の顔画像の特徴の編集ができることがわかる。 - 大部分が消されていても、ユーザによるスケッチが与えられれば、正しい結果を生成することができる。 - ネットワークは小さな描画誤差は許容するので、ユーザは直感的にスケッチや色で編集できる。 - ユーザは直感的に顔画像を編集でき、影や細かな形状も反映したリアルな生成画像を、スケッチと色の入力から得ることができる。 Figure 9はユーザが大部分を編集しても、十分な入力があれば、高品質な合成画像を得ることができることを示している。
さらに、ネットワークの学習のデータセットに対する依存度を確認するために、全ての領域を消去して実験した。Deepfillv1は顔画像の不鮮明な画像を生成したが、SC-FEGANは髪の不鮮明な画像を生成した(Figure 10)。 これは、スケッチや色のような追加情報がなければ、顔の要素の形や位置は、ある依存値を持つことを意味する。よって望ましい方向性に画像を修復するためには追加の情報を追加することのみが必要である。 さらに、SC-FEGANは多くの部分が消された画像を入力としても、自由なスケッチと色の入力のみで顔画像を生成できる(Figure 10)。
興味深い結果
GANはしばしば訓練データに強く依存した画像を生成する。Deepfillv2は同じCelebA-HQデータセットを使用したが、スケッチデータセットの作成にはlandmarkのみを使用した。Faceshopにおいて、AutoTraceはデータセットの小さい細部を消去した。我々の研究では、全ての領域にHEDを適用し、マスク領域にそれを拡張するようにすると、イヤリングを伴った顔画像を生成する素晴らしい成果を得ることができた。Figure 8にそのような興味深い結果を示した。これらの例は、我々のネットワークが小さい細部の学習が可能であり、小さな入力であっても、意味のある結果を生成することを示している。
まとめ
この論文では、フリーフォームマスク、スケッチ、色の入力をとり、end-to-endで学習可能な最新のGANの損失を持つ生成ネットワークによる、最新の画像編集システムを紹介した。他の研究との比較により、我々のネットワークの構造と損失関数が画像修復(inpainting)結果を大きく改善することを示した。celebA-HQに基づく高解像度の画像を使って訓練し、多くのケースで様々な良い現実的な編集画像を得られることを示した。我々のシステムは一度の処理(end-to-end)で、大きな領域の編集と修復に対して素晴らしい成果を示し、ユーザは簡単に高品質で現実的な結果を得ることができる。
終わりに
上手く巨人の肩に乗った成果で、この論文だけでも最近のGANについて色々と勉強できた。
調べている最中、この記事の論文の調査とまとめ方がいいなと思った。特にこのスライドの48ページのまとめ方は簡単でいい。これからは簡単に論文を紹介していくのも面白いかな(でないとサボりがち)。
-
Youngjoo Jo, Jongyoul Park. SC-FEGAN: Face Editing Generative Adversarial Network with User’s Sketch and Color. **arXiv preprint arXiv:1902.06838, 2019.↩
-
J. Yu, Z. Lin, J. Yang, X. Shen, X. Lu, and T. S. Huang. Free-form image inpainting with gated convolution. arXiv preprint arXiv:1806.03589, 2018.↩
-
Y.Zhao,B.Price,S.Cohen,andD.Gurari.Guidedimagein- painting: Replacing an image region by pulling content from another image. arXiv preprint arXiv:1803.08435, 2018.↩
-
R. Zhang, J.-Y. Zhu, P. Isola, X. Geng, A. S. Lin, T. Yu, and A. A. Efros. Real-time user-guided image colorization with learned deep priors. arXiv preprint arXiv:1705.02999, 2017.↩
-
T. Portenier, Q. Hu, A. Szabo, S. Bigdeli, P. Favaro, and M. Zwicker. Faceshop: Deep sketch-based face image edit- ing. arXiv preprint arXiv:1804.08972, 2018.↩
-
O. Ronneberger, P. Fischer, and T. Brox. U-net: Convo- lutional networks for biomedical image segmentation. In International Conference on Medical image computing and computer-assisted intervention, pages 234–241. Springer, 2015.↩
-
P. Isola, J.-Y. Zhu, T. Zhou, and A. A. Efros. Image-to-image translation with conditional adversarial networks. CVPR, 2017.↩
-
J.-Y.Zhu,T.Park,P.Isola,andA.A.Efros.Unpairedimage- to-image translation using cycle-consistent adversarial net- workss. In Computer Vision (ICCV), 2017 IEEE Interna- tional Conference on, 2017.↩
-
Y. Choi, M. Choi, M. Kim, J.-W. Ha, S. Kim, and J. Choo. Stargan: Unified generative adversarial networks for multi- domain image-to-image translation. In The IEEE Conference on Computer Vision and Pattern Recognition (CVPR), June 2018. ↩
-
S. Iizuka, E. Simo-Serra, and H. Ishikawa. Globally and locally consistent image completion. ACM Transactions on Graphics (TOG), 36(4):107, 2017.↩
-
J. Yu, Z. Lin, J. Yang, X. Shen, X. Lu, and T. S. Huang. Generative image inpainting with contextual attention. arXiv preprint arXiv:1801.07892, 2018.↩
-
T. Karras, T. Aila, S. Laine, and J. Lehtinen. Progressive growing of gans for improved quality, stability, and variation. arXiv preprint arXiv:1710.10196, 2017. ↩
-
Y. Li, S. Liu, J. Yang, and M.-H. Yang. Generative face completion. In The IEEE Conference on Computer Vision and Pattern Recognition (CVPR), volume 1, page 3, 2017.↩
-
M. Weber. Autotrace, 2018. http://autotrace.sourceforge.net.↩
-
S. ”Xie and Z. Tu. Holistically-nested edge detection. In Proceedings of IEEE International Conference on Computer Vision, 2015.↩
-
G. Liu, F. A. Reda, K. J. Shih, T.-C. Wang, A. Tao, and B. Catanzaro. Image inpainting for irregular holes using par- tial convolutions. arXiv preprint arXiv:1804.07723, 2018.↩
-
O. Russakovsky, J. Deng, H. Su, J. Krause, S. Satheesh, S. Ma, Z. Huang, A. Karpathy, A. Khosla, M. Bernstein, et al. Imagenet large scale visual recognition challenge. International Journal of Computer Vision, 115(3):211–252, 2015. ↩
-
J. Johnson, A. Alahi, and L. Fei-Fei. Perceptual losses for real-time style transfer and super-resolution. In European Conference on Computer Vision, pages 694–711. Springer, 2016.↩
-
http://musyoku.github.io/2017/03/18/Deconvolution%E3%81%AE%E4%BB%A3%E3%82%8F%E3%82%8A%E3%81%ABPixel-Shuffler%E3%82%92%E4%BD%BF%E3%81%86/↩
-
I. Gulrajani, F. Ahmed, M. Arjovsky, V. Dumoulin, and A. C. Courville. Improved training of wasserstein gans. In Advances in Neural Information Processing Systems, pages 5767–5777, 2017.↩
【Material-UI】ListItemText内の文字を改行する方法【React】
ListItemText内の文字を改行する方法
完全にメモ。Reactでは改行するには改行コードを加工する必要がある。Material-UIのListItemText内の文字を改行する際にWarningが出たが、解決したので記録しておく。
問題
次のようにListItemTextに改行を含む文字を入れようとする。
const text = "私の戦闘力は ¥n 53万です"; // 省略 <ListItemText primary={"フリーザ"} secondary={text} />
結果はこうなる。
javascript内の改行コードはdomに適用されないよね、という当たり前な話。
改行コードを<br />
に置換する事で解決する。
const text = "私の戦闘力は ¥n 53万です"; const breakedText = text.split("¥n").map((line, key) => <span key={key}>{line}<br /></span>); // 省略 <ListItemText primary={"フリーザ"} secondary={breakedText} />
改行に成功した!
Warningが出る例
<span>
ではなく、<div>
や<p>
を使うとエラーが出る。
Warning: validateDOMNesting(...):
<p>
cannot appear as a descendant of<p>
.
ListItemTextは受け取ったpropsをTypographyの子要素にしていて、このTypographyは子要素を<p>
に渡している。
<p>
内部ではインライン要素しか取れないので、テキストを<span>
で囲って、改行は<br />
にしよう。
参考
reactjs - <div> cannot appear as a descendant of <p> - Stack Overflow
create-react-appで簡単にcss moduleが使えるようになってた。
前略
ディープラーニングおたくを極めるため、G検定を勉強中だが、まあ飽きる。 Reactの勉強として、UdemyのReact 16 - The Complete Guide を受講中で、今日はcss moduleについてつらつらやった。 (ちなみに、今はBlack Friday Saleで安い、Udemyの素晴らしさはいつか書きたい)。
講座内ではcreate-react-appをejectして直接webpackのconfigファイルを変更して、css moduleを導入してたが、version2以降だとそんなことしなくてもいい。
結論から言うと、 「hoge.css」を「hoge.module.css」にして、普通にインポートするだけでcss moduleを使える。
css moduleを使う
css moduleによって、cssをモジュールっぽく使うことができる。しかも、cssのクラス名などはユニークな名前にコンパイルされるため、開発者はcssのスコープに悩まされなくて済むようになる。
create-react-appのversion2以降は「hoge.module.css」というように、.module.cssを加える。
例えば、
.App { color: red; text-align: center; }
と書いたhoge.module.cssファイルを用意したら、javascript(react)側で、
import React from 'react'; import classes from './hoge.module.css' const hoge = () => { return <p className={classes.App}>Hello, World</p> } export default App;
とすることで、classNameにモジュール感覚でcssを適用することができる。
まとめ
create-react-appをejectしてwebpack.config.dev.jsなどの設定ファイルを直接書き換えるか、新たにモジュールをインストールするなど、前準備が必要であった。
今は.module.cssを加えるだけでよい。
この界隈は更新が早いが、使いやすくなっていっているようでうれしい。
今後
Faster R-CNNの自前実装をやっていて、講座形式にしてまとめたいが、時間がかかる。 こんな感じの小ネタでごまかす。
参考
当分やりたいこと
AWSでサービスデプロイ
現在、AWSを勉強中。クラウドは趣味プログラマーがサービス公開するのにもかなり便利だと思う(価格は高いが)。また、面倒なサーバー設定や管理をほとんどAWS側に移譲できるので、かなり楽だ。サービスも100以上あるというので、趣味ITエンジニアには無限に遊べると思う。
AWS資格
趣味ITエンジニアだが、正直本職にしようか迷うところもある。IT系資格のテキストを見たけど、勉強と言ってもワクワクして見れるぐらいに、ちょっと頭がいっている。学生の頃は勉強はそんなに好きじゃないのにね。AWSやるついでにAWSソリューションアーキテクトでも目指そうかなと。
深層学習
趣味で2年間、人工知能をやっていて、ほそぼそと業務に活かしたりもしている。サービスも人工知能系がやりたいなと思っている。画像処理系が中心だが、かなり雑食系なので突発的に色々なネタが出てくると思う。深層学習をやっていると、昔は魔法みたいだったことが簡単に(実際はデータ収集と前処理が大変だが)できる。特に、認識問題に関する社会実装はガンガン進んでいくだろう。面白そうな論文や実装があったら紹介していきたい。
React
一応、HTML/CSS/Javascriptはいじれるが、Reactをやっていきたい。私はC/C++生まれ、Python育ちなデータサイエンティスト寄りエンジニアで、MVCの設計は感心するが、なるべくなら一つの言語でアプリケーションを構築していきたい。ReactとES6(7)の記法がめちゃくちゃ性に合っているので、Reactは今後使っていきたい。
電子工作とIoT
深層学習や機械学習をやっていたら、アルゴリズムよりもデータ収集が難関であることに気づいた。AWSの使いはじめもAWS IoTでAWSの基礎も知らずにRaspberryPiのセンサデータをAWS IoTに送ってCloudWatchで監視して感動したものだ。IoTと廉価になったセンサモジュールやマイコンで個人でもある程度ビジネスロジックを構築できる時代に来ているので、IoTの内容についても書いていきたい。
かなり気分屋なので、ここにある内容そっちのけで色々書いていく可能性が高いと思う。 皆様よろしくお願いします。