前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >程序员要失业了… 输入图片,输出代码,一键生成。 | MixLab交叉学科

程序员要失业了… 输入图片,输出代码,一键生成。 | MixLab交叉学科

作者头像
mixlab
发布2020-11-25 10:54:58
3830
发布2020-11-25 10:54:58
举报
文章被收录于专栏:MixLab科技+设计实验室

就在不久前

MixLab的小伙伴看到了一篇关于加速设计流程的文章并转发给了我,其中用到了图像识别、OCR、代码生成等技术,今天碰巧看到一篇算法实现的论文,正好可以对其中的一部分算法进行原理拆解

文章:如何用工具加速你的设计流程

输入图片,输出代码

一键生成

最终实现:训练神经网络使其能够直接基于设计后的图片,来生成一个包含 HTML+CSS 的网站。

概述

1 将设计图像提供给经过训练的神经网络

2 神经网络将图像转换为 HTML 这种标记语言

3 渲染输出

核心逻辑

让我们回顾一下我们的目标。我们想要构建一个神经网络,该网络将生成与屏幕截图相对应的HTML / CSS代码并展示。

训练神经网络时,我们会给它 “喂” 几个具有匹配HTML的屏幕截图。

通过逐一预测所有匹配的 HTML 标签来进行学习,当它预测下一个标签时,它将输入屏幕截图以及所有正确的标签,直到预测出对应的最可能的标签。

创建一个可以逐词预测的模型是当今最常见的方法,还有其他方法,但在这里就不一一展开。

值得注意的是,对于每个预测,模型都需要获得相同的屏幕截图。因此,如果必须预测20 个单词,它将获得 20 次相同的截图照片输入。

在这里,你可能不需要太关注神经网络如何工作,只需要关注神经网络的输入和输出就可以。

假设我们训练的模型需要预测句子 “I can code”。当它收到 “ I” 时,它将会预测下一个单次 “can” ,下次它将收到 “can” 时则会预测 “code” 。同样的道理,在预测 HTML 标签时也是如此。

当您想将训练后的模型用于实际使用时,这与训练模型时类似。每次使用相同的屏幕截图来生成 HTML 标签文本。

但从一开始并不会提供完全正确的 HTML 标签,而是接收到到目前为止所生成的标签,不断的预测下一个标记标签。整个预测过程以 “start tag” 开始,并在预测到 “end tag” 时或达到最大长度限制时停止。

样例:hello world版

若我们也想试验下这个项目,构建一个简单的hello world版本就可以试玩。

将显示“ Hello World!” 的简易网站截图,并输入神经网络,运行模型就可以使其生成对应的HTML标签。

论文地址:https://arxiv.org/abs/1705.07962

-END-

uizard 试用链接地址

请戳 https://uizard.io/i/FhHaP

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-11-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 无界社区mixlab 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档