回看 2010 年，软件几乎吞噬了所有行业，带来近几年软件行业的繁荣；而到了 2019 年，软件开发行业本身却又在被 AI 所吞噬。你看：DBA 领域出现了 Question-to-SQL，针对某个领域只要问问题就可以生成 SQL 语句；基于机器学习的源码分析工具 TabNine 可以辅助代码生成；设计师行业也出了 P5 Banner 智能设计师“鹿班”，测试领域的智能化结合也精彩纷呈。那前端领域呢？

从设计稿自动生成代码到从设计稿智能生成 H5 应用

我们可以在阿里云云开发平台，使用 imgcook 智能生成一个垃圾识别应用，直接部署上线啦。先看效果：

下面跟着我们开始体验阿里云云开发平台联合 Imgcook 的魅力吧~~

Quick Start

• 本示例演示了基于 ImgCook 智能生成页面的能力
• 本示例演示了基于 OSS 浏览器端文件直传的能力
• 本示例演示了基于 Python 语言开发调用阿里云视觉智能服务的能力

创建应用

• 登录阿里云 Serverless 云开发平台，进入应用列表，点击「创建新应用」，选择「实验室」，勾选「 AIoT 」，在「解决方案」中，选择「智能生成页面智能识别图片方案」，点击下一步，按照提示完成应用的创建
• 应用创建完成后，等待代码仓库完成初始化，代码仓库初始化完成后，可以看到「开发部署」入口，点击打开 CloudIDE

下载测试用的 Sketch 设计稿

在打开 CloudIDE 的同时，下载本示例的 垃圾分类设计稿.sketch 文件到您本地。
**

打开 ImgCook 插件

在 CloudIDE 左侧文件列表空白处点鼠标右键，在右键菜单中选择「 Open With imgcook studio 」

上传 Sketch 设计稿智能生成代码

在打开的 ImgCook 插件中，点击「导入」。

之后在弹出的界面，点击「选择一个文件」，把刚刚下载的 垃圾分类设计稿.sketch 上传上去。

Sketch 设计稿上传完成后，选中刚上传的文件，点击「导出」，开始根据设计稿智能识别并生成页面代码。

设计稿导出成功后，代码也就被智能生成出来了，在 ImgCook 的工作界面会展示出来由代码生成的可视化 UI 效果。

添加页面交互逻辑，绑定后端 API

接下来我们要做的是完成用户交互操作。首先，点击生成 UI 界面上的 [+] 图片，在右侧「高级属性」面板，将「 id 」属性值设置为 image 。

接下来分别点击「名称」「类型」右侧的 […] ，设置 id 为 name 和 category 。

点击「选择图片」，在右边的事件中添加 onClick 事件。

点击「 onClick 」后，在弹出的输入框，输入以下代码作为处理函数

function onClick(e) { function select(handler) {   var input = document.createElement('input');   input.type = 'file';   input.onchange = function() {     var files = Array.from(input.files);     handler(null, files[0]);   };   input.click(); } select((err, file) => {   const filename = (new Date().getTime()) + '_' + file.name   const freader = new FileReader();   freader.readAsDataURL(file);   freader.onload = () => {     const img = document.getElementById('image');     img.src = freader.result;   };   fetch('/policy', {       method: 'post'     })     .then((res) => res.json())     .then((policy) => {       console.log(policy);       const formData = new FormData();       formData.append('Filename', filename);       formData.append(         'key',         policy.dir + '/' + filename       );       formData.append('OSSAccessKeyId', policy.accessid);       formData.append('policy', policy.policy);       formData.append('Signature', policy.signature);       formData.append('success_action_status', '200');       formData.append('file', file);       return fetch(policy.host, {         method: 'post',         body: formData       }).then(() => policy);     })     .then((policy) => {       const imageUrl = [policy.host, policy.dir, filename].join('/');       return fetch(`/algo`, {         method: 'post',         headers: {           'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'         },         body: `imageUrl=${imageUrl}`       });     })     .then((res) => res.json())     .then(({       Data     }) => {       if (!Data) {         alert('无法识别该图片');         return;       }       const {         Category,         Rubbish       } = Data.Elements[0];       document.getElementById('name').innerText = Rubbish || '未识别';       document.getElementById('category').innerText = Category || '未识别';       console.log(data);     }); }); } 

保存项目，导出代码

配置完成后，保存项目。接下来我们要把配置好的页面导出成最终的代码。首先要把当前项目保存下来，点击「保存」，「所属团队」选择自己在云开发平台所在的团队，「所属项目」选择当前应用的名称，输入一个模块名称，然后点「创建」。

接下来选择要导出怎样的代码格式，比如，是小程序，还是 H5，这里我们选择「 H5 开发规范（动态）」，选择后，点击右边的「 X 」关闭选择面板。

现在我们就要准备导出代码了，先在 CloudIDE 左侧文件列表创建一个文件夹「 imgcook 」，然后在 ImgCook 操作面板，点击「导出」，选择我们刚刚创建好的「 imgcook 」文件加，点「确定」导出代码。

代码导出成功后，打开 CloudIDE 左侧文件列表「 imgcook 」目录，可以看到通过 ImgCook 智能生成的代码。我们点击打开「 index.html 」文件，修改一下它的标题，输入一个合适的内容，比如“垃圾分类扫码识别”。

添加环境变量，部署验证效果

至此，我们通过 ImgCook 智能生成的代码都准备好了，现在离验证整个项目还差最后一步，我们为此应用输入测试用的图片上传和图片智能识别的环境变量，复制以下代码。

AKID=LTAI4G1j3U8ue1yT3g6Tg1TG AKSK=WB8Ev6zMHoKQnUSLp8V4zP7xeAgbWC REGION=cn-shanghai OSSBUCKET=wb-case-showroom OSSDIR=photo 

在云开发平台应用列表，找到我们创建的应用，在应用卡片上点击「应用配置」，点击「批量添加环境变量」，将上面复制的代码粘贴进来，保存即可。

现在我们可以部署查看效果了，回到 CloudIDE，点击左侧「 WB 」插件，点击「部署」，等待部署完成。

点击平台分配的临时免费测试域名，就可以查看线上效果了。

在自己的业务中正式使用该方案的事项

开通服务

需要去这里开通 阿里云视觉智能 viapi_imagerecog_public_cn/图像识别服务

打开此链接查看更多阿里云视觉智能开放能力
**

1. utils/oss_upload.py 中的 AKID 、AKSK 、OSSBUCKET 、OSSDIR 需要替换为自己的 OSS 账号相关变量，推荐创建子账号进行授权，本示例中采用环境变量来配置这些敏感信息而不直接 hardcode 在代码中，参见下面「测试用环境变量」
2. algo.py 中的 AKID 、AKSK 需要替换为自己的变量，该 AKSK 需要能够调用阿里云视觉智能图像识别服务，建议新建子账号，对子账号进行授权，授权策略如下：使用 RAM Policy 控制访问权限
3. 由于图片是前端直传 OSS，OSS 需要打开跨域设置，设置过程参考这位同学的分享：阿里云 OSS 设置跨域访问

使用安全的子账号授权策略

不要用主账号 AK/SK 信息在自己的应用里直接使用，可以创建一个子账号，为它授予指定的 OSS Bucket 读写权限和阿里云视觉智能服务的访问权限。可以将以下授权策略直接复制过去即可。最后使用这个子账号的 AK/SK 在应用中使用。

{     "Version": "1",     "Statement": [         {             "Effect": "Allow",             "Action": "viapi-imageenhan:*",             "Resource": "acs:viapi-imageenhan:*:*:*"         },         {             "Effect": "Allow",             "Action": "viapi-imagerecog:*",             "Resource": "acs:viapi-imagerecog:*:*:*"         },         {             "Effect": "Allow",             "Action": "viapi-imageseg:*",             "Resource": "acs:viapi-imageseg:*:*:*"         },         {             "Effect": "Allow",             "Action": "viapi-imageaudit:*",             "Resource": "acs:viapi-imageaudit:*:*:*"         },         {             "Effect": "Allow",             "Action": "viapi-ocr:*",             "Resource": "acs:viapi-ocr:*:*:*"         },         {             "Effect": "Allow",             "Action": "viapi-facebody:*",             "Resource": "acs:viapi-facebody:*:*:*"         },         {             "Effect": "Allow",             "Action": "viapi-objectdet:*",             "Resource": "acs:viapi-objectdet:*:*:*"         },         {             "Effect": "Allow",             "Action": "viapi-goodstech:*",             "Resource": "acs:viapi-goodstech:*:*:*"         },         {             "Effect": "Allow",             "Action": "oss:*",             "Resource": [                 "acs:oss:*:*:wb-case-showroom",                 "acs:oss:*:*:wb-case-showroom/*"             ]         }     ] } 

环境变量替换成自己的真实内容

AKID=你自己的可控的 AccessKeyID 信息 AKSK=你自己的可控的 AccessKeySecret 信息 REGION=你的 OSS 所在的 Region OSSBUCKET=你的 OSS Bucket OSSDIR=你的 OSS Bucket 里用来上传文件的目录 

脱离切图仔，3 步从设计稿直接智能生成 H5 应用，2000 个顶级域名免费领!

今年云栖大会期间，阿里云云开发平台与 imgcook 推出“神笔码良来了”的活动，体验从设计稿自动生成 H5 应用领免费域名。https://workbench.aliyun.com/activities/imgcook

大佬有話說 (0)