照片詮釋資料標記工具之設計與製作 - 政大學術集成

全文

(1)國立政治大學資訊科學系 Department of Computer Science National Chengchi University 碩士論文 Master’s Thesis. 立. 政治大. ‧ 國. 學. 照片詮釋資料標記工具之設計與製作. ‧. Design and Implementation of a Metadata. y. Nat. n. al. er. io. sit. Annotation Tool for Images. Ch. engchi. i n U. v. 研究生：陳昱宇指導教授：陳恭. 中華民國一百零三年七月 July 2014.

(2) 照片詮釋資料標記工具之設計與製作 Design and Implementation of a Metadata Annotation Tool for Images. 研究生：陳昱宇. Student：Yu-Yu Chen. 指導教授：陳恭. Advisor：Kung Chen. 國立政治大學資訊科學系碩士論文. 學. ‧ 國. 立. 政治大. ‧ y. Nat. n. er. io. sit. A Thesis Submitted to Department of Computer Science a l Chengchi University v National i n Ch U e n gofcthe In partial fulfillment h i Requirements for the degree of Master in Computer Science. 中華民國一百零三年七月 July 2014.

(3) 照片詮釋資料標記工具之設計與製作. 摘要. 數位照片的技術發展快速，使用者拍攝照片後，通常都不再將照片洗出來保存，而是將其保存在電腦或網路相簿，以往照片收集成冊的習. 政治大. 慣已經不合時宜。但隨著時間過去，所累積的大量數位相片也帶來搜. 立. 尋上的困擾。在相片上加註解顯然是一種便於日後搜尋的一種做法。. ‧ 國. 學. 但現今的照片標記工具都是著重在人臉辨識，過於狹隘，缺乏針對整. ‧. 體照片的內容給予如:人事時地物等的註解。. Nat. io. sit. y. 本論文實作一個數位相片標記工具，讓使用者可以對照片加上多. al. er. 種詮釋資料(metadata)，藉由這些詮釋資料來做為有效管理照片的依. n. v i n Ch 據，並達到搜尋的目的。目前實作的工具可以將標記的註解 engchi U. (annotation)分為兩類：照片背景與照片內容。照片背景註解是關於整張照片，如：拍照時間、地點；內容是照片內部的註解，可以對照片中的人、事、物進行多個標記。每個註解給予類型(type)作為分類，在搜尋時候類型也會當作搜尋條件來增加精準度。目前的結果，本工具可以讓使用者對照片的詮釋資料執行新增、刪除，並依循詮釋資料協助使用者搜尋到正確的照片。.

(4) Design and Implementation of a Metadata Annotation Tool for Images. Abstract. As digital photos are widely used in cell phones and camera these days, now days people seldom develop photos but keep them in their own computers. Yet, as the volume of photos grows, it is not easy to search for specific photos. Conceivably, one can add annotations to digital photos to facilitate the task of searching. However, most photo annotation tools focus on people identification; no facility is provided for events, places, and time. This thesis presents a metadata annotation tool that enables users to add arbitrary annotations on digital photos to facilitate photo management and search. In this system, users add metadata to photos and then search photos by these added metadata. a l We classify theses i vannotation into two categories: background C h annotation Uandn content annotation. e n g information Background annotation specifies about the whole chi photo, such as date and location. By contrast, content annotation specifies information about the contents of a photo; there could be more than one content annotation associated with a photo. For example, we can put one annotation for each person occurred in a photo. Every annotation includes a type field to classify into four categories: who, which, when, and where. These types will help us to mange photos and search them. There are also a few other facilities that make annotations easy to manage.. 立. 政治大. n. er. io. sit. y. ‧. ‧ 國. 學. Nat.

(5) 誌謝辭碩士生的生活即將結束，感謝陳恭老師的悉心指導，讓我在研究所的學習過程中獲得許多專業知識和面對問題的態度。老師總是提醒我們學習的過程不會一路順遂，尤其是在學新技術的時候，即使有壓力與挫折仍然要持續下去，這樣才會有收穫。報告時老師都會強調如何讓下面聽眾「見樹又見林」，使得在每次報告中有所成長。感謝父母總是無私的關照，在有困難時給予幫助，包容我的缺點，讓我可以專心學業，這段時間辛苦你們了。謝謝在 PLSM 這個大家庭的各位：天線、文楷學長的經驗分享。謝謝小白學長在處於新生階段的我給予許多幫助與建議。感謝小 Q、宸暉提供我許多技術上的新知與幫助。謝謝佐玄在論文方向上的討論、合作。感謝子文、家宇對於電影的獨到見解，讓我在休閒之餘受益良多。奕凱、文志、佑甫你們的加入讓實驗室多了新的活力。謝謝 Zack 讓我體會與外國人相處的經驗，使我知道英文仍需加強。感謝我的大學同學，大家偶爾的聚會，讓我研究生的生活有放鬆的空間。最後，謝謝政大資科的所有老師、助教以及同學，在大家的指導與協助下，我才能順利完成學業。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v.

(6) 目錄緒論 ............................................................... 1 1.1 前言 .......................................................... 1 1.2 研究之背景 .................................................... 1 1.2.1 Crowd sourcing............................................ 1 1.2.2 Text annotation........................................... 2 1.2.3 Image content............................................. 2 1.3 研究動機與目的 ................................................ 4 1.4 論文研究成果 .................................................. 5 1.5 論文之章節架構 ................................................ 5. 政治大. 相關研究的概況與評述 ............................................... 6. 立. UIMA (UNSTRUCTURED INFORMATION MANAGEMENT ARCHITECTURE) ................ 6 FACEBOOK、PICASA 照片標記 ....................................... 6 CALIPH & EMIR ................................................... 7 MOBILE MEDIA METADATA SYSTEM ....................................... 8 OKFN (OPEN KNOWLEDGE FOUNDATION) ANNOTATOR .......................... 9 FLICKR ........................................................ 12. ‧. ‧ 國. 學. 2.1 2.2 2.3 2.4 2.5 2.6. y. Nat. sit. 研究方法及架構 .................................................... 14. n. al. er. io. 3.1 系統架構 ..................................................... 14 3.2 系統設計概念 ................................................. 15 3.3 系統設計元件 ................................................. 16 3.3.1 相簿(album)編輯........................................ 16 3.3.2 照片註解............................................... 16 3.3.2 註解類型(Annotation Type )............................. 17 3.3.3 權限(permission)控管................................... 17 3.3.4 Input.................................................. 18 3.3.5 Output................................................. 19 3.3.5.1 總攬頁面....................................... 20 3.3.5.2 細部註解頁面................................... 21 3.3.6 Date Picker............................................ 21. Ch. engchi. i n U. v. 系統實作與成果評估 ................................................ 23 4.1 使用情境 ..................................................... 23 4.2 系統實作 ..................................................... 24.

(7) 4.2.1 上傳照片設計與實作 ....................................... 24 4.2.2 照片之詮釋資料類型....................................... 25 4.2.3 詮釋資料格式............................................. 27 4.2.4 照片之詮釋資料儲存與傳遞................................. 28 4.2.5 權限實作................................................. 29 4.2.6 搜尋結果呈現............................................. 30 4.3 成果評估 ..................................................... 31 結論與未來發展 .................................................... 34 5.1 結論 ......................................................... 34 5.2 未來發展 ..................................................... 34 參考文獻 .......................................................... 38. 政治大. 附錄 .............................................................. 40. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v.

(8) 圖目錄 1 PICASA 人臉標記畫面 ........................................... 7 2 CALIPH 對於圖片標記人物、時間、地點 ........................... 8 3 手機上 MMM 的使用介面......................................... 9 4 OKFN ANNOTATOR ............................................... 10 5 ANNOTATOR JSON 傳輸格式 ....................................... 11 6 JSON 裡的 PERMISSION 格式 ...................................... 12 7 FLICKR 之 TAG .................................................. 13 8 JQUERY IMAGE ANNOTATION 的使用範例 .............................. 14 9 兩種 JSON 格式 ............................................... 15 10 ANNOTATION 編輯頁面 ........................................... 18 11 搜尋輸入介面 ............................................... 19 12 搜尋結果頁面 ............................................... 20 13 DATEPICKER ................................................... 21 15 上傳檔案之 SCRIPT ............................................ 24 14 執行流程 ................................................... 24 16 COLORBOX 呈現效果 ............................................. 25 17 ANNOTATION TYPE 的選擇 ......................................... 25 18 JSON 比較圖 ................................................. 26 19 XML 比較圖 .................................................. 27 20 ANNOTATION IN JSON ............................................ 28 21 內容 ANNOTATION IN JSON ........................................ 28 22 JSON IN LOCAL STORAGE .......................................... 29 23 判斷 EDITABLE 與否 ............................................ 30 24 EXAMPLE OF APPENDTO () ......................................... 31 25 權限 JSON 資料表 ............................................ 35 26 使用者討論 ................................................. 36. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. FIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIGFIG-. Ch. engchi. i n U. v.

(9) 表目錄 PANOFSKY-SHATFORD MODE FACET MATRIX ................................. 3 PANOFSKY-SHATFORD MODE 舉例 ...................................... 3 權限內容表 ................................................. 11 兩種 ANNOTATION 對照表 ........................................ 16 權限簡化內容 ............................................... 18. 立. 政治大. 學 ‧. io. sit. y. Nat. n. al. er. 1 2 3 4 5. ‧ 國. 表格表格表格表格表格. Ch. engchi. i n U. v.

(10) 第一章緒論 1.1 前言現在手機拍照容易，許多人每天都會對人、食物、風景…等等拍照，而有大量的像片。但是目前大部分的人並沒有一個方便管理照片的工具，都. 政治大. 只有開一個資料夾將這次所拍的照片儲存在裡面，當照片累積到一定量的. 立. 時候，我們想要找到以前的照片只能一張張的慢慢找，甚至找不到印象. ‧ 國. 學. 中的那一張照片，搜尋困難。. 隨著科技的興起，數位相片的使用日益增加，以往將照片收集成冊的收藏. ‧. 習慣已經不合時宜，如何設計出適合的工具讓使用者可以增加便利、節省時間. y. Nat. sit. 是想解決的問題。在設計架構時有許多需要考量的因素，包括前端(Front-end). n. al. er. io. 頁面的顯示、照片如何標示、如何將照片上的詮釋資料(metadata) 儲存到資. i n U. v. 料庫管理等等，以及後續的應用：幫助使用者管理、搜尋照片，給予使用者更大的便利。. Ch. engchi. 1.2 研究之背景 1.2.1 Crowd sourcing 群眾外包(Crowd sourcing)[9] 由 Jeff Howe 於 2006 年提出，它的概念是將一些需要仰賴人力完成的工作透過特定的平台，外包給網路上不特定的一群自願者，處理的內容通常是較瑣碎、需要大量人力且電腦程式難以取代的工作。是一種分散式的問題解決和生產模式。. ~1~.

(11) 由委託工作者將原本性質單純、工作量龐大並且耗時的任務，切割成相對細小瑣碎的工作，以按件計酬的方式，直接在網路上號召大量有意願的群眾參與。使用群眾外包的技術雖然能為委託工作者節省成本，。群眾外包平台的理念源於集結眾人智慧，發揮產生群體智能；相較於其它替代方案，群眾外包平台具有工資低廉與產出效能充沛的特點，因而在短時間內迅速竄紅。近年來由於網際網路發達，許多人力成本相對低廉的國家也紛紛加入群眾外包的工作行列。群眾外包在近年來的蓬勃發展，不僅廣泛引起相關研究社群的注意，更已成為提供研究者收集實驗資料的重要研究平. 政治大. 台。著名的例子是：Amazon Mechanical Turk[1]。. 立. 1.2.2 Text annotation. ‧ 國. 學. 文字註解(text annotation)是對一段文字加上一段自己的看法、感受. y. Nat. 給予自己的提醒或是重點，也可以做為分享的眉批。. ‧. 或是解說，甚至有可能只有畫上底線，也就是所謂的筆記。文字註解可以是. er. io. sit. 傳統的文字註解是用紙筆寫下重點、摘要，方便以後閱讀或是將這筆記分享給其他人。而現在也有可以對網頁文字做文字註解的工具：將一段文字. al. n. v i n 反白，對這段文字下一段註解，也可以將註解儲存，方便之後還可以重新觀 Ch engchi U 看，如：OKFN-Annotator[7][8]。. 1.2.3 Image content 圖像資訊[15]所表達的意涵不單僅是物件本身，絕大部份是來自物件本身的屬性。每個人對於圖像的理解與詮釋不同，因此我們有時候很難斷定某筆圖像資訊究竟應該包含哪些主題。為了讓一幅圖像資訊的內容主題能夠盡可能地被分析，Sara Shatford[15] 特別將一幅圖畫可能呈現的意義分為兩種：「屬於」（Of）以及「關於」（About）；. ~2~.

(12) 再利用人物（Who）、事件（What）、地點（Where）、時間（When）等四個層面，細分圖像的意義，如表 1。並在下方舉例說明，如表 2. 表格 1 Panofsky-Shatford mode facet matrix 層面（Facets）. 屬於（Of）狹義（Specific. 廣義（Generic. Of）. Of）. 有個別名稱的. 某種類型的. 某人或物所象. 人、動物、事物. 人、動物、事物. 徵的抽象意涵. 人物（Who）. 事件（What）. ‧ 國. 立事件. 抽象表達. 有個別名稱的. 某一個地理區. 地理區. 或建築地. 某個時間、日期. 某個季節或時. 含有抽象象徵意義的地區. y. 某個時間所象徵的抽象情緒. io. sit. 日. n. er. Nat. 或時期. al. 情緒或事件的. ‧. 時間（When）. 治政某種行動、情況大. 有個別名稱的. 學. 地點（Where）. 關於（About）. i n U. v. 表格 2 Panofsky-Shatford mode 舉例. 層面（Facets）. Ch. engchi. 屬於（Of）. 關於（About）. 狹義（Specific. 廣義（Generic. Of）. Of）. 王建民. 大聯盟投手. 台灣之光. LV 包包. 名牌. 時尚. 事件（What）. H1N1. 流感病毒. 疫情. 地點（Where）. 埃及. 非洲. 古文明. 時間（When）. 2 月 14 日. 西洋情人節. 愛情. 人物（Who）. ~3~.

(13) 1.3 研究動機與目的在這照片量產的時代，傳統收納照片的方式已經不合適。設計出一個工具可以讓使用者管理照片，並在之後可以便利的搜尋，找到想要的照片。對於一些比較舊的照片，無法指認出照片的中的人事物的時候，也可以請求別人協助辨識。而要達成這一目的，首先需要有一個好用的照片標記工具：(1)要讓使用者可以輕易上手，不會覺的難用。(2) 要儲存這些照片上的 metadata，讓它的資料不會遺漏，而且可以方便傳遞。(3)設立平台，設法吸引使用者可以持續、常久的使用。. 立. 政治大. 目前有許多標記照片的工具或軟體，但都是對於整張照片標記，無法對. ‧ 國. 學. 於照片的細部內容個別標記，因此我們提出此一工具，希望可以增加功能，. ‧. 可以更靈活運用，給有這方面需求的用戶使用，除了讓使用者受到比較少的限制，還可以讓標記照片精準的呈現。藉由標記照片、編輯註解來管理照片，. y. Nat. io. sit. 將資料儲存至後端(back-end)資料庫後，甚至可以運用這些註解來達到搜尋. n. al. er. 的功用或是篩選照片，讓使用者以後要找照片的時候可以更加便利。. Ch. i n U. v. 本論文所設計的圖片標記工具，可以對圖片內容自由標記，並建立多個. engchi. 註解(annotation)，而不像傳統圖片標記工具，一張圖片對應到一個註解；可以將註解內容做為照片分類或搜尋的依據，方便使用者管理。在後續的應用，當有無法指認的照片，可以請其他使用者幫忙辨識，發揮類似 crowd sourcing 的精神，大家互助合作，減少人力成本。. ~4~.

(14) 1.4 論文研究成果基於上述的研究動機與目的，本論文實做了一個照片標記工具，除了有一般的基本功能，還會加入新的設計概念，以期達到便於對照片管理與搜尋的目的。主要成果如下： 1. 提供對一張照片可以加入多種註解(annotation) 的功能。 2. 將照片的註解進行不同的分類，引入類型(type)概念。 3. 加入權限控管註解的修改與否。. 治政 4. 提供依據註解做搜尋的界接方式：包含可以用類型做為搜尋的限制條大立件以及可用多個不同類型的關鍵字進行搜尋。 ‧. ‧ 國. 學. 1.5 論文之章節架構. sit. y. Nat. io. er. 本論文接下來的章節架構如下 : 第二章我們將會介紹重要的相關研究，. al. 以及討論相關研究目前概況、優缺點的比較。在第三章中會談到論文中使用. n. v i n Ch 到的技術方法之相關基本背景知識，包含我們所採用的標記工具的基本介紹， engchi U 以及我們所新增的功能。第四章前面是關於實作部分，會比較著重在技術探討；後半段則是根據設計的特點進行實際應用，並以搜尋結果的精準度做為評估依據。最後第五章的部分會提出結論並探討未來值得深入研究的發展的方向以及相關議題。. ~5~.

(15) 第二章相關研究的概況與評述本論文研究在此章節將介紹相關研究的技術方法，以及優缺點的討論。下面將介紹幾種關於照片標記的一些工具或服務，包括社群網站的照片標記功能、已被開發的照片管理工具。. 政治大 T.Gotz, et al. [2] 立 UIMA 用於分析非結構化的內容，如：文件、email、. 2.1 UIMA (Unstructured Information Management Architecture). ‧ 國. 學. Web…等等，將這些資料抽取出有用的訊息轉為結構化的資料，如：dataBase、 XML…等等，方便搜尋或管理。. ‧. UIMA 其所有分析功能，都是以模組化的方式建構，我們可以很輕鬆的加. sit. y. Nat. 入、移除文件功能分析模組，並讓他們可以組合運用，並不需要去了解細節。. al. er. io. UIMA 利用 meta-tag 來記錄在文本分析模式中的傳遞控制的資訊，使得其他開. v. n. 發者使用者可以在利用這方面的資訊，達到 reuse 的效果。將這些非結構化資. Ch. engchi. i n U. 料分析完畢，開發者可以容易的依循輔助工具開發新功能[3]，如：搜尋註解或索引、資料連結….等等。 2.2 Facebook、Picasa 照片標記 Facebook、Picasa 的照片 tag 功能，如 Fig-1。可以主動偵測人臉而對於標記，達到 social network 人與人互動的功能，但是它標記後加入的註解(annotation)僅限於跟人有關(對人臉標記，並註解人名)，無法對於其他部分進行標記。我們希望可以對相片標記有興趣的部分，然後加入的註解不只是人，甚至. ~6~.

(16) 是地點、時間、物件…等等，更彈性的去標記照片。對於人以外的註解也會有特別意義。另外，這是一種線上服務，當我們無法連上網路的時候，並不能離線使用，這也是一種天然限制。. 立. 政治大. ‧. ‧ 國. 學. n 2.3 Caliph & Emir. y. sit. io. al. er. Nat. Fig- 1 picasa 人臉標記畫面. Ch. engchi. i n U. v. M.Lux, et al. [4] 介紹 Caliph & Emir 是可以對圖片加入註解，並方便以後對於照片進行檢索的工具。主要的功能就是讓使用者輸入註解，在根據這些註解進行檢索、篩選[11]，避免發生照片過多找不到照片的情況。它可以選取一張圖片之後，對於這張圖片加入註解，如 Fig-2。Who、Where When、What Object、Why、How…等等的註解，之後可以根據這些註解來檢索照片。但是他的註解是對於整張照片，而沒有辦法針對照片內容的某特定區域進行標記、註解。為了讓註解可以更精準的表示在照片上，所以. ~7~.

(17) 希望可以有標記照片的功能，讓使用者可以專注在照片的某個部份上。. 政治大. 立. ‧ 國. 學 ‧. Fig- 2 caliph 對於圖片標記人物、時間、地點. sit. y. Nat. io. al. er. 2.4 Mobile Media Metadata System. v. n. Risto.S, et al. [5] 裡面提到他設計一個在手機上可以標記照片的系. Ch. engchi. i n U. 統，名為 Mobile Media Metadata (MMM)，目的是為了要讓手機拍完照片之後可以迅速的標上註解，然後上傳至網路與別人分享。因為手機的操作不方便，為了節省使用者操作的時間，它先設計好選單，使用者先選好類別，在寫入註解，如 Fig-3。之後將照片上傳與別人分享。因為註解有根據選單做分門別類，方便管理者管理管理。缺點一樣是只能對整張照片編寫註解[12]。. ~8~.

(18) Fig- 3. 手機上 MMM 的使用介面. 2.5 OKFN (Open Knowledge Foundation) Annotator. 治政大加入任何一個網頁使 user 可以對網頁上的文字加上註解[13]。它是一個很立 Annotator 是一個 open source 的 JavaScript library 工具，他可以. 簡單的 plug-in、讓使用者可以很簡單的將這個工具加入你有需要的網頁。. ‧ 國. 學. 加入 plug-in 則對於想標記的文字進行反白，出現新視窗寫下註解；而標記. ‧. 過的文字會以黃底顯示，如圖 Fig-4。. y. Nat. 這個 project 功能完善，雖然它標記的對象是文字，還是有很多可以參. n. er. io. al. sit. 考、學習的地方，看如何運用到圖片上：. Ch. engchi. ~9~. i n U. v.

(19) 學. ‧ 國. 立. 政治大. Fig- 4 OKFN Annotator. ‧. 1. 註解是以 JSON(JavaScript Object Notation)做為傳遞格式：. sit. y. Nat. JSON 是一種輕量級的資料交換語言，以文字為基礎，且易於讓人閱讀。儘. al. er. io. 管 JSON 是 Javascript 的一個子集，但 JSON 是獨立於語言的文字格式，並. v. n. 且採用了類似於 C 語言家族的一些習慣。JSON 最開始被廣泛的應用於 WEB. Ch. engchi. i n U. 應用的開發，隨著 Web2.0 的興起，JSON 在 WEB 資料傳輸領域佔有重要的地位，如 Fig-5。 2. Storage plug-in：將註解送至 server，其 action 包括：read、create、update、destroy、 search。Storage API 是使用 REST(Representational State Transfer)架構來接收 JSON。有六種主要的 endpoint： root,. index,. create,. read,. update,. ~ 10 ~. delete,. search. API。.

(20) 立. 政治大. n. al. sit. er. io. 3. Permission plug-in. y. ‧. ‧ 國. 學. Nat. Fig- 5 Annotator JSON 傳輸格式. i n U. v. 此 plug-in 為註解與 user 之間增加權限(Permissions)管理。註解一開始. Ch. engchi. 的權限預設是可以讓所有使用者 viewable/editable/deleteable，透過 Permission plug-in 進行調整，讓「誰」可以對這個註解進行動作。表格 3 權限內容表. Permission 內容 read：誰可以看到這個註解。 admin：誰可以修改此註解的權限。 update：誰可以編輯此註解。 delete：誰可以刪除此註解。. ~ 11 ~.

(21) Permission plug-in 總共有四個動作，如表 3。而這些動作權限也會記錄在 JSON 裡面，如圖 Fig6。每個動作後面都有一個陣列(array)。如果是空陣列，表示這個動作可以被任何人執行，否則只有在陣列裡面出現的 user 才可以執行此動作；如果我們想要變得複雜：加入群組，也可以在陣列中使用自己的 syntax，如 Fig-5 的 permission。. 立. Fig- 6. ‧. ‧ 國. 學. 2.6 Flickr. 政治大 JSON 裡的 permission 格式. y. Nat. sit. Flickr 是社群功能豐富的網路相簿，其標籤（Tags）功能讓使用者可自行. n. al. er. io. 定義該圖片的關鍵字，間接利用了人類智能來提高圖片搜尋結果的廣度。. i n U. v. Flickr 藉由使用者之間的關係建立彼此相互連接的數位影像，影像可依其內. Ch. engchi. 容彼此產生關聯。照片擁有者可以自己定義該相片的關鍵字，也就是「標籤（Tags）」（Metadata 的一種格式），如 Fig-7。. ~ 12 ~.

(22) Fig- 7 flickr 之 tag. 治政大或照片的主題，而創作者也能很快了解相同標籤（Tags）下有哪些使用者所分立如此一來搜尋者可以根據 tag 很快的找到想要的相片，例如指定拍攝地點. 享的照片，Flickr 也會挑選出最受歡迎的標籤名單，縮短搜尋相片的時間。. ‧ 國. 學. Flickr 被普遍認為是有效使用群眾分類法（Floksonomy）的典範。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. ~ 13 ~. i n U. v.

(23) 第三章研究方法及架構本章節會把上面提到的作法作為參考，結合他們的特點，設計出一個照片詮釋資料標記工具，讓它可以進行標記、註解的儲存。同時，我們也會闡述此工具的設計的理念。. 立. 3.1 系統架構. 政治大. ‧ 國. 學. 我們以 OKFN Annotator 作為架構參考，將其運用在圖片標記系統裡面。經過一番比較，我們決定採用 git-hub 上的開放源碼專案 jQuery Image. ‧. Annotation[10]這個工具為基礎，針對我們的需求進行大幅改寫。這是一個網. y. Nat. n. al. er. io. 解，如 Fig-8。. sit. 頁上 jQuery 的 plug-in，讓我們可以對圖片上的任一部分進行標記，寫入註. Ch. engchi. i n U. v. Fig- 8 jQuery Image Annotation 的使用範例. ~ 14 ~.

(24) 3.2 系統設計概念本論文研究的圖片標示工具是為了增加已有的工具的功能，它不再像以前的圖片標示工具：圖片與註解是一對一關係，而是一張圖片會有多個註解。為了方便我們處理，我們對於照片寫註解的時候會將註解細分為照片本身的註解：標題(title)、拍照時間、拍照地點、事件，稱為背景註解。以及照片內容中：人、事、物的內部註解兩大類。如此區分的主要原因是可能有同一組照片，但是有很多張照片，例如：可能有一批照片都是「2013 同學會」的時候拍的，那它們就會有相同的標題，可以把他們歸為同一類照片，但是每張照片的內容. 政治大接著我們說明照片上的立metadata 如何設計。這些 metadata 包括：(1)在照. 並不會相同，所以分成兩類比較恰當。. ‧ 國. 學. 片上註解的座標：top、left、width、height。(2) 註解種類：Who、Where、 When…等等。(3) 註解內容：包括問題與回答。讓這些 metadata 可以讀寫正. ‧. 常，並能有效管理，甚至是跨平台傳遞都是要解決的課題。. sit. y. Nat. 使用 JSON(JavaScript Object Notation)做為與後端(back-end)溝通的資. al. er. io. 料格式，將每張照片的 metadata 儲存進 JSON，而會有兩種 JSON 格式，成如. v. n. 上述的兩類註解而設計，如 Fig-9。JSON 內容的解說(表 4)，其中這兩種註解. Ch. engchi. i n U. 都以 photo-id 作為連結，因此兩種 JSON 都包含這個資料，相同的 photo_id 表示註解對應到相同的照片。. Fig- 9 兩種 JSON 格式. ~ 15 ~.

(25) 表格 4 兩種註解對照表照片本身註解. 照片內容註解. -photo_id. ：照片 id. -photo_id. ：標記照片的 id. -photo_user. ：誰上傳此照片. - annot_id. ：註解專屬 id. - photo_updateTime ：上傳時間. - annot_user. ：誰建立此註解. -photo_time. ：拍這張照的時間. -photo_locate. -annot_type -top. ：拍這張照的地點：拍這張照的活動 -hieght ：拍這張照的標題 -width - left. - photo_event - photo_title. ：註解種類：標記座標：標記座標：標記座標：標記座標. -text. 立. 3.3 系統設計元件. ：註解內容. 政治大. ‧ 國. 學. 在進行圖片標計工具設計時需要多方面的考量，接下來會進行使用者介面. ‧. (user interface ,UI)設計細節的探討。. y. Nat. io. sit. 第一階段，上傳照片：. n. al. er. 3.3.1 相簿(album)編輯. Ch. i n U. v. 當使用者上傳照片有時候不是一張一張，它有可能是一批照片都是同一個. engchi. 時段拍的，例如：出遊、同學會…等等，避免將同一批的照片分散，我們使用了相簿的概念。另外使用者對這批照片要輸入重複的時間、地點、事件註解，在建立相簿時，我們同時會要求使用者輸入相簿的註解：名稱、地點、日期、活動，之後在這相簿裡面所上傳的照片，都會預先將相簿的註解填入照片之中，減少使用者負擔。第二階段，標記照片： 3.3.2. 照片註解. 基於 3.2 小節所說，將註解分成兩類，所以我們在輸入這兩種註解會有不同的輸入方式。首先，背景註解為整張照片所有，並不是指照片的某一特定區. ~ 16 ~.

(26) 塊，這一類的註解會在畫面上方讓使用者直接輸入；內部的註解則是特指照片中的某一區域，所以需要使用者對照片特定部分標記之後，再開始撰寫註解。. 3.3.2 註解類型(Annotation Type ) 本工具除了要讓使用者標記照片外，還希望可以幫助使用者在大量的照片中找到想要的照片，因此我們把各類的註解加入類型(type)概念。主要的目的是註解經過類型區別，我們資料可以分門別類儲存，幫助我們之後資料分析不會過於複雜，最重要的是可以降低之後搜尋的複雜度，不需要將所有註解都搜尋過，只要找相同類型的註解即可。. 政治大. 目前背景註解的類型有：標題、時間、地點、活動，內部註解有：人、物件、地點。. 學. ‧ 國. 立. 3.3.3 權限(permission)控管. ‧. 本論文一開始希望可以有網路社群的功能，因此參考 OKFN Annotator 工. y. Nat. 具的權限設定管理，雖然最後網路的社群功能並沒有實做出來，但是我們還是. er. io. sit. 有設計基本的權限設定。. 根據 2.5 小節中的第三點提到 permission 的四個動作：. al. n. v i n read/admin/update/delete，來設定註解與用戶之間的管理。由於本工具目前 Ch engchi U. 沒有社群概念，我們將權限簡化成：是否同意讓其他使用者修改，也就是將四個權限動作簡化成：read/admin、update、delete，兩種動作，如表 5。這樣的簡化是將註解可以修改的分一類，不能修改得分一類，達到初步的權限管理，也能方便以後做功能擴充。. ~ 17 ~.

(27) 表格 5. 權限簡化內容. Permission 內容 read：誰可以看到這個註解。 admin：誰可以修改此註解的權限。 update：誰可以編輯此註解。 delete：誰可以刪除此註解。. 第二階段編輯註解頁面，如 Fig-11。. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. n. a l Fig- 10 註解編輯頁面 i v n 第三階段，搜尋照片： C h U engchi. 3.3.4 Input. 本論文在搜尋輸入關鍵字的部分，分成兩大類。第一種為單一關鍵字的快速搜尋，如同 Google 搜尋一般；第二種為應用前面註解類別的特性的「多重搜尋」。為了讓搜尋更為精準，這兩種搜尋都會讓使用者選擇註解的類型，如 Fig-11。在快速搜尋的部分，使用者填完關鍵字可以選擇下面的類型按鈕，增加搜尋的精準度。. ~ 18 ~.

(28) 政治大立Fig- 11 搜尋輸入介面. ‧ 國. 學. 當使用者想設定多個搜尋條件的時候，我們也有設計 UI 讓使用者輸入，根據條件輸入欄位中，則可以使用各個欄位相對應的類型來進行更精準的搜. sit. y. Nat. 3.3.5 Output. ‧. 尋。. n. al. er. io. 搜尋結果的顯示我們在這邊分成兩部分：第一，搜尋結果總覽的部分；第. i n U. v. 二，點選搜尋結果，進入單張照片觀看註解部分。以這種方式呈現主要是參考. Ch. engchi. Google 搜尋結果的呈現方式，在 Google 網頁上呈現搜尋結果的總覽，再根據使用者的選擇，連結到所要的網頁。目前我們的做法也會如同 Google 搜尋，如 Fig-12。. ~ 19 ~.

(29) 立. 政治大. ‧ 國. 學. Fig- 12 搜尋結果頁面. 3.3.5.1 總攬頁面. ‧. 此頁面頂部為 3.3.4 節的 input 畫面，按下搜尋按鈕之後，系統會將搜尋. sit. y. Nat. 結果直接在下方顯示。這邊使用 AJAX(Asynchronous JavaScript and XML)技. al. er. io. 術，當使用者送出表單向網頁伺服器(web server)做請求的時候不必傳回新的. v. n. 頁面，直接藉由 JavaScript 處理來自 sever 的回應。這樣的做法減少了 server. Ch. engchi. i n U. 與瀏覽器之間的資料傳輸量，同時許多處裡可以在用戶端(client)上完成，減少 server 負擔，讓回應更為快速。除了效能的需求，這樣設計也更為直覺，使用者如果需要再次搜尋並不用重新回到上一頁。顯示的部分會將每張照片的註解顯示出來，並將符合搜尋的註解強調 (highlight)出來供使用者觀看，確認是不是他想要的註解，如同 Google 每個連結下的文字說明。此外還會有配合後端(back-end)的推薦系統，顯示這次關鍵字的相關推薦搜尋，希望可以符合使用者期望。. ~ 20 ~.

(30) 3.3.5.2 細部註解頁面這部分的頁面與第二階段標記照片的頁面外觀是相同的，顯現出照片的各個註解。因為這是搜尋的結果，我們希望設計出像 Google 一樣，可以強調 (highlight)搜尋結果的 UI 設計。原本的設計是使用者將滑鼠移動到照片上才會顯示出內部註解，現在我們增加一段 JavaScript code 去觸發這個動作，在搜尋頁面 load 進來的時候可以直接顯示註解並且看到符合搜尋的註解內文，達到強調的效果，比使用者去移動滑鼠來觀看註解直觀。. 治政大不管是在註解的撰寫或是搜尋條件的輸入，只要是要填寫時間的地方，本立. 3.3.6 Date Picker. 工具都使用 JQuery Datepicker 讓使用者選擇，如 Fig-13。. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. Fig- 13 Datepicker. 這樣的設計並除了網頁安全設計所說「不要輕易相信使用者輸入的資料」的防範，而是日常生活中使用的日期格式過多，同一天的日期有不同的表示方法，有西元、有民國，年度的位置有在前、有在後…等等，每個使用者的習慣不同。引入 Datepicker，除了讓使用者有選取代替輸入的便利性，更重要的是有防呆機制(Fool-proofing)：免除使用者輸入錯誤的日期，如：2/30 或起. ~ 21 ~.

(31) 始日起晚於結束日期，如：2014/7/30~2013/6/01。避免須要進行錯誤資料清洗(Data Cleaning)步驟。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ~ 22 ~. i n U. v.

(32) 第四章系統實作與成果評估本章節針對系統工具進行實作展示與結果評估，闡述使用者如何運用本系統進行照片註解的 CRUD( create, read, update and delete)操作。首先從使用者的角度切入使用者情境(User story)，然後討論實作的流程，以及最後根據. 政治大. 建立的註解進行搜尋的結果進行系統可行性的評估。. 立. ‧ 國. 學. 4.1 使用情境. 在參考其他相近的論文，作者們普遍碰到的問題是如何引發使用者標記照. ‧. 片的動機。使用者發出的質疑是：這些照片都我拍的，當我看到這些照片的時. y. Nat. sit. 候都可以認出照片中的人物，為什麼還要花時間來建註解？. n. al. er. io. 如同前言所說，現在拍照容易每天都會產生大量的照片，如果時間久了，. i n U. v. 十年、二十年不見得每張照片的內容都還記得。另外如果這些照片不屬於私人，. Ch. engchi. 是屬於某機關團體的，那要辨識出來就更加困難。以學校為例：每個系舉辦活動，迎新、演講、系慶…等等，每年都有很多照片，當這些照片中的老師同學退休、畢業之後，要再整理就會變得非常困難。所以對照片標記、新增註解，短期內的效益可能不夠明顯，但對長遠來說是有它的價值。結合以上幾點，希望可以藉由標記照片的工具讓使用者們可以對照片內容加入註解，達到方便管理、搜尋的目的。本論文的使用情境將是幫系上的照片標上註解，在進行搜尋。. ~ 23 ~.

(33) 4.2 系統實作操作流程大致可分為三個階段：1.照片上傳。2.加入註解。3.搜尋照片，如 Fig-14。我們會根據 3.3 節的元件設計將這三個階端進行實作展示。選擇照片照片上傳. 標記照片加入註記. 儲存. 使用者搜尋照片. Fig- 14 執行流程. 4.2.1 上傳照片設計與實作. 政治大擇要上傳的檔案，並在用戶端(client)以 script 來記錄上傳的檔案名稱與路立使用 button 觸發照片上傳事件，讓使用者控制新增檔案瀏覽列數目並選. ‧. ‧ 國. 學. 徑，如 Fig-15。. er. io. sit. y. Nat. n. a lFig- 15 上傳檔案之 script i v n Ch U engchi. 根據 3.3.1 小節相簿的實作部分，採取 JQuery Lightbox plugin – colorbox。所謂的 Lightbox 就是在網頁中開啟一個視窗(非新視窗)，而開啟的視窗會出現在網頁正中央，並且淡化網頁其他部分，讓使用者注意力集中在中央的視窗，Colorbox 是「輕量級、可客製化的 JQuery Lightbox plugin」。將 Colorbox 運用在相簿資料輸入的視窗上，除了不用再連結的新頁面，也有強調效果，如圖 Fig-16。. ~ 24 ~.

(34) 政治大 Fig- 16 colorbox 呈現效果立. ‧ 國. 學. 4.2.2 照片之詮釋資料類型. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. Fig- 17 註解類型的選擇根據 1.2.3 小節的 Shatford mode facet matrix，圖像有很多不同的層面，我們希望根據這些層面給予註解不同的類型(type)做為區別，達到分類的目的。. ~ 25 ~.

(35) 在相片背景註解的部分，會根據使用者填入的 input box 給予對應的類型，例如：填在時間欄位，那這欄位的資料就會將它存成類型為 time 的註解。至於相片內容的註解，則會提供下拉式選單給使用者選擇你現在填入的註解是哪個類型，如 Fig-17。誠如 3.2 節提到，我們將以 JSON(JavaScript Object Notation)做為與後端伺服器溝通的資料交換語言，如 Fig-18。JSON 是個以純文字為基礎去儲存和傳送簡單結構資料，我們可以透過特定的格式去儲存任何資料，也可以透過物件或陣列來傳送較複雜的資料。相較於傳統 Web Application 都是透過. 政治大. XML(Extensible Markup Language)做為資料傳遞格式，如 Fig-19，JSON 的優點在於：. 立. 1. 相容性高。. ‧ 國. 學. 2. JSON 格式可讀性遠高於 XML，容易瞭解、修改。. ‧. 3. 支援許多資料格式 (number, string, Booleans, nulls, array, associative array, object)。. Nat. n. sit er. io. 5. 表達相同的資料 XML 的資料量遠大於 JSON。. al. y. 4. 許多程式都支援函式庫讀取或修改 JSON 資料。. Ch. engchi. i n U. Fig- 18 JSON 比較圖. ~ 26 ~. v.

(36) 立. 政治大. Nat. y. ‧. ‧ 國. 學 Fig- 19 XML 比較圖. er. io. sit. 4.2.3 詮釋資料格式. 每張照片都會有自己的 JSON 資料表，照片上的每個註解，我們都會以. al. n. v i n key-value 的形式紀錄在 JSONC中。以 3.2 節的內容，照片註解分為背景註解 hengchi U. 與內容註解，照片的背景註解與照片是一對一關係，所以在 JSON 中它們的數量並不會增加；內容的註解則會根據使用者標記數量的多寡而增加或減少，這部分會經由 JavaScript code 在 JSON 中進行動態修改。背景註解的 key 即為類型(type)，而內容註解會有一個名為 type 的 key-value 去記錄類型。每張照片 JSON 格式，如 Fig-20。time、place、event、title 都是背景註解，只有一個，數量不會增加；而 annotationdata 是一個 array 記錄著照片內部的註解，展開會如 Fig-21，會紀錄這個註解再相片中的位置(top、left、 height、width)，type 與 text 則記錄註解內容，editable 則是權限的控管。. ~ 27 ~.

(37) Fig- 20 annotation in JSON. 立. 政治大. ‧. ‧ 國. 學. n. a. 4.2.4 照片之詮釋資料儲存與傳遞 l. Ch. engchi. er. io. sit. y. Nat. Fig- 21 內容註解 in JSON. i n U. v. 進入標記照片的階段主要將使用者撰寫的註解暫存起來，之後再批次 (Batch)傳遞到後端資料庫，避免發生遺漏的狀況。以前在 client 端可以用 cookie 暫存資訊，但是在使用上會有些不便： 1. 不管是否會用到 cookie 中的資訊，在每個 HTTP request 都會被送到 server 端，會降低執行效能與浪費網路頻寬。 2. Cookie 送出的資料並沒有加密，除非用 SLL 技術加密，否則不適合放重要的隱私資訊。 3. Cookie 的大小限制是 4KB，無法放太多資料。. ~ 28 ~.

(38) 現在 HTML5 技術純熟，web storage 提供開發者更大、更安全的空間可以暫存資料。 Web Storage 分為兩種：local storage 和 session storage，本論文使用的是前者。local storage 的生命週期較長，且儲存的資料可以跨瀏覽器分頁(tab)存取。當使用者輸入資料後，會先將註解的各種資訊以 JSON 形式紀錄在 local storage 中名為 result 的變數中暫存，如 Fig-22。. 學 ‧. ‧ 國. 立. 政治大. Fig- 22 JSON in local storage. y. Nat. sit. 4.2.5 權限實作. n. al. er. io. 在原本的 jQuery Image Annotation 的工具之中，editable 的變數作為. i n U. v. 註解可不可以修改的判斷，只是並沒有提供使用者 UI(user interface)去做. Ch. engchi. 修改，必須從 command line 做修改。本論文為了可以供使用者選擇可修改與否，新增了 UI 介面，如 Fig-10 中的 checkbox。根據使用者使否有勾選 checkbox，呼叫 JavaScript 函式修改 JSON 中 editable 內容，來達到權限控管的目的，如 Fig-23。我們會將更改的權限設定存放於 local storage 中變數名為 editable 的 JSON 中，最後要將註解上傳至端儲存時，才會將 JSON-editable 內容修改至 JSON-result 中，並上傳新的 JSON-result 內容。. ~ 29 ~.

(39) Fig- 23 判斷 editable 與否. 4.2.6 搜尋結果呈現 A. AJAX (Asynchronous JavaScript and XML). 治政大攬頁面與照片註解頁面。總攬頁面使用 AJAX 技術，為的是要減少與伺服器溝立. 在本文 3.3.5 節有介紹，在呈現搜尋結果的時候，我們會有兩個部分：總. 通的頻寬，加快頁面回應的時間。傳統的 Web 應用，每當使用者送出表單(form). ‧ 國. 學. 時就向 Web 伺服器傳送一個請求，伺服器接收處理表單之後，送回一個新頁面。. ‧. 由於每次的應用都需要像伺服器請求浪費了許多頻寬，回應時間也依賴伺服器. y. Nat. 的回應時間，導致使用者介面比本機回應慢上許多。. er. io. sit. 使用 AJAX 的優點在於可以不用更新整個頁面的前提下維護資料，使得 Web 應用程式更為迅捷地回應使用者動作，避免了在網路上傳送那些沒有改變的訊. n. al. 息。它的做法：. Ch. engchi. i n U. v. 1. 使用 XHTML+CSS 來表示資訊。. 2. 使用 JavaScript 操作 DOM(Document Object Model)進行動態顯示。 3. 使用 XML 和 XSLT 進行資料交換及相關操作。 4. 使用 XMLHttpRequest 物件與 Web 伺服器進行非同步資料交換。本論文在這部分主要是使用第二點，用 jQyery 對 DOM 進行動態操作。我們將搜尋的結果使用 appendTo()顯現在搜尋頁面下方，appendTo()是在選擇的 DOM 元素之內插入指定的內容，以 w3c 為範例:Fig-24。. ~ 30 ~.

(40) Fig- 24 example of appendTo (). 當按下 button 的時候，appendTo()會在 P 元素之內插入：<span>Hello World!</span>，達到不用更新整個頁面卻能修改頁面顯示的方法。. B. Highlight. 政治大在第一時間看到他想要的註解，這部分本論文在總攬頁面與照片註解頁面都有立我們希望將照片中符合搜尋的註解可以強調(highlight)，讓使用者可以. ‧ 國. 學. 實作。. 總攬頁面主要根據搜尋的 input 抓取關鍵字加入 local. ‧. sit. Nat. 註解則修改 CSS，展現出強調效果，如 3.3.5 節 Fig-12。. y. storage.highlight 暫存，根據回傳的搜尋結果與 highlight 作比對，符合的. al. er. io. 照片註解頁面，在標記照片的時候需要將滑鼠移到照片上才會顯示出照片. v. n. 內容的註解，但是如果是搜尋到的照片，我們希望可以在頁面 load 進來之後. Ch. engchi. i n U. 直接顯現註解，讓使用主可以把注意力放在符合搜尋的註解上面，不需要再去將滑鼠移動到照片上、移動到註解的範圍內才會顯示註解。這部分也是藉由 local storage.highlight 傳遞搜尋關鍵字，再經由迴圈比對所有註解內容，將符合的結果由 jQyery 觸發顯示的 function。. 4.3 成果評估本小節評估的方法會以照片做為標記目標，在照片中建立的註解資料，依據這些註解進行搜尋，由各種搜尋結果的準確度做評估。依照 4.1 小節的情境，我們測試案例會以系上的活動照片為主。. ~ 31 ~.

(41) A.一般搜尋一般搜尋只在 search 頁面輸入關鍵字，並不設立類型條件。這的搜尋結果會將符合關鍵字的背景註解與內容註解的結果都會呈現出來。. B. 類型為限制在 search 頁面輸入關鍵字之後，選擇所要搜尋的類型，以選擇的類型做為搜尋的條件，為了是給與使用者更精確的搜尋，如：使用者輸入「華盛頓」，搜尋結果可能是人名，但也有可能是地名，加入類型搜尋則可以讓結果更為準確。目前可以針對特定的類型做搜尋，排除其他背景註解會內容註解的類型。. 政治大. 舉例說明： (一) 同為照片內部註解：. 立. 在不同的照片中分別標記內容同為蛋糕的註解：一個是真的蛋糕，類型點. ‧ 國. 學. 選為「物件」；另一個是綽號名為蛋糕的同學，類型為「人物」。在進行一. ‧. 般搜尋的時候，兩張照片都會顯示在搜尋結果中。如果搜尋時，以類型為. y. Nat. 限制，以「物件」作為類型條件時，搜尋結果只會出現標記內容為蛋糕，. 則搜尋結果會出現蛋糕同學的照片。. n. al. (二) 照片內部與背景註解：. Ch. engchi. er. io. sit. 且類型為物件的照片，所以蛋糕同學的照片不會出現在搜尋結果中；反之，. i n U. v. 在照片的背景與內部註解標記上相似的註解，如：背景在地點的欄位填上「PC Lab」，它的類型自然是「地點」；而在照片內標記一台電腦，內容為「PC」，它的類型為「物件」。本論文的搜尋是以 SQL-Like 的方式，所以在一般搜尋時搜尋「PC」，則兩張照片都會出現。如果以「地點」的類型作為搜尋條件，則只會出現地點為「PC Lab」的照片；反之只會出現內容為 PC、類型為「物件」的照片。目前，不管是照片背景或是照片容的註解，我們只要以類型加以限制，都可以比較準確的搜尋到照片。. ~ 32 ~.

(42) C 多重搜尋將多種類型同時進行搜尋，每個條件以 and 做結合，為了是要讓使用者做更準確的搜尋。舉例說明： (一) 時間+人名如果有一位老師在學校服務很久，我們希望找某個時期這位老師的照片，這時可以在多重搜尋，在類型為時間的欄位輸入起使與結束日期： 2003/1/1、200512/31，並在類型為人物的欄位輸入老師的名稱，則可以. 政治大. 找到這位老師 10 年前在系上的照片，提高準確度。 (二) 地點+人名. 立. 要搜尋某個同學在某個特別的場合出現的照片，只需要在地點欄位打上關. ‧ 國. 學. 鍵字：操場，在人物的欄位輸入名稱，就可以找到這位同學在操場上出現. ‧. 的照片。. n. al. er. io. sit. y. Nat. 目前 ABC 三種搜尋結果都可以呈現出預想中搜尋的結果，有初步的成果。. Ch. engchi. ~ 33 ~. i n U. v.

(43) 第五章結論與未來發展本章對本論文的實作與內容做結論，以及探討本論文未來發展的相關研究與探討。. 5.1 結論. 治政大加上 metadata 之後，可以給予他們比較有效的保存與管理照片的方法。本論立. 圖片標記工具的主要研究是針對現在大量的數位照片，使用者如何對照片. 文實作出一個圖片標記工具，提供使用者對照片進行標記，對註解內容執行. ‧ 國. 學. CRUD 而不遺漏資料，最後根據註解進行搜尋。以目前實作出來的成果達成了. ‧. 以下目標：. y. Nat. 1. 提供對一張照片可以加入多種註解(annotation) 的功能。. 3. 加入權限控管註解的修改與否。. al. er. io. sit. 2. 將照片的註解進行不同的分類，引入類型(type)概念。. n. v i n 4. 提供依據註解做搜尋的界接方式：包含可以用類型做為搜尋的限制條 Ch engchi U 件以及可用多個不同類型的關鍵字進行搜尋。. 本系統只是一個初步的模型，還需要有更完整的系統建置才能實際運作。. 5.2 未來發展將圖片標記工具結合 Crowd sourcing 與社群網路，會是未來比較值得研究的議題： 1. 建立帳號系統來管理使用者，除了可以紀錄圖片標記者，還可以加入社群的概念：好友、共同社團…等等，如此在權限設定的部分就可以有更細部. ~ 34 ~.

(44) 設定。使用者在建立註解的同時可以設定哪些人可以對這個註解執行 RCUD 的動作，是所有使用者或是朋友或是只有自己。如 Fig-25，在原本的 JSON 中，加入權限資料表，如此可以將權限做到更細微的管理。「read」表示哪些使用者可以看到這個註解；「update」表示修改註解內容的權限；「delete」是刪除註解；「admin」則是修改註解的權限設定。四個動作後面的串列：空白表示權限開放給全部使用者；填入使用者帳號，表示動作只開放給串列中的使用者。如此，就有比較完整的權限管理系統，也可以將社群中的帳號輸入串列中，達到大家共同討論編輯的效果。. 立. 政治大. ‧. ‧ 國. 學. n. al. y er. io. sit. Nat. Fig- 25 權限 JSON 資料表. i n U. v. 2. 在共同社群中的使用者，可以發揮 Crowd sourcing 的精神，共同指認或標. Ch. engchi. 記照片。另外，新增註解的回應功能，在使用這標記照片的時候，可以在對註解內容進行討論，如 Fig-25，當滑鼠移置註解時，下方會出現使用者對此做回應的討論內容。這樣除了可以增加照片標記的精準度，還可以記錄使用者行為，增加研究的價值。討論過後如果需要修改註解內容，則就可以根據上述的權限設定，由符合權限的使用者進行修改。. ~ 35 ~.

(45) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. Fig- 26 使用者討論 3. Crowd sourcing 是希望借用眾人之力來完成事情，所以需要提供比較方便的工具給予使用者。對於重複標記的註解可以出現提示給使用者，甚至是自動標記，減少使用者負擔。自動標記註解這部分比較困難，可能需要用到人臉辨識的技術。在註解輸入的時候出現提示讓使用者選擇是比較可行的辦法：在同一批上傳的照片中，統計某些註解輸入的頻率較高時，我們可以把這註解的內容當作提示，當使用者要輸入新的 annotation 時給予選. ~ 36 ~.

(46) 擇，如同 Google 搜尋會出現的提示一般，減少使用者重複輸入相同註解的負擔，節省時間。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ~ 37 ~. i n U. v.

(47) 參考文獻 [1] Amazon Mechanical Turk： http://aws.amazon.com/cn/documentation/mturk/, Accessed on January 27, 2014. [2]T,Gotz. and O,Suhre. Design and implementation of the UIMA Common Analysis System. in04 IBM SYSTEM JOURNAL, pp.476-489 [3]Apache UIMA：http://uima.apache.org/, Accessed on January 27, 2014. [4] Lux,M. Caliph & Emir：MPEG-7 Photo Annotation and Retrieval, in 09 Proceedings of the 17th ACM international conference on Multimedia,pp925-926 [5]Sarvas,R., .User-centric Metadata for Mobile Photos, In Proc. of MobiSys 2004. ACM Press, New York, NY, 2004, 33-35. [6] Kustanowitz,J. and Sheiderman,B . Motive Annotation for Personal Digital Photo Libraries：Lowering Barriers While Raising Incentives , in Proceeding. 立. 政治大. ‧ 國. 學. ‧. CHI’07 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. y. Nat. [7] OKFN-Annotator：http://annotatorjs.org/, Accessed on January 27, 2014.. sit. [8] Catherine,C., and Palo,A. Annotation: from paper books to the digital library.In. n. al. er. io. proc. ACM international conference on Digital libraries 1997,pp 131-140 [9] Daren C. Crowd sourcing as a Model for Problem Solving, in 08 Sage Publications The International Journal of Research into New Media Technologies, pp 75-89 [10] jQuery Image Annotation：http://flipbit.co.uk/jquery-image-annotation.html,. Ch. engchi. i n U. v. Accessed on January 27, 2014. [11] Manjunath, B.S., Salembier,P. and Sikora, T. Introduction to MPEG-7, Wiley 2002 [12]Wilhem, A., Takhteyev, Y., Sarvas, R. Van House, N., and David, M. Photo Annotation on a Camera Phone. In Proc. of CHI2004, ACM Press, 2004, pp1403-1406 [13]Munnelly, G., Hampson, C., Ferro, N.,and Conlan, O. The FAST-CAT: Empowering Cultural Heritage Annotations. In Proc. Digital Humanities 2013, University of Nebraska, Lincoln 2013, pp. 320-322. [14] 林宸均，「網路使用者圖像標記行為初探-以 Flickr 圖像標籤為例」，國立台東. ~ 38 ~.

(48) 大學教育學系(所)教學科技碩士班 [15] Sara,S. L. Some Issues in the Indexing of Images. Journal of the American Society for Information Science 45, no. 8 (1994): 583-88 . [16] Matthew,P. Gaps in Keywords: A study into the ‘semantic gap’ between images and keywords in users of the Witt Library, Courtauld Institute of Art, in partial fulfilment of the requirements for the degree of MSc in Information Science,2007 PP.17-23 [17] Diamond, R. M. The development of a retrieval system for 35mm slides utilized in art and humanities instruction: Final report. ED031 925. [18] V. Gudivada, V.V. Raghavan, Content-based image retrieval systems, IEEE Comput. 28 (9) (1995) 18–22.. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ~ 39 ~. i n U. v.

(49) 附錄一.record editable data：. 立. 政治大. ‧. ‧ 國. 學. 二.Add editable data in JSON：. n. er. io. sit. y. Nat. al. Ch. engchi. ~ 40 ~. i n U. v.

(50) 三. Clean JSON data when annotation is deleted. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ~ 41 ~. i n U. v.

(51) 四. Get annotation type. 政治大. 立. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. 五. Get search advice data. Ch. engchi. ~ 42 ~. i n U. v.

(52) 六. Get search advice data. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ~ 43 ~. i n U. v.

(53) 七. Sort search result by time. 立. 政治大. 八. Highlight the annotation. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ~ 44 ~. i n U. v.

(54) 九. initialization. 十. Show search result. 立. 政治大. ‧. ‧ 國. 學. n. al. Ch. engchi. ~ 45 ~. er. io. Prevent dropdown-menu missing. sit. y. Nat. 十一.. i n U. v.

(55) 十二.. Reset keyword in the search bar. 十三.. Datepicker. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ~ 46 ~. i n U. v.

(56) Change the search result order by AJAX. 立. 政治大. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. er. 十四.. Ch. engchi. ~ 47 ~. i n U. v.

(57)