Original shadow 无界社区mixlab 2017-11-22 01:27 Posted on

本文继续谈《人工智能设计师》，往期可点击查阅：

人工智能设计师v0.0.2

DIY一个人工智能设计师_v0.0.1

「 国内首个 」设计+人工智能深度案例分析报告

DIY一个人工智能设计师v1.0之风格迁移能力

人工智能「 服装设计师 」上

人工智能「 服装设计师 」中

实现一个人工智能设计师的方案有2种，从设计元素出发，给各种元素设定变量范围,通过自动排版来完成；另一种是通过生成对抗网络GANs，直接画出来。

生成对抗网络GANs怎么画出来？比如：

通过人的侧脸生成正脸

生成二次元萌妹子头像

GANs生成的有一层绘画的含义，因为是一个一个像素绘制的。这种生成方式，留待以后的文章更新。

回到我亲自动手diy的人工智能设计师产品，从第一个demo，到现在五个月了，断断续续思考，经历了不少推翻重来；

从0.0.1版本：

搜索引擎用biying/google，采用前端css方案，编写特定模版；

0.0.2版本：

搜索用unsplash，采用前端canvas生成方案，编写特定模版；

0.0.3版本：

自建搜索引擎，采用后端排版，前端支持修改，不需编写特定模版。

一个人做确实老觉得时间不够，很多想法还在脑里，没时间去一一印证。等哪天到1.0了，就拿出来玩玩吧。

今天更新一个关键技术点：

智能排版。

借鉴的是微软这篇论文：

Automatic Generation of Visual-Textual Presentation Layout 

的思路，改进了下：

我把各种要素提炼了下，兼顾个性化的定制，形成以下方案：

设计图尺寸可变；

图片支持背景图及任意多个主图、配图；

文字支持标题、小标题、正文、角标等；

色彩可自由变换；

字体、字号可配置；

图片可添加滤镜；

图层可调整。

下面重点介绍下他山之石：微软这篇2016年发表的论文，分析智能排版的方式实现一个人工智能设计师。

该论文，研究认为海报设计图分为布局（Layout）跟样式（Style）2部分：

Layout

    图片、布局方式、字号、视觉平衡

Style

    颜色、字体

论文里面有个表格，对比了三种方案的特点。

方案A：

布局：

图片自动裁切，一个文本块，固定的字号

风格：

颜色选取自文章中所有图像的主色，字体固定

方案B：

布局：

一种布局模版，字号是自适应的，视觉左右平衡

风格：

固定色调，颜色取自预先设定的色调和封面图像的主色，字体固定

方案C，该论文采用的方案

布局：

图片自动裁切，主题相关的布局模板，字号自适应，采用黄金比例作为视觉平衡的规则

风格：

色彩选取自主题相关的色调和主要图片，主题规定的字体

微软的论文是预设一些主题类别，对应的主题有布局模式、颜色、字体等内容规则，根据输入的文字、图片，自动归类到对应的主题，然后进行设计元素的匹配，最后进入智能排版的流程。

比如主题是“时尚”的排版模版，预先从真实的时尚海报中提取相关的设计元素，形成规则，供系统调用。

我们可以看下，不同主题对应的模版区别，如“时尚”主题与“食品”主题的模版：

模版里都包含了布局方式，色板，字体，字体块高度／宽度的限制范围。文字块与使用的色彩根据模版提供的变量，进行自动匹配或随机组合。

整个智能排版系统的运行逻辑如下图：

结构化文字及图片数据

根据文字及图片匹配主题

图片自动裁切

自动排版，

文字及图片形成最佳的布局方式

上色，

主题颜色+从图片提取色彩=文字的上色

  图片自动裁切：

自动裁切图片，使用了人脸识别，图像主体位置信息，把图片主体裁切出来。

自动排版：

原则是文字与图片重叠最小，文字撑满图片空间。

 上色：

通过从图片提取色彩，匹配到主题颜色，再给文字上色。

论文最后还给出了使用论文的算法做的设计跟人类设计师做的设计之间的对比效果：

以上是对智能排版的一些思考及借鉴。

码字不易，开启新的打赏方式：

本公众号定期更新关于

设计师、程序员发挥创意

互相融合的指南、作品。

主要技术栈：

nodejs、react native、electron

Elasticsearch

Solidity

Keras

欢迎关注，转发～

欢迎长按二维码

关注本号