阿里云-云开发平台计算篇——加强应用本身的计算能力

落日映苍穹つ 2022-12-31 08:25 218阅读 0赞

###  ###

*  加强应用本身的计算能力
 *   *  人脸动漫化
     *   *  1. 云开发平台
         *  2. 小程序开发
         *  3. 运行测试
     *  人脸美颜
     *   *  1. 云开发平台
         *  2. 小程序开发
         *  3. 运行测试

# 加强应用本身的计算能力 #

> 云开发平台官网：https://workbench.aliyun.com/

> 往期文章：  
> [阿里云-云开发平台普及篇——创建应用][-]  
> [阿里云-云开发平台入门篇——静态网站的全生命周期实战][- 1]  
> [阿里云-云开发平台存储篇——给应用接上后端存储能力][- 2]

## 人脸动漫化 ##

### 1. 云开发平台 ###

*  创建应用  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 1]
 *  应用配置：由于我们要使用 OSS 和 阿里云视觉智能开放平台，这里要配置一下 OSS 和 ak、sk
    
     *  首先[创建][Link 1]一个新用户 ，选择`编程访问`  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 2]
     *  创建完成后记下 `AccessKey ID` 和 `AccessKey Secret`，后面要用到
     *  然后赋予刚才创建的用户 OSS 和 VI 权限  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 3]
     *  添加 `AliyunOSSFullAccess` 和 `AliyunVIAPIFullAccess` 权限  
        ![在这里插入图片描述][20201229153426595.png]
     *  [创建][Link 2] OSS 桶  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 4]
     *  区域要和应用的区域相同，读写权限选择 `公共读写`，创建完后把 BucketName 记一下，后面会用到  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 5]
     *  然后回到云开发平台应用界面，找到刚才创建应用，点击 `应用配置`  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 6]
     *  分别填入刚才创建用户的 `AccessKey ID` 和 `AccessKey Secret`，以及桶名称，点击确定，配置完成  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 7]
 *  开发部署
    
     *  点击 `开发部署`，跳转到线上IDE  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 8]
     *  如果你跟我一样区域在上海，那么直接点击部署就可以了，如果区域不是在上海，将我框中的地方修改成你自己创建的区域即可  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 9]
     *  部署完成后访问临时域名，如果出现如下界面，说明部署成功  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 10]
     *  如果出现下列界面说明fc权限不足，需要向管理人员申请权限  
        ![在这里插入图片描述][20201229154852985.png]

### 2. 小程序开发 ###

*  在应用界面，我们可以看到两个代码仓库，一个是后端代码（也就是IDE里面的），另一个是前端代码，这里我们需要通过 git 将前端代码克隆本地进行调试，点击前端仓库  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 11]
 *  然后就可以看到对应的代码仓库地址，我们直接通过 git 命令克隆到本地即可，注意：这里要先配置一下密钥，不会的话[百度][Link 3]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 12]
 *  将代码克隆到本地后，使用支付宝小程序开发工具打开，如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 13]
 *  我们手动将 devlop 后面的网址改成上面应用部署成功后生成的 url，重新编译一下即可  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 14]

### 3. 运行测试 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 15][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 16][]

## 人脸美颜 ##

### 1. 云开发平台 ###

*  应用创建和配置同上
 *  要实现人脸美颜，通过阅读[官方文档][Link 4]，我们需要在线上IDE将代码做一定的修改，在 `GenerateHumanAnimeStyleServiceImpl.java` 中修改如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 17]
 *  `GenerateHumanAnimeStyleService.java`修改如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 18]
 *  `GenerateHumanAnimeStyleController.java`修改如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 19]

### 2. 小程序开发 ###

*  同上

### 3. 运行测试 ###

[-]: https://ruochen.blog.csdn.net/article/details/111657921
[- 1]: https://ruochen.blog.csdn.net/article/details/111656931
[- 2]: https://ruochen.blog.csdn.net/article/details/111705562
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70]: /images/20221120/7d0b1f23c2264cb1b62eb577d26edc11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201229095434613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[Link 1]: https://ram.console.aliyun.com/users
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201229153137724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201229153328878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[20201229153426595.png]: https://img-blog.csdnimg.cn/20201229153426595.png
[Link 2]: https://oss.console.aliyun.com/bucket
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201229153523144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201229153600377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201229153708576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201229153751470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201229153854421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201229154155976.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201229184741556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[20201229154852985.png]: https://img-blog.csdnimg.cn/20201229154852985.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201229154524794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[Link 3]: https://www.baidu.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20201229154557160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20201229154746171.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/2020122915492165.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20201229154954272.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20201229155006998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[Link 4]: https://vision.aliyun.com/experience/detail?spm=a211p3.14020179.J_2705787210.17.66cd4b584zd0WU&tagName=facebody&children=FaceBeauty
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20201229163925522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20201229164004966.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/2020122916405450.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70