基于微信小程序的口紅色號識別系統(tǒng)

摘? 要：愛美是女人的天性，口紅能大大提升女人的社交自信與魅力，是現(xiàn)代女性必備的化妝品之一。文章對口紅色號識別進行了研究，設(shè)計并開發(fā)了一款基于微信小程序的口紅色號識別系統(tǒng)。該系統(tǒng)依托于微信客戶端，無須下載即可使用，能幫助用戶快速找到可以達到相似效果的口紅色號，讓用戶在最短的時間內(nèi)花最小的金錢代價找到自己心儀的產(chǎn)品。

關(guān)鍵詞：微信小程序;口紅色號識別;微信客戶端

中圖分類號：TP311? ? ? ?文獻標(biāo)識碼：A文章編號：2096-4706（2022）01-0032-05

Abstract： It is a woman’s nature to love beauty. Lipstick can greatly enhance a woman’s social confidence and charm and it is one of the must-have cosmetic items for modern women. This paper researches the lipstick number recognition， designs and develops a lipstick number recognition system based on WeChat Mini Program. The system relies on the WeChat client and can be used without downloading. It can help users quickly find the lipstick number that can achieve similar effect， allowing users to find their favorite products in the shortest time and at the lowest cost.

Keywords： WeChat Mini Program; lipstick number recognition; WeChat client

0? 引? 言

隨著我國綜合實力的不斷攀升，人民對于美的追求也逐年上漲?；瘖y品行業(yè)迅速發(fā)展，面對五花八門的口紅色號，女性朋友們想要找到自己喜歡的口紅色號簡直是大海撈針。而對于廣大的男同胞們而言，面對多如牛毛的口紅色號，想要從中挑一款愛人喜歡的口紅作為禮物，只能感嘆“蜀道難，難于上青天！”。日常生活中，當(dāng)看到雜志或是影視劇中女主角的迷人紅唇時，急需一款能幫助用戶快速找到可以達到相似效果的口紅色號識別系統(tǒng)，讓用戶在最短的時間內(nèi)花最小的金錢代價找到自己心儀的產(chǎn)品。微信小程序依托于微信客戶端，它不需要下載安裝，用戶僅僅需要掃一掃或搜一搜即可打開應(yīng)用[1]。微信小程序具有開發(fā)門檻低，用戶基數(shù)大等特點。因此，本文選用微信小程序來開發(fā)口紅色號識別系統(tǒng)。

1? 系統(tǒng)功能簡介

口紅色號識別小程序以顏色的獲取為出發(fā)點，圍繞顏色展開，包括口紅顏色和色彩兩個主模塊，基于顏色衍生出“口紅識別”“口紅推薦”“色彩識別”“口紅收藏”“色彩收藏”等功能模塊?？诩t和色彩模塊功能大體相似，只是爬蟲的顏色數(shù)據(jù)來源不同而已。系統(tǒng)的功能結(jié)構(gòu)具體如圖1所示。

2? 系統(tǒng)技術(shù)方案

系統(tǒng)分為小程序端和后端兩個技術(shù)模塊。前端使用微信小程序原生組件、API以及iView Weapp UI組件庫實現(xiàn)，后端使用JAVA、爬蟲技術(shù)（Jsoup、Selenium）、百度AI人臉識別技術(shù)結(jié)合當(dāng)前比較流行的SpringBoot、Mybatis技術(shù)實現(xiàn)。數(shù)據(jù)存儲使用MySQL數(shù)據(jù)庫。前后端之間采用JSON進行數(shù)據(jù)交互，遵循RESTFul風(fēng)格。

2.1? 微信小程序介紹

微信小程序是一種無須下載即可使用的應(yīng)用，它依托于微信，可跨安卓和iOS平臺使用，開發(fā)成本低，操作簡單。微信客戶可以通過微信聊天進入小程序，靈活快捷。

2.2? 后端技術(shù)介紹

2.2.1? 爬蟲技術(shù)

網(wǎng)絡(luò)爬蟲是模擬瀏覽器發(fā)送網(wǎng)絡(luò)請求，按照特定規(guī)則自動抓取互聯(lián)網(wǎng)信息的程序[2]。Jsoup是一款Java的HTML解析器，可直接解析某個URL地址、HTML文本內(nèi)容[3]。Selenium是Thought Works公司開發(fā)的Web軟件測試工具，它能模擬用戶操作瀏覽器[4]。

2.2.2? Spring Boot

Spring Boot發(fā)展于Spring的基礎(chǔ)之上，操作更加簡便，因為它可以根據(jù)jar包和類自動配置Bean，極大地簡化了應(yīng)用程序初始搭建和開發(fā)過程[5]。

2.2.3? 百度AI人臉識別技術(shù)

人臉識別是一種提取人臉特征與輪廓的生物識別技術(shù)。人臉識別主要流程為：數(shù)據(jù)采集、人臉檢測、特征提取、分類識別[6]。百度AI開放平臺提供全球領(lǐng)先的語音、圖像、NLP等多項人工智能技術(shù)，人臉識別技術(shù)便是其中一種。

3? 系統(tǒng)數(shù)據(jù)庫設(shè)計

MySQL數(shù)據(jù)庫是一種免費開源的數(shù)據(jù)庫，當(dāng)前有很多中小型企業(yè)都在使用?？诩t識別系統(tǒng)業(yè)務(wù)邏輯不是特別復(fù)雜，數(shù)據(jù)量也不大，所以，選用MySQL數(shù)據(jù)庫進行數(shù)據(jù)存儲。系統(tǒng)共設(shè)計四張數(shù)據(jù)庫表，分別為口紅表、口紅收藏表、顏色表、顏色收藏表。

4? 關(guān)鍵技術(shù)解析

在本系統(tǒng)中存在兩個關(guān)鍵技術(shù)，其一為口紅庫的數(shù)據(jù)來源，其二為人臉口紅的識別。

4.1? 口紅品牌、色號的爬蟲技術(shù)

由于顏色可能存在色差，口紅色號識別小程序中的口紅數(shù)據(jù)均來源于各品牌官網(wǎng)，系統(tǒng)使用Selenium模擬用戶操作瀏覽器，使用Jsoup框架解析口紅數(shù)據(jù)，并將這些數(shù)據(jù)存儲到數(shù)據(jù)庫中。由于各大品牌官網(wǎng)中口紅系列和色號的頁面HTML結(jié)構(gòu)不一，無法統(tǒng)一爬取，本小程序分別針對各個品牌編寫爬蟲代碼進行爬取。

以爬取NARS品牌口紅的系列為例，通過Jsoup的靜態(tài)方法connect（）來創(chuàng)建一個連接，get（）方法可以獲取到連接的HTML文檔對象。通過分析發(fā)現(xiàn)口紅的系列HTML元素?fù)碛形ㄒ籭d（#products-name），就可以通過文檔對象的getElementById（）方法獲取HTML元素，text（）方法可以獲取到元素的文本內(nèi)容，爬取口紅色號的思路與之類似。爬取NARS品牌口紅的系列代碼如下：

public class JsoupDemo {

@Test

public void jsoupTest（） throws IOException {

Document document = Jsoup.connect（“https：//www.narscosmetics.com.cn/LIPSTICK-n097.html？dwvar_n097_color=34102967&cgid=lipstick”）.get（）;

String brand = document.getElementById（“products-name”）.text（）;

String series = document.getElementsByClass（“selected-variant-color-description”）.get（0）.text（）;

System.out.println（brand）;

System.out.println（series）;

}

}

4.2? 口紅識別技術(shù)

口紅識別步驟如下：

（1）用戶上傳人臉圖片，小程序前端向后端提交請求并帶上openid。

（2）調(diào)用百度AI的人臉檢測接口獲取小程序端傳送的嘴巴圖片。

（3）獲取到嘴巴顏色數(shù)量最多的顏色，再通過CIE1976顏色相似度算法計算出前N種顏色與之最相似的口紅。

（4）將上一步獲取的信息根據(jù)價格從低到高進行排序，將排序后的結(jié)果返回給小程序端。

上述步驟中，調(diào)用百度人臉檢測接口獲取小程序端傳送的嘴巴圖片是十分重要的一步。該步驟共分為兩個階段進行。

第一階段，用戶在小程序端上傳圖片，小程序前端向后端提交請求并帶上openid。圖片上傳方式使用multipart/form-data方式提交，后臺接收到MultipartFile對象后直接保存在服務(wù)器的/usr/local/data/images目錄里面。其核心代碼如下：

@RequestMapping（“/getLipsticks”）

public Result getLipsticks（@RequestParam（value = “file”） MultipartFile file，

@RequestParam String openid）{

return lipsticksService.getLipsticks（file，openid）;

}

第二階段，調(diào)用百度AI的人臉檢測接口。要調(diào)用百度人臉檢測接口需要先獲取百度AI的token，開發(fā)者需要向請求地址：https：//aip.baidubce.com/oauth/2.0/token發(fā)送請求，在發(fā)送請求時，需要附帶上自己的clientId和clientSecret。在獲取token之后，再向請求地址： https：//aip.baidubce.com/rest/2.0/face/v3/detect發(fā)送請求，便可以獲取人臉坐標(biāo)。

5? 小程序功能實現(xiàn)

系統(tǒng)擁有“口紅識別”“口紅推薦”“口紅收藏”等多個功能模塊。由于篇幅有限，此處僅展示口紅識別、口紅推薦和口紅收藏模塊。

5.1? 口紅識別模塊

用戶登錄小程序（第一次需要進行小程序的授權(quán)）進入到口紅識別模塊（主界面），界面顯示如圖2所示。單擊拍照按鈕，拍照上傳一張完整人臉或者是從相冊中選擇一張人臉圖上傳，小程序能自動識別與人臉口紅最相似的口紅品牌和色號。識別中和識別后的效果圖如圖3和圖4所示。

識別完成后將顯示出如圖4所示的九條垂直排列的圓角矩形（注：可以點擊TOP榜后面的紫色按鈕來選擇要顯示的數(shù)據(jù)的條數(shù)），圓角矩形中將告訴用戶，可以達到照片上效果的口紅的品牌、色號以及相似度。點擊圓角矩形，可以查看口紅的詳情，包括口紅圖片、品牌、色號、價格、相似度、特點。此功能主要用到了微信小程序的原生API中的choose Image、upload File來進行實現(xiàn)，通過choose Image來進行照片的選擇，選擇完成后將照片地址賦值給image組件，并通過upload File將圖片上傳給服務(wù)器，服務(wù)器完成對口紅的查找后，將查找出來的信息以json的形式返回給小程序端，小程序端將信息顯示在圓角矩形中。

5.2? 口紅推薦模塊

口紅推薦頁的頁面效果如圖5所示。此功能在未進行口紅查找前，顯示在屏幕底部的白色拖動懸浮框中。手指按住懸浮框上部分向上拖拽可以將懸浮框拉到屏幕上，懸浮框又分為上下兩部分，上部分可以進行品牌的選擇，下部分可以查看該品牌最近熱門的口紅產(chǎn)品信息。點擊下部分的九宮格中的任意一個可以查看該色號的詳細(xì)信息，詳情頁如圖6所示。在詳細(xì)頁面有口紅圖片、品牌、色號、價格、特點等信息。點擊左下角的五角星，可以收藏口紅信息，點擊右下角的一鍵復(fù)制口紅信息按鈕可以復(fù)制口紅信息。此功能使用微信小程序原生組件中的scroll-view來分別制作可以在X軸滑動選擇的品牌選擇區(qū)域以及可以在Y軸上滑動的口紅信息展示區(qū)域。

5.3? 口紅收藏模塊

收藏管理功能存在于小程序端的第三個頁面，從首頁向右滑動兩次便可以切換到此界面，界面效果圖如圖7所示。收藏管理包括口紅收藏和顏色收藏兩個界面，其中，口紅收藏界面效果圖如圖8所示。此頁面中包括收藏查看以及收藏編輯功能兩個功能。

（1）收藏查看：用戶進入圖7所示頁面后還可以通過頁面中上部分的灰色操作區(qū)域的口紅，顏色兩個按鈕來進行查看收藏內(nèi)容的切換。此功能主要使用微信原生組件swiper-item以及scroll-view兩個組件來制作。swiper-item用來制作可以切換的當(dāng)前正在查看的收藏信息，scroll-view用來制作可以在Y軸上滑動的區(qū)域。

（2）收藏編輯：此功能通過點擊圖8所示頁面中上部分的灰色部分的右側(cè)的編輯按鈕觸發(fā)。點擊編輯后，頁面上顯示的收藏信息將切換為編輯狀態(tài)，如圖9所示。左側(cè)出現(xiàn)可以點擊選擇的圓圈，頁面底部出現(xiàn)全選按鈕以及刪除按鈕，點擊全選按鈕，可以選擇所有以及收藏的信息，而點擊刪除則將選擇的收藏的信息進行刪除。此功能主要使用微信小程序原生組件request來制作，將用戶選擇的收藏信息的ID保存在數(shù)組中，通過異步的方式將選擇的收藏信息的ID以及用戶的openid發(fā)送給后端，后端接收到數(shù)據(jù)后，對數(shù)據(jù)庫進行刪除操作。

后端查詢口紅收藏列表核心代碼如下：

@RequestMapping（“/getLipsticksByOpenid”）

public Result getLipsticksByOpenid（@RequestParam String openid）{

return lipsticksService.getLipsticksByOpenid（openid）;

}

6? 結(jié)? 論

本文設(shè)計并實現(xiàn)了一款基于微信小程序的口紅色號識別系統(tǒng)，文章從系統(tǒng)的功能簡介、技術(shù)方案、數(shù)據(jù)庫設(shè)計、關(guān)鍵技術(shù)解析、小程序功能實現(xiàn)等五個方面對小程序進行了介紹?；谖⑿判〕绦虻目诩t色號識別系統(tǒng)依托于微信客戶端，無需下載即可使用，具有開發(fā)成本低，用戶基數(shù)大，操作簡單等特點。它能幫助用戶快速找到可以達到相似效果的口紅色號，讓用戶在最短的時間內(nèi)花最小的金錢代價找到自己心儀的產(chǎn)品。結(jié)合人工智能技術(shù)將顏色相似度運到了口紅這一個美妝領(lǐng)域是本項目的最大創(chuàng)新亮點。但是，這也是本項目最大的難點。顏色相似度是目前行業(yè)內(nèi)難點問題，即使是同一張圖片，在不同的光照下，人眼分辨的顏色是不一樣的。如何在有限的條件下盡可能地提高小程序口紅色號識別的準(zhǔn)確率是小程序下一步優(yōu)化的方向。

參考文獻：

[1] 唐曉明，楊立，陳龍.基于微信小程序“E友教育”的移動學(xué)習(xí)平臺的設(shè)計與開發(fā) [J].數(shù)據(jù)，2021（11）：98-100.

[2] SUN Y，王譯霄，宣曉婷，等.基于機器學(xué)習(xí)聯(lián)合網(wǎng)絡(luò)爬蟲算法的果汁鑒偽技術(shù)的研究進展 [J].華中農(nóng)業(yè)大學(xué)學(xué)報，2022，41（1）：269-276.

[3] 熊艷秋，嚴(yán)碧波.基于jsoup爬取圖書網(wǎng)頁信息的網(wǎng)絡(luò)爬蟲技術(shù) [J].電腦與信息技術(shù)，2019，27（4）：61-63.

[4] 羊昌燕，鄧印凱.基于Selenium的自動化測試框架設(shè)計 [J].信息技術(shù)與信息化，2021（10）：65-68.

[5] 楊英櫻，喬運華，班玉榮.基于spring boot微服務(wù)架構(gòu)的RS10系統(tǒng)管理 [J].制造業(yè)自動化，2021，43（12）：193-196.

[6] 劉紅英，鐘冰冰.基于人臉識別的教務(wù)安全客戶端設(shè)計與實現(xiàn) [J].數(shù)字技術(shù)與應(yīng)用，2021，39（10）：221-224+227.

作者簡介：閔慧（1986—），女，漢族，湖南湘潭人，講師，碩士，研究方向：人工智能、軟件開發(fā)。