電子相冊搭建（人臉、表情識别）
一、項目簡介
我們首先來看一下項目運作出來的效果：通路程式營運端口：127.0.0.1.8080/index.html
第一部分我們多張圖檔拖拽上傳，第二部分實作一個輪播圖，這時候可以看到有吃驚的表情，生氣的表情以及露營戶外或者是人物，可以看到對這個圖檔分類利用了兩類的視覺的算法，一個是表情識别，然後另外一個是場景識别。然後我們可以去檢視圖檔。
二、項目實作
然後現在來看一下代碼，先講解一下它的整個結構：
Application：啟動的入口函數
common：一般就是存放公共的類或者常量，或者枚舉值
config：裝載或者是資料庫的配置，我們都會放在config下面， webAPPconfig是對我們的靜态資源，比如說css、js還有一些圖檔，做了一個映射，比如說static，然後我們把它映射到classpath:/static目錄下。
Controller：我們接收外部的請求，比如參數校驗，之後通過接口調用或得到的資料傳回給前端
Service:把不同的請求,不同的服務把它抽象成一個service，本項目有兩個service，也可以認為是兩個子產品。
Utils:存放公共的類或者工具函數。
接下來看一下具體的實作：
先從Controller來，看一下實作了哪些功能。
可以擷取圖檔、擷取分類，通過分類以及标簽擷取圖檔，通過分類擷取圖檔清單以及上傳檔案。
在上傳檔案函數需要完成一個上傳，把上傳的檔案儲存到檔案當中，需要調用兩個識别的函數，表情識别，場景識别。
另外需要注意一下，通過multipartFile擷取的是一個檔案的輸入流，輸入流的話它隻能讀取一次，然後如果要重複讀的話就會是空。 是以我們把它轉化成一個ByteArrayInputStream流，然後我們在每次用完之後，我們可以把它進行一個reset()，之後可以把流儲存在我們的記憶體當中，一般不推薦使用這種方式，因為如果圖檔的比較大的話，可能會占用太多的記憶體空間。此外由于我們上傳的圖檔可能會有重名，為了避免重名，我們對這個圖檔的input的流，我們給它求一個md5值作為檔案名。
接着來看一下ResourceService:
ResourceService是一個資源的管理器，先來看兩個函數，Postconstruct注解，我們會先去執行這個函數，取出儲存在本地的數組并且加載到記憶體中去。 PreDestroy注解，在銷毀對象的時候，把這些資料儲存到本地檔案，也就是說儲存在這個data上面，有一個 data.json資料，來看一下整個的資料存儲的結構。
allImg将所有上傳的圖檔，放在數組裡面。
cateMap之後又分成兩個場景expression、scene，可以看到不同的分類，表情識别，場景識别，裡面存放所有識别出來的表情，比如說驚訝、生氣、開心，場景識别，存放運動、戶外，這樣存儲是為了我們能夠快速的進行查詢，比如說可以通過分類，快速的找到某一個分類下面的所有的識别，這個是 map的作用。
expressionMap是表示某類标簽下面都包括哪些圖檔，senceMap也是同樣的意思。
imgLabels是一個反向的查找的過程，即通過一個圖檔，識别出來了哪些場景，比如說我們可以看到它可能這張圖檔它可能直接識别出來了，它是屬于人物場景，屬于運動場景，然後屬于生氣的表情，屬于演出等場景。
接着來看一下VisionService
VisionService，識别場景，表情。我們上傳圖檔流，我們把整個圖檔流傳到接口裡面，然後從服務端去識别這個場景。
我們是有兩種方式，早期的版本我們是通過url這種方式去上傳的，但是有一個限制就是說我們必須是利用這種oss的對象才能夠識别，新的版本的SDK我們就是開始支援通過本地上傳圖檔來進行識别。
以上這個是後端的這些功能。下面來看一下前端頁面的實作：
我們前端頁面是通過vue，然後加上element-ui這個兩個元件來實作我們的前端的邏輯。我們大概可以看一下整個的結構，它可以分成三部分。
一部分就是我們通過一個上傳的組建來去實作我們剛才拖拽上傳，以及點選。
找到一個圖檔，我們可以看到兩種方式，一種拖拽，一種是點選上傳，這是通過一個元件來實作的。我們大概來介紹元件的實作，這是有不同的功能區分的。action是在上傳圖檔要去通路後端的upload接口，之後有一個事件，是在成功之後應該做哪些事情，也就是對應的要執行的函數。 比如UploadSuccess指上傳成功之後，我們要重新整理頁面，添加下面的标簽分類等。
第二部分就是實作輪播圖的部分：
然後以及下面清單，通過是vue的一個元件。
vue-gallery,實作自定義的标簽名，之後定義了一個屬性：photos。photos從背景去取回資料，之後把它渲染到前端的html頁面當中。由于我們這是一個元件，它會有對應的自己一個模闆，這個就是我們整個的模闆部分，之後對它進行背景圖檔的處理，然後以及一些事件的定義。
vue，它的整個是一個事件的資料流，通過資料的不同的變化，然後我們就可以去觸發它的渲染，比如上傳一張圖檔，它是可以對應不同的元件進行互動，利用不同的标簽，事件來驅動資料的變化。
mounted是會定義一些事件，比如圖檔變化，怎麼調用，以及我們會監聽按下不同的鍵，應該做哪些操作？然後是前張圖檔還是後一張圖檔等。
methods定義的就是一些方法，比如點選一個 next photo，我們就會去通路下一張圖檔。這些變化是對應的。
vue有自己的模闆語言。
el是一個ID的綁定，比如#app,在這個标簽上層父級，定義了一個ID叫app，這時候可以把元件放在父級div下面，然後在這個裡面去根據模闆進行渲染。
第三部分是自定義标簽的元件。
V-tag對應的是這塊，我們把它分成不同的分類，下面有不同的标簽是元件來實作的。
Data是指在初始化的時候，需要進行哪些渲染。這裡面自定義了不同的顔色。 cateMap，将傳回的英文轉化成漢字去顯示出來。
它實作了幾個方法：
去取一個不同的ID，然後給它選成不同的顔色，通過取一個随機的下标，然後去把它選成不同的顔色。
Tag是一個兩層map結構。就是第一層這裡面某比每層結構，表情，下面有幾種表情，場景下面有幾種場景，這是一個兩層的map結構。
是以在渲染的時候，會對兩層的map進行渲染，第一層完成之後，再渲染第二層資料。
實作不同的觸發，上傳檔案，成功之後要進行不同的事件操作：
因為要實作不同的元件之間進行通信，自定義了一個虛拟的Event的vue的執行個體，然後通過Event将所有的不同的vue執行個體串聯起來。比如uploadSuccess去發送一個事件。通過upload vue執行個體去給其他的執行個體去發事件，在上傳成功之後，加載到輪播圖裡面。
on就對應去接收 emit傳過來的事件。如果我們得到了uploadSuccess事件,那麼就會通過從後端去擷取資料，對這個頁面進行一個重新整理操作。
refresh也是同樣的道理，上傳成功之後，要對整個的tag進行一個重新整理，把新識别出來的不同的場景，不同标簽，進行一個重新整理。
前端的實作邏輯就是這樣的。