基于微信小程序的口紅色號識別系統

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

關鍵詞：微信小程序;口紅色號識別;微信客戶端

中圖分類號：TP311? ? ? ?文獻標識碼：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? 引? 言

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

1? 系統功能簡介

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

2? 系統技術方案

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

2.1? 微信小程序介紹

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

2.2? 后端技術介紹

2.2.1? 爬蟲技術

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

2.2.2? Spring Boot

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

2.2.3? 百度AI人臉識別技術

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

3? 系統數據庫設計

MySQL數據庫是一種免費開源的數據庫，當前有很多中小型企業都在使用。口紅識別系統業務邏輯不是特別復雜，數據量也不大，所以，選用MySQL數據庫進行數據存儲。系統共設計四張數據庫表，分別為口紅表、口紅收藏表、顏色表、顏色收藏表。

4? 關鍵技術解析

在本系統中存在兩個關鍵技術，其一為口紅庫的數據來源，其二為人臉口紅的識別。

4.1? 口紅品牌、色號的爬蟲技術

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

以爬取NARS品牌口紅的系列為例，通過Jsoup的靜態方法connect（）來創建一個連接，get（）方法可以獲取到連接的HTML文檔對象。通過分析發現口紅的系列HTML元素擁有唯一id（#products-name），就可以通過文檔對象的getElementById（）方法獲取HTML元素，text（）方法可以獲取到元素的文本內容，爬取口紅色號的思路與之類似。爬取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? 口紅識別技術

口紅識別步驟如下：

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

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

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

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

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

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

@RequestMapping（“/getLipsticks”）

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

@RequestParam String openid）{

return lipsticksService.getLipsticks（file，openid）;

}

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

5? 小程序功能實現

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

5.1? 口紅識別模塊

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

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

5.2? 口紅推薦模塊

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

5.3? 口紅收藏模塊

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

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

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

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

@RequestMapping（“/getLipsticksByOpenid”）

public Result getLipsticksByOpenid（@RequestParam String openid）{

return lipsticksService.getLipsticksByOpenid（openid）;

}

6? 結? 論

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

參考文獻：

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

[2] SUN Y，王譯霄，宣曉婷，等.基于機器學習聯合網絡爬蟲算法的果汁鑒偽技術的研究進展 [J].華中農業大學學報，2022，41（1）：269-276.

[3] 熊艷秋，嚴碧波.基于jsoup爬取圖書網頁信息的網絡爬蟲技術 [J].電腦與信息技術，2019，27（4）：61-63.

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

[5] 楊英櫻，喬運華，班玉榮.基于spring boot微服務架構的RS10系統管理 [J].制造業自動化，2021，43（12）：193-196.

[6] 劉紅英，鐘冰冰.基于人臉識別的教務安全客戶端設計與實現 [J].數字技術與應用，2021，39（10）：221-224+227.

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