アノテーションにおける UI の工夫

Transcript

1. アノテーションにおける UI の⼯夫
2. ⾃⼰紹介 上辻 慶典 2017~2023 メディアサービスの推薦システムや MLOps‧アノテーションツールの開発に従事。 2023~ キャディにて MLOps, アノテーションや データ⼊⼒のための UI など、 データと UI の関わる部分に携わっています。 2
3. アノテーションとは 3 課題定義 アノテーション / データ収集 モデリング/学習 評価 運⽤ 機械学習のフロー • 学習データが機械的に得られない場合は、 ⼿動で学習データを作成する必要がある • アノテーションのためのツール‧UI が よく利⽤される ▲ OSS のアノテーションツール LabelStudio
4. アノテーションにおける UI の重要性 アノテーションのための UI が優れていると何が嬉しいか 4 アノテーション UI の改善は Data-Centric にモデルの性能を改善する⼿段 アノテーションの効率と正確性が⾼くなる 学習データの量と質が⾼くなる 機械学習モデルの性能が向上する
5. キャディでのアノテーション キャディは図⾯を解析する機械学習モデルのためのアノテーションを実施している キャディでのアノテーションの⼀例：表題欄上の Attribute 認識 5 製品の属性が書かれているとこ ろにバウンディングボックス （BBox）を配置する BBox の部分のテキストと属性 カテゴリを記⼊する
6. アノテーション UI を改善するアイデア アノテーションをより効率的にするために、 図⾯解析に特化したアノテーションの機能が実現できないだろうか？ 6 たとえば..... BBox 作成の効率化 図⾯中に細かい BBox を作る作業に時間がかかる。 もっと効率的な操作⽅法はないか？ テキストの⼊⼒補助 テキストを毎回⼊⼒するのは⼿間。 OCR モデルがあれば⾃動⼊⼒できるのでは？ ▶ 実際にこれらを実装してみて効果を検証した
7. BBox 作成の効率化：⾃動スナップ機能 BBox をテキストにフィットする機能 ⼤雑把な操作で綺麗な BBox ができるので⾮常に便利 7
8. ⾃動スナップのアルゴリズム 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 8 アル
9. ⾃動スナップのアルゴリズム ① 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 9 アル
10. ⾃動スナップのアルゴリズム ② 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 10 アル
11. ⾃動スナップのアルゴリズム ③ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 11 アル
12. ⾃動スナップのアルゴリズム ④ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 12 アル
13. ⾃動スナップのアルゴリズム ④ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 13 アル
14. ⾃動スナップのアルゴリズム ④ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 14 アル
15. ⾃動スナップのアルゴリズム ④ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 15 アル
16. ⾃動スナップのアルゴリズム ④ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 16 アル 図⾯が⽩黒のスキャン画像であること を利⽤したシンプルなアルゴリズム
17. ⾃動スナップに失敗するケースのサポート シンプルなアルゴリズムがゆえに、 うまくスナップできないケースもかなりある • 斜線や下線とテキストが重なっている • スキャンやノイズ等の影響で背景が⽩くない 17 テキストの境界が 検出できない アルマイト Ctrl キーを押している間はスナップが無効になる機能を追加 ➡ ⾃動スナップに失敗しても問題なくアノテーションできる
18. テキストの⼊⼒補助：OCR による⾃動⼊⼒ OCR モデルによって BBox 部分のテキストを推論し、⾃動⼊⼒する機能。 ➡ テキスト⼊⼒の負担を⼤幅に減らす 18 OCR モデル
19. ⾃動⼊⼒機能による UI の変化 OCR による⾃動⼊⼒によって、 テキストを⼊⼒する UI がテキストを修正する UI に変化する ➡ テキストが正しいかを⽬視で判別しなければならない 19 2O24-01ー28
 ゼロとオーの違い ハイフンと⻑⾳記号の違い OCR モデルが間違えやすい⽂字は⼈間も⾒間違いやすい！
20. テキストを修正するためのデザイン ⾒間違えやすい⽂字を判別するための UI が必要 • フォントサイズを⼤きくする • O と 0 や l, I, 1 を⾒分けやすいフォントを使う • 等幅フォントを使う • ⽂字種ごとに⾊を変える 20 ▲ 見間違えやすい文字を見分けるための UI として パスワードジェネレータを参考にした https://1password.com/password-generator ▲ 実際にアノテーション UI に実装してみた様子
21. 機能の検証 ここまでで紹介した機能が有効か、次の 3 点を検証した BBox の⾃動スナップ機能 ➡ ⼿動で BBox を作る場合と⽐べて作業時間は短縮したか？ OCR によるテキストの⾃動⼊⼒機能 ➡ ⼿動でテキストを⼊⼒する場合と⽐べて作業時間は短縮したか？ テキストを修正するためのデザイン ➡ 特に⼯夫しない UI と⽐べて正確性は向上したか？ 21
22. 検証⽤のアノテーション UI 1 図⾯のアノテーションを 2 ステップの作業に分割して提⽰ ➡ BBox 作成とテキスト⼊⼒にかかる時間をそれぞれ計測できる 22 ⬆ BBox 作成ステップ 図番‧材質‧表⾯処理のテキストに BBox を付与する ⬆ テキスト⼊⼒ステップ BBox で囲ったテキストを⼊⼒‧修正する
23. アノテーション作業の条件 12 名を 4 名ずつグループに分け、 1 ⼈あたり 10 枚の図⾯に以下の条件でアノテーションしてもらう • グループ A：後半 5 枚の BBox 作成ステップで「スナップ機能」が有効になる • グループ B：後半 5 枚のテキスト⼊⼒ステップで「⾃動⼊⼒」が有効になる • グループ C：後半 5 枚のテキスト⼊⼒ステップで「⾃動⼊⼒ + 修正⽤ UI」が有効になる 23 前半 5 枚 後半 5 枚 BBox 作成 ステップ グループ A 追加機能なし スナップ機能あり グループ B 追加機能なし 追加機能なし グループ C 追加機能なし 追加機能なし テキスト⼊⼒ ステップ グループ A 追加機能なし 追加機能なし グループ B 追加機能なし ⾃動⼊⼒あり グループ C 追加機能なし ⾃動⼊⼒ + 修正⽤ UI あり
24. 作業時間の検証⽅法：差分の差分法 たとえばスナップ機能を検証するときは「BBox 選択ステップ」のみを考えて、 スナップの有無で「どれくらい時間短縮に差が出るか」を⾒る 24 前半 5 枚 後半 5 枚 BBox 選択 ステップ グループ A 追加機能なし スナップ機能あり グループ B 追加機能なし 追加機能なし グループ C 追加機能なし 追加機能なし テキスト⼊⼒ ステップ グループ A 追加機能なし 追加機能なし グループ B 追加機能なし ⾃動⼊⼒あり グループ C 追加機能なし ⾃動⼊⼒ + 修正⽤ UI あり 前半を 1 とした時の相対的な作業時間 前半 5 枚 後半 5 枚 1 作業の慣れによる 時間短縮 スナップ機能による 時間短縮 ▶ 同じ⼈の前半‧後半を⽐較するのでユーザごとの作業時間のぶれ（丁寧さ‧使⽤デバイスなど）に対処できる グループ A グループ B, C
25. 検証結果：スナップ機能による作業時間短縮 25 効果があるとはいえなさそう 前半 5 枚 後半 5 枚 BBox 選択 ステップ グループ A 追加機能なし スナップ機能あり グループ B 追加機能なし 追加機能なし グループ C 追加機能なし 追加機能なし 後半 5 枚の作業時間（前半との⽐率）
26. スナップ機能によるデータの変化 スナップ機能によって BBox の正確性は向上する 26 ▲ スナップ機能なしで付与された BBox を 5 つ重ねたもの ▲ スナップ機能で付与された BBox を 5 つ重ねたもの
27. 検証結果：テキスト⾃動⼊⼒による作業時間短縮 27 ⾃動⼊⼒によって 作業時間が平均 53% に短縮！ ⼿⼊⼒グループは前半と後半で作業時間がほとんど変化しない （54% になった⼈はコピペで作業効率化していた。タスク設計が⽢かったかも） 前半 5 枚 後半 5 枚 テキスト ⼊⼒ ステップ グループ A 追加機能なし 追加機能なし グループ B 追加機能なし ⾃動⼊⼒あり グループ C 追加機能なし ⾃動⼊⼒ + 修正⽤ UI あり 後半 5 枚の作業時間（前半との⽐率）
28. テキスト修正 UI での正確性の検証 OCR 結果をハードコーディングしておき、わざとミスを⼊れる ➡ ミスが正しく修正されるかを検証 28 正解テキスト 誤りテキスト 誤りパターン メラミン塗装 メラミン塗装. 末尾に「 . 」がついている メラミン塗装 メラミソ塗装 「ン」が「ソ」になっている 20220616-ABC-01 20220616-ABC-O1 「0」が「O」になっている 20220616-ABC-02 202206I6-ABC-02 「1」が「I」になっている SS400D SS400O 「D」が「O」になっている
29. 検証結果：修正⽤ UI による正確性向上 29 ⼿⼊⼒したグループは ミスなく⼊⼒できていた ⾃動⼊⼒があるグループは ミスが合計 2 件 ⾃動⼊⼒かつ⾒やすい UI の グループはミスが 4 件 ⼊⼒‧修正したテキストが誤っていた数 前半 5 枚 後半 5 枚 テキスト ⼊⼒ ステップ グループ A 追加機能なし 追加機能なし グループ B 追加機能なし ⾃動⼊⼒あり グループ C 追加機能なし ⾃動⼊⼒ + 修正⽤ UI あり
30. なぜ修正に失敗したか ユーザの感想としては良好だったが...... 失敗の内訳 • O → 0 の修正を⾒逃した：3 件 • O → D の修正を⾒逃した：1 件 30 間違いが ⾒つけやすかった ⾊がついていると わかりやすい！ 0 と O が区別でき るフォントが良い
31. 修正を⾒逃した要因の仮説 ⽂字のコントラスト⽐が⾜りず判別が難しかった？ ➡ ⻘⽂字と背景のコントラスト⽐が 2.31 : 1 しかなかった Web Content Accessibility Guidelines (WCAG) 2.0「少なくとも 4.5:1 のコントラスト⽐」 ⽂字⾊の違いについて説明が⾜りなかった？ ➡ ⾊についての説明が少なかったので⾒逃された可能性がある フォントの効果があまりなかった？ ➡ 「0」と「O」は横に並べると違いがわかるが単体では難しい   「2O226I6」のように⽂字幅が異なるほうが⾒分けやすかったかも 31
32. 検証まとめ アノテーション UI の改善として、次の 3 つを実装して効果を検証した • BBox の⾃動スナップ ➡ 作業効率はあまり向上せず。データ精度⾯はメリットあり • OCR モデルによるテキストの⾃動⼊⼒ ➡ 作業効率が⼤幅に向上することを確認 • テキスト修正⽤の⼊⼒ UI ➡ 効果は⾒られず。さらなる改善が必要 32
33. おわりに アノテーション UI は学習データの量と質に影響する ⬇ フロントエンドや UI, アクセシビリティの側⾯から アノテーションを通じて Data-Centric な機械学習に貢献できる 33 ご清聴ありがとうございました
34. 余談：⾊のアクセシビリティ 「⾊どうしの⾒分けやすさ」に注意する必要がある ➡ ⾊覚多様性：男性の 20 ⼈に 1 ⼈ • テキストや罫線など、そもそも⾊以外の要素で⾒分けられるようにする • Okabe-ito パレットなど、アクセシビリティを考慮した配⾊を利⽤する • Chrome Devtools 等の⾊覚シミュレーションで確認する 34
35. 余談：ユーザの⽂脈に沿った UI ユーザにとって使いやすい UI であることを意識する たとえば...... • ユーザがこれまで使っていたアノテーションツールと挙動を合わせる ◦ マウスホイールを使うとズーム？パン（視点移動）？ ◦ Ctrl-D のショートカットは複製？削除？ • ユーザの使っているデバイスに最適化する ◦ ユーザが使うのはマウス？トラックパッド？ ◦ キーボードにテンキーはある？ ◦ ディスプレイサイズは UI を表⽰するのに⼗分か？ 35