前田直宏 山本岳洋 カスタマイズ可能な Webページサムネイル生成 のためのDOMノード役割推定 3a-6-4 兵庫県立大学 情報科学研究科

2 Webページの概要を表したサムネイル Shenwei Liu and Keishi Tajima. Wildthumb: a web browser supporting efficient task management on wide displays. In Proceedings of the 15th international conference on Intelligent user interfaces, pp. 159–168, 201 ⚫ Webブラウザのタブ管理支援 Jaime Teevan, Edward Cutrell, Danyel Fisher, Steven M Drucker, Gonzalo Ramos, Paul Andr ́e, and Chang Hu. Visual snippets: summarizing web pages for search and revisitation. In Proceedings of the SIGCHI conference on human factors in computing systems, pp. 2023–2032, 200 活用例 ⚫ Web検索支援 [1] [2] [2] [1] など Webページを視覚的に要約 ⚫ ロゴや主要な画像を用いた サムネイル ⚫ Webページのスクリーンショット を縮小したサムネイル Webページの概要を把握することができる など

3 検索結果欄にサムネイルも表示 Web検索でのサムネイル活用 Diabetes Center – MayoClinic.com diabetes Center ー diabetes information on type 1 diabetes, prediabetes, gestational diabetes. http://www.mayoclinic.com/health/diabetes/DA99999 ⚫ タイトル、ページ内画像、ロゴを 用いたサムネイルを提案 [4] サムネイル例 Woodruff, A., Faulring, A., Rosenholtz, R., Morrsion, J., & Pirolli, P. “Using thumbnails to search the Web”. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 198-205),2001. Teevan, J., Cutrell, E., Fisher, D., Drucker, S. M., Ramos, G., André, P., & Hu, C. “Visual snippets summarizing web pages for search and revisitation”. InProceedings of the SIGCHI conference on human factors in computing systems (pp. 2023-2032),2009. ⚫ 1度訪れたサイトへの訪問が容易 ⚫ 探している情報へ素早く到達 [3] [3] [4] ⚫ スクリーンショット＋クエリを強調 したサムネイルを提案

4 検索結果欄にサムネイルも表示 サムネイル例 予め決められた表示項目で構成されている 検索内容により表示したい項目が変わるのでは？ タイトル、ロゴ、スクリーンショット ⚫ Q&A サイト ⚫ 健康情報記事サイト どんな人物が作成したのか 他ユーザのコメント、回答数 例) Web検索でのサムネイル活用 ⚫ 1度訪れたサイトへの訪問が容易 ⚫ 探している情報へ素早く到達 Diabetes Center – MayoClinic.com diabetes Center ー diabetes information on type 1 diabetes, prediabetes, gestational diabetes. http://www.mayoclinic.com/health/diabetes/DA99999

ユーザがサムネイルをカスタマイズ ✓ いつの記事か を表示したい 最新の記事で役立ちそう 5 タイトル 日付 著者 ロゴ 評価数 コメント数 商品名 など… サムネイル表示項目 Web検索でのサムネイル活用

を表示したい 6 タイトル 日付 著者 評価数 など… サムネイル表示項目 ✓ 他者からの評価 ✓ コメント数 議論が活発に行われてそう コメント数 商品名 ロゴ Web検索でのサムネイル活用 ユーザがサムネイルをカスタマイズ

7 研究の大きな目的と本研究で取り組む課題 ユーザが表示項目をカスタマイズ可能なサムネイル生成 Webページからカスタマイズに用いる 表示項目を取得する 研究の大きな目的 本研究で取り組む課題 サムネイルを構成する表示項目を集める必要

技術的課題：表示項目の推定 テキストのみを対象としDOMツリーを用いてノードの役割を推定 body h1 div div Pythonの～ インストール 2022年04月11日 span a TATSUO IKURA DOMツリー Webページ 多クラス分類モデル タイトル 日付 作者名 Webページ中のサムネイル表示項目を推定する 多 ク ラ ス 分 類 器 HTMLを木構造で表現 8 役割

既存の属性分類モデル:LANTERN Softmax Zhou et al. "Learning Transferable Node Representations for Attribute Extraction from Web Documents." Proceedings of the Fifteenth ACM International Conference on Web Search and Data Mining.(pp. 1479-1487), 2022. [5] テキスト XPath Bi-LSTM 本やレストランなどのWebページから属性を推定するモデル ⚫ 店名 ⚫ 住所 ⚫ 電話番号 レストラン ・・・ テキスト エンコーダー [5] CNN Bi-LSTM 文字レベル 埋込 単語レベル 埋込 テキストエンコーダー LANTERN [5] 9 全結合層

10 既存の属性分類モデル:LANTERN 文字レベル 埋込 単語レベル 埋込 H a y … Harry テキストエンコーダー DOMノード Webページ Harry Potter Potter P o r … 文字レベル 埋込 単語レベル 埋込 Potter Harry CNN CNN Bi-LSTM 特徴量化 Harry Potter GloVe使用 GloVe使用

11 既存の属性分類モデル:LANTERN LANTERNの手法 周囲のテキストノードも特徴量に使用する 近くのテキストノードも用いる ⚫ 最も近い距離のノード 作者名である可能性が高い Webページ J.K. Rowling の役割を推定したい body h1 div Harry Potter and the Sorcerer’s ～ by J.K. Rowling 例） DOMツリー 分類項目との類似度を計算 by が最も近いテキスト 作者、タイトル、日付 … written by

12 既存の属性分類モデル:LANTERN LANTERNの手法 ノードの全体的な位置を特徴量に使用する Webページ J.K. Rowling の役割を推定したい body h1 div Harry Potter and the Sorcerer’s ～ by J.K. Rowling 例） DOMツリー １ ２ ３ 深さ優先探索で位置を計算 相対位置 = 全ノード数 3 タイトルや作者： 上部に存在すると考えられる ⚫ モチベーション

“テキスト” HTMLのclass属性を追加 13 ページ中でのノードの役割 を表すことが多い 提案手法:2種類の特徴量を追加しモデルを拡張 class属性値 ＋ テキスト Xpath Bi-LSTM ・・・ 例）日付を表すノード “2023/3/6” テキスト エンコーダー テキスト エンコーダー

14 提案手法:2種類の特徴量を追加しモデルを拡張 見た目情報を追加 ⚫ フォントサイズ ⚫ ノードの縦幅 ⚫ ノードの横幅 ⚫ ブラウザ上での面積 投稿日 2020年07月11日 83 37 縦幅 × 横幅 ⚫ フォントサイズが大きい傾向 ⚫ 描画面積が大きい 例）タイトル 日付 ⚫ フォントサイズが小さめ傾向 ⚫ 描画面積が小さい 項目によって見た目に違いがあるのでは？ テキスト Xpath Bi-LSTM ・・・ ＋ … レンダリングし取得 全結合層 テキスト エンコーダー

提案モデル Softmax テキスト Xpath Bi-LSTM ・・・ ＋ 15 class属性値 見た目の情報 全結合層 全結合層 Webページ自体の属性を推定する ⚫ タイトル ⚫ 作成日 ⚫ 作者名 Webページ 提案手法:2種類の特徴量を追加しモデルを拡張 テキスト エンコーダー テキスト エンコーダー

モデル評価実験 16

拡張したモデルの性能を評価 ✓ StackOverflow ✓ OpenNMT データセットの作成 プログラミングQ&A記事を100ページずつ収集 ✓ FindNerd ✓ CodeProject 17 「日付」「作者名」「質問タイトル」 ✓ DevHubby 「回答数」「評価数」 それ以外は「その他」 正解ラベルの付与 body div div NEW MESSAGE div 評価数 その他 全500ページの各ノードに分類するラベルを付与 全テキストノード数：約160,000ノード 5 month ago

18 その他ノードのフィルタリング 「その他」に属するノードが圧倒的に多い不均衡データ 定型情報やリンクなどのコンテンツと 関係のないテキストが存在している XPathに特定のタグを含むノードを その他ノードとみなし削除 モデルの分類精度が低下する フッター ヘッダー 他ページへのリンク コピーライト など コンテンツメニュー など メイン コンテンツ HTMLタグ タグの役割 button クリックボタン footer フッター header ヘッダー input 入力受け取り nav ナビゲーションリンク ヘッダー、フッターなど その他ノード数 約80,000ノード 約160,000ノード

19 モデルの学習 損失関数 𝐸 = − ෍ 𝑖=1 𝑁 ෍ 𝑘=1 𝐾 𝒘𝑘 𝑡 𝑘 (𝑖) log 𝑦 𝑘 (𝑖) 重み付き交差エントロピー K : 分類クラス数 N : 分類対象のノード数 w : クラスの重み y : モデルの出力 クラスごとの重みを加えることで不均衡データに対処 ⚫ ノードがk番目のクラスに属する ⚫ ノードがk番目のクラスに属さない 𝑡𝑘 = 0 𝑡𝑘 = 1 ⚫ その他ノード ⚫ それ以外のノード 𝒘𝒌 = 1 𝒘𝒌 = 10

20 モデルの学習 同じWebサイトでは類似したHTML構造をしている DevHubby StackOverflow CodeProject FindNerd OpenNMT テストデータ 訓練データ 4サイトを訓練データ、残りをテストデータ とした5分割交差検証を行った ✓ エポック数：50 ✓ 学習率：1.0 × 10−5 ✓ 単語分散表現：GloVe ✓ 最適化手法：Adam

21 評価方法１ テキストを含む全ノードを評価 … … … … 回答数 その他 日付 … … 評価尺度 適合率、再現率、F1値、ROC-AUCを計算 質問タイトル 多クラス分類 各クラスごとに

22 評価方法１に対する実験結果 0 0.2 0.4 0.6 0.8 1 1.2 日付 作者 質問 タイトル 回答数 評価数 その他 再現率 日付 作者 質問 タイトル 回答数 評価数 その他 適合率 0 0.2 0.4 0.6 0.8 1 1.2 LANTERN 拡張モデル 適合率と再現率ともに減少した 特にその他以外の項目について 大きく減少した 学習時のその他ノード数が多いため 分類精度に偏りが生じた 新たに加えた特徴量に過学習している ⚫ 拡張モデルの方が精度が低い ⚫ その他は精度が高い ⚫ 適合率と再現率 テキストを含む全ノードを評価

23 評価方法１に対する実験結果 0 0.2 0.4 0.6 0.8 1 1.2 0 0.2 0.4 0.6 0.8 1 1.2 日付 作者 質問 タイトル 回答数 評価数 その他 日付 作者 質問 タイトル 回答数 評価数 その他 F1値 ROC-AUC 適合率と再現率が低かったために F1値も低い値になった LANTERN 拡張モデル ⚫ ROC-AUC値 ⚫ F1値 新たに2種類の特徴量を加えたことで 精度が低下した テキストを含む全ノードを評価 ⚫ One vs Restで計算 ⚫ 全体的に約0.7付近の値を取った

24 評価方法２ 各クラスについて予測確率が最も高いノードのみを評価 不正解 評価尺度 各クラスごとに適合率を計算 評価ページ数 正解数(ページ数) ＝ 適合率 k k = 日付, 作者名, 質問タイトル, 回答数, 評価数 … … 日付の予測確率 0.6 0.8 0.9 0.7 0.6 例） 正誤判定 このWebページ中の 日付を表したノード である可能性が最も高い ⚫ 各クラスについて正誤判定 1つのWebページ中で最も高い確率で 日付と予測した1つのノード の正誤を評価する 正解 or 全てのクラスについて評価を行う

25 評価方法2に対する実験結果 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 日付 作者名 質問 タイトル 回答数 評価数 LANTERN 拡張モデル 特に評価数ノードの適合率が 大きく上昇した 特に回答数ノードの適合率が 大きく低下した 一部の項目で精度の向上、低下が見られた 適合率 ⚫ 作者名と評価数は適合率が向上 ⚫ それ以外は適合率が低下 各クラスについて予測確率が最も高いノードのみを評価

26 実際の出力結果 推定項目 内容 正誤 日付 How to check ～ line? 5 month ago 作者 lily.simonis 質問タイトル How to make ～ installed? 回答数 15 1 Answers 評価数 50 出力 入力

27 結果に対する考察 適合率が上昇した項目 適合率が悪化した項目 見た目の情報を加えたことで、類似した見た目の特徴を持つ ノードに過学習してしまった ⚫ 他のノードにはない見た目の特徴を捉えることができたため ⚫ 適合率が向上した「評価数」項目のclass属性値にはlikeや voteの単語が含まれていた。それ以外にはclass属性値が含 まれていないことがあった 改善のために ⚫ 使用する見た目の特徴量の選択 ⚫ 学習データの不均衡性に対処する

28 研究のまとめと今後の課題 本研究の取り組み 表示項目をカスタマイズ可能なサムネイル生成 DOMノードの役割を推定 サムネイルの表示項目を抽出 十分な精度向上が得られなかった 提案手法 今後の課題 ➢ 大きな目的 取り組んだ 課題 2種類の特徴量を追加し 既存モデルを拡張 ⚫ 使用する特徴量の選択 ⚫ データの不均衡性への対処