摘  要：爱美是女人的天性，口红能大大提升女人的社交自信与魅力，是现代女性必备的化妆品之一。文章对口红色号识别进行了研究，设计并开发了一款基于微信小程序的口红色号识别系统。该系统依托于微信客户端，无须下载即可使用，能帮助用户快速找到可以达到相似效果的口红色号，让用户在最短的时间内花最小的金钱代价找到自己心仪的产品。

关键词：微信小程序;口红色号识别;微信客户端

中图分类号：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—），女，汉族，湖南湘潭人，讲师，硕士，研究方向：人工智能、软件开发。