4.2 系統實作
4.2.4 照片之詮釋資料儲存與傳遞
國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 28 ~
Fig- 20 annotation in JSON
Fig- 21 內容註解 in JSON
4.2.4 照片之詮釋資料儲存與傳遞
進入標記照片的階段主要將使用者撰寫的註解暫存起來，之後再批次 (Batch)傳遞到後端資料庫，避免發生遺漏的狀況。以前在 client 端可以用 cookie 暫存資訊，但是在使用上會有些不便：
1. 不管是否會用到 cookie 中的資訊，在每個 HTTP request 都會被送到 server 端，會降低執行效能與浪費網路頻寬。
2. Cookie 送出的資料並沒有加密，除非用 SLL 技術加密，否則不適合放 重要的隱私資訊。
3. Cookie 的大小限制是 4KB，無法放太多資料。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 29 ~
現在 HTML5 技術純熟，web storage 提供開發者更大、更安全的空間可以暫存 資料。 Web Storage 分為兩種：local storage 和 session storage，本論 文使用的是前者。local storage 的生命週期較長，且儲存的資料可以跨瀏覽 器分頁(tab)存取。
當使用者輸入資料後，會先將註解的各種資訊以 JSON 形式紀錄在 local storage 中名為 result 的變數中暫存，如 Fig-22。
Fig- 22 JSON in local storage 4.2.5 權限實作
在原本的 jQuery Image Annotation 的工具之中，editable 的變數作為 註解可不可以修改的判斷，只是並沒有提供使用者 UI(user interface)去做 修改，必須從 command line 做修改。本論文為了可以供使用者選擇可修改與 否，新增了 UI 介面，如 Fig-10 中的 checkbox。根據使用者使否有勾選 checkbox，
呼叫 JavaScript 函式修改 JSON 中 editable 內容，來達到權限控管的目的，
如 Fig-23。我們會將更改的權限設定存放於 local storage 中變數名為 editable 的 JSON 中，最後要將註解上傳至端儲存時，才會將 JSON-editable 內容修改至 JSON-result 中，並上傳新的 JSON-result 內容。
‧
A. AJAX (Asynchronous JavaScript and XML)
在本文 3.3.5 節有介紹，在呈現搜尋結果的時候，我們會有兩個部分：總
2. 使用 JavaScript 操作 DOM(Document Object Model)進行動態顯示。
3. 使用 XML 和 XSLT 進行資料交換及相關操作。
4. 使用 XMLHttpRequest 物件與 Web 伺服器進行非同步資料交換。
本論文在這部分主要是使用第二點，用 jQyery 對 DOM 進行動態操作。我們將 搜尋的結果使用 appendTo()顯現在搜尋頁面下方，appendTo()是在選擇的 DOM 元素之內插入指定的內容，以 w3c 為範例:Fig-24。
‧
Fig- 24 example of appendTo ()
當按下 button 的時候，appendTo()會在 P 元素之內插入：<span>Hello World!</span>，達到不用更新整個頁面卻能修改頁面顯示的方法。
B. Highlight
我們希望將照片中符合搜尋的註解可以強調(highlight)，讓使用者可以 在第一時間看到他想要的註解，這部分本論文在總攬頁面與照片註解頁面都有 實作。
總攬頁面主要根據搜尋的 input 抓取關鍵字加入 local
storage.highlight 暫存，根據回傳的搜尋結果與 highlight 作比對，符合的 註解則修改 CSS，展現出強調效果，如 3.3.5 節 Fig-12。
照片註解頁面，在標記照片的時候需要將滑鼠移到照片上才會顯示出照片 內容的註解，但是如果是搜尋到的照片，我們希望可以在頁面 load 進來之後 直接顯現註解，讓使用主可以把注意力放在符合搜尋的註解上面，不需要再去 將滑鼠移動到照片上、移動到註解的範圍內才會顯示註解。這部分也是藉由 local storage.highlight 傳遞搜尋關鍵字，再經由迴圈比對所有註解內容，
將符合的結果由 jQyery 觸發顯示的 function。
4.3 成果評估
本小節評估的方法會以照片做為標記目標，在照片中建立的註解資料，依 據這些註解進行搜尋，由各種搜尋結果的準確度做評估。依照 4.1 小節的情境，
我們測試案例會以系上的活動照片為主。
‧
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 33 ~
C 多重搜尋將多種類型同時進行搜尋，每個條件以 and 做結合，為了是要讓使用者做 更準確的搜尋。
舉例說明：
(一) 時間+人名
如果有一位老師在學校服務很久，我們希望找某個時期這位老師的照片，
這時可以在多重搜尋，在類型為時間的欄位輸入起使與結束日期：
2003/1/1、200512/31，並在類型為人物的欄位輸入老師的名稱，則可以 找到這位老師 10 年前在系上的照片，提高準確度。
(二) 地點+人名
要搜尋某個同學在某個特別的場合出現的照片，只需要在地點欄位打上關 鍵字：操場，在人物的欄位輸入名稱，就可以找到這位同學在操場上出現 的照片。
目前 ABC 三種搜尋結果都可以呈現出預想中搜尋的結果，有初步的成果。
‧
將圖片標記工具結合 Crowd sourcing 與社群網路，會是未來比較值得研 究的議題：
1. 建立帳號系統來管理使用者，除了可以紀錄圖片標記者，還可以加入社群 的概念：好友、共同社團…等等，如此在權限設定的部分就可以有更細部
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 35 ~
設定。使用者在建立註解的同時可以設定哪些人可以對這個註解執行 RCUD 的動作，是所有使用者或是朋友或是只有自己。如 Fig-25，在原本的 JSON 中，加入權限資料表，如此可以將權限做到更細微的管理。「read」表示哪 些使用者可以看到這個註解；「update」表示修改註解內容的權限；「delete」
是刪除註解；「admin」則是修改註解的權限設定。四個動作後面的串列：
空白表示權限開放給全部使用者；填入使用者帳號，表示動作只開放給串 列中的使用者。如此，就有比較完整的權限管理系統，也可以將社群中的 帳號輸入串列中，達到大家共同討論編輯的效果。
Fig- 25 權限 JSON 資料表
2. 在共同社群中的使用者，可以發揮 Crowd sourcing 的精神，共同指認或標 記照片。另外，新增註解的回應功能，在使用這標記照片的時候，可以在 對註解內容進行討論，如 Fig-25，當滑鼠移置註解時，下方會出現使用者 對此做回應的討論內容。這樣除了可以增加照片標記的精準度，還可以記 錄使用者行為，增加研究的價值。討論過後如果需要修改註解內容，則就 可以根據上述的權限設定，由符合權限的使用者進行修改。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 36 ~
Fig- 26 使用者討論
3. Crowd sourcing 是希望借用眾人之力來完成事情，所以需要提供比較方便 的工具給予使用者。對於重複標記的註解可以出現提示給使用者，甚至是 自動標記，減少使用者負擔。自動標記註解這部分比較困難，可能需要用 到人臉辨識的技術。在註解輸入的時候出現提示讓使用者選擇是比較可行 的辦法：在同一批上傳的照片中，統計某些註解輸入的頻率較高時，我們 可以把這註解的內容當作提示，當使用者要輸入新的 annotation 時給予選
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 37 ~
擇，如同 Google 搜尋會出現的提示一般，減少使用者重複輸入相同註解的 負擔，節省時間。
‧
[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
[7] OKFN-Annotator：http://annotatorjs.org/, Accessed on January 27, 2014.
[8] Catherine,C., and Palo,A. Annotation: from paper books to the digital library.In proc. ACM international conference on Digital libraries1997,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, 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 圖像標籤為例」，國立 台東
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 39 ~
大學教育學系(所)教學科技碩士班[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.
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 40 ~
附錄
一.record editable data：
二.Add editable data in JSON：
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 41 ~
三. Clean JSON data when annotation is deleted‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 42 ~
四. Get annotation type五. Get search advice data
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 43 ~
六. Get search advice data‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 44 ~
七. Sort search result by time八. Highlight the annotation
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 45 ~
九. initialization十. Show search result
十一. Prevent dropdown-menu missing
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 46 ~
十二. Reset keyword in the search bar十三. Datepicker
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
~ 47 ~
十四. Change the search result order by AJAX