Aplicacao web para converter imagens raster (PNG, JPG, etc) em vetores de alta qualidade usando a API do Vectorizer.AI.
- Upload de imagens ou input via URL
- 4 modos de processamento:
- Production: Qualidade maxima (1.0 credito)
- Preview: Previa com marca dagua (0.2 credito)
- Test: Teste gratuito com marca dagua
- Test Preview: Previa de teste gratuita
- 5 formatos de saida: SVG, EPS, PDF, DXF, PNG
- Status da conta em tempo real (plano, creditos)
- Exibicao de creditos calculados no modo test
- Download e visualizacao no navegador
- Configuracao por variaveis de ambiente (backend)
- Interface moderna e responsiva
- React 18 + TypeScript
- Vite
- Tailwind CSS
- Lucide React (icones)
- Vectorizer.AI API
npm install
Crie um arquivo .env na raiz do projeto:
VECTORIZER_API_ID=seu_api_id VECTORIZER_API_SECRET=seu_api_secret # Autenticacao da interface (opcional) AUTH_USERNAME=seu_usuario AUTH_PASSWORD=sua_senha
Se AUTH_USERNAME e AUTH_PASSWORD estiverem configurados, a aplicacao exigira login para acessar. Isso e util para proteger a interface em ambientes de producao.
- Acesse vectorizer.ai/api
- Crie uma conta ou faca login
- Copie seu API ID e API Secret
cd server
npm install
npm run startEm outro terminal:
cd ..
npm install
npm run devnpm run build
| Variavel | Descricao | Obrigatorio |
|---|---|---|
AUTH_USERNAME |
Usuario para login na interface | Opcional* |
AUTH_PASSWORD |
Senha para login na interface | Opcional* |
VECTORIZER_API_ID |
API ID do Vectorizer.AI | Obrigatorio |
VECTORIZER_API_SECRET |
API Secret do Vectorizer.AI | Obrigatorio |
*Notas:
- Se
AUTH_USERNAMEeAUTH_PASSWORDnao forem configurados, a interface sera acessivel sem login. - As credenciais sao lidas pelo backend. O frontend nao solicita nem armazena API ID/Secret.
- Crie um arquivo
.envna raiz do projeto:
AUTH_USERNAME=admin AUTH_PASSWORD=sua_senha_segura VECTORIZER_API_ID=seu_api_id VECTORIZER_API_SECRET=seu_api_secret
- Execute:
cd docker
docker compose up -d --buildcd docker
docker build -f Dockerfile -t vectorizer ..
docker run -d -p 3000:3000 \
-e AUTH_USERNAME=admin \
-e AUTH_PASSWORD=sua_senha_segura \
-e VECTORIZER_API_ID=seu_api_id \
-e VECTORIZER_API_SECRET=seu_api_secret \
vectorizercd docker
docker build -f Dockerfile -t vectorizer ..
docker run -d -p 3000:3000 --env-file ../.env vectorizerA aplicacao estara disponivel em http://localhost:3000
cd docker
docker compose downdocker/
├── Dockerfile # Build completo (frontend + backend)
├── docker-compose.yml # Orquestracao local
├── nginx.conf # Proxy e frontend
└── supervisord.conf # Nginx + API
.github/workflows/
└── docker-image.yml # Build e push da imagem no CI
server/
├── index.js # API proxy para Vectorizer.AI
└── package.json
src/
├── components/
│ ├── Header.tsx # Cabecalho com status da conta
│ ├── ImageUploader.tsx # Upload e URL de imagem
│ ├── ModeSelector.tsx # Selecao do modo de processamento
│ ├── FormatSelector.tsx # Selecao do formato de saida
│ └── ResultPanel.tsx # Exibicao do resultado
├── hooks/
│ └── useAuth.ts # Login opcional da interface
├── lib/
│ └── vectorizer.ts # Integracao com API
├── types.ts # Tipos TypeScript
├── App.tsx # Componente principal
├── main.tsx # Entry point
└── index.css # Estilos globais
A aplicacao usa a API oficial do Vectorizer.AI:
- Base URL:
https://api.vectorizer.ai/api/v1 - Autenticacao: Basic Auth com API ID e Secret
MIT