Aplicação web completa para aceleração de vídeos com interface moderna e processamento em tempo real.
Turbo Frame é uma aplicação full-stack que permite acelerar vídeos de forma rápida e intuitiva. A aplicação consiste em um frontend React moderno com interface cyberpunk e um backend FastAPI robusto que processa vídeos usando FFmpeg.
- 🎬 Interface Moderna: UI cyberpunk com design responsivo
- ⚡ Aceleração de Vídeos: Processa vídeos com fator de aceleração configurável (0.1x a 10x)
- 📊 Progresso em Tempo Real: Acompanhe o processamento com feedback visual em tempo real via Server-Sent Events (SSE)
- 🔄 Processamento Assíncrono: Suporta múltiplos usuários processando vídeos simultaneamente
- 📥 Download Automático: Baixe o vídeo processado diretamente pela interface
- 🎨 Comparação Visual: Compare o vídeo original com o resultado processado
- 🏥 Health Check: Monitoramento de status da API em tempo real
- React 19 - Framework UI
- TypeScript - Tipagem estática
- Vite - Build tool e dev server
- Tailwind CSS - Estilização
- FastAPI - Framework web assíncrono
- FFmpeg - Processamento de vídeo
- Python 3.11 - Linguagem backend
- Uvicorn - Servidor ASGI
- Docker - Containerização
- Docker Compose - Orquestração de containers
- Docker (versão 20.10+)
- Docker Compose (versão 2.0+)
- Node.js (versão 18+, apenas para desenvolvimento do frontend)
A forma mais fácil de iniciar toda a aplicação é usando o script fornecido:
./scripts/start.shEste script irá:
- ✅ Verificar se Docker e Docker Compose estão instalados
- ✅ Verificar se Node.js está disponível
- ✅ Construir e iniciar os containers Docker
- ✅ Instalar dependências do frontend (se necessário)
- ✅ Iniciar o frontend em modo desenvolvimento
- ✅ Exibir todas as URLs de acesso
docker-compose up --buildcd app
npm install # Apenas na primeira vez
npm run devApós iniciar a aplicação, você terá acesso a:
| Serviço | URL | Descrição |
|---|---|---|
| 🎬 Frontend | http://localhost:3000 | Interface principal da aplicação |
| 🔌 API | http://localhost:3001 | API REST principal |
| 📚 Swagger Docs | http://localhost:3001/docs | Documentação interativa da API |
| 📖 ReDoc | http://localhost:3001/redoc | Documentação alternativa da API |
| ❤️ Health Check | http://localhost:3001/health | Verificação de saúde da API |
Retorna informações sobre a API.
Verifica a saúde da API e se o FFmpeg está disponível.
Acelera um vídeo enviado.
Parâmetros:
file: Arquivo de vídeo (multipart/form-data)fator_aceleracao: Fator de aceleração (query parameter, padrão: 1.1)use_sse: Setrue, retorna job_id para acompanhar progresso via SSE (query parameter, padrão: false)
Resposta (use_sse=false):
- Retorna o arquivo de vídeo processado diretamente
Resposta (use_sse=true):
{
"job_id": "uuid-do-job"
}Retorna o status atual de um job de processamento.
Stream de progresso via Server-Sent Events (SSE) para acompanhar o processamento em tempo real.
Baixa o vídeo processado após a conclusão.
turbo-frame/
├── app/ # Frontend React + Backend FastAPI
│ ├── components/ # Componentes React
│ │ ├── Dropzone.tsx # Componente de upload
│ │ └── Icons.tsx # Ícones customizados
│ ├── services/ # Serviços do frontend
│ │ └── api.ts # Cliente API
│ ├── scripts/ # Scripts Python
│ │ └── start.py # Script de inicialização
│ ├── App.tsx # Componente principal
│ ├── main.py # Aplicação FastAPI
│ ├── utils.py # Funções de processamento FFmpeg
│ ├── package.json # Dependências do frontend
│ └── vite.config.ts # Configuração Vite
├── scripts/ # Scripts de inicialização
│ └── start.sh # Script principal de start
├── uploads/ # Vídeos enviados (criado automaticamente)
├── outputs/ # Vídeos processados (criado automaticamente)
├── Dockerfile # Imagem Docker do backend
├── docker-compose.yml # Configuração Docker Compose
├── requirements.txt # Dependências Python
└── README.md # Este arquivo
Edite o arquivo docker-compose.yml:
ports:
- "SUA_PORTA:8000"Nota: A porta interna do container permanece 8000. A porta externa (3001) é mapeada no docker-compose.
Edite o arquivo app/vite.config.ts:
server: {
port: SUA_PORTA,
host: '0.0.0.0',
}Os limites padrão são:
- Fator de aceleração mínimo: > 0
- Fator de aceleração máximo: ≤ 10
- Acesse o Frontend: Abra http://localhost:3000 no navegador
- Selecione um Vídeo: Arraste e solte ou clique para selecionar um arquivo de vídeo
- Configure a Velocidade: Use o slider ou digite o fator de aceleração (ex: 1.5x, 2x)
- Inicie o Processamento: Clique em "INICIAR PROCESSO"
- Acompanhe o Progresso: Veja o progresso em tempo real na barra de progresso
- Baixe o Resultado: Após concluir, baixe o vídeo processado
Pressione Ctrl+C no terminal onde o script está rodando.
# Parar containers Docker
docker-compose down
# Parar frontend
# Pressione Ctrl+C no terminal do frontendPara remover também os volumes:
docker-compose down -vO sistema suporta múltiplos usuários processando vídeos simultaneamente:
- ✅ Cada usuário recebe um
job_idúnico - ✅ Processamento em threads separadas
- ✅ Arquivos isolados por usuário
- ✅ Progresso individual via SSE
- Os arquivos temporários são automaticamente limpos após 60 segundos do download
- A aplicação aceita qualquer formato de vídeo suportado pelo FFmpeg
- O vídeo de saída será no formato MP4
- O processamento pode demorar dependendo do tamanho e duração do vídeo
- Múltiplos processamentos simultâneos podem impactar a performance do sistema
# Verificar logs do container
docker logs video-accelerate-api
# Reiniciar container
docker-compose restart# Verificar se a porta 3000 está disponível
# Verificar logs do npm no terminal onde foi iniciado- Verifique se o FFmpeg está instalado no container:
docker exec video-accelerate-api ffmpeg -version - Verifique os logs:
docker logs video-accelerate-api - Certifique-se de que o arquivo é um vídeo válido
Este projeto é de código aberto.
Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou pull requests.
Desenvolvido com ⚡ por Turbo Frame