整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
人们的不断探索下，「使用人工智能自动生成网页」的方法已经变得越来越接近实用化了。本文介绍的这种名为 SketchCode 的卷积神经网络能够把网站图形用户界面的设计草图直接转译成代码行，为前端开发者们分担部分设计流程。目前，该模型在训练后的 BLEU 得分已达 0.76。
你可以在 GitHub 上找到这个项目的代码：https://github.com/ashnkumar/sketch-code
为用户创造直观、富有吸引力的网站是各家公司的重要目标，而且这是个快速进行原型、设计、用户测试循环的过程。像 Facebook 这样的大公司有着让整个团队专注于设计流程的人力，改动可能需要几周的时间，并涉及到多种利益相关者；而小型企业就没有这样的资源，因此其用户界面可能受到一些影响。
我在 Insight 当中的目标是使用现代深度学习算法大大简化设计工作流程，并使得任何规模的公司都能快速地创造并测试网页。
现有的设计工作流程
现有工作流程涉及多个利益相关者
一个典型的设计工作流程如下所示：
产品经理进行用户研究，从而制定技术参数表
设计人员将接受这些要求并尝试创建低保真原型，最终创建高保真原型
工程师将这些设计转化为代码并最终将产品交付给用户
开发周期的时间长度很快就会变成瓶颈，像 Airbnb 这样的公司已经开始使用机器学习来提高这个过程的效率了。（参见：https://airbnb.design/sketching-interfaces/）
Airbnb 内部 AI 工具演示：从草图到代码
虽然这种工具很有希望成为机器辅助设计的例子，但是尚不清楚这种模型在端到端的情况下能完全训练到什么程度，也不清楚它在多大程度上依赖于手工制作的图像特征。这肯定是无法知道的，因为它目前还是 Airbnb 专有的非开源方案。我想创造一个「从绘图到代码」技术的开源版本，可供更多开发者和设计者使用。
理想情况下，我的模型可以采用简单的网站设计手绘原型，并立即从该图像生成一个可用的 HTML 网站：
SketchCode 模型需要绘制好的网站线框图并能生成 HTML 代码
实际上，上面的例子是一个从我模型测试集图像生成的实际网站！你可以在我的 Github 页面中查看它：https://github.com/ashnkumar/sketch-code
从图像标注中获取灵感
我正在解决的问题属于程序综合（https://en.wikipedia.org/wiki/Program_synthesis）这个广义任务范畴，即工作源代码的自动生成。尽管很多程序综合能处理从自然语言要求或执行轨迹所生成的代码，但在我这个案例中，我可以从一个源图像（手绘线框图）开始，自动获得想要的代码。
机器学习领域中，有一个名为图像字幕生成的领域（https://cs.stanford.edu/people/karpathy/deepimagesent/），该领域有着充分的研究，旨在学习将图像和文本相连的模型，特别是生成关于源图片内容的描述。
图像标注模型生成源图片的描述
我从最近一篇名为 pix2code 的论文和 Emil Wallner 使用该方法的一个相关项目获得了灵感（参见：前端慌不慌？用深度学习自动生成 HTML 代码），并决定将我的任务重构成图像字幕生成问题的一部分，即将线框图作为输入图像，将对应的 HTML 代码作为输出文本。
获取正确的数据集
考虑到图像标注的方法，我心中理想的训练数据集是成千上万对手绘线框图和它们 HTML 代码的等价物。不出所料，我无法找到这种数据集，因此我不得不为该任务创建自己的数据。
我从 pix2code 论文中提到的一个开源数据集（https://github.com/tonybeltramelli/pix2code）入手，它由 1750 张人工生成的网页截图和其对应源代码构成。
pix2code 中生成的网站图像及其源代码数据集
这个数据集对我而言是个很好的开始，其中有一些有趣的地方：
数据集中每个生成的网站都包含几个简单的 Bootstrap 元素例如按钮、文本框和 DIV。虽然这意味着我的模型将会因把这几个元素作为「词汇」（模型可选择用于生成网站的元素）而受限制，这种方法应该很容易推广到更大的元素词汇表中。
每个示例的源代码包含领域专用语言（DSL）的标记，这些符号是由论文作者创建的。每个标记对应于 HTML 和 CSS 的片段，且有一个编译器将 DSL 转化为工作使用的 HTML 代码。
让图片更像手绘的
将网站的多彩主题切换成手写主题。
为了调整数据集以适应我的任务，我得把网站的图片弄得像是手绘的。对图片的手绘化都得益于 OpenCV 和 PIL library 的灰度转换和轮廓检测功能。
最终，我决定直接通过一系列操作来直接修改原网站的 CSS 样式表：
通过改变页面元素的边框半径实现按钮和 div 的圆润化
调整边框的粗细以模仿手绘素描，并添加阴影
将字体改为类手写字体
我的最终版本又增加了一个步骤，通过加入倾斜，偏移和旋转来进行数据增强，以模仿实际绘制的素描的不确定性。
使用图像标注模型架构
现在我已经准备好我的数据了，我可以把它输入模型进行训练了！
我用的这个用于图像标注的模型包括三个主要部分：
一个卷积神经网路（CNN）视觉模型用于提取源图片特征
一种由编码源代码标记序列的门控循环单元（GRU）组成的语言模型
一个解码器模型（也是一个 GRU），它以前两个步的输出作为输入，预测序列中的下一个标记
使用标记序列作为输入来训练模型
为了训练这个模型，我把源代码分成标记序列。其中一个序列及其源图像是模型的单个输入，其标签是文档中的下一个标记。该模型使用交叉熵成本（cross-entropy cost）作为其损失函数，将模型预测的下一个标记与实际的标记进行比较。
在模型从头开始生成代码的推理阶段，该过程稍有不同。该图像仍然通过 CNN 网络进行处理，但文本处理仅提供一个开始序列。在每一步中，模型对序列中下一个标记的预测将返回到当前输入序列，同时作为新的输入序列输入到模型中。重复此操作直到模型预测出 <END> 标记或进程达到每个文档的标记数的预定义上限。
一旦从模型中生成了一组预测标记，编译器就会将 DSL 标记转换为 HTML，这些 HTML 可以在任何浏览器中展示出来。
用 BLEU 得分评估模型
我决定用 BLEU 评分（https://machinelearningmastery.com/calculate-bleu-score-for-text-python/）来评估模型。这是机器翻译任务中经常会用到的评估标准，它试图在给定相同输入的情况下，评估机器生成的文本与人类可能写的文本的近似程度。
实质上，BLEU 通过比较生成文本和参考文本的 n-元 序列，生成精修改后的文本。它非常适合这个项目，因为它会影响生成的 HTML 中的实际元素，以及它们之间的相互关系。
然后这是最棒的——我完全可以通过检查生成的网站来理解 BLEU 得分！
BLEU 得分可视化
一个完美的 1.0 的 BLEU 分数将在正确的位置生成源图像的正确元素，而较低的得分可以预测错误的元素和/或将它们放在相对于彼此错误的位置。最终我的模型能够在测试集上得到 0.76 的 BLEU 分数。
福利 - 定制样式
我觉察到的一个额外福利是，由于模型只生成页面的骨架（文档的标记），我可以在编译过程中添加一个自定义的 CSS 层，并且可以即时看到网站的不同风格。
一次转换 => 同时生成多种样式
将样式与模型生成过程分离，给使用模型带来了很多好处：
想要将 SketchCode 模型应用到自己公司产品中的前端工程师可以按原样使用该模型，只需更改一个 CSS 文件以符合其公司的样式要求
可扩展性已内置 - 使用一张源图像，模型输出可立即编译为 5、10 或 50 种不同的预定义样式，因此用户可以看到他们网站的多个版本，并在浏览器中浏览这些网站
总结与展望
通过利用图像标注的研究成果，SketchCode 能够在几秒钟内将手绘网站线框图转换为可用的 HTML 网站。
该模型有些局限性，大概包括以下几点：
由于这个模型是用一个只有 16 个元素的词汇进行训练的，它不能预测训练数据之外的标记。下一步可能是使用更多元素（如图像，下拉菜单和表单）生成其他样例网站——Bootstrap components 是个练手的好网站：https://getbootstrap.com/docs/4.0/components/buttons/
实际生产环境中，网站有很多变化。创建一个更能反映这种变化的训练数据集的好方法是去爬取实际的网站，捕获他们的 HTML / CSS 代码以及网站内容的截图
手绘素描也有很多变化，CSS 修改技巧没有被模型完全学会。在手绘素描上生成更多变化的一种好方法是使用生成对抗网络来创建逼真的绘制网站图像
我很期待看到项目的进一步发展！
如果要我说这些年一直在持续使用的数码产品有哪些，那电纸书绝对能算一个。相比其他数码类产品容易失去新鲜感而闲置，电纸书因为内容本身的千变万化，就不存在这个问题，当然前提是你得喜欢阅读：）
我一般会利用早餐和睡眠前的时间来读会书，出差或露营的时候也会携带外出，甚至去咖啡馆小坐的时候也会带着，电纸书轻便的特性就能完美适配这些场合。
要说到电纸书的选择，如今我的第一推荐便是汉王，作为2008年进入电纸书领域的经典国货品牌，汉王的产品一直以技术力和高性价比令人印象深刻，本篇要评测的汉王Clear已经是我入手第二款汉王电纸书了，7英寸极致便携的小巧体积，还带有30级的冷暖调光，在任何时间地点都能快速进入沉浸式阅读，对于阅读爱好者来说，妥妥就是一款神器。
包装一如既往都给人很素雅的感觉，干净的白纸底色加上一角的logo，简单的线条勾勒出型号首字母，设计简约又不简单。如果买来是当做礼物送人的话，不用额外包装就很得体。
内部支撑稳妥，开盒后就会看到电纸书的主体
内部配件足够简单，与电纸书的调性就很契合，阅读本身就是一个享受纯粹和简单的过程，使用起来不需要多花里胡哨，把时间真正用在阅读和广学多闻上，而不是浪费在使用机器的学习成本上。
来看看机身的设计：
汉王Clear的屏占比高达72.7%，可以看到一侧是加宽的手握部位，另外三侧的边框宽度还是很窄的，一般书籍边缘也会有留白的部分，这样阅读起来也没有违和感。
主控按键的设计非常有特点，采用了少见的三段式立体布局，上下两个长按键是圆润的弧形突起，手感舒适，可以用它们来调节音量和进行阅读时的翻页，中间稍短的平按键则是返回键，返回键下沉的设计可以很大程度上避免误按，这样读书的节奏就不容易被打乱了。同时三个按键都可以进行长按功能的自定义，可以设置截图，全刷，返回主页，下拉菜单功能，适配自己的使用习惯。
电纸书顶部从左到右分别是电源键，麦克风，type-c接口，以及指示灯。电源键是下凹设计的，同样可以有效防止误触。
底部则配置了扬声器，搭配AI听书功能就很实用。
单独讲一讲握持手感是因为这一点真的很重要！对于电纸书来说，可能在家的时候会偶尔坐在桌前，放在支架上使用，但绝大多数的时间和使用场合都是直接握在手里的，所以长时间握持的手感和舒适度就尤为重要了。
首先从大小上来看，汉王Clear7.0英寸的屏幕比大屏手机（iPhone 14pm）阅读起来更舒适，相比汉王自家的读写两用的N10mini来说，尺寸上又要小一号，更适合仅需要阅读功能的便携用户。
从重量上看，实际称重仅有176g，比我现在用的手机轻了差不多一半的重量，第一次拿到手里的时候我还禁不住感叹：好轻啊~
与传统32开的书本相比，无论是尺寸上还是重量上拿在手里都会要轻松不少，电纸书确实是更适合阅读的利器。
同时汉王Clear独特的波浪纹书脊设计就很是精妙，背面亲肤磨砂的质感，搭配模拟海浪自然弯曲的波浪纹设计，不仅视觉上很有质感，从人体工学上来说也更符合握持牢固和防滑的需求。
我感觉灵感可能是取自于我们手握书本时的动作~就还挺形象的~
Clear最薄处厚度仅有3.9mm，手握书脊处略宽，但厚度却恰到好处，相比传统图书拿在手里时手感上要轻便舒适多了。
同时对称设计也非常人性化，无论是用哪个方向握持，重力感应功能会让屏幕内容自动旋转，响应速度也挺快的，所以不管你的惯用手是哪一个，喜欢从什么方向拿，阅读体验都是很优秀的。
拥有了舒适的握感，我们再来看看汉王Clear的另一个核心要点：观感。
墨水屏独有的不伤眼的特性这里就不再赘述了，相信也是大家选择电纸书的主要原因之一。从近距离的图片中可以看到，雾面处理的表面没有传统屏幕的反光感和隔着玻璃的那种距离感，字体仿佛跃然纸上的感觉，这是因为Clear使用了Carta 1200墨水屏，表面采用了最新的微晶蚀刻技术，类纸显示效果就让视觉观感上非常接近纸张。
300ppi的清晰度让文字和图像的细节变得非常清晰，细看边缘也么有模糊的感觉，更不用提什么颗粒感了，可以说是达到了肉眼识别的极限，细看屏幕甚至比书本上印刷的字体更加细腻。
在亮度比较高的户外场合，墨水屏一样能看得清，这点普通屏幕就没法做到了。
就算是阳光直射在屏幕上，也一样不会影响阅读体验。
字体清晰的同时，图片显示效果也相当不错，因为搭载了汉王自研的16阶灰阶算法，能够细致的模拟出256级灰阶的显示效果。最终呈现就是同样一张黑白照片，层次过度更柔和，不会出现明显的断层，视觉体验自然就更加细腻了。
看一下实拍图片，下面这张黑白照片中，云层的灰色过度很自然，地板上砖块的不同灰色层次也是细腻可见，看着就很舒服。
这样在看文献资料中的图片或者漫画的时候就很有优势，文字清晰，图片细腻，完全不会有糊在一起的感觉。
我这台Clear是4g运存+64G闪存的高配版，看起漫画来也不用担心响应迟钝，翻页速度还是很快的。不过如果你买电纸书的初衷只是用来看漫画的话，我会更推荐入手汉王N10或者N10mini，毕竟屏幕尺寸更大，看漫画的视觉体验就会不太一样。
另外，这次入手Clear的另一个主要原因是这款机型拥有强大的背光功能。系统预设了熄灯，白天，夜间三种模式。
亮度调节还贴心的分为了冷暖双色温，冷暖光还可以同时调节，这就很厉害了，比如在下面的夜间场景中，单用暖黄感觉太黄，单用冷光又觉得有点突兀。
这时候就可以通过自定义模式调节，找到在当下环境中自己最喜欢的背光亮度和色温，毕竟看着舒适才是最重要的，30级的调光也足够满足挑剔的眼睛了~
为了更进一步的达到最佳阅读体验，我们还可以在系统中对于字体的大小，间距，对比度等等进行调节。
小字体一次能展示更多内容，因为屏幕ppi够高，所以完全不用担心看不清的情况，阅读起来更快，效率也更高。大字体则边缘清晰，看着很浑厚，如果是买给家里老人使用的，就算是老花眼也能轻松阅读了。下图是大小字体时间的对比，就非常直观了：
字体切换也是我常用的功能，推荐各位也可以尝试看看，汉王Clear内置了15种中文字体，12种英文字体可供选择，而且是完全免费的哦。
看不同内容的书籍时可以使用不同风格的字体，不仅能给眼睛一点新鲜感，感觉看书的心情也得到了调整。比如下图左是方正新楷体，右侧则是系统黑体，感受上一个更轻盈些，一个则更坚实，阅读起来的感觉就颇为不同。
如果你实在阅读了太久，想要休息一下，也可以用用看Clear内置的高品质听书模块，多种AI人声可供选择，音量、语速也均可调节。
我使用下来觉得这个功能已经非常成熟了，AI朗读的语音语调包括断句、顿点等都非常拟真，听起来还是挺舒服的。
阅读内容的获取也是很多人所关心的问题，有了好的阅读载体自然也要有好的内容来支撑。
汉王Clear内置了1200+的各类读物，这部分的预装书库是免费赠送的，内容上从热门畅销到中外名著，再到名人传记，科普百科，历史文化等等应有尽有，即便是不联网直接阅读，这些内容也足够我们读上很久了。如果是买来送给老人或者孩子的，直接拿到手就能开始阅读了，就非常方便。
Clear还非常贴心的附上了书库的书目明细，每本书还有简单的一句话简介，毕竟1200+的书库数量庞大，这样查找起来就会方便很多。
当然在联网之后，我们又打开了新的大门，汉王Clear本身就内置了京东，当当，微信，汉王四大在线书城，通过安装第三方APP还可以支持更多的书城，包括起点，晋江都是可以使用的，涵盖了绝大多数人的阅读需求。
如果你有更深入的使用需求，比如想要用Clear看看新闻，查查邮件等等，更多的实用APP都可以在应用商店里面找到，开放系统给Clear带来了更多的可能性，更多的使用体验就待我们自己来挖掘了~
传输内容是很多人在使用电纸书时会使用到的功能，比如同事发了一份PDF资料给你，我们就可以传输到汉王Clear，用更舒适的电纸书来查看。也可以将自己电脑上的书本，漫画传送到汉王Clear上来阅读。一共支持五种文件传输方式，包括:wifi、蓝牙、百度网盘、微信传输、数据线，我们可以挑选自己方便的模式。
微信传输是最简单的一种模式了，应该也是最常用的。设置时只需要扫码绑定汉王 Clear就可以了，后面要推送文件的时候只需在微信中选择“在设备上打开”，并选择汉王P7即可。
之后就能在Clear上看到微信传输过来的文件了，点击下载后，文件就会被载入Clear，我们就能打开阅读或查看了，整个传输过程还是很流畅的。如果是登录电脑版微信的话，我们还可以直接把电脑上的资源通过微信发送到Clear，不管是哪种方式用起来都是很简单的。
同时，汉王Clear支持的文件格式非常丰富，包括基础的图片格式JPG、BMP、PNG、GIF，常见文档格式TXT、DOC、PDF和PPT都可以直接打开查看，阅读文件诸如EPUB、MOBI、CHM、HEB同样都支持，甚至还包括了DOCX、PPTX、XLS、XLSX、HTXT、HTML、FB2、AZW3、ZIP等，基本可以说是一应俱全了。
相信看到这里，各位对汉王Clear应该已经有一个比较全方位的认知了，作为一款便携电纸书，精美的外观设计，超轻自重和小体积是其优势，丰富的本地书库和开放的系统让它可以连接广袤的知识天地。7英寸的屏幕大小阅读体验刚刚好，30级冷暖调光也可以应对各种光线环境，随时进行碎片化阅读。
最后，汉王Clear的续航能力也很给力，得益于墨水屏本身的低功耗，再加上2400mAh的大电池容量，使用几天后依旧能电力充沛，完全没有电量焦虑。如果你喜欢读书，或者想要体验阅读的乐趣，那就快点放下手机，远离社交软体的干扰，也没有各种讨人厌的通知，用Clear进行一场沉浸式阅读吧~~
方建筑史对于网页设计的进化有重大参考意义。作为一种艺术形式，两者都遵循以下事实：
- 它们是人们前往的地方。
- 它们都承担着这件务实的工作。
- 科技的演进在限制着工程技术。
- 还有，它们至今绝对仍属于艺术范畴。
在这些限制条件下，两者的演化路径惊人相似，都建立在过去的基础上，以近似的方式产生影响。如果想知道网页设计将去向何方，可以看看建筑领域发展到了什么地步。
简单、有限的结构
巨石阵，公元前3000-2000年；W3.org，1992年
除了稍微调整了尺寸和位置，它只是把东西摆在相应的地方。
秩序与均衡，略带修饰
巴特农神庙，公元前437年；Yahoo.com，1996年
古典建筑时代精炼了对称与层级，采用了泾渭分明的区域划分，承担不同的用途。所用媒介（石头、像素）的外观也效仿先前的材质：石质的三竖线装饰象征着木质横梁，就像用3D按钮表现物理按键。
更厚重的形式与更圆润的边缘
玛丽亚拉赫修道院，公元1093年；Apple.com，2000年
柔化边缘的同时，罗马式建筑时期也加厚了隔墙——菜单和按钮也一样——创造更庞大、厚重、易点击的形式。
华丽、令人着迷
兰斯大教堂，公元1211年；Maroon5.com，2005年
CSS和FLash就是网页设计中的彩色玻璃。基本元素到位，我们就开始选用看似不可能的材料。哥特式建筑将石头变为反重力的壮举，令人屏息。虽然如今难以记得，那些早年的Flash和CSS网站，仅凭像素就使我们惊异不已。
没错，我将早期的Maroon 5网站与兰斯大教堂进行了对比。
干净、精确、合乎逻辑
维琴察圆顶别墅，公元1567年；Rdio.com，2012年
这就是我们如今的阶段，近年来的“扁平式设计”趋势，与文艺复兴时期建筑惊人相似。文艺复兴建筑呼吁古典逻辑的回归。简单的几何学形式取代了华丽的复杂度。设计变得更干净。人们开始发表新准则的论述，一切都在变化。
接下来，我开始走进未来…
扭曲一切准则
罗马圣卡罗教堂，公元1638年；未定义，2017年
合乎逻辑、保持精确的乐趣只持续了这么久。最终我们开始打破规则。在建筑设计中，这意味着真正打破部分古典元素，将他们扭曲成某种复杂的形式。与文艺复兴时期的理性主义相比，巴洛克式设计更富于情感和戏剧性。
我们在网页设计上会怎么做？这很难说。只要再等等，它几年内就会显现。
Harkening back to the past
聆听过去
先贤祠（巴黎），公元1790年；未定义，2022年
一切周而复始。一旦获得足够的进展，我们会开始赞美最初的经典，全面复古。只要一定时间。新古典主义网页设计就在遥远的前方——虽然旧时代的Yahoo网站在我们看来很逊，并不庄严。但是6、7年后呢？它可能又很酷了。
我们大概知道了。它会类似于新罗马主义或是新哥特式的形式。总之是某些新形式。艺术会持续以复活重生的形式延续自身。最终呢？新的科技和新世界观会到来，我们如今是无法想象的。
然后一切开始变得神奇超然。
可乐橙，微信公众号：可乐橙（colachangreen）。人人都是产品经理专栏作家，UI/UX设计师，关注互联网，关注科技。现居杭州，与小伙伴们正在创业途中。或许不是一名优秀的设计师，至少是个快乐的设计师。
转载请保留上述作者信息并附带本文链接
作者信息：Mike Sall
Product Science at @Medium
*请认真填写需求信息，我们会在24小时内与您取得联系。
