Flutterの画面崩れの表示を検知したい

以前までの記事とは少し寄り道になりますが、Flutterの画面崩れを画像処理によって検知したいなという欲望が湧いてきました。（参考：https://yaba-blog.com/flutter-renderflex-overflowed/ ）
画面崩れの際に、ご丁寧に工事マークのような物を表示してくれているので、これをキーとして検知できないかなと考えています。
「そんなモノに需要があるのか...」「そもそもエラーを吐いているのだからそれをハンドリングすれば良いのでは...」という声も脳裏によぎりますが、ちょっと画像処理の勉強も含めて検討してみます。
（以前から書いている記事がメインワークなので、これは寄り道的に検討します）

工事マークの検知方法の検討

あまり深く考えずに簡単な方法を検討すると以下の２つが挙げられます。

方法A：素直な画像処理のプログラムを書いて、色とエッジ検出による識別
方法B：教師ありの深層学習(Neural Network Console)

それぞれの方法について以下の方法で評価してみました。

手法	実装工数	実行速度	メンテコスト	期待される正確性
素直な画像処理	○	○	△	△
深層学習	○	△	△	○か✖︎

本来なら深層学習はメンテコストが相当高いように感じますが、自分が初学者なのもあってSONYのNNCを使う予定なので、GUIならばそこまでメンテコストはかからないはずです。
実装工数に関しても、方法Aであればとっかかりの実装工数は少ないですが、正確性をあげようと思うとアルゴリズムの検討をしたり、何やかんやコストがかかると見積もっています。NNCは簡単ではありますが、やはりデータセットの準備に難があるのが気がかりです。
正確性については、方法Aはある一定の精度は出そうですが、いろいろな機種・画面パターンに対応できるのか不安。方法Bはうまく動くか全然ダメかの２択になると思っています。

方法A：素直な画像処理のプログラムを書いて、色とエッジ検出による識別

現段階で思いついている実装方法
前述したサイトの画像から工事マークの黄色と黒のRGB値を取得して、このサイト(https://www.peko-step.com/tool/hsvrgb.html )でHSV値に変換してみた結果がこちら

これを見ると、HとSから識別するのが良さそう。HとSのANDにするのかどちらかにするのか、はたまたORにするのか。閾値は定数でいくのか...などと考えているとやはり少し面倒...

斜めになっている検出は、微分フィルタを使えばいいかなと考えている。しかし、こちらも重みやカーネル値の大きさなどをどうするかという課題は残っていますね。

方法B：教師ありの深層学習(Neural Network Console)

さて、こちらは実はよく分かっていません。今後調べていきますが、以下のような進行を考えています。

flutter driverを使ってスクリーンショットを撮りまくる
端末の種類や文字サイズを切り替えてスクリーンショットを撮りまくる
それらの画像を元に以下の前処理を行う
1. 表示崩れがないものを0、あるものを1としてアノテーションをする
2. それぞれの画像はサイズが違うので、横サイズを256pxになるようにresizeする
3. 縦サイズを256pxになるように画像を切り出していく。キリ良くならない場合は前倒して256*256は遵守する
4. （斜めに微分フィルタをかけて二値化画像に変換する）
NNCにいれて学習器を作成する (https://support.dl.sony.com/docs-ja/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%EF%BC%9Aneural-network-console%E3%81%AB%E3%82%88%E3%82%8B%E5%AD%A6%E7%BF%92%E6%B8%88%E3%81%BF%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%A9/ )
学習器を元に識別する

方法C：マッチングは使わないの？？？

確かに表示される物が「工事マーク」で統一されているので、正解データを用意して、それを探索するようにしていけば良いのでは？？？と思いますね。自分もそう思いました。
やりたくなかった理由は簡単で、大きさの大小に影響されるのを考えるのが面倒という考えがありました。
あとは輝度の関係などで、あまり使いたくなかったというのがあります。
とはいえ、方法Aと方法Bがどっちもダメダメだった場合はこちらも検討してみようと思います。

検証結果

鋭意作成中・・・

Flutterの画面崩れの検知方法について（随時更新）