人工智慧設計師之智能排版

本文首發於Design-AI-Lab，繼續談《人工智慧設計師》：

實現一個人工智慧設計師的方案有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，該論文採用的方案

布局：

圖片自動裁切，主題相關的布局模板，字型大小自適應，採用黃金比例作為視覺平衡的規則

風格：

色彩選取自主題相關的色調和主要圖片，主題規定的字體

微軟的論文是預設一些主題類別，對應的主題有布局模式、顏色、字體等內容規則，根據輸入的文字、圖片，自動歸類到對應的主題，然後進行設計元素的匹配，最後進入智能排版的流程。

比如主題是「時尚」的排版模版，預先從真實的時尚海報中提取相關的設計元素，形成規則，供系統調用。

我們可以看下，不同主題對應的模版區別，如「時尚」主題與「食品」主題的模版：

模版里都包含了布局方式，色板，字體，字體塊高度／寬度的限制範圍。文字塊與使用的色彩根據模版提供的變數，進行自動匹配或隨機組合。

整個智能排版系統的運行邏輯如下圖：

結構化文字及圖片數據

|

根據文字及圖片匹配主題

|

圖片自動裁切

|

自動排版，

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

|

上色，

主題顏色+從圖片提取色彩=文字的上色

圖片自動裁切：

自動裁切圖片，使用了人臉識別，圖像主體位置信息，把圖片主體裁切出來。

自動排版：

原則是文字與圖片重疊最小，文字撐滿圖片空間。

上色：

通過從圖片提取色彩，匹配到主題顏色，再給文字上色。

論文最後還給出了使用論文的演算法做的設計跟人類設計師做的設計之間的對比效果：

以上是對智能排版的一些思考及借鑒。

關注本號Design-AI-Lab