introducir
En el impulso del "Proyecto especial 1024" de la semana pasada , compartimos un conjunto de protectores de pantalla de fondos de pantalla creados por JetBrains utilizando tecnología generativa de IA. De hecho, JetBrains lleva muchos años explorando el arte de la IA. La conocida pantalla de presentación del IDE es el resultado de este trabajo. En el artículo de hoy, revelaremos desde una perspectiva técnica cómo el equipo de JetBrains utilizó la tecnología de inteligencia artificial para crear la pantalla de inicio del IDE y su arte de escritorio derivado.
Si desea explorar y descargar más trabajos de diseño, ¿por qué no visita nuestra página temática Code2Art ?
Generar ilustraciones en JetBrains
JetBrains continúa mejorando la forma en que se crean las ilustraciones para su uso como elementos de sitios web y gráficos publicados. Nuestra misión es liberar a los diseñadores gráficos de las tareas diarias para que puedan concentrarse en su competencia principal: la creatividad . La historia de las herramientas internas de JetBrains para generar obras de arte comenzó hace unos diez años. Inicialmente, utilizamos principalmente herramientas basadas en WebGL que generaban todo aleatoriamente en tiempo real en el navegador (hay un archivo interactivo disponible aquí ). La imagen de abajo fue creada de esta manera.
En 2020, lanzamos nuestra primera herramienta basada en redes neuronales profundas . Desde entonces, todo se genera en un clúster de GPU K8 utilizando PyCharm y Datalore para el desarrollo local y remoto. El navegador solo se utiliza para entrada y salida. Con este enfoque basado en redes neuronales, logramos un mayor grado de personalización, lo que nos permite atender a los diseñadores, y siempre estamos trabajando para mejorarlo.
La siguiente imagen se produjo utilizando la red de generación de patrones combinados (CPPN, arriba) y la difusión estable (SD, abajo). Este artículo presentará los detalles técnicos de estos dos métodos y cómo podemos combinarlos para crear diseños más interesantes.
CPPN: descripción general
CPPN (abreviatura de Red de producción de patrones composicionales) es una de las redes generativas más simples. Simplemente asignan coordenadas de píxeles (x, y) a colores de imagen (r, g, b). CPPN generalmente se entrena utilizando imágenes o conjuntos de imágenes específicas. Sin embargo, descubrimos que CPPN inicializado aleatoriamente produce hermosos patrones abstractos cuando la inicialización se realiza correctamente.
Aprovechando los datos de uso de versiones anteriores del generador, refinamos el algoritmo para mejorar la calidad visual. Además de esto, ampliamos ligeramente la arquitectura clásica de CPPN al introducir múltiples parámetros virtuales. Entonces ahora nuestro CPPN asignará (x, y, a, b, c, f) a (r, g, b). Este simple cambio nos permite introducir una forma fácil de usar (pero algo impredecible) de alterar imágenes, como se muestra a continuación.
Estos parámetros ficticios no son necesariamente constantes. Por ejemplo, podemos asignar el valor del parámetro virtual f para cada píxel a la distancia de este píxel desde el centro de la imagen. Esta técnica nos permite asegurarnos de que la imagen parezca circular. O podemos asignar f a la suma de valores absolutos de las coordenadas de píxeles, lo que producirá un patrón de diamante. ¡Esta es la verdadera combinación de matemáticas y arte!
Para garantizar que nuestro CPPN inicializado aleatoriamente siempre produzca diseños hermosos, entrenamos un sistema de recomendación para predecir si un conjunto determinado de parámetros producirá imágenes con una determinada estética. Entrenamos nuestros algoritmos en función de los comentarios de los usuarios recibidos durante las pruebas internas. La siguiente figura muestra dos ejemplos de imágenes creadas por CPPN inicializado aleatoriamente y sus correspondientes puntuaciones de "belleza".
CPPN: Animación
Las obras de arte generadas por nuestra CPPN realmente cobran vida cuando se convierten en gráficos de video. Al asignar parámetros virtuales (a, b, c) a cualquier curva paramétrica cerrada (una curva que comienza y termina en el mismo punto), podemos crear animaciones en bucle sin interrupciones de cualquier longitud deseada.
La elección de la función de la curva es crucial. Animar parámetros virtuales en un círculo plano es la forma más sencilla. Sin embargo, tiene un inconveniente: cuando el signo de un parámetro cambia (por ejemplo, de 0,01 a -0,01), mientras tiene un valor de primera derivada más bajo (cero en el caso de una trayectoria circular), la animación resultante suele ser nerviosa. Para resolver este problema, utilizamos lemniscatas de Bernoulli para garantizar que el signo del parámetro ficticio nunca cambie (ver imagen a continuación). Esto resuelve el problema de las animaciones nerviosas, pero también crea un nuevo problema. Para la mayoría de los cuadros de animación, uno de los parámetros solo se actualiza de forma incremental, lo que hace que la animación parezca demasiado simple. Resolvimos este problema cambiando a splines estocásticos. ¡Cuanto más complejas sean las trayectorias que utilicemos, más rica se verá la animación!
CPPN: corrección de color
Hay un detalle más importante: la corrección de color. Nuestro CPPN (y las imágenes resultantes) se generan aleatoriamente, pero debemos asegurarnos de que cada imagen utilice los colores de nuestra marca. Probamos algunas formas diferentes de lograr esto. La primera iteración ( utilizada en la versión 2020 ) se basó en el cambio de color de SVG en el navegador (usando feColorMatrix y feComponentTransfer). Esta forma es rápida porque el cambio de color se realiza en el navegador y podemos actualizar la paleta sin volver a renderizar la imagen en el lado del servidor. Sin embargo, la implementación es complicada porque algunas paletas son demasiado complejas para feColorMatrix y feComponentTransfer y, a menudo, no son confiables. Después de mucha experimentación, descubrimos que los colores finales varían entre navegadores y sistemas operativos. A continuación se muestra un ejemplo de un experimento que realizamos a principios de 2020. A la izquierda hay una captura de pantalla de un fondo generado por una versión anterior del generador en macOS usando la configuración de Safari, y a la derecha hay una captura de pantalla del mismo fondo generado por el generador en Ubuntu Linux usando la configuración de Google Chrome. Tenga en cuenta las sutiles diferencias de brillo. Cuantos más efectos de posprocesamiento apliquemos, más notable se vuelve la diferencia de brillo.
Otro ejemplo es el ejemplo feComponentTransfer de MDN . Esta vez, ambas imágenes se crearon en la misma máquina usando Ubuntu Linux y Google Chrome, pero en la captura de pantalla de la izquierda, la aceleración de hardware está deshabilitada. Existen diferencias de color notables, especialmente entre los ejemplos de búsqueda de tablas. Aunque es muy rápido, esta forma de corrección de color es muy 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源创计划”，欢迎正在阅读的你也加入，一起分享。