Resultado final (tamanho de imagens modificado para melhor visualização)
- Visão Geral
- Previews
- Tecnologias utilizadas
- Instrução de instalação
- Instrução de uso
- AI-photos-community endpoints
- Fluxo de autenticação
- Licença
O sistema desenvolvido é uma plataforma que funciona como uma "comunidade de fotos", onde os usuários podem gerar e compartilhar imagens geradas por uma IA de forma colaborativa. Para acessar as funcionalidades, os usuários precisam se autenticar por meio de um sistema de cadastro simples, sign-up e login (registrar e entrar), que inclui a verificação de e-mail e a utilização de tokens JWT. Após a autenticação, os usuários conseguem gerar imagens utilizando a API da Stability AI, integrada ao sistema.
O projeto enfrenta uma limitação relacionada ao plano padrão da API da Stability AI, que permite a geração de apenas 8 imagens por usuário, álem de possuir um limite diário de requisições.
Este projeto teve como objetivo principal reunir todos os meus conhecimentos adquiridos até o momento e aplicá-los de maneira prática.
📄 Documentação das rotas com Scalar API (Clique para expandir)
📷 Página inicial (Clique para expandir)
📷 Página para se registrar (mostrando erros da validação) (Clique para expandir)
📷 Página de Login, sem estar registrado (Clique para expandir)
✉️ Mensagens de e-mail enviado (Clique para expandir)
✉️ E-mail recebido (Clique para expandir)
📷 Página de login após e-mail confirmado (com erro de validação) (Clique para expandir)
📷 Página do chat após fazer login com sucesso (Clique para expandir)
🎥 Simulação da geração de uma imagem (Clique para expandir)
generation-preview.mp4
Insalador de pacotes:
Important
Possuir uma "senha de app" do google
Tutorial para criar uma senha de app
-
Um e-mail comum ou para testes
-
Criar uma conta (ou entrar com e-mail do google) na Stability AI e anotar a API_KEY do perfil. Acessar Stability AI
Caution
Para gerar imagens utilizando a API da Stability AI, o usuário precisa de "créditos". Todo novo usuário
recebe 25 créditos iniciais para geração de imagens. Além disso, existe um limite de requisições que podem
ser feitas para o servidor em um determinado período de tempo (Esse limite é importante para evitar sobrecarga
no servidor e garantir que todos os usuários tenham acesso justo aos recursos). Com o modelo Stable Image Core,
(que está sendo utilizado) que custa 3 créditos por imagem, é possível gerar 8 imagens com os 25 créditos iniciais.
Para a instalação dos frameworks, middlewares e dependências que possibilitaram a criação do Sistema
é necessário que você possua as seguintes ferramentas:
-
Node.js - Tutorial de instalação
-
npm - Tutorial de instalação
-
Mongo DB Atlas - Tutorial de configuração
Para fazer requisições e testar as respostas da API:
Postman - Tutorial de instalação
Tip
Também é possível fazer requisições pela linha de comando.
Clique aqui para aprender a fazer requisições pelo terminal
No Terminal, certifique de que você está na pasta onde vai ficar o repositório
repositorios\clonados
git clone https://github.com/henrygoncalvess/AI-photos-community.gitrepositorios\clonados\AI-photos-community\back-end
npm install2. crie o arquivo .env na raiz do projeto.
configure as variáveis de acordo com seus dados.
utilize a senha de aplicativo que foi criada em Tutorial para criar uma senha de app
repositorios\clonados\AI-photos-community\back-end
EMAIL = "seu-email@gmail.com"
PASSWORD_EMAIL = "sua senha de aplicativo"
URI_MONGODB = "sua string de conexão do cluster"
DATABASE = "nome do banco de dados"
COLLECTION =
8000
"nome da coleção dentro do banco de dados"
JWT_SECRET = "uma senha secreta"
STABILITY_API_KEY = "sua api_key no perfil do Stability AI"repositorios\clonados\AI-photos-community\front-end
npm installrepositorios\clonados\AI-photos-community\back-end
npm run devrepositorios\clonados\AI-photos-community\front-end
npm run devNo Postman ou na linha de comando
teste manualmente as respostas da API do sistema seguindo os endpoints abaixo.
Tip
em seu navegador, acesse http://localhost:3000/docs para acessar a documentação das rotas
---
title: Fluxo de Autenticação
---
sequenceDiagram
autonumber
actor c as client
participant s as server
note over c,s: /sign-up
c ->> s: nome, email e senha válidos
activate s
s -->> c: cria um token com o nome e envia por e-mail <br> para se verificar na rota "/login?token=abc"
deactivate s
s ->> s: criação do hash da senha
s ->> s: salva informações no banco de dados
note over c,s: /login
create participant m as middleware
c ->> m: clica no link do email e é redirecionado para <br> "/login" com o token recebido
activate m
alt token inválido
m -->> s: erro avisando que o usuário já expirou <br> ou não se registrou ainda
deactivate m
activate s
s -->> c: retorna o erro e mostra mensagem na tela
deactivate s
else token válido
m -->> s: retorna o nome do usuário
activate s
s -->> c: retorna o nome, email e id do usuário
deactivate s
activate c
c -->> c: armazena no local storage
deactivate c
destroy m
s -x m: fim da verificação
end
note over c,s: /login
c ->> s: senha
activate s
s ->> s: verifica no banco de dados se a senha está correta
deactivate s
alt senha incorreta
s -->> c: erro
else senha correta
s -->> c: autentica e redireciona o usuário para "/chat"
end
note over c,s: /chat
c ->> s: envia email
activate s
s ->> s: verifica se o usuário já gerou alguma imagem
deactivate s
alt já gerou
s -->> c: dados de todas as imagens, incluindo <br> quem gerou e o que foi pedido
else não gerou
s -->> c: avisa que não gerou e é mostrado <br> a tela de geração com IA
end
Este projeto está licenciado sob a MIT License.
Feito com ❤️ por Henry Gonçalves
Deixe uma ⭐ no repositório se ele for útil para você!