Upgrade to Pro — share decks privately, control downloads, hide ads and more …

_2023__前田_Web用研究スライド.pdf

 _2023__前田_Web用研究スライド.pdf

More Decks by 兵庫県立大学 山本研究室

Transcript

  1. 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ページの概要を把握することができる など
  2. 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] ⚫ スクリーンショット+クエリを強調 したサムネイルを提案
  3. 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
  4. ユーザがサムネイルをカスタマイズ ✓ いつの記事か を表示したい 最新の記事で役立ちそう 5 タイトル 日付 著者 ロゴ

    評価数 コメント数 商品名 など… サムネイル表示項目 Web検索でのサムネイル活用
  5. を表示したい 6 タイトル 日付 著者 評価数 など… サムネイル表示項目 ✓ 他者からの評価

    ✓ コメント数 議論が活発に行われてそう コメント数 商品名 ロゴ Web検索でのサムネイル活用 ユーザがサムネイルをカスタマイズ
  6. 技術的課題:表示項目の推定 テキストのみを対象としDOMツリーを用いてノードの役割を推定 body h1 div div Pythonの~ インストール 2022年04月11日 span

    a TATSUO IKURA DOMツリー Webページ 多クラス分類モデル タイトル 日付 作者名 Webページ中のサムネイル表示項目を推定する 多 ク ラ ス 分 類 器 HTMLを木構造で表現 8 役割
  7. 既存の属性分類モデル: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 全結合層
  8. 10 既存の属性分類モデル:LANTERN 文字レベル 埋込 単語レベル 埋込 H a y …

    Harry テキストエンコーダー DOMノード Webページ Harry Potter Potter P o r … 文字レベル 埋込 単語レベル 埋込 Potter Harry CNN CNN Bi-LSTM 特徴量化 Harry Potter GloVe使用 GloVe使用
  9. 11 既存の属性分類モデル:LANTERN LANTERNの手法 周囲のテキストノードも特徴量に使用する 近くのテキストノードも用いる ⚫ 最も近い距離のノード 作者名である可能性が高い Webページ J.K.

    Rowling の役割を推定したい body h1 div Harry Potter and the Sorcerer’s ~ by J.K. Rowling 例) DOMツリー 分類項目との類似度を計算 by が最も近いテキスト 作者、タイトル、日付 … written by
  10. 12 既存の属性分類モデル:LANTERN LANTERNの手法 ノードの全体的な位置を特徴量に使用する Webページ J.K. Rowling の役割を推定したい body h1

    div Harry Potter and the Sorcerer’s ~ by J.K. Rowling 例) DOMツリー 1 2 3 深さ優先探索で位置を計算 相対位置 = 全ノード数 3 タイトルや作者: 上部に存在すると考えられる ⚫ モチベーション
  11. <span class=“class属性値”> “テキスト” </span> HTMLのclass属性を追加 13 ページ中でのノードの役割 を表すことが多い 提案手法:2種類の特徴量を追加しモデルを拡張 class属性値

    + テキスト Xpath Bi-LSTM ・・・ 例)日付を表すノード <span class=“published date”> “2023/3/6” </span> テキスト エンコーダー テキスト エンコーダー
  12. 14 提案手法:2種類の特徴量を追加しモデルを拡張 見た目情報を追加 ⚫ フォントサイズ ⚫ ノードの縦幅 ⚫ ノードの横幅 ⚫

    ブラウザ上での面積 投稿日 2020年07月11日 83 37 縦幅 × 横幅 ⚫ フォントサイズが大きい傾向 ⚫ 描画面積が大きい 例)タイトル 日付 ⚫ フォントサイズが小さめ傾向 ⚫ 描画面積が小さい 項目によって見た目に違いがあるのでは? テキスト Xpath Bi-LSTM ・・・ + … レンダリングし取得 全結合層 テキスト エンコーダー
  13. 提案モデル Softmax テキスト Xpath Bi-LSTM ・・・ + 15 class属性値 見た目の情報

    全結合層 全結合層 Webページ自体の属性を推定する ⚫ タイトル ⚫ 作成日 ⚫ 作者名 Webページ 提案手法:2種類の特徴量を追加しモデルを拡張 テキスト エンコーダー テキスト エンコーダー
  14. 拡張したモデルの性能を評価 ✓ StackOverflow ✓ OpenNMT データセットの作成 プログラミングQ&A記事を100ページずつ収集 ✓ FindNerd ✓

    CodeProject 17 「日付」「作者名」「質問タイトル」 ✓ DevHubby 「回答数」「評価数」 それ以外は「その他」 正解ラベルの付与 body div div NEW MESSAGE div 評価数 その他 全500ページの各ノードに分類するラベルを付与 全テキストノード数:約160,000ノード 5 month ago
  15. 18 その他ノードのフィルタリング 「その他」に属するノードが圧倒的に多い不均衡データ 定型情報やリンクなどのコンテンツと 関係のないテキストが存在している XPathに特定のタグを含むノードを その他ノードとみなし削除 モデルの分類精度が低下する フッター ヘッダー

    他ページへのリンク コピーライト など コンテンツメニュー など メイン コンテンツ HTMLタグ タグの役割 button クリックボタン footer フッター header ヘッダー input 入力受け取り nav ナビゲーションリンク ヘッダー、フッターなど その他ノード数 約80,000ノード 約160,000ノード
  16. 19 モデルの学習 損失関数 𝐸 = − ෍ 𝑖=1 𝑁 ෍

    𝑘=1 𝐾 𝒘𝑘 𝑡 𝑘 (𝑖) log 𝑦 𝑘 (𝑖) 重み付き交差エントロピー K : 分類クラス数 N : 分類対象のノード数 w : クラスの重み y : モデルの出力 クラスごとの重みを加えることで不均衡データに対処 ⚫ ノードがk番目のクラスに属する ⚫ ノードがk番目のクラスに属さない 𝑡𝑘 = 0 𝑡𝑘 = 1 ⚫ その他ノード ⚫ それ以外のノード 𝒘𝒌 = 1 𝒘𝒌 = 10
  17. 20 モデルの学習 同じWebサイトでは類似したHTML構造をしている DevHubby StackOverflow CodeProject FindNerd OpenNMT テストデータ 訓練データ

    4サイトを訓練データ、残りをテストデータ とした5分割交差検証を行った ✓ エポック数:50 ✓ 学習率:1.0 × 10−5 ✓ 単語分散表現:GloVe ✓ 最適化手法:Adam
  18. 21 評価方法1 テキストを含む全ノードを評価 … … … … 回答数 その他 日付

    … … 評価尺度 適合率、再現率、F1値、ROC-AUCを計算 質問タイトル 多クラス分類 各クラスごとに
  19. 22 評価方法1に対する実験結果 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 拡張モデル 適合率と再現率ともに減少した 特にその他以外の項目について 大きく減少した 学習時のその他ノード数が多いため 分類精度に偏りが生じた 新たに加えた特徴量に過学習している ⚫ 拡張モデルの方が精度が低い ⚫ その他は精度が高い ⚫ 適合率と再現率 テキストを含む全ノードを評価
  20. 23 評価方法1に対する実験結果 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付近の値を取った
  21. 24 評価方法2 各クラスについて予測確率が最も高いノードのみを評価 不正解 評価尺度 各クラスごとに適合率を計算 評価ページ数 正解数(ページ数) = 適合率

    k k = 日付, 作者名, 質問タイトル, 回答数, 評価数 … … 日付の予測確率 0.6 0.8 0.9 0.7 0.6 例) 正誤判定 このWebページ中の 日付を表したノード である可能性が最も高い ⚫ 各クラスについて正誤判定 1つのWebページ中で最も高い確率で 日付と予測した1つのノード の正誤を評価する 正解 or 全てのクラスについて評価を行う
  22. 25 評価方法2に対する実験結果 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7

    0.8 0.9 日付 作者名 質問 タイトル 回答数 評価数 LANTERN 拡張モデル 特に評価数ノードの適合率が 大きく上昇した 特に回答数ノードの適合率が 大きく低下した 一部の項目で精度の向上、低下が見られた 適合率 ⚫ 作者名と評価数は適合率が向上 ⚫ それ以外は適合率が低下 各クラスについて予測確率が最も高いノードのみを評価
  23. 26 実際の出力結果 推定項目 内容 正誤 日付 How to check ~

    line? 5 month ago 作者 lily.simonis 質問タイトル How to make ~ installed? 回答数 15 1 Answers 評価数 50 出力 入力