V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
GeekHub
guasimrules
V2EX  ›  程序员

如何快速从设计稿智能生成 H5 应用?神笔已备好,等码良!

  •  1
     
  •   guasimrules · 8 天前 · 301 次点击

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


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

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

    垃圾分类效果.gif

    下面跟着我们开始体验阿里云云开发平台联合 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

    1 条回复    2020-09-23 09:49:30 +08:00
    guasimrules
        1
    guasimrules   2 天前
    最后一天,领取免费域名!
    https://workbench.aliyun.com/activities/imgcook
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3906 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 07:50 · PVG 15:50 · LAX 00:50 · JFK 03:50
    ♥ Do have faith in what you're doing.