全部产品

智能生成页面智能识别图片方案

更新时间:2020-09-16 14:30:48

Quick Start

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

创建应用

  • 登录阿里云Serverless云开发平台,进入应用列表,点击「创建新应用」,选择「实验室」,勾选「AIoT」,在「解决方案」中,选择「智能生成页面智能识别图片方案」,点击下一步,按照提示完成应用的创建

  • 应用创建完成后,等待代码仓库完成初始化,代码仓库初始化完成后,可以看到「开发部署」入口,点击打开 CloudIDE

下载测试用的 Sketch 设计稿

打开 ImgCook 插件

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

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

  • 在打开的 ImgCook 插件中,点击「导入」导入

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

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

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

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

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

  • 接下来分别点击「名称」「类型」右侧的【…】,设置 id 为 name 和 categorycategory

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

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

    1. function onClick(e) {
    2. function select(handler) {
    3. var input = document.createElement('input');
    4. input.type = 'file';
    5. input.onchange = function() {
    6. var files = Array.from(input.files);
    7. handler(null, files[0]);
    8. };
    9. input.click();
    10. }
    11. select((err, file) => {
    12. const filename = (new Date().getTime()) + '_' + file.name
    13. const freader = new FileReader();
    14. freader.readAsDataURL(file);
    15. freader.onload = () => {
    16. const img = document.getElementById('image');
    17. img.src = freader.result;
    18. };
    19. fetch('/policy', {
    20. method: 'post'
    21. })
    22. .then((res) => res.json())
    23. .then((policy) => {
    24. console.log(policy);
    25. const formData = new FormData();
    26. formData.append('Filename', filename);
    27. formData.append(
    28. 'key',
    29. policy.dir + '/' + filename
    30. );
    31. formData.append('OSSAccessKeyId', policy.accessid);
    32. formData.append('policy', policy.policy);
    33. formData.append('Signature', policy.signature);
    34. formData.append('success_action_status', '200');
    35. formData.append('file', file);
    36. return fetch(policy.host, {
    37. method: 'post',
    38. body: formData
    39. }).then(() => policy);
    40. })
    41. .then((policy) => {
    42. const imageUrl = [policy.host, policy.dir, filename].join('/');
    43. return fetch(`/algo`, {
    44. method: 'post',
    45. headers: {
    46. 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
    47. },
    48. body: `imageUrl=${imageUrl}`
    49. });
    50. })
    51. .then((res) => res.json())
    52. .then(({
    53. Data
    54. }) => {
    55. if (!Data) {
    56. alert('无法识别该图片');
    57. return;
    58. }
    59. const {
    60. Category,
    61. Rubbish
    62. } = Data.Elements[0];
    63. document.getElementById('name').innerText = Rubbish || '未识别';
    64. document.getElementById('category').innerText = Category || '未识别';
    65. console.log(data);
    66. });
    67. });
    68. }

保存项目,导出代码

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

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

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

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

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

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

    1. AKID=LTAI4G1j3U8ue1yT3g6Tg1TG
    2. AKSK=WB8Ev6zMHoKQnUSLp8V4zP7xeAgbWC
    3. REGION=cn-shanghai
    4. OSSBUCKET=wb-case-showroom
    5. OSSDIR=photo
  • 在云开发平台应用列表,找到我们创建的应用,在应用卡片上点击「应用配置」,点击「批量添加环境变量」,将上面复制的代码粘贴进来,保存即可

    环境变量

  • 现在我们可以部署查看效果了,回到 CloudIDE,点击左侧「WB」插件,点击「部署」,等待部署完成,点击平台分配的临时免费测试域名,在打开的浏览器地址栏后面加上 /imgcook/index.html 就可以查看线上效果了

    部署

    查看效果

如何在自己的真实业务中使用该方案?

开通服务

  1. 开通 阿里云视觉智能 viapi_imagerecog_public_cn/图像识别服务 https://common-buy.aliyun.com/?commodityCode=viapi_imagerecog_public_cn#/open

打开此链接查看:https://vision.aliyun.com/ 更多阿里云视觉智能开放能力

  1. utils/oss_upload.py 中的 AKID、AKSK、OSSBUCKET、OSSDIR 需要替换为自己的 OSS 账号相关变量,推荐创建子账号进行授权,本示例中采用环境变量来配置这些敏感信息而不直接 hardcode 在代码中,参见下面「测试用环境变量」

  2. algo.py 中的 AKID、AKSK 需要替换为自己的变量,该 AKSK 需要能够调用阿里云视觉智能图像识别服务,建议新建子账号,对子账号进行授权,授权策略如下:https://help.aliyun.com/document_detail/145025.html

  3. 由于图片是前端直传 OSS,OSS 需要打开跨域设置,设置过程参考这位同学的分享:https://blog.csdn.net/qq_41570658/article/details/106492447

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

  • 不要用主账号 AK/SK 信息在自己的应用里直接使用,可以创建一个子账号,为它授予指定的 OSS Bucket 读写权限和阿里云视觉智能服务的访问权限。可以将以下授权策略直接复制过去即可。最后使用这个子账号的 AK/SK 在应用中使用。
  1. {
  2. "Version": "1",
  3. "Statement": [
  4. {
  5. "Effect": "Allow",
  6. "Action": "viapi-imageenhan:*",
  7. "Resource": "acs:viapi-imageenhan:*:*:*"
  8. },
  9. {
  10. "Effect": "Allow",
  11. "Action": "viapi-imagerecog:*",
  12. "Resource": "acs:viapi-imagerecog:*:*:*"
  13. },
  14. {
  15. "Effect": "Allow",
  16. "Action": "viapi-imageseg:*",
  17. "Resource": "acs:viapi-imageseg:*:*:*"
  18. },
  19. {
  20. "Effect": "Allow",
  21. "Action": "viapi-imageaudit:*",
  22. "Resource": "acs:viapi-imageaudit:*:*:*"
  23. },
  24. {
  25. "Effect": "Allow",
  26. "Action": "viapi-ocr:*",
  27. "Resource": "acs:viapi-ocr:*:*:*"
  28. },
  29. {
  30. "Effect": "Allow",
  31. "Action": "viapi-facebody:*",
  32. "Resource": "acs:viapi-facebody:*:*:*"
  33. },
  34. {
  35. "Effect": "Allow",
  36. "Action": "viapi-objectdet:*",
  37. "Resource": "acs:viapi-objectdet:*:*:*"
  38. },
  39. {
  40. "Effect": "Allow",
  41. "Action": "viapi-goodstech:*",
  42. "Resource": "acs:viapi-goodstech:*:*:*"
  43. },
  44. {
  45. "Effect": "Allow",
  46. "Action": "oss:*",
  47. "Resource": [
  48. "acs:oss:*:*:wb-case-showroom",
  49. "acs:oss:*:*:wb-case-showroom/*"
  50. ]
  51. }
  52. ]
  53. }

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

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