<table><tbody>
除了干货，其它什么也没有
职场
数据
新媒体
设计
极客
新媒体数据/托管/开发：021 37218818
我们似乎已经有了足够多的解决方案，来搞定新媒体领域的 HTML5 排版问题：建站服务平台、Markdown 一键渲染、第三方排版工具……甚至细微到KERNING 生成器！
但对于不擅长设计也不会敲前端代码的运营人来说，这些选项似乎仍不够友好。有没有可能，一个只会在纸上简单涂涂画画的人，快速完成一个网页布局或者新媒体图文排版？
让我们用人工智能深度学习解决这个问题！
sketch-code
项目地址：
https://github.com/ashnkumar/sketch-code
在一张草稿纸上简单绘制一下你需要的布局，并扫描为图片格式。接下去只要运行这个 Python 脚本你就能得到对应的前端样式——听起来是不是很酷？其实很多运营新人之所以不擅长前端，往往就是因为脑海中构想的布局无法用 CSS3 代码表达出来。
有了这个基于深度学习的前端自动化工具 sketch-code，问题就迎刃而解。
深度学习科学家 Kumar 之所以开发这个项目，是因为此前他注意到一个行业困境。对于大公司来说，Digital 的格式页面设计牵涉庞大而复杂的团队，他们协同办公最终将页面交付给用户，但人力成本着实惊人；对于小公司来说，团队往往又缺乏人手，从原型设计到交互开发常常脱节，时间成本则是令他们头疼的问题。
传统意义上的新媒体页面开发过程
无论是一篇品牌级微信图文，还是一个新网页上线，运营人都知晓这样一个漫长的流程：
产品经理启动用户需求调研并罗列出页面需求清单。
设计师着手进行低保真视觉模型设计，逐步打磨至高保真原型并切片。
工程师通过代码实现产品经理的诉求和设计师的模型，并完成适配和优化，最终交付到用户。
所以新媒体页面的工作周期很快会成为团队的瓶颈。无论是新媒体在移动端高频的图文推送、新媒体在 PC 端的网页设计、新媒体在 APP 端的交互效果……大公司例如 Airbnb 等在内，已经开始基于深度学习，让人工智能解决排版问题。
Airbnb 开发了由线稿到前端代码的 AI
但是，产品经理的“手绘线稿”本质上是“闭源”的。如 Airbnb 的 AI，我们无从知晓它的深度学习训练样本情况，数量？端到端？手绘依赖程度？所以 Kumar 决定开发出这套开源的人工智能工具。
能完成这样一个项目并不意外，毕竟机器学习中的图像识别技术是相对成熟的，只是更广泛情况下开发者是为了最终生成文本，描述图片的内容。这两天国内的 SenseNets（深网视界）被外媒曝光发生大规模人脸数据泄露，超过 250 万人的数据可被获取，680 万条记录包括身份、脸部特征、捕捉弟地点等均流出。这就是图像识别的一个具体应用。
而在本项目中，则是通过训练系统识别线框结构，进而以 HTML5 布局的方式反馈给用户。
训练样本
本项目使用了另一个开源项目 pix2code 中的数据库，其中包含 1750 个综合抓取的网站及其相关源代码的截图。
为了将它们转化为各色各样的手绘稿，Kumar 基于这些样本将按钮、文本框和<code>
随后，他通过 OpenCV 和 PIL 等进行辅助，对每个图像进行手绘转制，例如灰度调整和轮廓嗅探等。当然 Kumar 也对这套人工智能系统补充了如圆角半径、描边、阴影、字体的篡改，使得它更接近手绘结果。终于，
sketch-code 的训练样本准备好了。样本投喂
到了关键的“投喂”阶段，这个模型中有三个部分需要协同运作：
一个计算机视觉模型，它使用卷积神经网络（CNN）从源图像中提取图像特征。
采用时间递归神经网络中的 GRU（Gated Recurrent Unit）组成的语言模型，它对源代码令牌序列进行编码。
解码器模型，它将前两个步骤的输出作为输入，并预测序列中的下一个 token。
系统评测
经过了一系列的训练，Kumar 采用 BLEU 评分来评估模型的训练成果。这是 AI 翻译任务中常用的度量标准，它旨在测量机器生成的文本与给定相同输入的人类生成的文本的相似度。
Kumar 手动设置了满分（1分）的效果标准，因而对于生成结果差强人意的 HTML5 新媒体排版，BLEU 的打分就会变低。最终，经过了样本的训练后，BLEU 对当前系统给出了 0.76 分的成绩。
样式优化
开发过程当然不会戛然而止，Kumar 为 sketch-code 增加了基本框架之外的 CSS自定义渲染规则。
这就意味着对于用户来说，你可以在该系统中加入自己的企业视觉系统的一些 CSS 特色，这样即便相同的手绘稿，在不同渲染规则下也会产生不一样的 HTML5 页面结果。
相信如果你也开始使用这个项目，你的手绘也会成为一个学习样本进一步优化 sketch-code 的。
未来的新媒体工作
所以在未来，我们可以设想这样的场景：产品经理在会议室主持，经过讨论大家在白板上涂鸦画出了某期微信图文消息的结构，或某个官方网站的基本框架。然后产品经理给白板拍了张照片，类似 sketch-code 就可以开始执行 Python 的命令。大约在 5 秒后，整个页面就生成了。接下去，文案和设计在对应位置添加好文字和图片即可。
是不是有点小期待呢？
其实 JZ 在新书《硬核运营》开篇就探讨了新媒体行业发展的很多未来概念：弯曲屏下的自适应新媒体、VR 与 AR 下的新媒体生态空间等等……新媒体绝不是营销号炮制 10W+ 软文的空间，它们终究只会如蝼蚁般被时代碾碎，更顶端的品牌和个人，将通过技术的翅膀带给读者和观众更多叹为观止的新媒体内容。
项目说明：Kumar
译稿校对：Nyx
其他你会感兴趣的内容
回复 H 5阅读更多移动营销技术帖
回复 矢量知晓免费设计素材资源库
回复 排版查看更多黑科技排版案例
回复 二维码入门艺术化二维码设计
回复 python了解机器学习热门语言
H5、平面、视频等数字营销服务请致电
TEL：（021）3721 8818
合作客户：APEC 峰会 | 中国航天科技集团 | 香奈儿 | 肯德基（湖南） | 华为 | 三星中国 | 中国国际航空 | 湖北省电视台 | 河南卫视 |浙江省人民广播电台 | 三生制药 | 交通银行 | 建设银行 | 真格基金 | 南方周末 | 上海闵行教育学院 | 牛津大学出版社 | 新东方集团 | 伟巴斯特 | 雪佛兰汽车 | 观致汽车 | 雷诺汽车 | TNS 新华信 | 高力国际｜第一太平戴维斯｜德国莱茵｜盖茨基金会｜追星集团
这个二维码为什么可以识别？
閱讀更多 JZ多媒體解決方案 的文章
