Image to Vectors

A full-stack web application that converts AI-generated images into scalable vector graphics (SVG) using automatic object segmentation.

• Image Upload: Upload AI-generated images (PNG, JPG, WebP)
• Automatic Segmentation: Leverages Meta's SAM 2 (Segment Anything Model) via Replicate API to automatically detect and segment objects
• Object Selection: Preview segmented objects with colored overlays and select which ones to convert
• Quality Presets: Three vectorization quality levels (Simple, Standard, Detailed)
• SVG Conversion: Convert selected objects to high-quality SVG using the Vectorizer library
• Batch Download: Download individual SVGs or all results as a ZIP archive

• Hono - Fast, lightweight web framework with RPC-style type safety
• Sharp - High-performance image processing
• Replicate - SAM 2 API for image segmentation
• @neplex/vectorizer - Image-to-SVG conversion
• Zod - Schema validation

• React 18 - UI framework
• Vite - Build tool
• TanStack Query - Server state management
• Tailwind CSS - Styling
• Radix UI - Accessible UI primitives
• Lucide React - Icons

• pnpm - Package manager
• Turborepo - Monorepo build system
• Biome - Linting and formatting
• TypeScript - Type safety throughout

idd/
├── apps/
│   ├── api/                    # Backend API
│   │   ├── src/
│   │   │   ├── routes/         # API endpoints
│   │   │   │   ├── upload.ts   # Image upload handling
│   │   │   │   ├── segment.ts  # SAM segmentation trigger
│   │   │   │   ├── vectorize.ts# SVG conversion
│   │   │   │   └── download.ts # File download
│   │   │   ├── services/       # Business logic
│   │   │   │   ├── segmentation.ts  # SAM API integration
│   │   │   │   ├── vectorization.ts # SVG conversion
│   │   │   │   ├── imageProcessor.ts# Image manipulation
│   │   │   │   └── storage.ts       # File storage
│   │   │   └── index.ts        # App entry point
│   │   └── temp/               # Temporary file storage
│   └── web/                    # Frontend application
│       ├── src/
│       │   ├── components/     # React components
│       │   │   ├── ImageUploader.tsx
│       │   │   ├── SegmentationOverlay.tsx
│       │   │   ├── ObjectSelector.tsx
│       │   │   ├── QualitySettings.tsx
│       │   │   ├── ResultsGrid.tsx
│       │   │   └── ui/         # shadcn/ui components
│       │   ├── hooks/          # Custom React hooks
│       │   │   ├── useImageUpload.ts
│       │   │   ├── useSegmentation.ts
│       │   │   └── useVectorization.ts
│       │   └── lib/            # Utilities
│       └── index.html
└── packages/
    └── shared/                 # Shared schemas and types
        └── src/
            └── schemas/        # Zod validation schemas

• Node.js >= 20.0.0
• pnpm >= 9.0.0
• Replicate API Token

1. Clone the repository:

   git clone <repository-url>
   cd idd

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   cp apps/api/.env.example apps/api/.env
   cp apps/web/.env.example apps/web/.env

4. Edit apps/api/.env with your Replicate API token:

   PORT=3000
   NODE_ENV=development
   REPLICATE_API_TOKEN=your_replicate_api_token_here

5. Edit apps/web/.env:

   VITE_API_URL=http://localhost:3000

Start both API and Web servers concurrently:

pnpm dev

This will start:

• API server at http://localhost:3000
• Web app at http://localhost:5173

Build all packages for production:

pnpm build

# Lint all packages
pnpm lint

# Format code with Biome
pnpm format

# Check and fix code issues
pnpm check

# Run tests
pnpm test

1. Upload: User uploads an AI-generated image
2. Segment: SAM 2 analyzes and segments the image into individual objects
3. Select: User reviews detected objects with color-coded overlay and selects which to convert
4. Configure: User chooses vectorization quality (Simple/Standard/Detailed)
5. Convert: Selected objects are converted to SVG format
6. Download: User previews and downloads individual SVGs or all as a ZIP

Private - All rights reserved