如何用ImgCook加workbench平台完成智能生成垃圾分类？

首先在 Serverless 云开发平台上创建应用。创建应用的时候选择“实验室”，然后选 AIoT，然后下拉选择智能生成页面智能识别图片方案，补充好应用名称等点击完成。 进入开发前先介绍下帮助文档中提及的“下载测试用的 Sketch 设计稿”。这个设计稿 需要打开 Cloud IDE 再下载“垃圾分类设计稿 Sketch 文档”到本地。 这个 设计稿是一个静态页面，进入这个页面后点击选择图片的按钮，它会弹出一个选择文件的一 个对话框，然后选择对应的图片，它就会把这个图片对应的垃圾的分类类型显示出来。 创建好应用后就可以进入开发，在左侧目录文件区域点击右键，出现弹窗选择最下面的 “Open With imgcook studio”，就打开了 imgcook 的页面了。 打开 ImgCook 页面后，点击上侧的“导入“键，选择上文介绍的设计稿，上传后选择 导出。导出后，设计稿代码就被自动生成出来了，在 ImgCook 的工作界面会展示出来由 代码生成的可视化 UI 效果。 代码生成后通过左侧展开对应设计稿的段数，点击某个节点，右侧就会展示出与节点对 应的详细信息。比如点击图片节点，右侧会显示图片的属性和一些相关的配置。我们也可以 通过这个部分对设计稿某些节点进行修改。 添加页面交互逻辑，绑定后端 API。 接下来我们要做的是完成用户交互操作。首先，点击生成 UI 界面上的+，在右侧高级 属性面板，将「id」属性值设置为 image，然后点击+下面名称和类型旁边的…补充名称、 类型等内容。

所有设置完成后，点击“选择图片”并在右侧事件中添加 onClick 事件。

点击 onClick 后，在弹出的输入框，输入代码作为处理函数。所需的代码可以通过帮 助文档《智能生成页面智能识别图案方案》查看并复制使用。 粘贴进去函数之后，保存。那么代码生成的准备工作就基本完成了。 接下来保存项目，并选择对应的开发规范。ImgCook 是可以根据不同的需求生成不同 的规范的代码。示例展示的是选择了纯 h5 代码生成。

选择代码之后可以看到对应的几个文件，index.html，index.js，style.css 和 style. responsive.css。 最后是选择导出到指定的目录。选择导出，会跳出一个可供选择的目录框，如果不做选 择会默认保存到根目录下。保存后，需要为此应用输入测试所需的图片上传和图片智能识别的环境变量。输入的代 码可以通过帮助文档获取。配置的方法是点开应用配置，然后将在帮助文档中复制的代码粘 贴进去，选择确定完成。

最后就是可以部署并检验效果了。 回到 Cloud IDE 页面，点击左侧的 WB 插件，然后点击部署。完成部署后，可以通过分配的域名点击查看并测试。