Atualmente, indiv\u00edduos e empresas desenvolveram e treinaram v\u00e1rios modelos de IA para executar determinadas tarefas melhor do que os humanos em tempo real. Entre os in\u00fameros aplicativos de IA, uma \u00e1rea particularmente intrigante \u00e9 a gera\u00e7\u00e3o de imagens.<\/p>\n
O que voc\u00ea est\u00e1 construindo<\/h2>\n
Este guia explica como criar um aplicativo React que se integra perfeitamente \u00e0 API OpenAI DALL-E<\/a> por meio de um backend Node.js<\/a> e gera imagens cativantes com base em solicita\u00e7\u00f5es textuais.<\/p>\n Para acompanhar este projeto, voc\u00ea deve ter:<\/p>\n A API da OpenAI \u00e9 uma plataforma baseada em nuvem que concede aos desenvolvedores<\/a> acesso aos modelos de IA pr\u00e9-treinados da OpenAI, como o DALL-E e o GPT-3 (usamos esse modelo para criar um clone do ChatGPT<\/a> com o c\u00f3digo neste reposit\u00f3rio Git<\/a>). Ele permite que os desenvolvedores adicionem recursos de IA, como resumo, tradu\u00e7\u00e3o, gera\u00e7\u00e3o de imagens e modifica\u00e7\u00e3o em seus programas sem precisar desenvolver e treinar seus pr\u00f3prios modelos.<\/p>\n Para usar a API da OpenAI, crie uma conta usando sua conta do Google ou e-mail no site da OpenAI<\/a> e obtenha uma chave de API. Para gerar uma chave de API, clique em Personal <\/strong>(Pessoal)\u00a0no canto superior direito do site e selecione View API keys <\/strong>(Exibir chaves de API).<\/p>\n Clique no bot\u00e3o Create new secret key <\/strong>(Criar nova chave secreta) e salve a chave<\/a> em algum lugar. Voc\u00ea a usar\u00e1 neste aplicativo para interagir com a API DALL-E da OpenAI.<\/p>\n Voc\u00ea pode criar um aplicativo React do zero e desenvolver sua pr\u00f3pria interface, ou pode pegar nosso template inicial do Git<\/a> seguindo estas etapas:<\/p>\n Ap\u00f3s a conclus\u00e3o da instala\u00e7\u00e3o, voc\u00ea pode iniciar o projeto em seu computador local com Neste projeto, adicionamos todas as depend\u00eancias necess\u00e1rias para o seu aplicativo React. Aqui est\u00e1 uma vis\u00e3o geral do que foi instalado:<\/p>\n No centro do seu aplicativo React est\u00e1 a pasta src<\/strong>. \u00c9 nela que o c\u00f3digo JavaScript essencial para o Webpack est\u00e1 hospedado. Vamos entender os arquivos e as pastas dentro da pasta src<\/strong>:<\/p>\n Dentro dessa pasta, o arquivo index.js<\/strong> define duas fun\u00e7\u00f5es reutiliz\u00e1veis. A primeira fun\u00e7\u00e3o randomiza a sele\u00e7\u00e3o de prompts que descrevem v\u00e1rias imagens que podem ser geradas.<\/p>\n A segunda fun\u00e7\u00e3o lida com o download das imagens geradas, aproveitando a depend\u00eancia file-saver <\/strong>(salvador de arquivos). Ambas as fun\u00e7\u00f5es foram criadas para oferecer modularidade e efici\u00eancia, e podem ser convenientemente importadas para os componentes quando necess\u00e1rio.<\/p>\n No c\u00f3digo acima, a depend\u00eancia uuid<\/strong> d\u00e1 a cada arquivo de imagem gerado um ID exclusivo, para que eles n\u00e3o tenham o mesmo nome de arquivo.<\/p>\n Esses s\u00e3o pequenos blocos de c\u00f3digo separados para facilitar a manuten\u00e7\u00e3o e a compreens\u00e3o do c\u00f3digo. Para este projeto, foram criados tr\u00eas componentes: Header.jsx<\/strong>, Footer.jsx<\/strong> e Form.jsx<\/strong>. O componente principal \u00e9 o componente Form, no qual a entrada \u00e9 recebida e passada para o arquivo App.jsx<\/strong> com a fun\u00e7\u00e3o No componente Form, \u00e9 criado um estado para armazenar e atualizar o prompt. Al\u00e9m disso, um recurso permite que voc\u00ea clique em um \u00edcone aleat\u00f3rio para gerar os prompts aleat\u00f3rios. Isso \u00e9 poss\u00edvel com a fun\u00e7\u00e3o \u00c9 aqui que reside a maior parte do c\u00f3digo. Todos os componentes s\u00e3o reunidos aqui. H\u00e1 tamb\u00e9m uma \u00e1rea designada para exibir a imagem gerada. Se nenhuma imagem tiver sido gerada ainda, ser\u00e1 exibida uma imagem de espa\u00e7o reservado (Preview image).<\/p>\n Dentro desse arquivo, dois estados s\u00e3o gerenciados:<\/p>\n Al\u00e9m disso, a fun\u00e7\u00e3o do utilit\u00e1rio Agora que voc\u00ea entendeu os arquivos iniciais e configurou o projeto, vamos come\u00e7ar a lidar com a l\u00f3gica desse aplicativo.<\/p>\n Para aproveitar os recursos da API DALL-E da OpenAI, voc\u00ea usar\u00e1 o Node.js para estabelecer um servidor. Voc\u00ea criar\u00e1 uma rota POST dentro desse servidor. Essa rota ser\u00e1 respons\u00e1vel por receber o texto do prompt enviado pelo seu aplicativo React e, em seguida, utiliz\u00e1-lo para gerar uma imagem.<\/p>\n Para come\u00e7ar, instale as depend\u00eancias necess\u00e1rias no diret\u00f3rio do seu projeto executando o seguinte comando:<\/p>\n Al\u00e9m disso, instale as seguintes depend\u00eancias como depend\u00eancias de desenvolvimento. Essas ferramentas ajudar\u00e3o voc\u00ea a configurar seu servidor Node.js<\/a>:<\/p>\n As depend\u00eancias instaladas s\u00e3o explicadas a seguir:<\/p>\n Quando as instala\u00e7\u00f5es forem bem-sucedidas, crie um arquivo server.js<\/strong> na raiz do seu projeto. \u00c9 nele que todo o c\u00f3digo do servidor ser\u00e1 armazenado.<\/p>\n No arquivo server.js<\/strong>, importe as bibliotecas<\/a> que voc\u00ea acabou de instalar e as instancie:<\/p>\n No c\u00f3digo acima, voc\u00ea importa as bibliotecas necess\u00e1rias. Em seguida, estabelece uma inst\u00e2ncia do aplicativo Express usando Depois disso, uma inst\u00e2ncia da classe OpenAI \u00e9 criada utilizando sua chave de API OpenAI. Crie um arquivo .env<\/strong> na raiz do seu projeto e adicione sua chave de API usando a vari\u00e1vel Agora voc\u00ea configurou o arquivo server.js<\/strong>. Vamos criar uma rota POST que voc\u00ea pode usar em seu aplicativo React para interagir com esse servidor:<\/p>\n Neste c\u00f3digo, a rota est\u00e1 definida como Em seguida, o m\u00e9todo Ap\u00f3s gerar a imagem, voc\u00ea extrai os dados da imagem da resposta e os armazena na vari\u00e1vel Em caso de erros durante esse processo, o c\u00f3digo no bloco Agora o servidor est\u00e1 pronto! Vamos especificar o comando que ser\u00e1 usado para executar nosso servidor no objeto Agora, quando voc\u00ea executar No arquivo App.jsx<\/strong>, voc\u00ea criar\u00e1 uma fun\u00e7\u00e3o Na fun\u00e7\u00e3o No c\u00f3digo acima, voc\u00ea verifica se o par\u00e2metro Em seguida, use o m\u00e9todo Quando o estado \u00c9 assim que voc\u00ea ver\u00e1 o arquivo App.jsx<\/strong> completo:<\/p>\n At\u00e9 agora, voc\u00ea criou com sucesso um aplicativo React que interage com o Node.js, o que o torna um aplicativo full-stack. Agora vamos implantar esse aplicativo na Kinsta.<\/p>\n Primeiro, configure o servidor para servir os arquivos est\u00e1ticos gerados durante o processo de build do aplicativo React. Para isso, voc\u00ea deve importar o m\u00f3dulo Quando voc\u00ea executar o comando Antes de implementar o c\u00f3digo no provedor Git que voc\u00ea escolheu (Bitbucket<\/a>, GitHub<\/a> ou GitLab<\/a>), lembre-se de modificar a URL de solicita\u00e7\u00e3o HTTP no arquivo App.jsx<\/strong>. Altere Por fim, no seu arquivo package.json<\/strong>, adicione um comando de script para o servidor Node.js que seria usado para a implanta\u00e7\u00e3o:<\/p>\n Em seguida envie seu c\u00f3digo para o provedor Git de sua prefer\u00eancia e implantar seu reposit\u00f3rio na Kinsta seguindo estas etapas:<\/p>\n![\"Gerador](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/09\/ai-image-generator-demo.gif\")
Pr\u00e9-requisitos<\/h3>\n
\n
O que \u00e9 API OpenAI DALL-E?<\/h2>\n
![\"O](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/09\/create-openai-api-secret-key.jpg\")
Configurando o ambiente de desenvolvimento<\/h2>\n
\n
git checkout starter-files<\/code>.<\/li>\nnpm install<\/code>.<\/li>\n<\/ol>\nnpm run start<\/code>. Isso torna o projeto dispon\u00edvel em http:\/\/localhost:3000\/<\/a>.<\/p>\n![\"Interface](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/09\/ai-image-generator-ui.jpg\")
Entendendo os arquivos de projeto<\/h3>\n
\n
\n
Entendendo a pasta Utils<\/h4>\n
import { randomPrompts } from '..\/data';\n\nexport const getRandomPrompt = () => {\n const randomIndex = Math.floor(Math.random() * randomPrompts.length);\n const randomPrompt = randomPrompts[randomIndex];\n\n return randomPrompt;\n}<\/code><\/pre>\nimport FileSaver from 'file-saver';\nimport { v4 as uuidv4 } from 'uuid';\n\nexport async function downloadImage(photo) {\n const _id = uuidv4();\n FileSaver.saveAs(photo, `download-${_id}.jpg`);\n}<\/code><\/pre>\nEntendendo os componentes<\/h4>\n
generateImage<\/code> adicionada como um evento onClick<\/code> ao bot\u00e3o Generate Image<\/strong>.<\/p>\nhandleRandomPrompt<\/code>, que usa a fun\u00e7\u00e3o getRandomPrompt<\/code> que voc\u00ea j\u00e1 configurou. Quando voc\u00ea clica no \u00edcone, ela obt\u00e9m um prompt aleat\u00f3rio e atualiza o estado com ele:<\/p>\nconst handleRandomPrompt = () => {\n const randomPrompt = getRandomPrompt();\n setPrompt(randomPrompt)\n}<\/code><\/pre>\nEntendendo o arquivo App.jsx<\/h4>\n
\n
isGenerating<\/code>: Mant\u00e9m o controle sobre se uma imagem est\u00e1 sendo gerada no momento. Por padr\u00e3o, ele \u00e9 definido como falso.<\/li>\ngeneratedImage<\/code>: Esse estado armazena informa\u00e7\u00f5es sobre a imagem que foi gerada.<\/li>\n<\/ul>\ndownloadImage<\/code> \u00e9 importada, permitindo que voc\u00ea acione o download da imagem gerada quando clicar no bot\u00e3o Download<\/strong>:<\/p>\n<button\n className=\"btn\"\n onClick={() => downloadImage(generatedImage.photo)}\n><\/code><\/pre>\nGera\u00e7\u00e3o de imagens com a API DALL-E da OpenAI<\/h2>\n
npm i express cors openai<\/code><\/pre>\nnpm i -D dotenv nodemon<\/code><\/pre>\n\n
\/\/ Import the necessary libraries\nconst express = require('express');\nconst cors = require('cors');\nrequire('dotenv').config();\nconst OpenAI = require('openai');\n\n\/\/ Create an instance of the Express application\nconst app = express();\n\n\/\/ Enable Cross-Origin Resource Sharing (CORS)\napp.use(cors());\n\n\/\/ Configure Express to parse JSON data and set a data limit\napp.use(express.json({ limit: '50mb' }));\n\n\/\/ Create an instance of the OpenAI class and provide your API key\nconst openai = new OpenAI({\n apiKey: process.env.OPENAI_API_KEY,\n});\n\n\/\/ Define a function to start the server\nconst startServer = async () => {\n app.listen(8080, () => console.log('Server started on port 8080'));\n};\n\n\/\/ Call the startServer function to begin listening on the specified port\nstartServer();<\/code><\/pre>\nconst app = express();<\/code>. Depois disso, habilite o CORS. Em seguida, o Express \u00e9 configurado para processar dados JSON de entrada, especificando um limite de tamanho de dados de 50mb<\/code>.<\/p>\nOPENAI_API_KEY<\/code>. Por fim, voc\u00ea define uma fun\u00e7\u00e3o ass\u00edncrona startServer<\/code> e a chama para colocar o servidor em movimento.<\/p>\napp.post('\/api', async (req, res) => {\n try {\n const { prompt } = req.body;\n const response = await openai.images.generate({\n prompt,\n n: 1,\n size: '1024x1024',\n response_format: 'b64_json',\n });\n const image = response.data[0].b64_json;\n res.status(200).json({ photo: image });\n } catch (error) {\n console.error(error);\n }\n});<\/code><\/pre>\n\/api<\/code> e foi projetada para lidar com solicita\u00e7\u00f5es POST de entrada. Dentro da fun\u00e7\u00e3o de callback da rota, voc\u00ea recebe os dados enviados do seu aplicativo React usando req.body<\/code> \u2014 especificamente o valor prompt<\/code>.<\/p>\nimages.generate<\/code> da biblioteca OpenAI \u00e9 chamado. Esse m\u00e9todo recebe o prompt fornecido e gera uma imagem em resposta. Par\u00e2metros como n<\/code> determinam o n\u00famero de imagens a serem geradas (aqui, apenas uma), size<\/code> especifica as dimens\u00f5es da imagem e response_format<\/code> indica o formato no qual a resposta deve ser fornecida (b64_json<\/code>, neste caso).<\/p>\nimage<\/code>. Em seguida, voc\u00ea envia uma resposta JSON de volta ao aplicativo React com os dados da imagem gerada, definindo o status HTTP como 200<\/code> (indicando sucesso) usando res.status(200).json({ photo: image })<\/code>.<\/p>\ncatch<\/code> \u00e9 executado, registrando o erro no console para depura\u00e7\u00e3o.<\/p>\nscripts<\/code> do arquivo package.json:<\/p>\n\"scripts\": {\n \"dev:frontend\": \"react-scripts start\",\n \"dev:backend\": \"nodemon server.js\",\n \"build\": \"react-scripts build\",\n},<\/code><\/pre>\nnpm run dev:backend<\/code>, seu servidor ser\u00e1 iniciado em http:\/\/localhost:8080\/<\/a>, ao passo que, se voc\u00ea executar npm run dev:frontend<\/code>, seu aplicativo React ser\u00e1 iniciado em http:\/\/localhost:3000\/. Certifique-se de que ambos estejam sendo executados em terminais diferentes.<\/p>\nFazer solicita\u00e7\u00f5es HTTP do React para o servidor Node.js<\/h2>\n
generateImage<\/code> que \u00e9 acionada quando o bot\u00e3o Generate Image<\/strong> \u00e9 clicado no componente Form.jsx<\/strong>. Essa fun\u00e7\u00e3o aceita dois par\u00e2metros: prompt<\/code> e setPrompt<\/code> do componente Form.jsx<\/strong>.<\/p>\ngenerateImage<\/code>, voc\u00ea far\u00e1 uma solicita\u00e7\u00e3o HTTP POST para o servidor Node.js:<\/p>\nconst generateImage = async (prompt, setPrompt) => {\n if (prompt) {\n try {\n setIsGenerating(true);\n const response = await fetch(\n 'http:\/\/localhost:8080\/api',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({\n prompt,\n }),\n }\n );\n const data = await response.json();\n setGeneratedImage({\n photo: `data:image\/jpeg;base64,${data.photo}`,\n altText: prompt,\n });\n } catch (err) {\n alert(err);\n } finally {\n setPrompt('');\n setIsGenerating(false);\n }\n } else {\n alert('Please provide proper prompt');\n }\n};<\/code><\/pre>\nprompt<\/code> tem um valor e, em seguida, define o estado isGenerating<\/code> como true<\/code>, pois a opera\u00e7\u00e3o est\u00e1 sendo iniciada. Isso far\u00e1 com que o loader seja exibido na tela porque, no arquivo App.jsx<\/strong>, temos este c\u00f3digo que controla a exibi\u00e7\u00e3o do loader:<\/p>\n{isGenerating && (\n <div> className=\"loader-comp\">\n <img src={Loader} alt=\"\" className='loader-img' \/>\n <\/div>\n)}<\/code><\/pre>\nfetch()<\/code> para fazer uma solicita\u00e7\u00e3o POST ao servidor usando http:\/\/localhost:8080\/api<\/a> \u2014 \u00e9 por isso que instalamos o CORS, pois estamos interagindo com uma API em outra URL. Usamos o prompt como o corpo da mensagem. Em seguida, extraia a resposta retornada do servidor Node.js e defina-a como o estado generatedImage<\/code>.<\/p>\ngeneratedImage<\/code> tiver um valor, a imagem ser\u00e1 exibida:<\/p>\n{generatedImage.photo ? (\n <img\n src={generatedImage.photo}\n alt={generatedImage.altText}\n className=\"imgg ai-img\"\n \/>\n) : (\n <img\n src={preview}\n alt=\"preview\"\n className=\"imgg preview-img\"\n \/>\n)}<\/code><\/pre>\nimport { Form, Footer, Header } from '.\/components';\nimport preview from '.\/assets\/preview.png';\nimport Loader from '.\/assets\/loader-3.gif'\nimport { downloadImage } from '.\/utils';\nimport { useState } from 'react';\n\nconst App = () => {\n const [isGenerating, setIsGenerating] = useState(false);\n const [generatedImage, setGeneratedImage] = useState({\n photo: null,\n altText: null,\n });\n\n const generateImage = async (prompt, setPrompt) => {\n if (prompt) {\n try {\n setIsGenerating(true);\n const response = await fetch(\n 'http:\/\/localhost:8080\/api',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({\n prompt,\n }),\n }\n );\n const data = await response.json();\n setGeneratedImage({\n photo: `data:image\/jpeg;base64,${data.photo}`,\n altText: prompt,\n });\n } catch (err) {\n alert(err);\n } finally {\n setPrompt('');\n setIsGenerating(false);\n }\n } else {\n alert('Please provide proper prompt');\n }\n };\n\n return (\n <div className='container'>\n <Header \/>\n <main className=\"flex-container\">\n <Form generateImage={generateImage} prompt={prompt} \/>\n <div className=\"image-container\">\n {generatedImage.photo ? (\n <img\n src={generatedImage.photo}\n alt={generatedImage.altText}\n className=\"imgg ai-img\"\n \/>\n ) : (\n <img\n src={preview}\n alt=\"preview\"\n className=\"imgg preview-img\"\n \/>\n )}\n {isGenerating && (\n <div className=\"loader-comp\">\n <img src={Loader} alt=\"\" className='loader-img' \/>\n <\/div>\n )}\n <button\n className=\"btn\"\n onClick={() => downloadImage(generatedImage.photo)}\n >\n Download\n <\/button>\n <\/div>\n <\/main>\n <Footer \/>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\nImplantar seu aplicativo full-stack na Kinsta<\/h2>\n
path<\/code> e us\u00e1-lo para servir os arquivos est\u00e1ticos:<\/p>\nconst path = require('path');\n\napp.use(express.static(path.resolve(__dirname, '.\/build')));<\/code><\/pre>\nnpm run build && npm run dev:backend<\/code>, seu aplicativo React de full-stack ser\u00e1 carregado em http:\/\/localhost:8080\/. Isso ocorre porque o aplicativo React \u00e9 compilado em arquivos est\u00e1ticos<\/a> dentro da pasta build<\/strong>. Esses arquivos s\u00e3o ent\u00e3o incorporados ao seu servidor Node.js como um diret\u00f3rio est\u00e1tico. Consequentemente, quando voc\u00ea executar o servidor Node, o aplicativo estar\u00e1 acess\u00edvel.<\/p>\nhttp:\/\/localhost:8080\/api<\/code> para \/api<\/code>, pois a URL ser\u00e1 anexada.<\/p>\n\"scripts\": {\n \/\/ \u2026\n \"start\": \"node server.js\",\n},<\/code><\/pre>\n