國
立
交
通
大
學
資訊科學與工程研究所
碩
士
論
文
按圖網購系統
Image based Web e-shopping Systems
研 究 生：廖祐楷
指導教授：傅心家 教授
按圖網購系統
Image based Web e-shopping Systems
研 究 生：廖祐楷 Student：Yo-Kai Liao
指導教授：傅心家 Advisor：Hsin-Chia Fu
國 立 交 通 大 學
資 訊 科 學 與 工 程 研 究 所
碩 士 論 文
A ThesisSubmitted to Institute of Computer Science and Engineering
College of Computer Science
National Chiao Tung University
in partial Fulfillment of the Requirements
for the Degree of
Master
in
Computer Science
July 2010
Hsinchu, Taiwan, Republic of China
i
按圖網購系統
研究生：廖祐楷 指導教授：傅心家 教授 國立交通大學資料科學與工程研究所摘要
現在有多個拍賣網站，買家要比價要每個網站都去，很麻煩。所以我用程式 將多個拍賣網站的資料下載到我的電腦，並架設了一個網站，使用者只要在我的 網站搜尋就可以找到多個拍賣網站的物品。 本篇論文實作了實驗室研發的搜尋圖片的方法「色彩集群」，使用主色彩產 生的點圖計算兩張圖片之間的相似度。將這個圖片搜尋方法結合拍賣網站下載的 資料，使用者可以用圖片找到多個拍賣網站中的相似物品。Image based Web e-shopping Systems
Student：Yo-Kai Liao Advisor：Prof. Hsin-Chia Fu
Institute of Computer Science and Engineering National Chiao Tung University
Abstract
There are many auction sites, buyer has to price relations to each site, it’s very troublesome. I download data of each auction site with program, and set up my website. User can simply search in my site, and he can search items of each auction site.
In this paper, I implemented “Color Clustering” which is a method of search images researched by my lab. The method is to compute similarity with bitmaps generated by dominant color. The method combine with the data downloaded in each auction sites, user can find similar items by image.
iii
誌謝
感謝傅老師在我兩年研究所的生活給予我指導和照顧，並幫助我找到論文的 方向，學習到研究的方法與態度，才得以完成此篇論文。同時我也要感謝實驗室 的學長們，永煜學長、柏伸學長、威人學長、坤隆學長。特別感謝永煜學長及柏 伸學長在論文上給了我極大的幫助，讓我對圖片搜尋的方法有了長足的進步。感 謝大學同學給我的鼓勵。最後感謝我的父母在背後支持我，讓我沒有經濟方面的 負擔，可以專心做研究，才得以順利完成學業。目錄
中文摘要... i 英文摘要... ii 誌謝... iii 目錄... iv 表目錄... vi 圖目錄... vii 第 1 章 緒論... 1 1.1 研究背景... 1 1.2 研究動機... 1 1.3.研究目的... 2 第 2 章 圖片搜尋現況... 3 2.1 圖片搜尋之技術簡介... 3 2.1.1 以內容為基礎的圖片檢索(CBIR)... 3 2.1.2 類神經網路圖片檢索系統(NNIRS) ... 6 2.1.3 色彩集群(Color Clustering) ... 8 第 3 章按圖網購設計概念... 14 3.1 圖片上傳... 14 3.2 圖片搜尋... 15 3.2.1 裁剪... 15 3.2.2 轉灰階與調整大小... 17 3.2.3 計算相似度矩陣... 18 3.2.4 找最佳配對與加總... 18 3.3 拍賣網站資料蒐集... 18 3.4 資料更新機制... 21 3.4.1 現在出價更新機制... 21 3.4.2 過期交易更新機制... 23 3.5 展示搜尋結果... 23 第 4 章 實驗... 26 4.1 實際操作... 26 4.1.1 用關鍵字搜尋... 26 4.1.2 用上傳圖片搜尋... 26 4.2 資料來源與評比方式... 28 4.3 實驗結果與分析... 29 4.3.1 色彩集群取 4 種主色彩... 29 4.3.2 改良色彩集群取 4 種主色彩... 31v 4.3.3 改良色彩集群取 8 種主色彩... 32 4.3.4 色彩集群取 3 種主色彩... 34 4.3.5 色彩集群取 3 種主色彩且不找最佳配對... 35 4.4 色彩集群之探討... 38 第 5 章 結論與未來展望... 42 5.1 結論... 42 5.2 未來展望... 42 參考文獻... 43
表目錄
表 1 色彩集群取 4 種主色彩的實驗結果... 29 表 2 改良色彩集群取 4 種主色彩的實驗結果... 32 表 3 改良色彩集群取 8 種主色彩的實驗結果... 33 表 4 色彩集群取 3 種主色彩的實驗結果... 35 表 5 色彩集群取 3 種主色彩且不找最佳配對的實驗結果... 38vii
圖目錄
圖 1 CBIR 步驟總覽 ... 4 圖 2 局部化特徵示意圖... 5 圖 3 局部化之後再測量紋理... 5 圖 4 特徵區塊選取... 7 圖 5 NNIRS 的搜尋結果... 7 圖 6 原圖及其產生的點圖 s ... 9 圖 7 交集圖示... 10 圖 8 點圖配對示意圖... 10 圖 9 Optimize Swap 的方法的流程圖 ... 12 圖 10 上傳功能... 14 圖 11 裁剪方法示意圖 ... 16 圖 12 欲裁剪的圖... 16 圖 13 裁剪後的圖... 16 圖 14 第一張圖及其灰階圖... 17 圖 15 第二張圖及其灰階圖... 17 圖 16 拍賣物品清單-全 ... 19 圖 17 物品拍賣網頁網址... 19 圖 18 物品拍賣網頁... 20 圖 19 按圖網購系統的現在出價... 21 圖 20 拍賣網頁真正的現在出價... 22 圖 21 資料庫中的 EndTime 欄位 ... 23 圖 22 搜尋結果的排版示意圖... 24 圖 23 搜尋結果範例... 25 圖 24 按圖網購系統的關鍵字搜尋... 26 圖 25 按圖網購系統的上傳圖片... 26 圖 26 上傳圖片-手機 ... 27 圖 27 比對結果... 27 圖 28 拍賣物品清單-手錶 ... 28 圖 29 圖片調整後顏色被合併... 30 圖 30 顏色數不相等時比對的結果... 30 圖 31 第 4 個主色彩影響不大... 34 圖 32 最佳配對剛好在對角線上... 36 圖 33 只計算相似度矩陣對角線... 36 圖 34 色彩集群取 3 種主色彩且不找最佳配對的配對方式示意圖... 37 圖 35 燒錄機的圖片及其點圖... 401
第1章 緒論
1.1 研究背景
隨著網路技術的進步與發展，使用網路進行交易變得越來越方便，網購已經 成為一種相當普遍的購物手段，尤其是這個世代的年輕人很喜歡使用這個方便的 管道來購買想要的物品。在網路商店如雨後春筍一般冒出的同時，又有一種新興 的網站誕生，就是拍賣網站。 網路商店就如同一般的商店，而拍賣網站在我來看如同跳蚤市場，在網站裡 有相當多的賣家，買家和賣家擁有比網路商店還要高的互動性。在拍賣網站買東 西就像在尋寶，有時可以相當便宜的價格買到想要的物品。不過因為賣家眾多， 所賣物品良莠不齊，物品與賣家所貼圖片有很大差距的而造成糾紛的情況時有耳 聞，最好選擇信譽較好的賣家，品質比較有保障。 在拍賣網站通常同一樣物品會有好幾家賣家都有賣，買家可以在多個賣家之 間進行比價，但是拍賣網站有好幾個，每個網站都要去會很麻煩，我就在想應該 要有一個統合所有拍賣網站資料的網站，讓買家更方便比價。 現在拍賣網站要找到想要的物品可以有多種方式，可以用關鍵字去搜尋標題， 也可以從網站既有的分類去找。但是現在還沒有出現用圖片去找物品的方式，而 圖片搜尋的技術也越來越受重視，現在圖片搜尋有不少網站都有在做，不過並沒 有和拍賣網站的資料做結合，我認為這兩者結合可以讓買家更便利。1.2 研究動機
當我在上拍賣網站上找到想買的物品時，我突然想要看看其他的拍賣網站有 沒有賣一樣的物品，讓我可以進行比價之類。可是這樣我必須到其他幾個拍賣網 站用關鍵字搜尋去找，這是很麻煩的事情。所以我就在想如果能在一個網站就能 搜尋到所有拍賣網站的物品的話那就方便多了。 更進一步我想到了能不能用圖片來進行搜尋呢？拍賣網站的賣家通常都會放上物品的圖片，如果能用一張圖片就搜尋到各個拍賣網站的物品，這樣會比用 關鍵字搜尋更方便，而且有更多的拓展性。 比如說當我出門在外有時候會看到令我感興趣的物品，而我並不知道那個物 品確切的名稱為何，想要去拍賣網站搜尋又不知從何找起，這個時候我就可以將 物品拍下來，上傳到我的網站去，用圖片搜尋的技術去找出所有拍賣網站相似的 物品。現在雖然已經有一些圖片搜尋的網站(如：TinEye)可以供使用者上傳圖片 找出相似的圖片，但是那些網站存放的圖片並不是專門針對拍賣網站的，所以我 想試著架設一個專門找台灣拍賣網站(如：Yahoo!奇摩拍賣、露天拍賣)物品的搜 尋網站。
1.3.研究目的
以拍賣網站的圖片及相關資料做基礎，架設一個網站，讓使用者可以用關鍵 字搜尋各個拍賣網站的物品。而且這個網站要實作圖片搜尋的技術，讓使用者只 要上傳圖片就可以在各個拍賣網站找到相似的物品。3
第 2 章 圖片搜尋現況
本章將會介紹現在常用的圖片搜尋技術及本實驗室研發的新方法。2.1 圖片搜尋之技術簡介
2.1.1 以內容為基礎的圖片檢索(CBIR) 如何讓使用者從眾多圖片中找到需要的圖片？用索引是一種方法。早期是靠 人工索引的方式將圖片分門別類，給予每一張圖片多個標籤(tag)，並藉由資料庫 的建立，可以方便的用關鍵字檢索。然而此種方式效能與做標籤的人提供的資訊 有關，但不同的人對同一張圖片常會有不同的解讀，因此這個方法並不客觀。所 以就有了以內容為基礎的圖片檢索(Content-based image retrieval，CBIR)方式，可 以利用圖片本身所提供的資料，如色彩、紋理、輪廓等來做判斷，找出某處有特 定的物件(object)，來達到圖片檢索的目的。 首先先介紹一些進行圖片比對常用的特徵： 1.色彩分布圖： 色彩分布圖(Color histogram)是把一張圖每個像素的 RGB 值儲存在一個三維 的陣列中，之後色彩分布圖會被正規化(normalized)，正規化之後可以有效去除因 圖片大小所帶來的影響。兩張圖片的色彩分布圖取交集就可以判斷他們的色彩相 似度如何。 用色彩檢驗圖片是很常見的方法，因為它不受圖片大小和方向的影響。 2. 色彩輪廓： 色彩輪廓(Color layout)簡單的輪廓，如藍天、日落等。 3. 紋理： 紋理(Texture)有很多描述方法，大都基於邊緣(edge)。(Texture histogram)。要得到這兩個資料可以使用 Sobel edge detector 將如下的 3x3 的權重矩陣在這個圖片的水平及垂直移動。 dx = �−1 0 1−2 0 2 −1 0 1� dy = � 1 2 1 0 0 0 −1 −2 −1� 紋理比對是根據其紋理之方向性與密度(間隔)來對紋理分類，並且評估使用者所 選擇的區塊的紋理分佈的相似程度。
CBIR 是藉由物件模式(object modeling)進行搜尋，使用者先挑選一張範例圖 片，然後選擇一個區域來進行物件搜尋。物件模式是由一些局部化的特徵所組成 的集合，在後續的比對中，它們提供了一個豐富的統計測量上的集合。 物件比對步驟：(a)使用者選擇一個區域，將這個區域進行特徵局部化 (b)以色彩為基礎的篩選(c)姿勢估測(d)支援紋理(e)形狀驗證，如圖 1。 圖 1 CBIR 步驟總覽 (a)局部化特徵(Feature Localization) 由於以物件為基礎的搜尋考慮的是在一張圖片內之物件，我們應該採用某種 程度的切割的排序去檢視含有物件的區域。而有人發現使用一個以相鄰性 (proximity)和緊密性(compactness)為基礎的粗略局部化的圖片特徵，會比使用圖
5
片切割更加有效，所以就有了局部化特徵的方法。
局部化特徵將一些相鄰並且有共同特徵的像素(pixel)定義為磚瓦(tiles)，而有共同
特徵的磚瓦又被封套(envelope)所連結，如圖 2。
圖 2 局部化特徵示意圖
(b)以色彩為基礎的篩選(Color-based image screening)
使用色彩分布圖做色彩相似度的比較。 (c)姿勢估測(Pose estimation) 圖片物件形狀之估計。 (d)支援紋理(Texture support) 使用紋理統計圖做比較，不過跟測量整張圖的紋理比起來，局部化之後再測量紋 理，在測量上會更有效力，如圖 3。 圖 3 局部化之後再測量紋理 (e)形狀驗證(Shape verification)
用 Hough transform 可以得到物件的輪廓來進行驗證。
這些內容在”Fundamentals of Multimedia”的 Ch18 有詳細說明
2.1.2 類神經網路圖片檢索系統(NNIRS)
類神經網路圖片檢索系統，NNIRS(Neural Network based Image Retrieval System)，這個方法是我們實驗室研發出來的，是屬於 CBIR 的方法。 簡單來說，就是將圖片用 watersheds 的方法切割成數個區塊，每一個區塊都 有不同的特徵(顏色、紋理)，這些特徵被稱為視覺關鍵字(VisualKeyword)，簡稱 VK，可以用來代表圖片，比對的時候就用這些 VK 做比對。 所有的在圖庫的圖片都抽取出 VK 存入資料庫。圖片上傳之後，用同樣的方 法取出 VK，拿去和資料庫中的 VK 做比對，哪張圖片有較多的 VK 和上傳圖片 的 VK 相同，就表示和上傳圖片越相似。 這個方法本實驗室有實做出來，優點在於可以讓使用者選擇上傳圖片中的一 個區塊作為特徵去尋找，比較有針對性，如圖 4，紅色線條選取的部份就是使用 者選取的特徵區塊，比對結果如圖 5。不過因為圖片上傳後要抽取 VK，之後又 要和資料庫裡大量的 VK 進行比對，耗費的時間過久所以決定不採用此方法。 實作網站網址：http://140.113.216.19/WebImageSearch2/index.php
7
圖 4 特徵區塊選取
2.1.3 色彩集群(Color Clustering) 色彩集群(Color Clustering)，這個方法是我們實驗室研發出來的，用來找出 兩張圖之間的相似度。按圖網購系統的圖片搜尋就是採用此方法。 首先，由圖片的色彩分布圖找出一張圖片的 4 種主色彩(dominant color)，每 一種主色彩分別集群(clustering)來產生各自的點圖(bitmap) (有某色出現的點設 為 1 否則為 0)，如圖 6。
9
圖 6 原圖及其產生的點圖 s
點圖之間的相似度。而要計算兩張點圖之間的相似度，就是計算兩張點圖之間的 交集(intersection)，如圖 7。 圖 7 交集圖示 定義兩張點圖之間的相似度為S(A, B) =‖A ⋂ B‖ ‖A ⋃ B‖。 以影像處理來說，分子的部份就是把兩張點圖重疊之後取 AND 所剩的像素 數，分母的部份則是重疊之後取 OR 所剩的像素數。 定義兩群點圖之間的相似度為Sg = ∑ ‖Ai‖+‖Bi‖ ∑ ��Aj j�+�Bj�� i × S(Ai, Bi)。 要計算兩群點圖之間的相似度要讓兩群點圖進行配對，兩群點圖的配對是 1 對 1 且 onto 的，會形成 4 對(pair)，一共有 4*4=16 種配對組合。如圖 8，其中 A 是原圖，A.1~A.4 是它的點圖，B 以此類推。 圖 8 點圖配對示意圖 把每種可能的配對產生的值都算出來會產生一個相似度矩陣
11
M = �m⋮11 ⋯ m⋱ ⋮1N mN1 ⋯ mNN
� , where mij = S�Ai, Bj�
S�Ai, Bj�也就是 A 圖第 i 種主色彩產生的點圖和 B 圖第 j 種主色彩產生的點圖去
比較所得到的相似度值。
要找出最佳配對(best match)使得 4 對相似度總和會產生最大值，可以用實驗
室研發的 Optimize Swap 的方法，簡單來說，就是先用 greedy method 挑最大的
元素來加總，再檢查有沒有別種配對會使相似度總和更大，有的話就進行列交換，
開始
建立相似度 矩陣M
從沒被標記的元素中找 到最大的元素M(i,j)
交換第i row和第j row
將第j row和第j column 做標記 所有元素是否已 被標記？ i:=1 j:=i+1 Yes No M(i,i)+M(j,j)<M(i,j)+M(j.i)
交換第i row和第j row
j:=j+1 Yes No j<=column數 Yes i:=i+1 No i<=column數 Yes 這一輪是否有 交換row No Yes 結束 No 圖 9 Optimize Swap 的方法的流程圖
13 example: M = � 178 48 176 50 171 67169 69 166 60 83 143 159 8076 162 � → � 178 48 176 50 171 67169 69 166 60 83 143 15976 16280 � swap 2,3 row → � 178 48 166 60 171 67159 80 176 50 83 143 16976 16269 � → � 178 48 166 60 171 67159 80 176 50 83 143 16976 16269 � → � 178 48 166 60 171 67159 80 176 50 83 143 16976 16269
� check another match
→ � 178 48 166 60 171 67159 80 176 50 83 143 169 6976 162 � M(2,2) + M(4,4) < 𝑀(2,4) + M(4,2), swap 2,4 row → � 178 48 83 143 171 6776 162 176 50 166 60 169 69159 80 � → �inal result � 178 48 83 143 171 6776 162 176 50 166 60 169159 6980 � 最大相似度為：178 + 143 + 169 + 80 = 570。
第 3 章按圖網購設計概念
假如某人有想要購買的物品，但是不想要去各個拍賣網站搜尋，覺得太麻煩， 那他可以到我的網頁，在搜尋欄輸入關鍵字，就可以搜尋出各個拍賣網站標題有 符合關鍵字的拍賣，供這個人比較或比價，不用到其他拍賣網站搜尋，更加便利。 假如某人在一個拍賣網站找到喜歡的物品，而他想要到別的拍賣網站找相似 的物品，那麼他可以將物品的圖片下載下來，再上傳到我的網站，就可以找出各 個拍賣網站的相似物品，會比用關鍵字搜尋更方便。 要做到這些功能我們需要哪些技術: 3.1 圖片上傳 3.2 圖片搜尋 3.3 拍賣網站資料蒐集 3.4 資料更新機制 3.5 展示搜尋結果 茲分述如後3.1 圖片上傳
要把圖片上傳到我的主機，用來作圖片搜尋。 如圖 10 所示： 圖 10 上傳功能 用瀏覽器連到首頁有一個用來上傳圖片的功能，而我有一個 upload_file.php 裡面有「$_FILES」是專門用來處理檔案上傳的變數，用$_FILES 去接首頁傳來 的圖片，再把圖片存到指定位置即可。15
3.2 圖片搜尋
現在的拍賣網站只能用文字來搜尋物品，所以我想將圖片搜尋的技術應用在 拍賣網站上。 加入圖片搜尋的技術後，可以不只是用關鍵字來找物品，還可以用圖片找到 相似的物品，甚至就算使用者不知道正確的物品名稱仍然可以找到想要的物品。 有四個步驟： 3.2.1 裁剪 3.2.2 轉灰階與調整大小 3.2.3 計算相似度矩陣 3.2.4 找最佳配對與加總 3.2.1 裁剪 首先要注意，因為大多數圖片並非正方形，當圖片調整大小之後，物品輪廓 會扭曲變形，嚴重影響比對的結果，所以圖片要先裁剪(crop)成正方形。 而拍賣物品通常會擺在正中央，所以以原圖中心點產生一最大的正方形，此 即為我想要的裁剪結果。圖片裁剪後還有一個好處，就是可以去除背景的干擾， 使得比對結果更準確。 用 NConvert(NConvert 為簡易的圖形批次處理工具)裁剪需要給予起始點座標(crop initial point)和裁剪之後所剩寬度(width)、高度(height)。
當width < ℎ𝑒𝑖𝑔ℎ𝑡時，起始點座標設為(0, height 2⁄ − width 2⁄ )，所剩寬高 設為 width。
當width ≥ height時，起始點座標設為(width 2⁄ − height 2, 0⁄ )，所剩寬高 設為 height。如圖 11。
起始點座標= �(0, height 2⁄ − width 2⁄ ), width < ℎ𝑒𝑖𝑔ℎ𝑡 (width 2⁄ − height 2,⁄ 0), width ≥ height
所剩寬高 = �width,height, width < ℎ𝑒𝑖𝑔ℎ𝑡width ≥ height
圖 11 裁剪方法示意圖
範例如圖 12，圖 13：將紅框的區域裁剪下來，由 600x450 裁剪為 450x450
圖 12 欲裁剪的圖
17 3.2.2 轉灰階與調整大小 裁剪完之後開始進行比對，所使用的方法就是2.1.3所提到的色彩集群，不 過在實做的時候我並不是由圖片的色彩分布圖找出圖片的 4 種主色彩，而是用 NConvert 將圖片轉(convert)為用 4 種顏色所表示的灰階圖。 轉為灰階圖後，第一主色彩是亮度(intensity)最低的顏色，第二主色彩是第 二低的顏色以此類推。 同時圖片大小調整(resize)為 256x256。如圖 14，圖 15。 圖 14 第一張圖及其灰階圖 圖 15 第二張圖及其灰階圖
3.2.3 計算相似度矩陣
當圖片大小都被調整成 256x256 之後，如圖 14，圖 15 右邊的灰階圖，就
可以各挑選一種主色彩來比對，就視為兩張點圖在比對。
S(A, B) =‖A ⋂ B‖‖A ⋃ B‖，也就是兩張點圖交集後所剩的 pixel 數除以聯集後所剩的 pixel 數，可以算出兩張 bitamp 之間的相似度。 這兩張圖產生的相似度矩陣 M = � 0.038379 0.013868 0.044450 0.063599 0.052760 0.0000380.134578 0.000398 0.020116 0.234560 0.000092 0.000076 0.050932 0.0000230.000076 0.000000 � 3.2.4 找最佳配對與加總 用 Optimize Swap 的方法找最佳配對可以得到 �inal result � 0.038379 0.013868 0.020116 0.234560 0.052760 0.0000380.050932 0.000023 0.044450 0.063599 0.000092 0.000076 0.1345780.000076 0.0003980.000000 � 相似度總和是0.038379 + 0.234560 + 0.134578 + 0.000000 = 0.407607 ≅ 41% 將圖庫裡所有的圖片都以同樣的步驟比對過，再由相似度大排到小展示出來 即完成圖片搜尋。
3.3 拍賣網站資料蒐集
要想用圖片搜尋或是關鍵字搜尋拍賣物品，前提就是那些拍賣物品的資料包 含圖片等都要先下載到我的主機才行，這節我要詳述那些資料是如何下載到我的 主機。 我以「Yahoo!奇摩拍賣網站」做個例子，我有找到一個列出所有物品的拍賣 物品清單，如圖 16。 (http://tw.bid.yahoo.com/tw/1-category-leaf.html?cat=1&cc=tw&store=1¬queryst ore=1&fp_ad_hits=5&s=-endtime&p=)。19 圖 16 拍賣物品清單-全 將拍賣物品下載下來，再將每個物品拍賣網頁的網址濾(extract)出來輸出到 一個檔案，內容是物品拍賣網頁網址，如圖 17。 圖 17 物品拍賣網頁網址 透過這些網址我可以下載到物品拍賣網頁，物品拍賣網頁如圖 18 所示：
圖 18 物品拍賣網頁
取得一個物品拍賣網頁就濾出我想要的資料，有「標題(Title)」、「現在出價 (Cost)」、「圖片網址(ImageURL)」、「圖片檔名(ImageName)」、「結束時間(EndTime)」、
21 「網頁網址(PageURL)」。以圖 18 物品拍賣網頁的資料分別舉例說明如下： (1) 圖片網址(ImageURL)： http://tw.bid.yimg.com/ac/85/ed/d40060182-ac-8745xf2x0200x0174-s.jpg (2) 網頁網址(PageURL)： http://tw.page.bid.yahoo.com/tw/auction/d40060182 (3) 圖片檔名(ImageName)： d40060182-ac-8745xf2x0200x0174-s.jpg (4) 標題(Title)：
台中 TOWA AX-50 單聯式收據機(電腦收銀機系統.中古收銀機.POS 買賣維修) (5) 現在出價(Cost)： 300 (6) 結束時間(EndTime)： 2010-04-04 20:55:00。 將這些資料排成特定格式輸出到一個檔案就完成這筆資料的處理，可以再抓 下一個物品拍賣網頁進來處理。 全部物品拍賣網頁都處理完後，再把存有拍賣網頁資料的檔案一筆一筆讀出 來寫入資料庫裡。還有經由圖片網址可以將圖片下載到我的主機裡。
3.4 資料更新機制
3.4.1 現在出價更新機制 在顯示搜尋結果的時候那些物品資料並不是拍賣網站最新的資料，而是從資 料庫中取出來的，所以「現在出價」那一欄的資料並不一定準確。 如圖 19，圖 20： 圖 19 按圖網購系統的現在出價圖 20 拍賣網頁真正的現在出價 雖然可以由「網頁連結」連到物品拍賣網頁去看現在出價，不過這樣在比價 時就還要一一確認，很麻煩。 解決方法我有想到兩種： (1) 每隔一段時間就把資料庫中的所有物品所對應的拍賣網頁再抓一次，就可以 取得最新資料來更新資料庫。 優點是這樣在比價的時候會很方便，可以輕鬆比較各個拍賣網站物品的價錢， 不用進入拍賣網頁就可以得知現在出價。 缺點則是因為拍賣網站都有流量管制，檢查資料庫每一筆資料所需時間都很 長，而且隨著資料庫資料越來越多筆，更新一遍資料庫所花的時間會越來越 長。 (2) 在顯示結果的時候將搜尋到的物品所對應的拍賣網頁抓取下來，就可以從中 得到最新的資料，並展示出來。 優點是跟(1)比起來可以得到更即時的資料，而且不用將整個資料庫都更新一 遍，所花的時間很短。 缺點是理論上這個方法很不錯，但是測試的結果是不可行，同一時間抓取多 個拍賣網頁很容易因為流量過大被拍賣網站所禁止，並且暫時封鎖 IP，連搜 尋結果都無法顯示。像被 Yahoo!奇摩拍賣封鎖 IP 後搜尋結果就會出現「Sorry, Unable to process request at this time-- error 999.」的訊息。
23 3.4.2 過期交易更新機制 為了避免搜尋結果裡有過期的資料，我寫了一個程式用來檢查資料庫裡有沒 有過期(expired)的交易。這個程式會去比較每一筆資料的 EndTime 欄位的值，如 圖 21。 圖 21 資料庫中的 EndTime 欄位 如果 EndTime 的值小於現在的時間就表示這筆交易已經過期了，就會把這 筆資料以及對應的圖片(每一筆資料都對應一張圖片)刪除。 註：這個機制是利用物品拍賣網頁裡的「結束時間」那一欄資料，如圖 18。有 的拍賣網站(如：露天拍賣)沒有提供這個資料，就無法使用這個機制更新資料庫。 還是得用3.4.1的方法(1)去做更新。
3.5 展示搜尋結果
搜尋結果的排版如圖 22 所示：圖 22 搜尋結果的排版示意圖 每一張圖片的上方會顯示此拍賣物品的相似度排名，而在下方會顯示此拍賣 物品的標題、現在出價、結束時間、網頁連結以及相似度。 結束時間可以讓使用者知道這個物品的交易什麼時候會結束，而網頁連結會 顯示拍賣網站的名稱，可以讓使用者輕鬆得知這個物品是屬於哪個拍賣網站的。 點擊網頁連結會連結到此物品拍賣網頁。實際範例如圖 23。
25
第 4 章 實驗
本章會示範我的網站要如何使用，以及對新的圖片搜尋方法做實驗。4.1 實際操作
實作出的網站網址：http://140.113.216.19/IBWES/index.php 此網站可以讓使用者用關鍵字搜尋各個拍賣網站的物品，也可以上傳圖片來 搜尋相似的物品。 4.1.1 用關鍵字搜尋 在搜尋欄輸入關鍵字之後按「Search」即可，如圖 24。 圖 24 按圖網購系統的關鍵字搜尋 4.1.2 用上傳圖片搜尋 按「瀏覽」選擇想要搜尋的圖片，如圖 25。欲上傳之圖片會顯示預覽圖， 如圖 26。之後按「Upload」把圖片上傳到主機上會開始進行比對。比對結束後 比對結果會呈現於網頁上，目前是取前二十名相似的圖片展示出來。如圖 27。 圖 25 按圖網購系統的上傳圖片27
圖 26 上傳圖片-手機
4.2 資料來源與評比方式
我的資料庫並沒有拍賣網站所有的物品資料，我只打算挑選某幾類物品來下 載。 我打算用拍賣網站提供的關鍵字搜尋，去蒐集我想要的物品種類。我用的關 鍵字有：電腦、鍵盤、手機、機車、衣服、手錶等 搜尋之後就會出現此類拍賣物品清單，如圖 28。 圖 28 拍賣物品清單-手錶 將拍賣物品清單下載下來就可以照3.3的方法進行處理將物品資料和圖片存 入我的電腦。 評量的標準是用比對結果的正確率來評估，正確率的算法如下： 正確率＝前20 名比對結果有出現該類物品的數目 20 如上傳的圖片是機車，比對結果的前 20 名有 10 個都屬於機車，正確率= 10 20= 0.529
4.3 實驗結果與分析
4.3.1 色彩集群取 4 種主色彩 依照 3.2 圖片搜尋的方法對 20 張圖片做的實驗，實驗結果如表 1。 表 1 色彩集群取 4 種主色彩的實驗結果 圖片編號 (Image ID) 此類物品圖片 數目 比對結果前 20 名正確圖 片數目 正確率 所花時間 1 366 14 0.7 73 2 366 11 0.55 47 3 366 13 0.65 73 4 366 16 0.8 47 5 366 19 0.95 73 6 366 17 0.85 47 7 30 12 0.6 47 8 35 3 0.15 73 9 35 5 0.25 73 10 39 2 0.1 73 11 39 3 0.15 73 12 39 3 0.15 73 13 55 5 0.25 73 14 197 6 0.3 73 15 197 4 0.2 73 16 197 6 0.3 73 17 197 11 0.55 73 18 197 6 0.4 73 19 197 8 0.4 73 20 197 4 0.2 73 平均 0.42 67.8 經由觀察，我發現有一些圖片比對所花的時間特別少，在我寫的程式裡不應該有這種情形。 經過仔細檢查後，發現是因為有些圖片在調整成 256x256 之後，本來是 4 種顏色的灰階圖會變成 3 種顏色的灰階圖，也就是說這張圖的主色彩變成只有 3 種，原因應該是圖片過小使得有些顏色會被合併，如圖 29。 圖 29 圖片調整後顏色被合併 這樣會導致如果上傳的圖片被轉換之後只有 3 種顏色，那麼比較的時候就只 會和那些轉換後也只有 3 種顏色的圖去比較，而不會和轉換後有 4 種顏色的圖比， 因為當兩張圖顏色數不相等時程式無法比較。如圖 30： 圖 30 顏色數不相等時比對的結果
31 而圖庫裡轉換後是 4 種顏色的圖比轉換後是 3 種顏色的圖的數目多很多，所以比 對時間前者比後者多很多。 4.3.2 改良色彩集群取 4 種主色彩 要解決4.3.1的問題，我想到的解決方法是：兩張圖在比對的時候只要其中 一方是轉換後只有 3 種顏色的圖，那就雙方都改成只取前三種主色彩來比對，其 餘的圖片繼續照原本的方法比對。實驗結果如表 2。
表 2 改良色彩集群取 4 種主色彩的實驗結果 圖片編號 (Image ID) 此類物品圖片 數目 比對結果前 20 名正確圖 片數目 正確率 所花時間 1 366 17 0.85 87 2 366 11 0.55 67 3 366 17 0.85 87 4 366 16 0.8 67 5 366 19 0.95 87 6 366 17 0.85 67 7 30 12 0.6 67 8 35 4 0.2 87 9 35 3 0.15 87 10 39 6 0.3 87 11 39 2 0.1 87 12 39 3 0.15 87 13 55 6 0.3 87 14 197 6 0.3 87 15 197 4 0.2 87 16 197 6 0.3 87 17 197 11 0.55 87 18 197 6 0.3 87 19 197 5 0.25 87 20 197 4 0.2 87 平均 0.4375 83 比較表 1 和表 2，發現正確率比4.3.1的方法提高了 0.0175，時間少了 15.2 秒。有幾張圖的比較時間較短是因為上傳的圖片被轉換之後顏色只有 3 種，雙方 都只取前三種主色彩來比對，花的時間就比較短。 4.3.3 改良色彩集群取 8 種主色彩 在3.2.2有提到用 Nconvert 可以將圖片轉成 4 種顏色的灰階圖，而現在將圖
33 片轉成 8 種顏色的灰階圖，就可以取 8 種主色彩，再使用4.3.2的方法來做實驗。 實驗結果如表 3。 表 3 改良色彩集群取 8 種主色彩的實驗結果 圖片編號 (Image ID) 此類物品圖片 數目 比對結果前 20 名正確圖 片數目 正確率 所花時間 1 366 16 0.8 179 2 366 11 0.55 136 3 366 15 0.75 179 4 366 16 0.8 136 5 366 16 0.8 179 6 366 17 0.85 136 7 30 12 0.6 136 8 35 4 0.2 179 9 35 3 0.15 179 10 39 3 0.15 179 11 39 2 0.1 179 12 39 3 0.15 179 13 55 5 0.25 179 14 197 6 0.3 179 15 197 4 0.2 179 16 197 6 0.3 179 17 197 11 0.55 179 18 197 6 0.3 179 19 197 8 0.4 179 20 197 5 0.25 179 平均 0.4225 170.4 比較表 2 和表 3，正確率比4.3.2的方法降低了 0.015，時間多了 87.4 秒。 理論上取越多主色彩比對的結果會越精準，但在實際測試的結果並沒有比較好， 時間卻變得極長。 很可能是因為比對太嚴格所以兩張圖片只要有一點點不同相似度就會很低， 導致圖庫裡每張圖片和上傳圖片的相似度都很低，找不出正確的圖。
4.3.4 色彩集群取 3 種主色彩 增加取主色彩的數目的結果並沒有比較好，所以我想減少取主色彩的數目試 試。 經由觀察發現第 4 個主色彩比出來的值都很小，表示第 4 個主色彩在產生相 似度中影響不大，所以我認為可以只取前三種主色彩來比對，如圖 31。 圖 31 第 4 個主色彩影響不大 A1 是 A 圖取第一種主色彩，B1 是 B 圖取第一種主色彩，以此類推。 實驗結果如表 4。
35 表 4 色彩集群取 3 種主色彩的實驗結果 圖片編號 (Image ID) 此類物品圖片 數目 比對結果前 20 名正確圖 片數目 正確率 所花時間 1 366 17 0.85 66 2 366 11 0.55 66 3 366 17 0.85 66 4 366 16 0.8 66 5 366 13 0.65 66 6 366 17 0.85 66 7 30 12 0.6 66 8 35 4 0.2 66 9 35 1 0.05 66 10 39 6 0.3 66 11 39 2 0.1 66 12 39 3 0.15 66 13 55 6 0.3 66 14 197 6 0.3 66 15 197 1 0.2 66 16 197 6 0.3 66 17 197 11 0.55 66 18 197 6 0.3 66 19 197 8 0.4 66 20 197 4 0.2 66 平均 0.425 66 比較表 2 和表 4，只取前三種主色彩正確率降低了 0.0125，時間少了 17 秒。 而且這個方法所花的比對時間都是相同的，不像之前的方法會因為不同上傳圖片 影響時間長短。 4.3.5 色彩集群取 3 種主色彩且不找最佳配對 在2.1.3有找出最佳配對的方法，經由觀察比對結果前 20 名的相似度矩陣發
現，那些正確的物品的最大相似度，很多都恰好是還沒 Optimize Swap 之前的相 似度矩陣對角線總和，如圖 32，也就是說最佳配對常常是不用找的。 我嘗試只計算相似度矩陣對角線那幾欄的值，其他欄位不計算，如圖 33， 這樣不僅不用找最佳配對且計算相似度矩陣的時間複雜度會從Ο(n2)降到Ο(n)， 更加節省時間。 這樣的比對方式就是 A 圖取第一種主色彩產生的點圖會和 B 圖取第一種主 色彩產生的點圖比較，以此類推，如圖 34。實驗結果如表 5。 圖 32 最佳配對剛好在對角線上 圖 33 只計算相似度矩陣對角線
37
表 5 色彩集群取 3 種主色彩且不找最佳配對的實驗結果 圖片編號 (Image ID) 此類物品圖片 數目 比對結果前 20 名正確圖 片數目 正確率 所花時間 1 366 19 0.95 43 2 366 9 0.45 43 3 366 17 0.85 43 4 366 17 0.85 43 5 366 15 0.75 43 6 366 20 1 43 7 30 12 0.6 43 8 35 6 0.3 43 9 35 2 0.1 43 10 39 4 0.2 43 11 39 8 0.4 43 12 39 1 0.05 43 13 55 2 0.1 43 14 197 6 0.3 43 15 197 4 0.2 43 16 197 6 0.3 43 17 197 11 0.55 43 18 197 5 0.25 43 19 197 5 0.25 43 20 197 4 0.2 43 平均 0.4325 43 比較表 4 和表 5，可以發現只計算相似度矩陣對角線的正確率提高了 0.0075， 時間少了 23 秒。但正確率比4.3.2的方法低了 0.005。 以上五種實驗裡正確率最高的是4.3.2的方法。但要在正確率與時間做取捨 我會選4.3.5的方法。
4.4 色彩集群之探討
色彩集群計算兩張圖片之間的相似度的方法，簡單來說就是用主色彩找出圖39 片明顯的輪廓來比較，就算是不同顏色，只要輪廓相近的話相似度就會比較高。 比對結果很容易被其他種類的圖片干擾，當圖片種類越來越多的時候干擾就會越 明顯。 如圖 35，圖 36，這兩張圖的物品並不相同但相似度卻頗高，由點圖可看出 確實有相似之處。
圖 35 燒錄機的圖片及其點圖
41 M = �0.0357660.032741 0.0920800.212679 0.0300650.030976 0.211133 0.026846 0.007504� → �inal result �0.2111330.035766 0.026846 0.0075040.212679 0.030065 0.032741 0.092080 0.030976� 最大相似度為：0.211133 + 0.212679 + 0.030976 = 0.454788 ≅ 45%。 解決方法我認為可以再增加一些比對步驟，如比較主色彩的顏色是否相同之 類，可能會有所改善。
第 5 章 結論與未來展望
5.1 結論
本論文實作了一種新的圖片搜尋方式「色彩集群」，並將其與拍賣網站的資 料做結合，架設出「按圖網購系統」的網站。讓使用者可以用關鍵字以及圖片搜 尋各個拍賣網站的物品。5.2 未來展望
現在手機的功能越來越強，既可以拍照又可以上網。我希望當我在外面看到 想買的物品時可以用手機拍下來，用手機直接上傳到按圖網購系統，把結果展示 在手機上。這樣會比用電腦上傳更方便。43
參考文獻
1. 徐永煜. 2004. 複合式高斯類神經網路之研究. 博士論文. 新竹：交通大學資 料工程學系. 2. 曾坤隆. 2009. 影音媒體之建築物圖像偵測. 碩士論文. 新竹：交通大學資料 科學與工程研究所.3. D.G Love. 2004. Distinctive image features from scale-invariant keypoints. International Journal of Computer Vision.
4. G. Nagy,. 1992. State of the art in pattern recognition. Proceedings of the IEEE, vol. 56, pp.336-362.
5. Hartley R, and Zisserman A. 2000. Multiple view geometry in computer vision. Cambridge University Press.
6. Harris, C. and Stephens, M. 1988. A combined corner and edge detector. In Fourth Alvey Vision Conference, Manchester, UK, pp.147-151.
7. J.A. Anderson, A. Pellionisz, and E. Rosenfeld. 1990. Neurocomputing 2: Directions for Research. MIT Press, Cambridge Mass.
8. Joo-Hwee Lim, Jean-Pierre Chevallet, and Sheng Gao. 2006. Scene Identification using Discriminative Patterns. In Proceedings of ICPR 2006 pp.642-645 Aug 20-24.
9. L.N. Kanal. 1974. Patterns in pattern recognition: 1968-1974. IEEE Trans. Information Theory, vol. 20.
10. Luc Devroye, Laszlo Gyorfi, and Gabor Lugosi. 1996. A Probabilistic Theory of Pattern Recognition. Berlin: Springer-Verlag.
11. Por-Shen Lai. 2010. Intelligent Web-Gallery Design with Variance Enhanced K-medoid Clustering. PhD dissertation. Hsin-Chu: National Chiao-Tung University, Department of Computer Science.
12. R.O. Duda and P.E. Hart. 1973. Pattern Classification and Scene Analysis. New York: John Wiley and Sons.
13. S. Watanabe. 1985. Pattern Recognition: Human and Mechanical. Oxford University Press.
14. Ze-Nian Li, and Mark S. Drew. 2003. Fundamentals of Multimedia. 551-575. New York: Prentice Hall.
