Ali visual AI training camp -day03- construction of electronic photo album (face and expression recognition)

Electronic photo album building （ Face 、 Facial recognition ）
One 、 Project brief introduction

Let's first look at the effect of the project ： Access program operation port ：127.0.0.1.8080/index.html

So we see three blanks , Then here we can click to upload , You can also upload pictures by dragging and dropping . Let's take a look at the effect ,

This algorithm carries out expression recognition and scene recognition ：

In the first part, we drag and drop multiple pictures to upload , The second part is to implement a rotation chart , At this time, you can see a surprised expression , Angry expressions and camping outdoors or characters , We can see that the image classification uses two kinds of visual algorithms , One is expression recognition , Then the other is scene recognition . Then we can look at the pictures .
Two 、 Project implementation

Now let's look at the code , Let's explain the whole structure first ：

Application： Start the entry function 
common： Generally, it is used to store public classes or constants , Or enumeration values 
config： Loading or database configuration , We'll all put it in config below , webAPPconfig For our static resources , for instance css、js And some pictures , I did a mapping , for instance static, Then we map it to classpath:/static Under the table of contents .
Controller： We receive external requests , For example, parameter verification , Then the data called or obtained through the interface is returned to the front end 
Service: Put different requests , Different services abstract it into a service, This project has two service, It can also be considered as two modules .
Utils: Store public classes or tool functions .

Next, let's see the specific implementation ：
First from Controller Come on , Take a look at what functions have been implemented .

You can get pictures 、 Get categories , Get pictures by categories and labels , Get the list of pictures and upload files by classification .
The upload file function needs to complete an upload , Save the uploaded file to the file , You need to call two recognized functions , Facial recognition , Scene recognition .
In addition, we need to pay attention to , adopt multipartFile What you get is the input stream of a file , The input stream can only be read once , Then if you want to repeat it, it will be empty . So we turn it into a ByteArrayInputStream flow , Then we use it every time , We can do a reset(), Then we can save the stream in our memory , This method is generally not recommended , Because if the picture is large , May take up too much memory space . In addition, the pictures we upload may have duplicate names , To avoid double names , What we did to this picture input The flow of , We ask for one md5 Value as filename .

Then take a look at ResourceService:

ResourceService Is a resource manager , Let's start with two functions ,Postconstruct annotation , We will execute this function first , Take out the array stored locally and load it into memory . PreDestroy annotation , When destroying objects , Save this data to a local file , That is to say, keep this data above , There is one data.json data , Take a look at the entire data storage structure .

allImg Put all uploaded pictures , Put it in the array .
cateMap Then it is divided into two scenes expression、scene, You can see the different categories , Facial recognition , Scene recognition , It stores all the recognized expressions , For example, surprise 、 angry 、 Happy , Scene recognition , Storage movement 、 outdoors , This storage is so that we can query quickly , For example, it can be classified , Quickly find all the identifications under a certain category , This is map The role of .
expressionMap It means which pictures are included under a certain label ,senceMap It means the same thing .
imgLabels Is a reverse search process , That is, through a picture , Identify which scenarios , For example, we can see that it may be directly recognized by this picture , It belongs to the character scene , It belongs to the motion scene , Then it belongs to angry expression , It belongs to performance and other scenes .

Then take a look at VisionService

VisionService, Identify the scene , expression . We upload the picture stream , We spread the whole picture to the interface , Then identify this scenario from the server .
We have two ways , In the early version, we passed url Upload in this way , But one limitation is that we have to take advantage of this oss To be able to recognize , New version SDK We just started to support the identification by uploading pictures locally .

These are the back-end functions . Let's take a look at the implementation of the front page ：

Our front page is through vue, And then add element-ui These two components are used to implement the logic of our front end . We can probably look at the whole structure , It can be divided into three parts .

Part of it is that we use an upload component to implement the drag and drop upload just now , And click .

Find a picture , We can see two ways , A drag , One is click to upload , This is achieved through a component . Let's briefly introduce the implementation of components , There are different functions .action You need to access the backend when uploading pictures upload Interface , Then there was an event , Is what should be done after success , That is, the corresponding function to be executed . such as UploadSuccess It refers to the successful uploading , We're going to refresh the page , Add the following label categories .

The second part is the implementation of the rotation chart ：

Then along with the following list , Yes vue A component of .

vue-gallery, Implement custom tag names , Then we define an attribute ：photos.photos Retrieve data from the background , Then render it to the front html In the middle of the page . Because this is a component , It will have its own template , This is our entire template part , After that, the background image is processed , And then the definition of some events .
vue, Its whole is a data flow of events , Through different changes in data , Then we can trigger its rendering , For example, upload a picture , It can interact with different components , Use different labels , Events to drive data changes .

mounted It will define some events , For example, the picture changes , How to call , And we'll listen and press different keys , What should be done ？ Then the previous picture or the next picture, etc .
methods What is defined is some methods , For example, click on a next photo, We will go to the next picture . These changes correspond to .
vue Has its own template language .

el It's a ID The binding of , such as #app, The upper parent of this tag , Defined a ID It's called app, At this time, you can put the component in the parent div below , Then render according to the template .

The third part is the component of custom label .

V-tag Corresponding to this , We divide it into different categories , There are different tags implemented by components .

Data During initialization , What rendering needs to be done . Different colors are customized . cateMap, Convert the returned English into Chinese characters for display .
It implements several methods ：

Go get a different one ID, Then choose a different color for it , By taking a random subscript , Then choose a different color .
Tag It's a two-tier map structure . It is the structure of the first floor , expression , There are several expressions below , There are several scenarios below , This is a two-tier map structure .

So when rendering , It will be on two floors map Rendering , After the first layer is completed , Then render the second layer of data .
Implement different triggers , Upload files , After success, you need to perform different event operations ：

Because to realize the communication between different components , Customized a virtual Event Of vue Example , And then through Event Put all the different vue Instances are concatenated . such as uploadSuccess To send an event . adopt upload vue Instance to send events to other instances , After uploading successfully , Load into the rotation chart .

on It corresponds to receiving emit The events that came from . If we get uploadSuccess event , Then you can get data from the back end , Perform a refresh operation on this page .

refresh The same is true , After uploading successfully , To the whole tag Make a refresh , The newly identified different scenes , Different labels , Make a refresh .

The implementation logic of the front end is like this .