Jetbrains技術交流群（QQ）：786598704 歡迎一起進群討論

JetBrains 不斷完善用作網站元素和發布圖形的圖稿創建方式，使命是將平面設計師從日常任務中解放出來，讓他們能夠專注于自己的核心能力 – 創造力，JetBrains 用于生成圖稿的內部工具的歷史大約開始于十年前。起初主要使用基于WebGL的工具，這些工具可以在瀏覽器中實時隨機生成所有內容，下面的圖像就是用這種方式創建的。

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

以下圖片使用組合圖案生成網絡（CPPN，上圖）和 Stable Diffusion（SD，下圖）制作而成， 本文將介紹這兩種方式的技術細節，以及如何結合這兩種方式來創造更精彩的設計。

CPPN：概述

CPPN是最簡單的生成網絡之一，它們只是簡單地將像素坐標 (x, y) 映射到圖像顏色 (r, g, b)。 CPPN通常使用特定的圖像或圖像集進行訓練，不過當初始化正確執行時，隨機初始化的 CPPN 會生成漂亮的抽象圖案。

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

這些虛擬參數不一定是常量，例如我們可以將每個像素的虛擬參數 f 的值映射到此像素到圖像中心的距離，這一技巧能夠確保圖像呈現圓形。或者我們可以將 f 映射到像素坐標的絕對值之和，這將產生菱形圖案，這就是數學與藝術的真正結合！

為了確保隨機初始化的 CPPN 始終產生漂亮的設計，我們訓練了一個推薦系統來預測給定的參數集是否會生成具有一定美感的圖像。根據內部測試期間收到的用戶反饋來訓練算法，下圖顯示了隨機初始化的 CPPN 創建的兩個圖像示例以及它們對應的“美感”分數。

CPPN：動畫

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

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

CPPN：色彩校正

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

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

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

將CPPN 的另一個顯著特性是，得益于其簡單的架構，可以輕松地將其計算圖轉換為 GLSL 代碼。 在動畫視頻就緒之后，我們可以將其導出為 WebGL 片段著色器，然后直接在瀏覽器中運行。

駕馭 Stable Diffusion

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

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

雖然始終存在改進的空間，但目前已經滿足了所有上述要求，最新的圖像已公開，所有技術細節如下。

為了產生始終符合所有標準的結果，使用設計師提供的各種參考資料對 Stable Diffusion 進行了微調，下面是一些根據不同風格生成的圖像示例。

在深入研究微調過程的技術細節之前，先來看看 Stable Diffusion 的內部原理。 它在本質上由三部分組成：CLIP 文本編碼器（用于將文本編碼成多模態嵌入向量空間的微型 Transformer 模型），將圖像壓縮到隱空間以及從隱空間解壓縮的變分自動編碼器，以及降噪 UNet。

生成過程大致如下：

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

Stable Diffusion 的好處在于，可以用很少的數據對其進行微調，并獲得很好的結果！ 作為“副作用”，數據高效的微調方法在計算上也是高效的，這使它變得更好。

最直接的微調方式是文本反轉 (p-tuning)，凍結所有權重，例如 UNet、VAE 和文本編碼器（這意味著不會在訓練期間更新它們），并且只為文本編碼器的每個嵌入向量訓練一個新詞。 因為每個嵌入向量只訓練一個新詞，只有 768 個可訓練參數！

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

另一種熱門且高效的微調方法是低秩自適應，簡稱 LoRA。 LoRA 的關鍵思想類似于文本反轉，只是這次除了凍結權重之外，還通過在 UNet 內的注意力層中添加小的適配器層來引入新權重。

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

結合 Stable Diffusion 和 CPPN 的優點

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

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

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

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