introduzir
No impulso “1024 Special Project” da semana passada , compartilhamos um conjunto de protetores de tela de papel de parede criados pela JetBrains usando tecnologia generativa de IA. Na verdade, a JetBrains explora a arte da IA há muitos anos. A familiar tela inicial do IDE é o resultado deste trabalho. No artigo de hoje, revelaremos de uma perspectiva técnica como a equipe da JetBrains usou a tecnologia de IA para criar a tela de inicialização do IDE e sua arte de desktop derivada.
Se você quiser explorar e baixar mais trabalhos de design, por que não conferir nossa página temática Code2Art !
Gere arte no JetBrains
A JetBrains continua a melhorar a forma como a arte é criada para uso como elementos de sites e gráficos publicados. Nossa missão é libertar os designers gráficos das tarefas diárias para que possam se concentrar em sua competência principal – a criatividade . A história das ferramentas internas da JetBrains para geração de obras de arte começou há cerca de dez anos. Inicialmente, usamos principalmente ferramentas baseadas em WebGL que geravam tudo aleatoriamente em tempo real no navegador (um arquivo interativo está disponível aqui ). A imagem abaixo foi criada desta forma.
Em 2020, lançamos nossa primeira ferramenta baseada em redes neurais profundas . Desde então, tudo é gerado em um cluster de GPU K8s usando PyCharm e Datalore para desenvolvimento local e remoto. O navegador é usado apenas para entrada e saída. Com esta abordagem baseada em redes neurais, alcançamos um maior grau de personalização, o que nos permite atender aos designers, e estamos sempre trabalhando para melhorá-lo.
A imagem a seguir foi produzida usando Combined Pattern Generation Network (CPPN, parte superior) e Stable Diffusion (SD, parte inferior). Este artigo apresentará os detalhes técnicos desses dois métodos e como podemos combiná-los para criar designs mais interessantes.
CPPN: visão geral
CPPN (abreviatura de Compositional pattern-producing network) é uma das redes generativas mais simples. Eles simplesmente mapeiam as coordenadas dos pixels (x, y) para as cores da imagem (r, g, b). O CPPN geralmente é treinado usando imagens específicas ou conjuntos de imagens. No entanto, descobrimos que o CPPN inicializado aleatoriamente produz belos padrões abstratos quando a inicialização é realizada corretamente.
Aproveitando os dados de uso de versões anteriores do gerador, refinamos o algoritmo para melhorar a qualidade visual. Além disso, estendemos ligeiramente a arquitetura clássica do CPPN introduzindo múltiplos parâmetros virtuais. Então agora nosso CPPN irá mapear (x, y, a, b, c, f) para (r, g, b). Esta simples mudança nos permite introduzir uma maneira fácil de usar (mas um tanto imprevisível) de alterar imagens, conforme mostrado abaixo.
Esses parâmetros fictícios não são necessariamente constantes. Por exemplo, podemos mapear o valor do parâmetro virtual f para cada pixel à distância deste pixel do centro da imagem. Esta técnica permite-nos garantir que a imagem pareça circular. Ou podemos mapear f para a soma dos valores absolutos das coordenadas dos pixels, o que produzirá um padrão de diamante. Esta é a verdadeira combinação de matemática e arte!
Para garantir que nosso CPPN inicializado aleatoriamente sempre produza belos designs, treinamos um sistema de recomendação para prever se um determinado conjunto de parâmetros produzirá imagens com uma determinada estética. Treinamos nossos algoritmos com base no feedback dos usuários recebidos durante testes internos. A figura abaixo mostra dois exemplos de imagens criadas por CPPN inicializado aleatoriamente e suas pontuações de “beleza” correspondentes.
CPPN: Animação
A arte gerada pelo nosso CPPN realmente ganha vida quando é convertida em gráficos de vídeo. Ao mapear parâmetros virtuais (a, b, c) para qualquer curva paramétrica fechada (uma curva que começa e termina no mesmo ponto), podemos criar animações em loop contínuo de qualquer comprimento desejado!
A escolha da função de curva é crucial. Animar parâmetros virtuais em um círculo plano é a maneira mais fácil. No entanto, tem uma desvantagem: quando o sinal de um parâmetro muda (por exemplo, de 0,01 para -0,01), embora tenha um valor de primeira derivada menor (zero no caso de uma trajetória circular), a animação resultante Geralmente instável. Para resolver este problema, usamos lemniscatas de Bernoulli para garantir que o sinal do parâmetro fictício nunca mude (veja a imagem abaixo). Isso resolve o problema das animações instáveis, mas também cria um novo problema. Para a maioria dos quadros de animação, um dos parâmetros só é atualizado de forma incremental, o que faz com que a animação pareça muito simples. Resolvemos esse problema mudando para splines estocásticos. Quanto mais trajetórias complexas usarmos, mais rica será a animação!
CPPN: correção de cores
Há mais um detalhe importante: a correção de cores. Nosso CPPN (e as imagens resultantes) são gerados aleatoriamente, mas precisamos ter certeza de que cada imagem usa as cores de nossa marca. Tentamos algumas maneiras diferentes de conseguir isso. A primeira iteração ( usada na versão 2020 ) contou com a recoloração do SVG no navegador (usando feColorMatrix e feComponentTransfer). Dessa forma é rápido porque a recoloração acontece no navegador e podemos atualizar a paleta sem renderizar novamente a imagem no lado do servidor. No entanto, a implementação é complicada porque algumas paletas são muito complexas para feColorMatrix e feComponentTransfer e muitas vezes não são confiáveis. Depois de muita experimentação, descobrimos que as cores finais variam entre navegadores e sistemas operacionais. Abaixo está um exemplo de um experimento que conduzimos no início de 2020. À esquerda está uma captura de tela de um plano de fundo gerado por uma versão anterior do gerador no macOS usando as configurações do Safari, e à direita está uma captura de tela do mesmo plano de fundo gerado pelo gerador no Ubuntu Linux usando as configurações do Google Chrome. Observe as sutis diferenças de brilho. Quanto mais efeitos de pós-processamento aplicamos, mais perceptível se torna a diferença no brilho.
Outro exemplo é o exemplo feComponentTransfer do MDN . Desta vez, as duas imagens foram feitas na mesma máquina usando Ubuntu Linux e Google Chrome, mas na captura de tela à esquerda, a aceleração de hardware está desabilitada. Existem diferenças de cores perceptíveis, especialmente entre os exemplos de pesquisa de tabela. Portanto, embora seja muito rápido, esse modo de correção de cores é muito inconsistente.
我们目前的方式（从 2021 年开始使用）更直接。我们以 32 位灰度来呈现源图像，这意味着我们的 CPPN 只返回单个明亮度值，而不是 RGB。然后，我们将每个像素映射到具有预计算理想 RGB 值的查找表。这种方式速度较慢，但会产生像素级精确的结果。
将我们目前的色彩校正方式与带有虚拟参数和样条动画的 CPPN 一起使用时，就会得到类似下面的视频！
CPPN 的另一个显著特性是，得益于其简单的架构，可以轻松地将其计算图转换为 GLSL 代码。在动画视频就绪之后，我们可以将其导出为 WebGL 片段着色器，然后直接在浏览器中运行。这种方式的结果的一个示例是 Qodana 的着陆页。
点击此处查看我们基于 CPPN 的生成器。
要深入了解 CPPN，请查看我们包含代码示例的公共 Datalore Notebook。
驾驭 Stable Diffusion
Stable Diffusion 提供了高水平的广泛应用和视觉保真度，这使其成为我们图稿生成器的完美支柱。为了使 Stable Diffusion 适合用作发布图形源，我们必须遵守以下标准：
图像应遵循品牌调色板。
不允许出现伪影或瑕疵（如坏像素）。
应该易于使用某种特定风格（抽象平滑线条）。
应该需要很少或不需要提示，这意味着它应该提供易于访问且直观的控制。
虽然始终存在改进的空间，但我们已经满足了所有上述要求。最新的图像已公开，所有技术细节如下。
为了产生始终符合我们所有标准的结果，我们使用设计师提供的各种参考资料对 Stable Diffusion 进行了微调。下面是一些根据不同风格生成的图像示例。
在深入研究微调过程的技术细节之前，我们先来看看 Stable Diffusion 的内部原理。它在本质上由三部分组成：CLIP 文本编码器（用于将文本编码成多模态嵌入向量空间的微型 Transformer 模型），将图像压缩到隐空间以及从隐空间解压缩的变分自动编码器，以及降噪 UNet。
生成过程大致如下：
我们将提示文本编码成一个嵌入向量，即一个 77×768 浮点数组。
我们随机生成图像的隐式表示，它可以是纯高斯噪声或初始图像的带噪表示。
我们以给定的步数，将编码的隐图像和编码的文本反复传递给降噪 UNet。
在对隐图像降噪后，我们将其传递给解码器，从而将其解压缩为标准的 RGB 图像。
对我们来说至关重要的是，Stable Diffusion 的好处在于，可以用很少的数据对其进行微调，并获得很好的结果！作为“副作用”，数据高效的微调方法在计算上也是高效的，这使它变得更好。
最直接的微调方式是文本反转 (p-tuning)。我们会冻结所有权重，例如 UNet、VAE 和文本编码器（这意味着我们不会在训练期间更新它们），并且只为文本编码器的每个嵌入向量训练一个新词。因为我们每个嵌入向量只训练一个新词，只有 768 个可训练参数！
这些自定义嵌入向量是可组合的，这意味着我们最多可以在单个提示中使用 77 个嵌入向量。最重要的是，它们很容易训练，在单张 RTX 4090 上需要大约 2 个小时。以下是训练过程的示例。用于生成以下两个图像的提示均为“digital art in the style of ”，其中“”是我们正在训练的新词嵌入向量。随着执行的训练步骤的增多，图像会发生演变，新的视觉风格会变得越来越明显。
另一种热门且高效的微调方法是低秩自适应（Low-Rank Adaptation，简称 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：动画部分所述！这里有一些示例 GLSL 代码。
JetBrains 对 AI 赋能图形的探索和实现是一次冒险。多年来，我们的工具不断发展和成熟，从最初使用基于 WebGL 的随机生成方式，到目前使用 CPPN 和 Stable Diffusion 生成时尚且个性化的设计。展望未来，我们期待更高水平的自定义和广泛应用，我们对这些技术将在图形生成领域释放的潜力感到兴奋。
我们希望这篇关于我们的 AI 图稿发展历程的深入介绍对您有所启发！我们诚邀您探索我们提供的示例（包括我们的交互式归档）并在文章留言区或发送电子邮件至 [email protected] 来分享您的反馈。请告诉我们您未来希望从计算艺术团队看到什么样的主题！
本博文英文原作者：
Vladimir Sotnikov, Olga Andreevskikh
更多阅读推荐
新发布
调研报告
IDE 使用技巧
⏬ 戳「阅读原文」了解更多
本文分享自微信公众号 - JetBrains（JetBrainsChina）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。