基于深度学习与百度AI 的菜谱推荐与健康分析微信小程序设计

陈沁仪，冲 蕾，于泽昊，张泽权，王展纯，邹星雨

（上海工程技术大学 城市轨道交通学院，上海 201620）

0 引言

受到2020 年新冠疫情的影响，大部分校园、企业食堂采用了无人化、自动化的相关餐饮服务，智能化、数字化迎来了一个新的发展阶段。已有研究表明，食物中的一些成分可以改变血液中某些神经递质的浓度水平，传递各种各样的情绪信息。由此可见，食物，是影响神经递质浓度水平的关键，是控制情绪的重要因素，直接影响了人的感情中枢。因此对菜谱推荐和健康分析进行研究的迫切性日益凸显。本文拟对此展开探述与论述。

1 深度学习

1.1 深度学习原理

深度学习泛指一类用复杂多重非线性结构分析数据的抽象算法，现在多用深度学习为基础研发的深度神经网络作为工具的机器学习模型。在本作品中，主要体现在全连接的人工神经网络上，示意图如图1 所示。

图1 神经网络示意图Fig.1 Schematic diagram of neural network

神经网络（NN）是以模仿大脑神经结构为出发点的计算模型。大多数的神经网络可以被用来解决多维特征/多元变量问题。根据已有结论，具有2 个隐藏层的神经网络可以拟合任意函数。因此，传统的神经网络采用2 个隐藏层。在数学上，可以被表示成一种函数模型：（，，…，y）（，，…，x）。其中，输入与输出可以是任意长度的向量，同时可以将函数看作是黑盒，不需要了解其内部逻辑。

人工神经网络拥有自组织、自学习、自适应、强非线性函数逼近能力以及强容错能力。目前，包括图像识别、预测和模糊控制研究这些新兴领域，人工神经网络都有涉足。人工神经网络通过对已知信息的反复学习和训练，同时逐渐调整和更改神经元连接的权重，以此完成信息处理和模拟输入输出关系的目标。网络的每一层都包含多个神经元，用变权的有向弧来描述。

1.2 搭建模型

本作品设计的基于TensorFlow 的神经网络算法流程如图2 所示，主要分为3 个部分，即：定义模型、训练与保存模型、加载模型并预测，分别设置在2 个可执行的Python 文件中。

图2 神经网络算法设计流程Fig.2 Design process of neural network algorithm

定义模型的部分主要工作有：

（1）定义占位器用以规定输入数据的结构。

（2）定义图结构用以规定神经网络模型的结构，如连接方式、神经元个数、激活函数等，在本作品中含2 层隐藏层，各100 个神经元，采用函数为激活函数。

（3）定义变量，如权重、偏移率等指标用以检测与分析神经网络模型的合理性。

（4）定义损失函数、优化函数等用以约束并优化构建的神经网络模型。

训练、保存模型的部分主要工作有：

（1）实例化对象（），用以保存模型。

（2）构建并打开会话（）。

（3）模型内所有参数初始化＿＿（），如模型优化函数、损失函数等参数。本作品采用梯度下降法进行优化，通过计算可知，设置学习率为015 时较优。

（4）定义迭代次数并训练模型（，＿｛：＿，＿：＿｝），（，＿｛：＿，＿：＿｝），本作品设置迭代次数3000 次，最终的模型损失为204，可以收敛。

（5）保存模型（sess，＂./src/tmp/model.ckpt＂），会在指定目录下生成一系列“.ckpt”文件用以恢复模型。

在此基础上，研究进一步给出了第三方库调用说明如图3 所示。

图3 第三方库调用说明Fig.3 Third-party library call instructions

1.3 在腾讯云云函数的部署

在腾讯云平台上传部署后端代码，定义执行入口文件sl.handler.py 执行app.py 的内容＿＿（，，）。app.py 的内容包括执行服务器请求部分与加载模型并预测部分。

执行服务器请求部分的主要内容有：

（1）构建Flask 实例（___name___）。

（2）定义路径操作修饰器＠（），这里的请求方式为ANY，即接收任意请求方式。

（3）定义路径操作函数（）。

（4）将获取的待预测参数正则化并转换成list形式，这里只需提取其中的有效数字部分，即（（r＂＼d＋＼.？＼d∗＂，user＿selection）），并转换为整形（（，））。

（5）运行加载模型并预测部分的程序，得到预测结果。

（6）运用（）函数，将得到的结果JSON化作为返回值。

加载模型并预测部分的主要内容有：

（1）清除图的结构＿＿（）。

（2）定义占位器用以规定输入数据的格式。

（3）构建并打开会话（）。

（4）创建saver 实例（）并恢复模型（sess，＂./tmp/model.ckpt＂）。

（5）预测数据（，＿｛：｝）。

（6）将预测结果与所属类别匹配，构成字典格式。

（7）将该字典按照概率值降序排列（1，：＿＿（＇probability＇），True），并返回。

设置该云函数的触发方式为API 网关触发，采用API 网关触发的优势在于可以选择同步或异步调用，且可以通过定义不同的路径操作修饰器和函数用以实现多个功能，最大化利用一个函数解决多个功能。在小程序端仅需要通过（（））进行HTTPS 访问即可，流程如图4 所示，（（））方式的参数设置见表1。预测成功后的页面显示如图5 所示。

表1 wx.request（）参数说明Tab.1 wx.request（）parameters description

图4 菜谱推荐的前后端交互流程示意图Fig.4 Schematic diagram of the front-end and back-end interaction process of recipe recommendation

图5 预测成功后的页面显示Fig.5 The page after the successful prediction

2 基于百度AI 的菜品识别功能

2.1 百度AI

百度AI 作为国内最大的人工智能平台之一，提供了很多方便快捷可被调用的API 接口和具体应用，目前百度AI 的语音、图像、文字、客流量等识别方向都取得了相当显著的效果，在识别精度和速度上达到了较高的状态。

2.2 实现菜品识别并录入

通过调用百度AI 的智能图像分析功能、进而实现菜品识别，识别速度快、准确率较高。具体过程如下：

（1）调用微信提供的（（））接口，引导用户选择拍照或相册上传图片，返回的结果为用户上传图片的临时路径，即不会再次占用用户的内存。

（2）使用（（）（））获取上传图片的临时路径，并使用64 格式转码。

（3）使用在百度官网注册申请到的＿和＿，调用（（））接口以HTTPS协议形式，以GET 请求方式，请求百度AI 提供的api 接口，由此可获取到可被调用的唯一access＿token。

（4）调用（（））加载框，提示用户正在进行识别。

（5）再次调用（）接口，以POST 的请求方式，请求百度AI 提供的API 接口，在URL 中添加此前获取的＿，为待识别图片的base64 编码，调用成功后可获得菜品识别结果、卡路里值及置信度，并调用（（））接口关闭加载提示。

基于百度AI 的菜品识别及卡路里录入功能示意如图6 所示。研究中，在页面显示菜品识别的相关结果后，设置录入按钮，用户可根据真实的菜品摄入情况选择录入。调用云函数（（）），通过（）（）在数据库的对应集合中添加用户、菜品名称、数据来源、卡路里值、创建时间等信息，并在个人中心页面显示。菜品识别成功后的界面显示、录入后的历史记录可见图7。

图6 基于百度AI 的菜品识别及卡路里录入功能示意图Fig.6 Schematic diagram of dish recognition and calorie entry function based on Baidu AI

图7 菜品识别成功后的界面显示、录入后的历史记录Fig.7 The interface display after the dish recognized and the history record after entry

3 微信小程序

3.1 微信小程序概述

微信小程序是一种全新的连接用户与服务的方式，可以在微信内被便捷地获取和传播，具有出色的使用体验。故本文采用微信小程序作为前端，有较高的灵活性与兼容性。可以最大限度调用微信提供的开放接口，提高开发效率，缩短代码运行时间。

微信小程序基于当前的Web 技术，通过独立的运行环境感知平台，提供接近原生应用的用户体验。开发方法类似于WebAPP 的开发方法。微信小程序框架系统称为MINA 应用框架，是一个双线程模型，分为逻辑层（App Service）和展示层（View）两部分。小程序的显示层描述语言包括WXML 和WXSS，这是一个基于JavaScript 的逻辑层框架，提供了一个在显示层和逻辑层之间传输数据和事件的系统。框架如图8 所示。框架的核心是一个响应式数据链接系统，可以保持和显示数据同步。

图8 微信小程序框架系统概览Fig.8 Overview of WeChat miniprogram framework system

在小程序启动时，微信会在后台完成以下工作：下载小程序代码包、加载小程序代码包、初始化小程序首页，如图9 所示。同时，在小程序启动或一个新的页面被打开时，页面的初始数据（）和路径等相关信息会从逻辑层发送给视图层，用于视图层的初始渲染，详见图9。

图9 微信小程序启动流程图、初始通信流程图Fig.9 WeChat applet startup flowchart and initial communication flowchart

3.2 小程序·云开发

本设计采用了小程序·云开发中云数据库与云函数功能，小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务，其优势在于无需搭建服务器，免登录、免鉴权调用微信开放服务、不限开发语言与框架等，本设计采用JavaScript 作为小程序·云函数的主要开发语言。

云数据库中的每条记录都是一个JSON 格式的对象，一个数据库可以有多个集合，集合可以看作一个JSON 数组，数组中的每个对象都是一条记录，记录的格式是JSON。常见的MySQL 数据库为关系型数据库，但是不便于在小程序内获取和调用。关系型数据库和JSON 数据库的概念对应关系见表2。

表2 关系型数据库和JSON 数据库的概念对应关系Tab.2 The conceptual correspondence between relational databases and JSON databases

云函数、即在云端（服务器端）运行的函数，其写法与在本地定义的JavaScript 方法相同，代码运行在云端Node.js 中。小程序内提供了专用于云函数调用的API，可以在云函数中使用wx-server-sdk 提供的方法获取到每次调用的上下文（、等），无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态（）。

3.3 小程序·个人中心

本设计的个人中心作为丰富用户体验的一大重点模块，为满足用户的各种应用需求，设计了如下功能模块。

（1）“干饭实录”功能。该功能主要通过云开发·云数据库实现。首先获取已被设为全局变量的用户，再通过（）（）在云数据库的对应集合中获取对应用户所录入的菜品信息；通过（‘createdTime’，‘desc’）对菜品按录入时间倒序排列以便于用户查看最新的菜品录入信息。同时，也运用了（）生命周期函数以及（）函数以便用户实时获取最新录入的菜品信息，并能够实现下拉刷新。在“个人中心”界面通过调取获取今日日期，再通过（）（）（）获取今日录入的菜品个数，从而完成在个人中心“干饭实录”的前端页面反馈。

（2）计算功能。本作品的设计旨在帮助用户对自己的身体健康状况有实时的了解。计算时通过获取用户输入的身高、体重的值，在本文的研究中设置了（）、（）以 及（）分别进行、标准体重以及身体状况的计算。与此同时，本页面还为用户提供了标准对照表，以此让用户对所反映的自身的身体状况有了一个全面的了解。

（3）意见反馈功能。本作品注重用户体验，重视收集用户的使用意见，故将用户反馈分为两大板块。第一大板块设立在菜单搜索界面，用户可在此输入菜品名、对应食堂以及数量来反馈菜品缺失；第二大板块设立在个人中心界面，用户可在此反馈当使用本程序时所遇到的问题和建议。当用户输入信息未输入完整时，调用（（））弹出框对用户进行提示。用户输入完成后可点击底部的反馈按钮，通过（）（）在云数据库的对应集合中添加用户的问题种类和具体情况，后台开发人员将对集合中用户反馈的问题进行解决。

（4）菜品收藏功能。该功能主要运用云函数·云数据库来实现。云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的，开发者无需校验的正确性，直接使用该。对此拟给出剖析详述如下。

①用户在“菜品详情”界面中点击收藏图标后，将会调用云函数判断目前云数据库的对应集合中是否有对应的菜品收藏信息。

②若对应集合中没有相对应的收藏信息，将会使用云函数添加对应的菜品信息至云数据库中；若对应集合中有相对应的收藏信息，将会删除云数据库中相应的菜品信息。

③在调用云函数的过程中会使用（（））加载框，提示用户正在进行加载。

④在判断完毕后将会更改icon 图标为已收藏或未收藏，这一过程中将会调用（（））弹出框对用户进行提示。

个人中心界面、收藏界面、及指数计算界面如图10 所示。研究中，用户将通过云函数在“个人中心”界面的“收藏的菜单”页面中获取到自己收藏的菜品信息，同时（）生命周期函数以及（）函数帮助用户实时获取收藏信息的更新。

图10 个人中心界面、收藏界面、及BMI 指数计算界面Fig.10 Personal center interface，collection interface and BMI index calculation interface

3.4 小程序·菜单界面的卡路里录入及收藏功能

本作品在前期走访了校内所有食堂，整理出各个食堂所包含的餐厅、菜品名称，运用scroll-view 可滚动视图组件清晰地将食堂与菜品的所属关系展示给用户。通过后文的基于百度AI 的菜品识别功能得到这些菜品的卡路里值，并将名称、所属餐厅、卡路里值显示在菜单详情页面供用户参考。

将云数据库读取并调用的部分程序放在生命周期函数中，以此减少用户等待时间。菜单界面的卡路里录入及收藏功能示意如图11 所示。研究中，点击菜品名称可根据页面参数，跳转至对应的菜单详情页面，在该页面用户可以实现菜品收藏功能和卡路里录入功能，能够在个人中心查看，菜品收藏功能和卡路里录入功能均主要通过云函数实现，详细算法将会在后文个人中心与可视化进行阐述，在进行上述操作均有明显的（（））提示用户操作。为照顾到用户需求，在顶部放置搜索栏，可实现模糊搜索功能，原理是使用（）方法来构造正则对象，然后将用户输入与数据库该集合内的所有菜品名称做字符串匹配，匹配成功则显示在页面上。

图11 菜单界面的卡路里录入及收藏功能示意图Fig.11 Schematic diagram of calorie entry and collection functions in the menu interface

3.5 小程序·微信步数的获取

本作品的微信步数功能基于微信官方API 改造实现，获取流程如图12 所示。具体流程如下：

图12 今日步数显示功能流程图Fig.12 Flow chart of today′s steps count display function

（1）调用（（））接口以HTTPS 协议形式，以GET 请求方式，发送code，登录凭证校验接口，调用成功后微信接口服务会反馈、＿等信息。

（2）通过（（））请求用户开启微信步数权限，并通过（（））判断用户是否关注微信步数以便于获取信息。

（3）通过（）请求微信官方接口来获取用户近30 天的微信步数信息，微信接口服务反馈小程序端、、等信息。

（4）通过（（））调用云函数＿＿，将获取到的信息解密后以微信步数和时间戳的形式反馈给小程序端。

（5）在完成微信步数的基本流程后用生命周期函数（（））获取code 的自动更新步数信息，以此来保证微信步数信息的时效性，并服务于步数信息的可视化。

（6）微信步数的可视化是在js 中将今日步数参数定义在＿＿上，直接通过wxml 中的text 实现显示，并利用生命周期函数（）实现数据的实时更新。

3.6 小程序·卡路里获取与曲线显示

该功能通过云函数·云数据库·ec-canva 组件实现。其大致流程如图13 所示，具体步骤如下：

图13 卡路里曲线获取和显示流程图Fig.13 Flow chart of calorie curve acquisition and display

（1）用户登录后，自动调用云函数判断云数据库中记录的数据日期是否与用户登录日期一致，若不一致则在云数据库的相应集合中新增一条卡路里为0 的数据。

（2）在“菜品识别”页面设置录入数据图标与“详细菜品”页面中设置icon 符号。通过读取对应的菜品信息，使用（）将菜品信息及卡路里数据添加至云数据库中。

（3）将获取到的对应卡路里数据通过（）转化为整数型、从而调取云函数对卡路里数据进行相加，然后对数据库对应集合的数据进行更新。

（4）调用（（））弹出框对用户进行提示。

（5）将数据库中的数据反馈到“个人中心”界面前端显示。

（6）在“今日卡路里”页面中调用ec-canva 组件获取折线图的模板，再通过调用云函数获取云数据库相对应集合中的数据在折线图中显示，以便用户更直观地看到自己近一周内卡路里摄取情况。

4 结束语

本作品贴合时代潮流，以学校为试点，旨在建立一个能够监控自身良好饮食习惯的小程序，能够实现菜谱推荐与健康分析两大功能。例如通过用户选择自身当前的状态进行菜谱推荐、拍照识别菜品及卡路里、动态显示近一周卡路里摄入变化曲线连同记录在内的历史录入菜品、微信步数历史记录等功能。在开发方面，多使用云函数、云数据库等云资源，部署于线上，简化开发步骤，减少程序代码量；在菜谱推荐功能上，采用基于TensorFlow 搭建的神经网络，并上传部署至SCF 腾讯云函数，设置其为API网关触发，以减少小程序端的调用时间。