Uma aplicação web moderna e intuitiva para realizar troca de rostos (face-swap) utilizando inteligência artificial. Com interface futurista em estética cyberpunk, a aplicação oferece uma experiência imersiva e de fácil uso.
- Interface Cyberpunk: Design moderno com estética neon rosa e ciano em fundo preto profundo
- Upload Duplo: Carregue duas imagens (origem e destino) com preview em tempo real
- Processamento em Nuvem: Utiliza a API do Replicate para processamento robusto
- Feedback Visual: Indicadores de progresso e status durante o processamento
- Download de Resultados: Baixe a imagem processada em alta qualidade
- Autenticação Segura: Integração com OAuth Manus para segurança
- Responsivo: Funciona perfeitamente em desktop, tablet e mobile
- Em Português: Interface completamente em português brasileiro
- Node.js 18+ e pnpm
- Conta no Replicate com API token
- Conta Manus para autenticação (opcional para desenvolvimento local)
- Clone o repositório
git clone https://github.com/evybandeca/FaceSwap-AI.git
cd FaceSwap-AI- Instale as dependências
pnpm install- Configure as variáveis de ambiente
Crie um arquivo .env.local na raiz do projeto com as seguintes variáveis:
# Banco de Dados
DATABASE_URL=mysql://user:password@localhost:3306/faceswap_ai
# Autenticação
JWT_SECRET=sua_chave_secreta_aqui
# OAuth Manus
VITE_APP_ID=seu_app_id_aqui
OAUTH_SERVER_URL=https://api.manus.im
VITE_OAUTH_PORTAL_URL=https://manus.im
# Replicate API (OBRIGATÓRIO)
# Obtenha em: https://replicate.com/account/api-tokens
REPLICATE_API_TOKEN=r8_sua_chave_aqui
# Manus APIs (Forge)
BUILT_IN_FORGE_API_URL=https://api.manus.im
BUILT_IN_FORGE_API_KEY=sua_chave_forge_aqui
VITE_FRONTEND_FORGE_API_KEY=sua_chave_frontend_aqui
VITE_FRONTEND_FORGE_API_URL=https://api.manus.im
# Informações do Proprietário
OWNER_OPEN_ID=seu_open_id_aqui
OWNER_NAME=Seu Nome
# Ambiente
NODE_ENV=developmentO token mais importante é o REPLICATE_API_TOKEN. Siga estes passos:
- Acesse https://replicate.com/account/api-tokens
- Crie uma nova conta ou faça login
- Copie seu token de API (começa com
r8_) - Cole no arquivo
.env.localcomoREPLICATE_API_TOKEN=r8_seu_token
- Inicie o servidor de desenvolvimento
pnpm dev- Acesse a aplicação
Abra http://localhost:3000 no seu navegador
-
Faça login com sua conta Manus
-
Carregue as imagens:
- Origem: Foto com o rosto que será transferido
- Destino: Foto que receberá o rosto
-
Clique em "Iniciar Face-Swap" e aguarde o processamento
-
Baixe o resultado quando estiver pronto
pnpm build
pnpm startPara obter os melhores resultados ao usar a aplicação:
- Iluminação Similar: Use fotos com iluminação parecida
- Qualidade das Imagens: Prefira imagens de alta qualidade e bem definidas
- Rostos Visíveis: Certifique-se de que os rostos estão claramente visíveis
- Ângulos Similares: Rostos em ângulos e direções de olhar similares funcionam melhor
- Tamanho das Imagens: Máximo 10MB por imagem
- Evite Obstruções: Evite óculos, chapéus ou outras obstruções que cubram o rosto
- React 19: Framework UI moderno
- Tailwind CSS 4: Estilização com utilitários
- tRPC: Comunicação type-safe com o backend
- shadcn/ui: Componentes UI reutilizáveis
- Node.js/Express: Servidor web
- tRPC: API RPC type-safe
- Drizzle ORM: Gerenciamento de banco de dados
- Replicate API: Processamento de face-swap
- MySQL/TiDB: Armazenamento de dados de usuários e histórico de face-swaps
FaceSwap-AI/
├── client/ # Frontend React
│ ├── src/
│ │ ├── pages/ # Páginas da aplicação
│ │ ├── components/ # Componentes reutilizáveis
│ │ ├── lib/ # Utilitários e configurações
│ │ ├── App.tsx # Componente raiz
│ │ └── index.css # Estilos globais (tema cyberpunk)
│ └── public/ # Arquivos estáticos
├── server/ # Backend Node.js
│ ├── routers.ts # Procedimentos tRPC
│ ├── db.ts # Funções de banco de dados
│ ├── replicate.ts # Integração com Replicate API
│ ├── storage.ts # Gerenciamento de armazenamento
│ └── _core/ # Configurações internas
├── drizzle/ # Migrações e schema do banco
├── shared/ # Código compartilhado
└── package.json # Dependências do projeto
- Atualizar o schema do banco em
drizzle/schema.ts - Gerar migrations:
pnpm drizzle-kit generate - Aplicar migrations via dashboard ou SQL
- Adicionar procedimentos tRPC em
server/routers.ts - Criar componentes UI em
client/src/pages/ouclient/src/components/ - Escrever testes em
server/*.test.ts
pnpm testpnpm checkpnpm formatA aplicação utiliza um tema cyberpunk customizado. Para modificar as cores:
- Edite as variáveis CSS em
client/src/index.css - Use as cores neon predefinidas:
--neon-pink: Rosa neon (padrão)--neon-cyan: Ciano elétrico--neon-purple: Roxo neon
A aplicação está pronta para deploy em plataformas como:
- Manus: Deploy nativo com suporte completo
- Vercel: Deployment automático
- Railway: Hospedagem com banco de dados
- Render: Hospedagem simples
- Faça push do código para o GitHub
- Conecte o repositório no dashboard Manus
- Configure as variáveis de ambiente
- Deploy automático em cada push
- Verifique se o
REPLICATE_API_TOKENestá configurado corretamente - Certifique-se de que as imagens estão em formato válido (JPG, PNG)
- Verifique se as imagens não excedem 10MB
- Faça login novamente
- Limpe os cookies do navegador
- Verifique se o
OAUTH_SERVER_URLestá correto
- Verifique se o
DATABASE_URLestá correto - Certifique-se de que o banco de dados está rodando
- Verifique as credenciais de acesso
Este projeto está licenciado sob a MIT License - veja o arquivo LICENSE para detalhes.
Contribuições são bem-vindas! Por favor:
- Faça um fork do projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Para suporte, abra uma issue no GitHub ou entre em contato através do email de suporte.
- Replicate pelo modelo de face-swap
- Manus pela plataforma e autenticação
- shadcn/ui pelos componentes UI
- Tailwind CSS pela framework de estilização
Desenvolvido com ❤️ usando React, Node.js e IA