ColaGen: ferramenta de criação automática de designs de sites da Senior

Como a Senior Sistemas está utilizando a Generative AI para criar designs de sites de maneira automatizada

Laís Van Vossen
Senior Sistemas
9 min readMay 16, 2023

--

Você já ouviu falar em GPT-4? E em ChatGPT? Fez aquelas fotos diferentes usando o Lensa app? Ou leu recentemente sobre aquela IA que compõe músicas a partir de textos ou prompts de comando? Esses são exemplos de como a área de generative AI está começando a fazer cada vez mais parte do nosso dia a dia.

Como o próprio nome indica, algoritmos dessa categoria podem gerar novos dados, diferentes daqueles que já existem no mundo real. Desde a criação de designs, seja de moda, de arquitetura ou de web pages até aplicações de cibersegurança. Generative AI é uma das áreas da inteligência artificial mais relevantes da atualidade.

Muitas são as aplicações dessas tecnologias no nosso dia a dia, desde as atividades rotineiras, como escrever um texto para um e-mail até aplicações mais complexas, como a criação de design de um site a partir de um prompt e a codificação automática desses designs. Há um mundo de possibilidades.

As IAs generativas não são novas, elas começaram a se popularizar em 2014 com o advento das redes adversárias generativas (GANs), principalmente usadas para criação de imagens realistas. Mais tarde, os cientistas criaram outras variantes de GANs para realizar outras tarefas, como transferir o estilo de uma imagem para outra.

Em 2017, houve o advento do transformer, uma arquitetura de aprendizado profundo subjacente a modelos de linguagem grandes (LLMS), como o GPT-3, LaMDA e Gopher. Essa foi a mudança que permitiu a construção da IA generativa como conhecemos hoje. Neste post apresentaremos os principais tipos de algoritmos, bem como uma aplicação desenvolvida pelo SeniorLabs, laboratório de pesquisa aplicada da Senior Sistemas, para a geração de designs de páginas web com IA. Uma observação importante é que algumas partes desse texto foram escritas com o auxílio de GPT.

Como Funciona

Hoje, há três principais modelos de inteligência artificial generativa, que são as GANs, Diffusion Models e LLMs.

GAN (Generative Adversarial Networks)

O GAN é uma competição entre duas redes neurais, sendo, um Discriminador e um Gerador para produzir imagens cada vez mais parecidas com as reais. Essas redes funcionam da seguinte forma:

  • O Discriminador recebe uma imagem para determinar se é real ou fake, as imagens reais são da base de treinamento e as imagens falsas são geradas pelo Gerador.
  • Se o Discriminador acertar, o feedback negativo é enviado para o Gerador para melhorar seus parâmetros e produzir imagens mais reais.
  • Se o Discriminador errar, o feedback negativo é enviado para o Discriminador, para melhorar seus parâmetros e acertar qual imagem é real e qual é fake.
  • A imagem gerada pelo Gerador é produzida através de um ruído aleatório a princípio e através da otimização dos pesos e do erro obtido através do discriminador, esse modelo aprende a gerar melhores imagens a cada época de treinamento.

Na imagem abaixo, é possível visualizar a estrutura básica de uma GAN. Neste link é possível encontrar um notebook com o código para o treinamento e a avaliação de uma GAN convolucional para gerar imagens da base MNIST (mesma da imagem abaixo).

imagem do funcionamento de uma Gan de identificação de números escritos a mão
Figura 1. Estrutura de uma GAN.

Apesar de poderosas, essas redes sofrem com um treinamento potencialmente instável e uma menor diversidade nos dados gerados por serem baseados em um dataset específico.

Diffusion Models

Os Diffusion Models, também conhecidos como Diffusion Probabilistic Models (DPMs), são uma técnica recente em aprendizado de máquina que permite gerar imagens de alta qualidade e realismo, baseadas em um conjunto de dados de treinamento.

Esses modelos são uma evolução dos modelos de redes neurais generativas (GANs), que são amplamente utilizados para gerar imagens. A principal diferença entre os dois é que os DPMs utilizam um processo de difusão estocástica para gerar imagens, enquanto as GANs utilizam uma competição entre duas redes neurais para gerar imagens.

O processo de difusão estocástica utilizado pelos DPMs consiste em aplicar uma série de transformações aleatórias em uma imagem inicial, de forma a “difundir” a informação ao longo de um conjunto de passos. A cada passo, a imagem é refinada e a qualidade é aprimorada, gerando uma imagem final de alta qualidade e realismo.

Os DPMs para geração de imagens são uma área de pesquisa relativamente nova, mas já demonstraram resultados impressionantes na geração de imagens de alta qualidade em diversas áreas, como arte, design, moda e publicidade. Eles são particularmente úteis para gerar imagens em situações em que a coleta de dados é difícil ou inviável, como na criação de modelos de produtos ainda não fabricados ou na geração de imagens médicas para fins de diagnóstico.

Embora ainda existam desafios a serem superados, os diffusion models para geração de imagens têm o potencial de revolucionar a forma como as imagens são criadas e utilizadas em diversas áreas da indústria e da pesquisa. YANG, Ling et al trazem uma grande revisão bibliográfica passando pelos mais diversos tipos de diffusion models disponíveis e suas funcionalidades.

Large Language Models (LLMs)

LLMs é a sigla para “Large Language Models” (Modelos de Linguagem Grandes, em tradução livre). Esses modelos são sistemas de inteligência artificial (IA) projetados para entender e gerar texto em larga escala, utilizando técnicas de processamento de linguagem natural (PLN) e aprendizado de máquina.

Os LLMs são capazes de realizar uma variedade de tarefas de linguagem natural, como reconhecimento de fala, tradução automática, geração de texto, análise de sentimento, resumo de texto, entre outras. Eles trabalham com base em grandes conjuntos de dados, geralmente na ordem de bilhões de palavras, que lhes permitem entender as nuances e complexidades da linguagem humana.

Tipos e Modelos Disponíveis

Diversas empresas entraram na corrida das IAs generativas e criaram sua própria versão da tecnologia, principalmente para geração de textos e imagens usando LLMs, difusion models e GANs. Algumas que podemos citar são:

  • OpenAI: A OpenAI é responsável pelo desenvolvimento de modelos como GPT-3 e GPT-4, que são usados para gerar textos em diversas aplicações. Além disso, a OpenAI também trabalha na geração de imagens com modelos como DALL-E e CLIP, capazes de criar imagens a partir de descrições textuais.
  • Google DeepMind: A DeepMind desenvolveu a arquitetura Transformer, que é usada em muitos LLMs, incluindo os modelos GPT. Eles também trabalham em geração de imagens usando IA, como o WaveNet, um modelo generativo para síntese de áudio, e o BigGAN, um modelo generativo adversarial para criar imagens realistas.
  • Google AI: O Google AI criou o BERT, um LLM que tem sido utilizado em várias aplicações de processamento de linguagem natural. Além disso, eles também têm explorado a geração de imagens com modelos como o T2T-ViT, um modelo Transformer aplicado à visão computacional. Na área de geração de código, o Duet AI foi lançado para auxiliar no desenvolvimento fornecendo code completion, sugestões e revisões de código para Devs, Engenheiros de Dados e Machine Learning, DevOps, entre outros.
  • Facebook AI Research (FAIR): A FAIR desenvolveu o RoBERTa e o Blender, ambos LLMs voltados para processamento de linguagem natural. No campo da geração de imagens, eles criaram modelos como o StyleGAN e o DINO, que utilizam aprendizado não supervisionado para criar imagens de alta qualidade.
  • NVIDIA: A NVIDIA desenvolveu o Megatron, um LLM escalável. No campo da geração de imagens, a empresa criou o StyleGAN2, uma versão aprimorada do StyleGAN, que é um modelo generativo adversarial para criar imagens altamente realistas.
  • Microsoft: A Microsoft Research desenvolveu o Turing-NLG, um LLM baseado na arquitetura Transformer. Além disso, eles também têm trabalhado em geração de imagens com o Swin Transformer, um modelo Transformer aplicado à visão computacional. A Microsoft também aplicou o poder das LLMs em seus aplicativos como o Word, Excel, PowerPoint, Outlook e Teams através do Copilot, uma ferramenta capaz de automatizar e simplificar tarefas no ambiente corporativo, podendo gerar resumos, produzir apresentações, analisar tendências nos dados do Excel, entre outras funcionalidades.
  • Adobe: A Adobe Research tem explorado LLMs e geração de imagens em suas ferramentas criativas. Eles desenvolveram o Sensei, uma IA integrada aos produtos da Adobe, como o Photoshop e o Illustrator, para melhorar a edição e criação de imagens.

Nossas aplicações na Senior Sistemas

A Senior Sistemas também tem investido em pesquisa e desenvolvimento de novos produtos e serviços utilizando Generative AI. A seguir, será apresentado um desses projetos de Generative AI cujo objetivo é a geração automática de designs para sites.

ColaGen

O ColaGen é o projeto de desenvolvimento de interfaces gráficas para sites e aplicações. Seu objetivo é auxiliar na criação de designs de layouts, trazendo imagens de inspiração geradas por um diffusion model, com temas e características pré-definidas pelos usuários, a fim de auxiliar designers a criar interfaces de uma forma muito mais rápida, podendo explorar diversas possibilidades de designs em segundos. Com isso, o designer de interfaces poderá utilizar a ferramenta como fonte de inspiração, auxiliando a testar novas ideias, paletas de cores e temas diversos, facilitando assim o trabalho criativo.

Figura 2. Demonstrativo do funcionamento do ColaGen.

Para isso, foram criadas diversas bases de dados com imagens de layouts das telas mais comuns encontradas em sites na internet, essas telas são: homepage, tela de serviços, tela de login, tela de erro, tela de contatos, tela de sobre nós, blog e tela de CRUD. Com esses dados foram treinados embeddings utilizando como base o modelo Protogen x3.4, que é um modelo que junta diversos outros com o intuito de produzir resultados mais realistas na geração de imagens. Para o treinamento dos embeddings, foi utilizado a plataforma open source Stable Diffusion Webui.

Para determinar a eficácia dos modelos em produzir as telas nos padrões específicos, fizemos diversos prompts (descrições) para cada tela e pedimos para o modelo gerar designs com base nesses prompts. Para cada tela gerada, utilizamos um embedding treinado pela equipe do laboratório de pesquisa da Senior especializado naquele tipo de tela, então, para a tela de login, foi usado o embedding labswebuilogin3–320, para o blog foi labswebuiblog2–600, para a tela de contatos foi labswebuicontactusv10–2940 e por fim, para a Homepage utilizamos o embedding labswebuihome1–1200. Aqui estão alguns dos resultados que obtivemos:

Figura 3. Página de login para um petshop online, com cães e gatos desenhados e cores pastéis. O prompt usado para gerar essa imagem foi: a web design of login page for online petshop, sign-in form, dog and cat in cartoon art style, pastel colors, modern, ux/ui, web design, high detail, by labswebuilogin3–320.
Figura 4. Página de blog de uma loja de instrumentos musicais nas cores laranja, preto e branco, com guitarras e músicos. O prompt usado para gerar essa imagem foi: a web design of a blog for music instruments online store with orange, black and white undertone, musicians in background, guitar, modern, ux/ui, web design, high detail,clean and modern design, screenshot, by labswebuiblog2–600.
Figura 5. Página de contatos de uma loja de brinquedos com estilo infantil e colorido com Barbies e Legos. O prompt usado para gerar essa imagem foi: a web design of a contact page for online toy store with toys in the background and a phone number, barbie, lego, colorful background, playful, kids, web design, ux, ui, 8k uhdr, by labswebuicontactusv10–2940.
Figura 6. Homepage para uma loja de supercarros com cores escuras e neon. O prompt usado para gerar essa imagem foi: a web design of a landing page for supercar with dark ui and neon colors, trendy online store, 8k, octane render, by labswebuihome1–1200.

Se você gostou dos resultados que viu, confira também abaixo alguns designs que geramos utilizando o ColaGen para ver como seria se os heróis da Marvel tivessem um site só deles!

Figura 7. Tela de login da Viúva Negra
Figura 8. Tela de login do Incrível Hulk
Figura 9. Tela de serviços do Homem de Ferro

Conclusão

A Generative AI está transformando a maneira como as empresas e as pessoas criam e interagem com o mundo digital. Com algoritmos como GANs, Diffusion Models e LLMs, é possível gerar novos dados, como textos, imagens e designs de forma automatizada e com alta qualidade. E o resultado desses avanços é visto em aplicações como o Lensa app, a música gerada a partir de textos e prompts de comando, e até mesmo na criação automática de designs de sites, como no projeto ColaGen desenvolvido pela Senior Sistemas.

Os modelos de Generative AI apresentados neste texto são apenas alguns exemplos do que é possível fazer com essa tecnologia. As empresas de tecnologia estão investindo cada vez mais em pesquisa e desenvolvimento para criar algoritmos mais avançados, capazes de gerar novos tipos de dados e tornar as aplicações ainda mais úteis e eficientes. É um campo de estudo promissor que tem potencial para transformar ainda mais a maneira como vivemos e interagimos com o mundo digital.

Fontes

YANG, Ling et al. Diffusion models: A comprehensive survey of methods and applications. arXiv preprint arXiv:2209.00796, 2022.

https://www.weforum.org/agenda/2023/01/davos23-generative-ai-a-game-changer-industries-and-society-code-developers/

https://www.cantorsparadise.com/generative-ai-a-key-to-machine-intelligence-674c89a81bc

https://medium.com/@assafelovic/gpt-3-the-ultimate-beginners-guide-681739cd371d

--

--