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

⾃⼰紹介 上辻 慶典 2017~2023 メディアサービスの推薦システムや MLOps‧アノテーションツールの開発に従事。 2023~ キャディにて MLOps, アノテーションや データ⼊⼒のための UI など、 データと UI の関わる部分に携わっています。 2

アノテーションとは 3 課題定義 アノテーション / データ収集 モデリング/学習 評価 運⽤ 機械学習のフロー ● 学習データが機械的に得られない場合は、 ⼿動で学習データを作成する必要がある ● アノテーションのためのツール‧UI が よく利⽤される ▲ OSS のアノテーションツール LabelStudio

アノテーションにおける UI の重要性 アノテーションのための UI が優れていると何が嬉しいか 4 アノテーション UI の改善は Data-Centric にモデルの性能を改善する⼿段 アノテーションの効率と正確性が⾼くなる 学習データの量と質が⾼くなる 機械学習モデルの性能が向上する

キャディでのアノテーション キャディは図⾯を解析する機械学習モデルのためのアノテーションを実施している キャディでのアノテーションの⼀例：表題欄上の Attribute 認識 5 製品の属性が書かれているとこ ろにバウンディングボックス （BBox）を配置する BBox の部分のテキストと属性 カテゴリを記⼊する

アノテーション UI を改善するアイデア アノテーションをより効率的にするために、 図⾯解析に特化したアノテーションの機能が実現できないだろうか？ 6 たとえば..... BBox 作成の効率化 図⾯中に細かい BBox を作る作業に時間がかかる。 もっと効率的な操作⽅法はないか？ テキストの⼊⼒補助 テキストを毎回⼊⼒するのは⼿間。 OCR モデルがあれば⾃動⼊⼒できるのでは？ ▶ 実際にこれらを実装してみて効果を検証した

BBox 作成の効率化：⾃動スナップ機能 BBox をテキストにフィットする機能 ⼤雑把な操作で綺麗な BBox ができるので⾮常に便利 7

⾃動スナップのアルゴリズム 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 8 アル

⾃動スナップのアルゴリズム ① 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 9 アル

⾃動スナップのアルゴリズム ② 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 10 アル

⾃動スナップのアルゴリズム ③ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 11 アル

⾃動スナップのアルゴリズム ④ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 12 アル

⾃動スナップのアルゴリズム ④ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 13 アル

⾃動スナップのアルゴリズム ④ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 14 アル

⾃動スナップのアルゴリズム ④ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 15 アル

⾃動スナップのアルゴリズム ④ 1. ユーザが選択した BBox の 1 辺に 注⽬する 2. その辺を（辺の垂直⽅向に）移動 して、「辺と重なるピクセルが全 て⽩になる部分」とそうでない部 分の境界を探す 3. 元の辺の位置と最も近い境界に 辺を移動する これを各辺でくりかえす 16 アル 図⾯が⽩黒のスキャン画像であること を利⽤したシンプルなアルゴリズム

⾃動スナップに失敗するケースのサポート シンプルなアルゴリズムがゆえに、 うまくスナップできないケースもかなりある ● 斜線や下線とテキストが重なっている ● スキャンやノイズ等の影響で背景が⽩くない 17 テキストの境界が 検出できない アルマイト Ctrl キーを押している間はスナップが無効になる機能を追加 ➡ ⾃動スナップに失敗しても問題なくアノテーションできる

テキストの⼊⼒補助：OCR による⾃動⼊⼒ OCR モデルによって BBox 部分のテキストを推論し、⾃動⼊⼒する機能。 ➡ テキスト⼊⼒の負担を⼤幅に減らす 18 OCR モデル

⾃動⼊⼒機能による UI の変化 OCR による⾃動⼊⼒によって、 テキストを⼊⼒する UI がテキストを修正する UI に変化する ➡ テキストが正しいかを⽬視で判別しなければならない 19 2O24-01ー28
 ゼロとオーの違い ハイフンと⻑⾳記号の違い OCR モデルが間違えやすい⽂字は⼈間も⾒間違いやすい！

テキストを修正するためのデザイン ⾒間違えやすい⽂字を判別するための UI が必要 ● フォントサイズを⼤きくする ● O と 0 や l, I, 1 を⾒分けやすいフォントを使う ● 等幅フォントを使う ● ⽂字種ごとに⾊を変える 20 ▲ 見間違えやすい文字を見分けるための UI として パスワードジェネレータを参考にした https://1password.com/password-generator ▲ 実際にアノテーション UI に実装してみた様子

機能の検証 ここまでで紹介した機能が有効か、次の 3 点を検証した BBox の⾃動スナップ機能 ➡ ⼿動で BBox を作る場合と⽐べて作業時間は短縮したか？ OCR によるテキストの⾃動⼊⼒機能 ➡ ⼿動でテキストを⼊⼒する場合と⽐べて作業時間は短縮したか？ テキストを修正するためのデザイン ➡ 特に⼯夫しない UI と⽐べて正確性は向上したか？ 21

検証⽤のアノテーション UI 1 図⾯のアノテーションを 2 ステップの作業に分割して提⽰ ➡ BBox 作成とテキスト⼊⼒にかかる時間をそれぞれ計測できる 22 ⬆ BBox 作成ステップ 図番‧材質‧表⾯処理のテキストに BBox を付与する ⬆ テキスト⼊⼒ステップ BBox で囲ったテキストを⼊⼒‧修正する

アノテーション作業の条件 12 名を 4 名ずつグループに分け、 1 ⼈あたり 10 枚の図⾯に以下の条件でアノテーションしてもらう ● グループ A：後半 5 枚の BBox 作成ステップで「スナップ機能」が有効になる ● グループ B：後半 5 枚のテキスト⼊⼒ステップで「⾃動⼊⼒」が有効になる ● グループ C：後半 5 枚のテキスト⼊⼒ステップで「⾃動⼊⼒ + 修正⽤ UI」が有効になる 23 前半 5 枚 後半 5 枚 BBox 作成 ステップ グループ A 追加機能なし スナップ機能あり グループ B 追加機能なし 追加機能なし グループ C 追加機能なし 追加機能なし テキスト⼊⼒ ステップ グループ A 追加機能なし 追加機能なし グループ B 追加機能なし ⾃動⼊⼒あり グループ C 追加機能なし ⾃動⼊⼒ + 修正⽤ UI あり

作業時間の検証⽅法：差分の差分法 たとえばスナップ機能を検証するときは「BBox 選択ステップ」のみを考えて、 スナップの有無で「どれくらい時間短縮に差が出るか」を⾒る 24 前半 5 枚 後半 5 枚 BBox 選択 ステップ グループ A 追加機能なし スナップ機能あり グループ B 追加機能なし 追加機能なし グループ C 追加機能なし 追加機能なし テキスト⼊⼒ ステップ グループ A 追加機能なし 追加機能なし グループ B 追加機能なし ⾃動⼊⼒あり グループ C 追加機能なし ⾃動⼊⼒ + 修正⽤ UI あり 前半を 1 とした時の相対的な作業時間 前半 5 枚 後半 5 枚 1 作業の慣れによる 時間短縮 スナップ機能による 時間短縮 ▶ 同じ⼈の前半‧後半を⽐較するのでユーザごとの作業時間のぶれ（丁寧さ‧使⽤デバイスなど）に対処できる グループ A グループ B, C

検証結果：スナップ機能による作業時間短縮 25 効果があるとはいえなさそう 前半 5 枚 後半 5 枚 BBox 選択 ステップ グループ A 追加機能なし スナップ機能あり グループ B 追加機能なし 追加機能なし グループ C 追加機能なし 追加機能なし 後半 5 枚の作業時間（前半との⽐率）

スナップ機能によるデータの変化 スナップ機能によって BBox の正確性は向上する 26 ▲ スナップ機能なしで付与された BBox を 5 つ重ねたもの ▲ スナップ機能で付与された BBox を 5 つ重ねたもの

検証結果：テキスト⾃動⼊⼒による作業時間短縮 27 ⾃動⼊⼒によって 作業時間が平均 53% に短縮！ ⼿⼊⼒グループは前半と後半で作業時間がほとんど変化しない （54% になった⼈はコピペで作業効率化していた。タスク設計が⽢かったかも） 前半 5 枚 後半 5 枚 テキスト ⼊⼒ ステップ グループ A 追加機能なし 追加機能なし グループ B 追加機能なし ⾃動⼊⼒あり グループ C 追加機能なし ⾃動⼊⼒ + 修正⽤ UI あり 後半 5 枚の作業時間（前半との⽐率）

テキスト修正 UI での正確性の検証 OCR 結果をハードコーディングしておき、わざとミスを⼊れる ➡ ミスが正しく修正されるかを検証 28 正解テキスト 誤りテキスト 誤りパターン メラミン塗装 メラミン塗装. 末尾に「 . 」がついている メラミン塗装 メラミソ塗装 「ン」が「ソ」になっている 20220616-ABC-01 20220616-ABC-O1 「0」が「O」になっている 20220616-ABC-02 202206I6-ABC-02 「1」が「I」になっている SS400D SS400O 「D」が「O」になっている

検証結果：修正⽤ UI による正確性向上 29 ⼿⼊⼒したグループは ミスなく⼊⼒できていた ⾃動⼊⼒があるグループは ミスが合計 2 件 ⾃動⼊⼒かつ⾒やすい UI の グループはミスが 4 件 ⼊⼒‧修正したテキストが誤っていた数 前半 5 枚 後半 5 枚 テキスト ⼊⼒ ステップ グループ A 追加機能なし 追加機能なし グループ B 追加機能なし ⾃動⼊⼒あり グループ C 追加機能なし ⾃動⼊⼒ + 修正⽤ UI あり

なぜ修正に失敗したか ユーザの感想としては良好だったが...... 失敗の内訳 ● O → 0 の修正を⾒逃した：3 件 ● O → D の修正を⾒逃した：1 件 30 間違いが ⾒つけやすかった ⾊がついていると わかりやすい！ 0 と O が区別でき るフォントが良い

修正を⾒逃した要因の仮説 ⽂字のコントラスト⽐が⾜りず判別が難しかった？ ➡ ⻘⽂字と背景のコントラスト⽐が 2.31 : 1 しかなかった Web Content Accessibility Guidelines (WCAG) 2.0「少なくとも 4.5:1 のコントラスト⽐」 ⽂字⾊の違いについて説明が⾜りなかった？ ➡ ⾊についての説明が少なかったので⾒逃された可能性がある フォントの効果があまりなかった？ ➡ 「0」と「O」は横に並べると違いがわかるが単体では難しい   「2O226I6」のように⽂字幅が異なるほうが⾒分けやすかったかも 31

検証まとめ アノテーション UI の改善として、次の 3 つを実装して効果を検証した ● BBox の⾃動スナップ ➡ 作業効率はあまり向上せず。データ精度⾯はメリットあり ● OCR モデルによるテキストの⾃動⼊⼒ ➡ 作業効率が⼤幅に向上することを確認 ● テキスト修正⽤の⼊⼒ UI ➡ 効果は⾒られず。さらなる改善が必要 32

おわりに アノテーション UI は学習データの量と質に影響する ⬇ フロントエンドや UI, アクセシビリティの側⾯から アノテーションを通じて Data-Centric な機械学習に貢献できる 33 ご清聴ありがとうございました

余談：⾊のアクセシビリティ 「⾊どうしの⾒分けやすさ」に注意する必要がある ➡ ⾊覚多様性：男性の 20 ⼈に 1 ⼈ ● テキストや罫線など、そもそも⾊以外の要素で⾒分けられるようにする ● Okabe-ito パレットなど、アクセシビリティを考慮した配⾊を利⽤する ● Chrome Devtools 等の⾊覚シミュレーションで確認する 34

余談：ユーザの⽂脈に沿った UI ユーザにとって使いやすい UI であることを意識する たとえば...... ● ユーザがこれまで使っていたアノテーションツールと挙動を合わせる ○ マウスホイールを使うとズーム？パン（視点移動）？ ○ Ctrl-D のショートカットは複製？削除？ ● ユーザの使っているデバイスに最適化する ○ ユーザが使うのはマウス？トラックパッド？ ○ キーボードにテンキーはある？ ○ ディスプレイサイズは UI を表⽰するのに⼗分か？ 35