王小新 编译自 Insight Data Blog
量子位 出品 | 公众号 QbitAI
写个网页能有多麻烦？在大多数公司里，这项工作分为三步：
1. 产品经理完成用户调研任务后，列出一系列技术要求；
2. 设计师根据这些要求来设计低保真原型，逐渐修改得到高保真原型和UI设计图；
3. 工程师将这些设计图实现为代码，最终变成用户使用的产品。
这么多环节，任何地方出一点问题，都会拉长开发周期。因此，不少公司，比如Airbnb已经开始用机器学习来提高这个过程的效率。
△ Airbnb内部的AI工具，从图纸到代码一步到位
看起来很美好，但Airbnb还没公开该模型中端到端训练的细节，以及手工设计的图像特征对该模型的贡献度。这是该公司特有的闭源解决方案专利，可能不会进行公开。
好在，一个叫Ashwin Kumar的程序员创建了一个开源版本，让开发者/设计师的工作变得更简单。
以下内容翻译自他的博客：
理想上，这个模型可以根据网站设计的简单手绘原型，很快地生成一个可用的HTML网站：
△ SketchCode模型利用手绘线框图来生成HTML网站
事实上，上面例子就是利用训练好的模型在测试集上生成的一个实际网站，代码请访问：。
从图像标注中获取灵感目前要解决的问题属于一种更广泛的任务，叫做程序综合（program synthesis），即自动生成工作源代码。尽管很多程序综合研究通过自然语言规范或执行追踪法来生成代码，但在当前任务中，我会充分利用源图像，即给出的手绘线框图来展开工作。
在机器学习中有一个十分热门的研究领域，称为图像标注（image caption），目的是构建一种把图像和文本连接在一起的模型，特别是用于生成源图像内容的描述。
△ 图像标注模型生成源图像的文本描述
我从一篇pix2code论文和另一个应用这种方法的相关项目中获得灵感，决定把我的任务按照图像标注方式来实现，把绘制的网站线框图作为输入图像，并将其相应的HTML代码作为其输出内容。
注：上段提到的两个参考项目分别是
pix2code论文：
floydhub教程：?source=techstories.org
获取合适的数据集确定图像标注方法后，理想中使用的训练数据集会包含成千上万对手绘线框图和对应的HTML输出代码。但是，目前还没有我想要的相关数据集，我只好为这个任务来创建数据集。
最开始，我尝试了pix2code论文给出的开源数据集，该数据集由1750张综合生成网站的截图及其相应源代码组成。
△ pix2code数据集中的生成网站图片和源代码
这是一个很好的数据集，有几个有趣的地方：
该数据集中的每个生成网站都包含几个简单的辅助程序元素，如按钮、文本框和DIV对象。尽管这意味着这个模型受限于将这些少数元素作为它的输出内容，但是这些元素可通过选择生成网络来修改和扩展。这种方法应该很容易地推广到更大的元素词汇表。
每个样本的源代码都是由领域专用语言（DSL）的令牌组成，这是该论文作者为该任务所创建的。每个令牌对应于HTML和CSS的一个片段，且加入编译器把DSL转换为运行的HTML代码。
彩色网站图像变手绘图为了修改我的任务数据集，我要让网站图像看起来像手工绘制出的。我尝试使用Python中的OpenCV库和PIL库等工具对每张图像进行修改，包括灰度转换和轮廓检测。
最终，我决定直接修改原始网站的CSS样式表，通过执行以下操作：
1. 更改页面上元素的边框半径来平滑按钮和DIV对象的边缘；
2. 模仿绘制的草图来调整边框的粗细，并添加阴影；
3. 将原有字体更改为类似手写的字体；
最终实现的流程中还增加了一个步骤，通过添加倾斜、移动和旋转来实现图像增强，来模拟实际绘制草图中的变化。
使用图像标注模型架构现在，我已经处理好数据集，接下来是构建模型。
我利用了图像标注中使用的模型架构，该架构由三个主要部分组成：
1. 一种使用卷积神经网络（CNN）的计算机视觉模型，从源图像提取图像特征；
2. 一种包含门控单元GRU的语言模型，对源代码令牌序列进行编码；
3. 一个解码器模型，也属于GRU单元，把前两个步骤的输出作为输入，并预测序列中的下一个令牌。
△ 以令牌序列为输入来训练模型
为了训练模型，我将源代码拆分为令牌序列。模型的输入为单个部分序列及它的源图像，其标签是文本中的下一个令牌。该模型使用交叉熵函数作为损失函数，将模型的下个预测令牌与实际的下个令牌进行比较。
在模型从头开始生成代码的过程中，该推理方式稍有不同。图像仍然通过CNN网络进行处理，但文本处理开始时仅采用一个启动序列。在每个步骤中，模型对序列中输出的下个预测令牌将会添加到当前输入序列，并作为新的输入序列送到模型中；重复此操作直到模型的预测令牌为，或该过程达到每个文本中令牌数目的预定义值。
当模型生成一组预测令牌后，编译器就会将DSL令牌转换为HTML代码，这些HTML代码可以在任何浏览器中运行。
用BLEU分数评估模型我决定使用BLEU分数来评估模型。这是机器翻译任务中常用的一种度量标准，通过在给定相同输入的情况下，衡量机器生成的文本与人类可能产生内容的近似程度。
实际上，BLEU通过比较生成文本和参考文本的N元序列，以创建修改后的准确版本。它非常适用于这个项目，因为它会影响生成HTML代码中的实际元素，以及它们之间的相互关系。
最棒的是，我还可以通过检查生成的网站来比较当前的实际BLEU分数。
△ 观察BLEU分数
当BLEU分数为1.0时，则说明给定源图像后该模型能在正确位置设置合适的元素，而较低的BLEU分数这说明模型预测了错误元素或是把它们放在相对不合适的位置。我们最终模型在评估数据集上的BLEU分数为0.76。
福利：定制网页风格后来，我还想到，由于该模型只生成当前页面的框架，即文本的令牌，因此我可以在编译过程中添加一个定制的CSS层，并立刻得到不同风格的生成网站。
△ 一个手绘图生成多种风格的网页
把风格定制和模型生成两个过程分开，在使用模型时带来了很多好处：
1.如果想要将SketchCode模型应用到自己公司的产品中，前端工程师可以直接使用该模型，只需更改一个CSS文件来匹配该公司的网页设计风格；
2. 该模型内置的可扩展性，即通过单一源图像，模型可以迅速编译出多种不同的预定义风格，因此用户可以设想出多种可能的网站风格，并在浏览器中浏览这些生成网页。
总结和展望受到图像标注研究的启发，SketchCode模型能够在几秒钟内将手绘网站线框图转换为可用的HTML网站。
但是，该模型还存在一些问题，这也是我接下来可能的工作方向：
1. 由于这个模型只使用了16个元素进行训练，所以它不能预测这些数据以外的令牌。下一步方向可能是使用更多元素来生成更多的网站样本，包括网站图片，下拉菜单和窗体，可参考启动程序组件（）来获得思路；
2. 在实际网站构建中，存在很多变化。创建一个能更好反映这种变化的训练集，是提高生成效果的一种好方法，可以通过获取更多网站的HTML/CSS代码以及内容截图来提高；
3. 手绘图纸也存在很多CSS修改技巧无法捕捉到的变化。解决这个问题的一种好方法是使用生成对抗网络GAN来创建更逼真的绘制网站图像。
相关地址代码：
原文：
— 完 —
诚挚招聘
量子位正在招募编辑/记者，工作地点在北京中关村。期待有才气、有热情的同学加入我们！相关细节，请在量子位公众号(QbitAI)对话界面，回复“招聘”两个字。
量子位 QbitAI · 头条号签约作者
?'?' ? 追踪AI技术和产品新动态
一、网站题目>
美食网页介绍、甜品蛋糕、地方美食小吃文化、餐饮文化、等网站的设计与制作。
二、网站描述>
美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。
静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
制作工具：FireFox、TextWrangler
制作一个简易的代码编辑器，可以根据HTML代码，CSS代码以及JavaScript代码输出结果
初始画面
随着选取的类别增加所属区域也相应缩小
编辑运行
完整代码
<!doctype html>
<html>
<head>
<title>CodePlayer</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="jquery.min.js"></script> <!--本地调用jQuery 一般下载下来使用-->
<!--网址调用jQuery
<script type="text/javascript" src=""></script>-->
<style>
body {
margin:0;
padding:0;
}
#menuBar {
width:100%;
height:40px;
background-color:#EDEDED;
border-bottom:1px solid #BFBFBF;
font-family:"Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
overflow:hidden;
}
#logo {
padding-top:10px;
padding-left:10px;
font-size:1.2em;
font-weight:bold;
}
#buttonDiv {
position:relative;
top:-28px;
right:10px;
float:right;
}
#runButton {
font-size:1.1em;
}
#toggles {
padding:0;
width:296.8px;
height:32px;
margin:auto;
list-style:none; /*去掉无序列表的小圆点*/
border:1px solid #BFBFBF;
border-radius:5px;
position:relative;
top:-31px;
}
#toggles li {
float:left;
padding-top:6px;
border-right:1px solid #BFBFBF;
padding-bottom:6px;
padding-left:12px;
padding-right:12px;
}
#clear {
clear:both;
}
.codeContainer {
position:relative;
float:left;
height:100%;
width:50%;
}
.codeContainer textarea {
width:100%;
height:100%;
border:none;
border-right:1px solid #BFBFBF;
padding-top:23px;
padding-left:5px;
font-size:1.1em;
box-sizing:border-box;
}
.codeLabel {
position:absolute;
right:10px;
top:10px;
color:#2DBFFF;
font-family:font-family:"Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
}
#CSSContainer,#JavaScriptContainer {
display:none;
}
iframe {
height:100%;
width:98%;
position:relative;
left:10px;
border:none;
}
.selected {
background-color:yellow;
}
.first {
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.last {
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menuBar">
<div id="logo">
CodePlayer
</div>
<div id="buttonDiv"> <!--设定Run按钮-->
<button id="runButton">Run</button>
</div>
<ul id="toggles">
<li class="toggle selected first">HTML</li>
<li class="toggle">CSS</li>
<li class="toggle">JavaScript</li>
<li class="toggle selected last">Result</li>
</ul>
</div>
<div class="clear"></div>
<div class="codeContainer" id="HTMLContainer">
<div class="codeLabel">HTML</div>
<textarea id="htmlCode">Example Code</textarea>
</div>
<div class="codeContainer" id="CSSContainer">
<div class="codeLabel">CSS</div>
<textarea id="cssCode">Example Code</textarea>
</div>
<div class="codeContainer" id="JavaScriptContainer">
<div class="codeLabel">JavaScript</div>
<textarea id="jsCode">Example Code</textarea>
</div>
<div class="codeContainer" id="ResultContainer">
<div class="codeLabel">Result</div>
<iframe id="resultFrame"></iframe>
</div>
</div>
<script>
var windowHeight=$(window).height(); /*获取窗口的高度*/
var menuBarHeight=$("#menuBar").height(); /*获取menuBar的高度*/
var codeContainerHeight=windowHeight-menuBarHeight;
$(".codeContainer").height(codeContainerHeight+"px"); /*调整指定元素的高度*/
$(".toggle").click(function(){
$(this).toggleClass("selected"); /*点击当前目标的时候会激活toggleClass方法 运行"selected"*/
var activeDiv=$(this).html();
$("#"+activeDiv+"Container").toggle();
var showingDiv=$(".codeContainer").filter(function(){ /*调用过滤 filter=过滤器*/
return($(this).css("display")!="none"); /*目标的css属性display不等于none就返回，意思就是目标有显示就返回*/
}).length; /*.length返回的个数*/
var width=100/showingDiv;
$(".codeContainer").css("width",width+"%"); /*随着显示目标的增加 各自宽度自动减小*/
});
$("#runButton").click(function(){
$("iframe").contents().find("html").html("<style>"+$("#cssCode").val()+"</style>"+$("#htmlCode").val());
document.getElementById("resultFrame").contentWindow.eval($("#jsCode").val());
});
</script>
</body>
</html>