Como construir um gerador de imagens em React usando a API DALL-E

A inteligência artificial está melhorando continuamente e agora pode criar imagens surpreendentes. Um exemplo viral recente retratou os indivíduos mais ricos e influentes do mundo em roupas rasgadas, vivendo em um ambiente de favela. O que impressiona nas imagens é o alto nível de detalhes capturados nas pessoas e em seus arredores.

Modelos de linguagem como DALL-E e Midjourney potencializam esses recursos de geração de imagens, recebendo descrições textuais como entrada e gerando imagens cativantes.

Aprenda a integrar a API DALL-E da OpenAI para gerar imagens em um aplicativo React.

Geração de imagens usando o modelo de linguagem DALL-E da OpenAI

Como o modelo de linguagem DALL-E realmente gera imagens? Sem se aprofundar muito nas complexidades da geração de imagens de IA, o DALL-E primeiro interpreta as descrições textuais fornecidas a ele como entradas usando o processamento de linguagem natural (NLP). Em seguida, ele renderiza uma imagem realista que corresponde à descrição fornecida.

Os prompts de entrada podem incluir descrições textuais de uma pessoa, objeto ou cena. Além disso, também pode incluir detalhes como uma cor, forma e tamanho específicos. Independentemente da complexidade ou simplicidade do texto de entrada, o DALL-E gerará uma imagem que corresponde à descrição de entrada.

É importante observar que o modelo de linguagem, assim como outros modelos, foi treinado em um grande conjunto de dados com milhões de dados de imagem para aprender como identificar e gerar imagens fotorrealistas de dados entradas.

Introdução à API DALL-E da OpenAI

A API DALL-E da OpenAI está disponível para uso como um beta público. Para integrar a API para uso em seu aplicativo React, você precisará de uma chave para a API do OpenAI. Dirija-se a OpenAIe faça login na página de visão geral da sua conta para obter sua chave de API.

Depois de fazer login, clique no ícone do perfil do usuário na seção superior direita da página de visão geral. Em seguida, selecione e clique em Ver chaves de API.

Na página de configurações de Chaves de API, clique no botão Criar nova chave secreta botão, forneça um nome para sua chave de API e clique em Criar chave secreta para gerar sua chave de API.

Criar um projeto React

Execute os comandos abaixo em seu terminal para criar um novo projeto React localmente. Observe que você deve ter o Node.js instalado.

Consulte estes dois artigos para saber como instalar Node.js no Windows e como instalar o Node.js no Ubuntu.

mkdir React-project 
CD React-project
aplicativo gerador de imagens npx create-react-app
aplicativo gerador de imagem de cd
npm start

Como alternativa, em vez de usar o comando create-react-app, você pode usar Vite para configurar seu projeto React. Vite é uma ferramenta de construção projetada para construir aplicações web de forma rápida e eficiente.

Integre a API DALL-E da OpenAI para gerar imagens

Depois de ter seu aplicativo React instalado e funcionando, instale a biblioteca Node.js da OpenAI para uso em seus aplicativos React.

npm instalar openai

Em seguida, no diretório raiz da pasta do seu projeto, crie um novo .env arquivo para manter sua chave de API.

REACT_APP_OPENAI_API_KEY = "CHAVE API"

Você pode encontrar o código deste projeto neste Repositório GitHub.

Criar um componente gerador de imagens

No /src diretório, crie uma nova pasta, nomeie-a componentes, e crie um novo arquivo dentro dele chamado ImageGenerator.js. Adicione o código abaixo a este arquivo.

Comece importando os módulos necessários:

importar'../App.css'; 
importar { useState } de"reagir"; 
importar { Configuração, OpenAIApi } de"abrir";

O módulo de configuração configura o cliente API do OpenAI para uso, enquanto o módulo OpenAIApi fornece métodos para interagir com a API do OpenAI. Esses dois módulos possibilitam acessar e usar os recursos do DALL-E a partir do aplicativo React.

Em seguida, defina um componente funcional e adicione o seguinte código a ele:

funçãoImageGenerator() {
const [prompt, setPrompt] = useState("");
const [resultado, setResult] = useState("");
const [carregando, setCarregando] = useState(falso);
const [espaço reservado, setPlaceholder] = useState(
"Procure por um leão com pincéis pintando a pintura de mona lisa..."
 );
const configuração = novo Configuração({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

const openai = novo OpenAIApi (configuração);

const gerarImagem = assíncrono () => {
 setPlaceholder(`Pesquisar ${prompt}..`);
 setCarregando(verdadeiro);
tentar {
const res = aguardam openai.createImage({
 prompt: pronto,
 n: 1,
 tamanho: "512x512",
 });
 setCarregando(falso);
 setResult (res.data.data[0].url);
 } pegar (erro) {
 setCarregando(falso);
console.erro(`Erro ao gerar a imagem: ${error.response.data.error.message}`);
 }
 };

Este código define um componente funcional do React chamado ImageGenerator. O componente usa diversas variáveis ​​de estado para gerenciar o prompt de entrada, resultado de saída, status de carregamento e texto de espaço reservado.

O componente também cria um configuração objeto para o cliente OpenAI API, que inclui a chave API recuperada da variável de ambiente.

o assíncrono gerar imagem A função será executada quando o usuário clicar em um botão, passando o prompt do usuário.

Em seguida, chama o openai.createImage para gerar uma imagem com base no prompt fornecido. Este método retorna um objeto de resposta que inclui a URL da imagem gerada.

Se a chamada da API for bem-sucedida, o código atualizará o resultado variável de estado com a URL e define o status de carregamento como falso. Se a chamada da API falhar, ela ainda definirá o status de carregamento como falso, mas também registra uma mensagem de erro no console.

Por fim, renderize os elementos React JSX que compõem o componente do gerador de imagens.

retornar (
"recipiente">
 { carregando? (
 <>
Gerando imagem... Aguarde...</h3>
 </>
 ): (
 <>
Gere uma imagem usando a API Open AI</h2>


 className="app-input"
 espaço reservado={espaço reservado}
 onChange={(e) => setPrompt (e.target.value)}
 linhas="10"
 colunas="100"
 />
Gerar uma imagem</button>
 { resultado.comprimento > 0? (
"imagem-resultado" src={resultado} alt="resultado" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
exportarpadrão ImageGenerator

O código deste componente renderiza condicionalmente diferentes elementos com base no valor do carregando Estado variável.

Se carregando for verdadeiro, mostra uma mensagem de carregamento. Reciprocamente, se carregando for false, ele mostra a interface principal para gerar uma imagem usando a API OpenAI que consiste em uma área de texto que captura os prompts do usuário e um botão de envio.

O resultado A variável de estado contém o URL da imagem gerada que é renderizada posteriormente no navegador.

Atualize o componente App.js

Adicione este código ao seu arquivo App.js:

importar'./App.css';
importar ImageGenerator de'./component/ImageGenerator';
funçãoAplicativo() {
retornar (

"Aplicativo">
"Cabeçalho do aplicativo">

 </header>
 </div>
 );
}
exportarpadrão Aplicativo;

Agora você pode ir em frente e ativar o servidor de desenvolvimento para atualizar as alterações e navegar para http://localhost: 3000 com seu navegador para testar a funcionalidade de geração de imagem.

Para obter os melhores resultados possíveis ao usar uma ferramenta AI para gerar uma imagem, certifique-se de fornecer um prompt detalhado na área de texto. Isso significa descrever a imagem o mais detalhadamente possível, sem deixar nenhum detalhe de fora.

Esse processo é chamado de Engenharia de Prompt e envolve fornecer prompts detalhados para que o modelo de linguagem possa produzir os melhores resultados com base nas entradas fornecidas pelo usuário.

Dado o recente aumento de software de IA disponível no mercado, seguindo uma carreira em Engenharia de Prompt pode ser uma oportunidade lucrativa.

Maximize o poder dos modelos de linguagem no desenvolvimento de software

As ferramentas de IA alimentadas por grandes modelos de linguagem conquistaram o campo do desenvolvimento de software por causa de seus recursos e capacidades incríveis.

Essas ferramentas possuem o potencial de melhorar o ecossistema de software atual, permitindo que os desenvolvedores integrem recursos interessantes de IA que aprimoram o uso de diferentes produtos - a utilização da tecnologia de IA apresenta uma oportunidade única para criar software em caminhos.