熊喵表情 - 开启AI表情制作新时代

熊喵表情，一款可以个性化定制您的专属表情头像的应用。不管是静态表情，还是动态表情，熊喵表情都能轻松制作，无需复杂的手动抠图，只需上传一张人脸照片，个性表情就能一键生成。还有独创的文生表情功能，好用到令人发指，关键还免费，简直是暴殄天物。下面我就来介绍一下如何从零开始制作这一款APP。

技术栈及选型

原生 vs 跨平台：原生需要为每种平台都开发一个应用（如android和ios以及各种小程序），而跨平台多端共用一套代码，对于独立开发者和中小微企业，选择跨平台是明智之举。

国外跨平台 vs 国产跨平台：国外主要用RN 和 Flutter，这两个框架Flutter最近几年渐入佳境，有很多重量级的APP都是使用RN开发的，例如美团等等。但是国外平台有个硬伤，就是不支持国内生态，尤其是微信生态。因此选国产跨平台也是没得选。

国内跨平台框架: 简单对比便能分出高下，为了全端小程序都能上线，可选项就只有Taro vs uniapp，这是网上搜到的一个对比图，大家可以简单看一下。

框架	技术栈	案例	微信小程序	支付宝小程序	百度小程序	头条小程序	H5	App
Taro	React	丰富	⭕	⭕	⭕	⭕	⭕	⭕
娜娜奇	React	少	⭕	⭕️	⭕️	⭕️	⭕️	❌
wepy	Vue	丰富	⭕	❌	❌	❌	❌	❌
mpvue	Vue	丰富	⭕	❌	❌	❌	⭕️	❌
uni-app	Vue	丰富	⭕	⭕️	⭕️	⭕	⭕️	⭕
megalo	Vue	少	⭕	⭕️	⭕️	❌	❌	❌
OKAM	Vue	少	⭕	⭕	⭕	⭕	❌	❌
Mpx	Vue	少	⭕	❌	❌	❌	❌	❌

至于Taro和uniapp怎么选，我觉得因人而异，我希望能够快速的出原型，因此我选择了周边更丰富的uniapp，例如UI框架，甚至用户登录认证模块，uniapp都有现成的模块和插件来支持，所以用uniapp开发会很快。当然我也注意到网上有一些关于uniad的评价，我表示我会自己评估，如果确实有问题，再换到Taro也不难，我在功能设计上已经将几乎所有核心功能做到了服务端，客户端真的就只是个界面展示。

Taro vs uniapp

	Taro	uniapp
开发语言	RN	Vue
开发工具	VSCODE 插件	HBuilder
性能	极致	优秀
社区生态	Github star 3k 轮子少	Github star 1k 轮子多

后端选型

这个应用需要使用很多OpenCV的算法，要制作成后端API使用，用python flask来做最合适不过。

架构设计

因为我做了10多个应用，我发现每个应用都需要有个搜索功能，于是我干脆自己搭建了一个ElasticSearch的集群，3台机器就能搞定这些应用的全文搜索，并且还挺稳定的，几个月了这个集群还是很健康。

opencv+dlib，dlib就是一个人脸检测工具，opencv能做图片处理，合在一起就能用人脸制作表情，这里有两个点需要注意

1. dlib 需要开启AVX加速，不然检测时长会超过2s。

2. 需要将opencv+dlib打包到层中，云函数再使用这个层，云函数才能随心所欲的使用这个人脸检测的功能。

重难点实现

1. 动态表情换头功能的实现

    核心代码就这么几行，就是从腾讯云对象存储先下载下来用户上传的头像，然后用dlib检测头像中的人脸；同时下载模板GIF图片，对GIF图片里面的每一帧，都用人脸替换到空白的位置。最后用Imageio合并成一个GIF文件，并上传到对象存储，整个过程来回小于1s。

2. 熊猫表情制作

核心代码也就这么多，主要不同的是用到了opencv的seamlessClone功能

3. 文生表情功能

之前逛贴吧看到一张熊猫打麻将的表情，我用这个文生表情的功能，做了一个同款，除了麻将做的不是很真实，整体效果还是很不错的。这个用了文生图的大模型sdxl emoji

部署及运维

目前仅上架了微信小程序，服务器端就是个云函数，给了3G的内存。大模型目前用的别人免费的API。