WISS2007

CAT: 大量画像の一覧可視化と詳細度制御の一手法
CAT: A Hierarchical Image Browser Using a Rectangle Packing Technique

五味愛伊藤貴之

宮崎麗子

Jia Li ∗Summary.
This poster proposes CAT (Clustered Album Thumbnail), a technique for browsing
large image collections, and its interface for controlling the level of details. This new system clusters
images according to their keywords and pixel values, and selects representative images for each cluster. It
then visualizes the clusters by applying a hierarchical data visualization technique, which represents thehierarchical clusters as nested rectangular regions, and arranges individual images in grid layout inside
the regions. We argue that such an operation is friendly for users to explore and search for specific images
from huge image collections, because the users are familiar with the Graphical User Interfaces (GUI) for
file systems in a top-down manner.

1

はじめにユーザが保有する画像の枚数は，増加の一途をたどっている．それに伴い，大量画像を一覧する技術の研究が進んでおり，PhotoMesa[1] をはじめとする有名なソフトウェアが発表されている．
大量の画像から特定の画像を効率よく探索させる技術を確立するために，我々は内容に基づく画像の適切な階層化と，その階層化された画像群を効率よく閲覧させる可視化手法が重要であると考える．
本報告では，画像のクラスタリング手法，およびその一覧表示と詳細度制御のためのインタフェースを持ち合わせた，可視化手法 CAT(Clustered AlbumThumbnails) を提案する．
CAT では，画像には複数のキーワードが付けられていることを前提とし，このキーワードと画素情報から画像群に 2 段階クラスタリングを適用する．さらに，各クラスタの代表画像を選択する．このように構築された階層型画像データを，平安京ビューという階層型データ可視化手法 [2] を用いて表示する．
CAT の特徴において，まず，我々の階層型画像閲
覧ブラウザは，ズームアウトされた初期状態において少数の代表画像のみを表示させるため，人間の視覚能力とディスプレイの解像度に応じた適切な枚数で画像を表示できる．また，階層構造に基づくユーザインタフェースは，ファイルシステムブラウザと論理的に類似していることから，多くのユーザにとって慣れた操作性を感じることが期待できる．
もう 1 つの利点は処理時間の分散化である．画
像ブラウザを立ち上げる際，大量の画像を全部一気に読み込むとしたら，非常に大きな時間を要する．
Copyright is held by the author(s).
∗Ai Gomi Takayuki Itoh and Reiko Miyazaki, お茶の水女子大学大学院, Jia Li, Computer Science and Engineering, The Pennsylvania State University

CAT では最初に代表画像のみを読み込み，続いてズームイン領域の画像を徐々に読み込むことで，一気に大きな処理時間がかかるのを防止できる．
続いて CAT の可視化例を示す．CAT では初期画面にてキーワード一覧を表示し，ユーザに 1 個以上のキーワードを選択させる (図 1 左)．続いて CAT
は，選択したキーワードを含む画像群の階層構造を構築し，キーワードに基づいて分類された高階層クラスタの代表画像を表示する (図 1 左中央)．続いてズームイン操作に伴い，画素情報に基づいて分類した低階層クラスタの代表画像を表示する (図 1 右中央)．さらなるズームイン操作に伴い，個々の画像サムネイルを表示する (図 1 右)．

2

処理手順

2.1 画像クラスタリング
CAT はまず，同じキーワードセットを持つ画像を同じクラスタに配属させる．本報告では，キーワードに基づくクラスタを高階層クラスタと定義する．
続いて CAT では，高階層クラスタに属する各画像について，画素情報に基づくクラスタリングを適用する．CAT では色と周波数成分から特徴ベクトルを計算し，bottom-up リンケージクラスタリン
グによって，特徴ベクトル間角度の小さい画像ペアを順次同じクラスタに併合する．このとき，各クラスタの画像数の均一化を試みながらクラスタを生成し，可視化結果の視認性の向上を目指す．本報告では，画素情報に基づくクラスタを低階層クラスタと定義する．

2.2

代表画像の選出

クラスタリング完了後に CAT は，それぞれのクラスタから代表画像を選出する．現段階では，画素情報から得られた特徴ベクトルがクラスタの中心に

WISS 2007

Zoom-out

Zoom-in

図 1. CAT による画像の一覧可視化とズーム操作の例．(左) キーワード選択画面．ここでは”Flower”と”Plant”の 2
キーワードを選択している．(左中央) 高階層クラスタの代表画像表示画面．(右中央) 低階層クラスタの代表画像表
示画面．(右) 個々の画像サムネイル表示．

最も近い画像を，代表画像として選出している．

2.3 相互的なキーワード選択
CAT は初期画面として，キーワード選択画面を表示する (図 1 左)．そして，可視化の対象としたいキーワードをユーザが選択すると，CAT はそれらのキーワードを含む画像群の階層構造を構築する．

2.4

平安京ビューによる一覧可視化

以上の処理によって構築された階層構造を，平安京ビュー [2] により可視化する．平安京ビューでは木構造の葉と枝を，それぞれアイコンと入れ子状の長方形の枠で表現する．CAT では各々の画像をアイコンにマッピングするだけでなく，各々のクラスタの代表画像を，長方形の枠にマッピングする．そしてマウスのズーム操作に伴って，アイコン画像や代表画像の表示を切り替え，シームレスな詳細度制御を実現する．
平安京ビューの類似手法として，PhotoMesa にも採用されている Quantum Treemap[3] が挙げられる．文献 [2] の中の実装テストにおいて，我々の手法は，長方形の縦横率の調節と，類似データにおける表示結果の類似性においてより優れていると評価されている．よって CAT では，長方形の縦横比の調節により，歪まずに代表画像を表示できるという点から，我々の手法である平安京ビューを階層構造の可視化に用いた．また平安京ビューは，不均一な深さを有する階層構造の可視化においても，Quantum
Treemap より有利であると考えられる．
なお図 1 のような画面配置において，画像の類似度の高いクラスタを画面上の近い位置に配置したい場合，主成分分析（PCA）や多変量解析（MDS）などを併用して表示するという手段が有効である．

3

評価実験

我々は Microsoft Visual C++および OpenCV を用いて CAT を実装した．テスト環境には WindowsXP を搭載した PC を用い，横 384 画素，縦 256 画
素の JPEG 画像 2360 枚を活用した．
以下，10 人の学生被験者による，主観評価のためのユーザテスト結果を示す．
「クラスタあり/なし」「代表画像の表示/非表示」といった複数のブラウザを被験者に数分間操作してもらい，視覚的印象と使いやすさの観点から，主観的に順位をつけてもらった．この結果から，代表画像の存在はとても効果的であることがわかった．更に，被験者からの意見として，代表画像の重要性は詳細度制御による安定した画像サイズでの表示ができるということだけでなく，画面切り替わり速度とメモリ使用量の観点で効果的であると言う意見が挙げられた．

4

まとめ

本報告では，クラスタリングされた大量画像の一覧表示と詳細度制御を実現する可視化手法 CAT(Clustered Album Thumbnails) を提案した．今後の課題として，ユーザインタフェースの更なる拡張．
更に，大解像度ディスプレイ，大規模スクリーンなどの大規模環境でのユーザーテストの実行．また，GPU を用いた高速表示環境の実装を検討したい．

参考文献[1] Bederson B., B., PhotoMesa: A Zoomable Image Browser Usin Quantum Treemaps and Bubblemaps, Symposium on User Interface Softwareand Technology, pp. 71-80, 2001.
[2] Itoh T., Yamaguchi Y., Ikehata Y., Kajinaga
Y., Hierarchical Data Visualization Using a Fast
Rectangle-Packing Algorithm, IEEE Transactions on Visualization and Computer Graphics,
Vol. 10, No. 3, pp. 302-313, 2004.
[3] Bederson B., Schneiderman B., Ordered andQuantum Treemaps: Making Effective Use of 2DSpace to Display Hierarchies, ACM Transactions
on Graphics, Vol. 21, No. 4, pp. 833-854, 2002.