Jetbrains技術(shù)交流群（QQ）：786598704 歡迎一起進(jìn)群討論

JetBrains 不斷完善用作網(wǎng)站元素和發(fā)布圖形的圖稿創(chuàng)建方式，使命是將平面設(shè)計(jì)師從日常任務(wù)中解放出來，讓他們能夠?qū)Ｗ⒂谧约旱暮诵哪芰?– 創(chuàng)造力，JetBrains 用于生成圖稿的內(nèi)部工具的歷史大約開始于十年前。起初主要使用基于WebGL的工具，這些工具可以在瀏覽器中實(shí)時(shí)隨機(jī)生成所有內(nèi)容，下面的圖像就是用這種方式創(chuàng)建的。

2020年，JetBrains發(fā)布了第一款基于深度神經(jīng)網(wǎng)絡(luò)的工具，自那時(shí)起所有內(nèi)容都在K8s GPU 集群中使用適用于本地和遠(yuǎn)程開發(fā)的 PyCharm 和 Datalore 生成，瀏覽器僅用于輸入輸出。 通過這種基于神經(jīng)網(wǎng)絡(luò)的方式，實(shí)現(xiàn)了更高程度的個(gè)性化，這讓我們能夠迎合設(shè)計(jì)師的需求，并且一直在努力改進(jìn)。

以下圖片使用組合圖案生成網(wǎng)絡(luò)（CPPN，上圖）和 Stable Diffusion（SD，下圖）制作而成， 本文將介紹這兩種方式的技術(shù)細(xì)節(jié)，以及如何結(jié)合這兩種方式來創(chuàng)造更精彩的設(shè)計(jì)。

CPPN：概述

CPPN是最簡單的生成網(wǎng)絡(luò)之一，它們只是簡單地將像素坐標(biāo) (x, y) 映射到圖像顏色 (r, g, b)。 CPPN通常使用特定的圖像或圖像集進(jìn)行訓(xùn)練，不過當(dāng)初始化正確執(zhí)行時(shí)，隨機(jī)初始化的 CPPN 會生成漂亮的抽象圖案。

利用早期內(nèi)部版本生成器的使用數(shù)據(jù)，我們改進(jìn)了算法以提高視覺質(zhì)量。 除此之外，還通過引入多個(gè)虛擬參數(shù)略微擴(kuò)展了 CPPN 的經(jīng)典架構(gòu)，因此現(xiàn)在CPPN 會將 (x, y, a, b, c, f) 映射到 (r, g, b)，這個(gè)簡單的更改允許我們引入一種易于使用（但有些不可預(yù)測）的方法來更改圖像，如下所示。

這些虛擬參數(shù)不一定是常量，例如我們可以將每個(gè)像素的虛擬參數(shù) f 的值映射到此像素到圖像中心的距離，這一技巧能夠確保圖像呈現(xiàn)圓形?；蛘呶覀兛梢詫?f 映射到像素坐標(biāo)的絕對值之和，這將產(chǎn)生菱形圖案，這就是數(shù)學(xué)與藝術(shù)的真正結(jié)合！

為了確保隨機(jī)初始化的 CPPN 始終產(chǎn)生漂亮的設(shè)計(jì)，我們訓(xùn)練了一個(gè)推薦系統(tǒng)來預(yù)測給定的參數(shù)集是否會生成具有一定美感的圖像。根據(jù)內(nèi)部測試期間收到的用戶反饋來訓(xùn)練算法，下圖顯示了隨機(jī)初始化的 CPPN 創(chuàng)建的兩個(gè)圖像示例以及它們對應(yīng)的“美感”分?jǐn)?shù)。

CPPN：動(dòng)畫

當(dāng) CPPN 生成的圖稿被轉(zhuǎn)換成視頻圖形時(shí)，它們真正變得栩栩如生。 通過將虛擬參數(shù) (a, b, c) 映射到任何閉合的參數(shù)曲線（在同一點(diǎn)開始和結(jié)束的曲線），可以創(chuàng)建任何所需長度的無縫循環(huán)動(dòng)畫！

曲線函數(shù)的選擇至關(guān)重要，在平面圓上對虛擬參數(shù)添加動(dòng)畫是最簡單的方式。 不過，它有一個(gè)缺點(diǎn)：當(dāng)參數(shù)的符號發(fā)生變化（例如，從 0.01 變成 -0.01），而它具有較低的一階導(dǎo)數(shù)值（在圓形軌跡的情況下為零）時(shí)，生成的動(dòng)畫通常會抖動(dòng)。 為了解決這個(gè)問題，我們使用伯努利雙紐線來確保虛擬參數(shù)的符號永遠(yuǎn)不會改變（見下圖）。對于大多數(shù)動(dòng)畫幀，其中一個(gè)參數(shù)僅以增量方式更新，這使動(dòng)畫看起來過于簡單，我們通過切換到隨機(jī)樣條函數(shù)解決了這個(gè)問題。 使用的軌跡越復(fù)雜，動(dòng)畫看起來就越豐富！

CPPN：色彩校正

還有一個(gè)更重要的細(xì)節(jié)：色彩校正。 CPPN（以及由此產(chǎn)生的圖像）是隨機(jī)生成的，但需要確保每個(gè)圖像都使用我們的品牌顏色。 第一次迭代（在 2020 版本中使用）依賴于瀏覽器中的 SVG 重新著色（使用 feColorMatrix 和 feComponentTransfer），這種方式速度很快，因?yàn)橹匦轮跒g覽器中進(jìn)行，可以更新調(diào)色板，而無需在服務(wù)器端重新呈現(xiàn)圖像。 不過實(shí)現(xiàn)起來卻很棘手，因?yàn)橛行┱{(diào)色板對于 feColorMatrix 和 feComponentTransfer 來說太過復(fù)雜，而且通常不可靠。經(jīng)過大量實(shí)驗(yàn)后，我們發(fā)現(xiàn)最終的顏色會因?yàn)g覽器和操作系統(tǒng)而異，以下是在 2020 年初進(jìn)行的實(shí)驗(yàn)的一個(gè)示例，左邊是在 macOS 上通過使用 Safari 的設(shè)置由早期版本生成器生成的背景的屏幕截圖，右邊是在 Ubuntu Linux 上通過使用 Google Chrome 的設(shè)置由生成器生成的相同背景的屏幕截圖。 請注意細(xì)微的亮度差異，應(yīng)用的后期處理效果越多，亮度差異就越明顯。

另一個(gè)示例是 MDN 的 feComponentTransfer 示例，這一次兩個(gè)圖像都在同一臺機(jī)器上使用Ubuntu Linux 和 Google Chrome 制作，但在左側(cè)的屏幕截圖中，硬件加速被禁用。存在明顯的色彩差異，尤其是在表查找示例之間。 因此盡管速度非?？?，但這種色彩校正的方式非常不一致。

 目前的方式（從 2021 年開始使用）更直接，以 32 位灰度來呈現(xiàn)源圖像，這意味著CPPN 只返回單個(gè)明亮度值，而不是 RGB。 然后將每個(gè)像素映射到具有預(yù)計(jì)算理想 RGB 值的查找表，這種方式速度較慢，但會產(chǎn)生像素級精確的結(jié)果。

將CPPN 的另一個(gè)顯著特性是，得益于其簡單的架構(gòu)，可以輕松地將其計(jì)算圖轉(zhuǎn)換為 GLSL 代碼。 在動(dòng)畫視頻就緒之后，我們可以將其導(dǎo)出為 WebGL 片段著色器，然后直接在瀏覽器中運(yùn)行。

駕馭 Stable Diffusion

Stable Diffusion 提供了高水平的廣泛應(yīng)用和視覺保真度，這使其成為圖稿生成器的完美支柱。為了使 Stable Diffusion 適合用作發(fā)布圖形源，必須遵守以下標(biāo)準(zhǔn)：

• 圖像應(yīng)遵循品牌調(diào)色板。
• 不允許出現(xiàn)偽影或瑕疵（如壞像素）。
• 應(yīng)該易于使用某種特定風(fēng)格（抽象平滑線條）。
• 應(yīng)該需要很少或不需要提示，這意味著它應(yīng)該提供易于訪問且直觀的控制。

雖然始終存在改進(jìn)的空間，但目前已經(jīng)滿足了所有上述要求，最新的圖像已公開，所有技術(shù)細(xì)節(jié)如下。

為了產(chǎn)生始終符合所有標(biāo)準(zhǔn)的結(jié)果，使用設(shè)計(jì)師提供的各種參考資料對 Stable Diffusion 進(jìn)行了微調(diào)，下面是一些根據(jù)不同風(fēng)格生成的圖像示例。

在深入研究微調(diào)過程的技術(shù)細(xì)節(jié)之前，先來看看 Stable Diffusion 的內(nèi)部原理。 它在本質(zhì)上由三部分組成：CLIP 文本編碼器（用于將文本編碼成多模態(tài)嵌入向量空間的微型 Transformer 模型），將圖像壓縮到隱空間以及從隱空間解壓縮的變分自動(dòng)編碼器，以及降噪 UNet。

生成過程大致如下：

1. 將提示文本編碼成一個(gè)嵌入向量，即一個(gè) 77×768 浮點(diǎn)數(shù)組。
2. 隨機(jī)生成圖像的隱式表示，它可以是純高斯噪聲或初始圖像的帶噪表示。
3. 以給定的步數(shù)，將編碼的隱圖像和編碼的文本反復(fù)傳遞給降噪 UNet。
4. 在對隱圖像降噪后，將其傳遞給解碼器，從而將其解壓縮為標(biāo)準(zhǔn)的 RGB 圖像。

Stable Diffusion 的好處在于，可以用很少的數(shù)據(jù)對其進(jìn)行微調(diào)，并獲得很好的結(jié)果！ 作為“副作用”，數(shù)據(jù)高效的微調(diào)方法在計(jì)算上也是高效的，這使它變得更好。

最直接的微調(diào)方式是文本反轉(zhuǎn) (p-tuning)，凍結(jié)所有權(quán)重，例如 UNet、VAE 和文本編碼器（這意味著不會在訓(xùn)練期間更新它們），并且只為文本編碼器的每個(gè)嵌入向量訓(xùn)練一個(gè)新詞。 因?yàn)槊總€(gè)嵌入向量只訓(xùn)練一個(gè)新詞，只有 768 個(gè)可訓(xùn)練參數(shù)！

這些自定義嵌入向量是可組合的，這意味著最多可以在單個(gè)提示中使用 77 個(gè)嵌入向量。 最重要的是它們很容易訓(xùn)練，在單張 RTX 4090 上需要大約 2 個(gè)小時(shí)。以下是訓(xùn)練過程的示例，用于生成以下兩個(gè)圖像的提示均為“digital art in the style of ”，其中“”是我們正在訓(xùn)練的新詞嵌入向量。 隨著執(zhí)行的訓(xùn)練步驟的增多，圖像會發(fā)生演變，新的視覺風(fēng)格會變得越來越明顯。

另一種熱門且高效的微調(diào)方法是低秩自適應(yīng)，簡稱 LoRA。 LoRA 的關(guān)鍵思想類似于文本反轉(zhuǎn)，只是這次除了凍結(jié)權(quán)重之外，還通過在 UNet 內(nèi)的注意力層中添加小的適配器層來引入新權(quán)重。

與文本反轉(zhuǎn)相比，這種方式可以從微調(diào)數(shù)據(jù)中捕獲更復(fù)雜的圖案（例如，“AI 肖像”應(yīng)用會使用用戶的面孔訓(xùn)練適配器層），但它使用的資源略多，最重要的是，多個(gè) LoRA 無法組合。 在具體用例中，我們發(fā)現(xiàn) LoRA 在使用 Stable Diffusion XL 時(shí)最有效。 相比之下，在早期版本的 Stable Diffusion（1.4、1.5 或 2.1）中，文本反轉(zhuǎn)可以實(shí)現(xiàn)更廣泛的應(yīng)用。

結(jié)合 Stable Diffusion 和 CPPN 的優(yōu)點(diǎn)

使用 Stable Diffusion 的標(biāo)準(zhǔn)之一是需要確保生成的圖像遵循某個(gè)特定品牌的調(diào)色板，這正是 CPPN 的用武之地！ 在使用 Stable Diffusion 生成圖像之前，使用自己的梯度生成器（如上所述）利用 CPPN 生成圖像，以像素級精度應(yīng)用所需的顏色，然后使用 VAE 對其進(jìn)行編碼并使用高斯噪聲進(jìn)行混合。 UNet 使用生成的隱圖像作為其起點(diǎn)，從而保留原始色彩和構(gòu)圖。

在 CPPN 圖像就緒后，也可以直接在瀏覽器中對其進(jìn)行編輯，以實(shí)現(xiàn)我們所能想象的任何形狀和設(shè)計(jì)！

最后，使用“CPPN → Stable Diffusion”流水線生成多個(gè)圖像后，就可以用這些圖像來訓(xùn)練另一個(gè) CPPN，并將它們轉(zhuǎn)換為動(dòng)畫，如上面的 CPPN：動(dòng)畫部分所述！

希望這篇關(guān)于我們的 AI 圖稿發(fā)展歷程的深入介紹對您有所啟發(fā)！