Bear Meow Emoticon is an application that can personalize your own emoticon avatar. Whether it is a static expression or a dynamic expression, bear and meow expressions can be easily created. There is no need for complicated manual cutout. You only need to upload a face photo and a personalized expression can be generated with one click. There is also an original Wen Sheng emoticon function, which is ridiculously easy to use, and the most important thing is that it is free, which is a waste of money. Now I will introduce how to make this APP from scratch.
Technology stack and selection
Native vs cross-platform: Native requires developing an application for each platform (such as android, ios and various small programs), while cross-platform and multiple terminals share a set of code. For independent developers and small, medium and micro enterprises, it is wise to choose cross-platform Act of.
Foreign cross-platform vs domestic cross-platform: RN and Flutter are mainly used in foreign countries. These two frameworks, Flutter, have become better and better in recent years. There are many heavyweight APPs developed using RN, such as Meituan and so on. However, foreign platforms have a flaw, that is, they do not support the domestic ecosystem, especially the WeChat ecosystem. Therefore, choosing domestic cross-platform is no choice.
Domestic cross-platform frameworks: A simple comparison can tell the difference. In order to be able to launch all small programs online, the only option is Taro vs uniapp. This is a comparison chart found on the Internet. You can take a brief look at it.
| frame | technology stack | Case | WeChat applet | Alipay applet | Baidu Mini Program | Toutiao Mini Program | H5 | App |
|---|---|---|---|---|---|---|---|---|
| Mass | React | Rich | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ |
| Nanaki | React | few | ⭕ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ❌ |
| veps | View | Rich | ⭕ | ❌ | ❌ | ❌ | ❌ | ❌ |
| mpue | View | Rich | ⭕ | ❌ | ❌ | ❌ | ⭕️ | ❌ |
| uni-app | View | Rich | ⭕ | ⭕️ | ⭕️ | ⭕ | ⭕️ | ⭕ |
| megalo | View | few | ⭕ | ⭕️ | ⭕️ | ❌ | ❌ | ❌ |
| OKAY | View | few | ⭕ | ⭕ | ⭕ | ⭕ | ❌ | ❌ |
| Mpx | View | few | ⭕ | ❌ | ❌ | ❌ | ❌ | ❌ |
As for how to choose between Taro and uniapp, I think it varies from person to person. I hope to be able to prototype quickly, so I chose uniapp with richer peripherals, such as UI framework and even user login authentication module. uniapp has ready-made modules and plug-ins. to support, so development with uniapp will be fast. Of course, I also noticed some reviews about uniad on the Internet. I said that I would evaluate it myself. If there is indeed a problem, it will not be difficult to switch to Taro. In terms of functional design, I have implemented almost all core functions on the server side. Customers The terminal is really just an interface display.
Taro vs uniapp
| Mass | sleep app | |
| Development language | RN | View |
| development tools | VSCODE plug-in | HBuilder |
| performance | extreme | excellent |
| community ecology | Github star 3k fewer wheels | Github star 1k many wheels |
Backend selection
This application requires the use of many OpenCV algorithms. To make it a back-end API, it is most suitable to use python flask.
Architecture design
Because I have made more than 10 applications, I found that each application needs a search function, so I simply built an ElasticSearch cluster myself. Three machines can handle the full-text search of these applications, and it is quite stable. The cluster is still healthy after several months.
opencv+dlib, dlib is a face detection tool, opencv can do image processing, and together they can use faces to make expressions. There are two points to note here.
-
dlib needs to enable AVX acceleration, otherwise the detection time will exceed 2s.
-
Opencv+dlib needs to be packaged into a layer, and then the cloud function uses this layer, so that the cloud function can use the face detection function as desired.
Realize important and difficult points
-
Implementation of dynamic expression head changing function
The core code is just a few lines, which is to first download the avatar uploaded by the user from Tencent Cloud Object Storage, and then use dlib to detect the face in the avatar; at the same time, download the template GIF image, and replace each frame in the GIF image with a face to a blank location. Finally, Imageio is used to merge it into a GIF file and upload it to object storage. The whole process takes less than 1 second.
2. Panda expression production
There is only so much core code. The main difference is that the seamlessClone function of opencv is used.
3. Vincent expression function
I went to Tieba and saw an expression of a panda playing mahjong. I used the function of this Vincent expression to make a similar version. Except that the mahjong is not very realistic, the overall effect is still very good. This is a large model sdxl emoji using Vincent pictures
Deployment and operation and maintenance
Currently, only the WeChat applet is launched, and the server side is a cloud function with 3G of memory. Large models currently use other people's free APIs.
