A cutting-edge AI-powered web application for visualizing interior design products on room photos. Upload room images, let AI detect surfaces (walls, floors, ceilings), and apply realistic product visualizations with professional tools.

• SegFormer Integration: State-of-the-art transformer-based semantic segmentation
• Room Architecture Detection: Precise walls, floors, ceilings, windows, doors, furniture detection
• High-Quality Masks: Improved mask generation with proper opacity and clean edges
• Multi-Scale Processing: Hierarchical feature processing for better accuracy
• Real-time Analysis: Optimized inference with GPU/CPU support

• Selection Tools: Select, brush, eraser, lasso, magic wand
• Multi-Surface Support: Apply materials to multiple areas
• Real-time Preview: Live feedback and brush size controls
• Keyboard Shortcuts: Professional workflow shortcuts

• Dynamic Products: Wallpapers, paints, PVC panels
• Realistic Rendering: 3D lighting, perspective correction, material properties
• Customizable Overlays: Adjustable opacity, positioning, layering
• High-Quality Output: Professional visualization results

• Free Storage: Cloudinary/Firebase integration
• Image Optimization: Compression, resizing, caching
• Scalable Architecture: Serverless deployment ready
• Global CDN: Fast worldwide delivery

• Node.js 18+
• Python 3.8+
• Git

git clone https://github.com/DigiconnUnite/PVC_Panel_AI.git
cd PVC_Panel_AI

# Install dependencies
npm install

# Start development server
npm run dev

# Install Python dependencies
pip install -r backend/requirements.txt

# Start backend server
python start_backend.py

• Frontend: http://localhost:3000
• Backend API: http://localhost:8000

ai-room-visualizer/
├── app/                          # Next.js frontend
│   ├── api/                      # API routes
│   ├── layout.tsx               # Root layout
│   ├── page.tsx                 # Home page
│   └── visualizer/              # Visualizer page
├── backend/                      # FastAPI backend
│   ├── app/
│   │   ├── main.py             # FastAPI application
│   │   ├── models/
│   │   │   └── schemas.py       # Pydantic models
│   │   └── services/
│   │       ├── image_service.py        # File upload/processing
│   │       ├── segmentation.py         # AI segmentation
│   │       ├── visualization.py        # Material application
│   │       └── product_service.py      # Product management
│   ├── requirements.txt         # Python dependencies
│   └── README.md               # Backend documentation
├── components/                   # React components
├── public/                       # Static assets
│   ├── products/                # Product images
│   └── uploads/                 # User uploaded images
├── start_backend.py             # Backend startup script
├── test_backend.py              # Backend testing script
├── YOLO_SETUP_GUIDE.md          # YOLO training guide
└── vercel.json                  # Vercel configuration

The backend uses pre-trained SegFormer models for optimal room architecture segmentation.

# Available SegFormer models in backend/app/services/segmentation.py
model_configs = {
    "segformer-b0": {"size": "base-0", "accuracy": 0.85, "params": "3.7M"},   # Fastest
    "segformer-b1": {"size": "base-1", "accuracy": 0.88, "params": "13.7M"},  # Light
    "segformer-b2": {"size": "base-2", "accuracy": 0.90, "params": "27.5M"},  # Default
    "segformer-b3": {"size": "base-3", "accuracy": 0.92, "params": "47.3M"},  # High accuracy
    "segformer-b4": {"size": "base-4", "accuracy": 0.94, "params": "64.0M"},  # Best accuracy
    "segformer-b5": {"size": "base-5", "accuracy": 0.95, "params": "84.7M"}   # Maximum accuracy
}

# Hugging Face Model Identifiers:
# nvidia/segformer-b0-finetuned-ade-512-512
# nvidia/segformer-b1-finetuned-ade-512-512
# nvidia/segformer-b2-finetuned-ade-512-512
# nvidia/segformer-b3-finetuned-ade-512-512
# nvidia/segformer-b4-finetuned-ade-512-512
# nvidia/segformer-b5-finetuned-ade-512-512

• Wall (0): Main wall surfaces
• Floor (1): Floor surfaces
• Ceiling (2): Ceiling surfaces
• Window (3): Window areas
• Door (4): Door areas
• Furniture (5): Furniture objects
• Background (6): Other areas

1. Images: Place in public/products/{category}/
2. Thumbnails: Auto-generated or manual in thumbs/ subfolder
3. Metadata: Update backend/app/main.py products endpoint

• Wallpapers: /products/wallpapers/
• Paints: /products/paints/
• PVC Panels: /products/pvc-panels/

# Install SDK
npm install cloudinary

# Configure environment
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Install SDK
npm install firebase

# Configure in .env.local
FIREBASE_API_KEY=your_api_key
FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com

1. Connect Repository: Import to Vercel
2. Auto-Deployment: Vercel detects Next.js automatically
3. Environment Variables: Set in Vercel dashboard
4. Deploy: Automatic on git push

# Build frontend
npm run build

# Start production server
npm start

# Backend (separate server)
uvicorn backend.app.main:app --host 0.0.0.0 --port 8000

# .env.local
NEXT_PUBLIC_API_URL=http://localhost:8000
PYTHONPATH=backend

# Production
VERCEL_URL=https://your-app.vercel.app

{
  "regions": ["iad1"],
  "env": {
    "PYTHONPATH": "backend"
  }
}

# Frontend
npm run dev          # Development server
npm run build        # Production build
npm run start        # Production server
npm run lint         # Code linting

# Backend
python start_backend.py    # Start FastAPI server
python test_backend.py     # Test backend functionality

# Testing
curl http://localhost:8000/health          # Health check
curl http://localhost:8000/api/products    # Products list
curl http://localhost:8000/api/test-segmentation  # Test AI

# Test segmentation
curl http://localhost:8000/api/test-segmentation

# Health check
curl http://localhost:8000/health

• Compression: Automatic image optimization
• Caching: Browser and CDN caching
• Lazy Loading: Progressive image loading
• WebP Support: Modern image formats

• Model Selection: segformer-b4 for optimal accuracy/speed balance
• Transformer Architecture: Hierarchical feature processing
• GPU Acceleration: CUDA support with automatic device selection
• Semantic Segmentation: High-quality mask generation with proper opacity
• Multi-Scale Processing: Efficient handling of different image sizes

• CORS Configuration: Proper origin validation
• Input Validation: File type and size limits
• Rate Limiting: Request throttling
• Error Handling: Secure error responses

• File Upload Security: Type validation
• Secure Storage: Encrypted cloud storage
• Access Control: Proper authentication
• Privacy Compliance: GDPR considerations

1. Backend Connection Error

   # Check backend is running
   curl http://localhost:8000/health
   
   # Start backend
   python start_backend.py

2. Model Loading Issues

   # Check model files exist
   ls backend/models/
   
   # Reinstall dependencies
   pip install -r backend/requirements.txt

3. Vercel Deployment Issues

   • Check vercel.json configuration
   • Verify environment variables
   • Check build logs in Vercel dashboard

4. Memory Issues

   # Use smaller SegFormer model
   model = "segformer-b0"  # Use base-0 instead of b2
   
   # Clear GPU cache
   torch.cuda.empty_cache()

• API Response Times: Backend performance
• Model Accuracy: Detection success rates
• User Interactions: Feature usage analytics
• Error Rates: System reliability monitoring

• mIoU Scores: Mean Intersection over Union for semantic segmentation
• Inference Time: Processing speed per image
• Memory Usage: Resource consumption and model size
• Segmentation Quality: Mask accuracy and edge detection
• Class-wise Performance: Accuracy per room architecture element

1. Fork the repository
2. Create feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open Pull Request

• Follow TypeScript best practices
• Write comprehensive tests
• Update documentation
• Ensure cross-browser compatibility

This project is licensed under the MIT License - see the LICENSE file for details.

• Hugging Face for SegFormer models and transformers library
• NVIDIA for SegFormer architecture and research
• Meta for Segment Anything Model
• PyTorch for deep learning framework
• Next.js for React framework
• FastAPI for Python web framework

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: Wiki

Built with ❤️ for interior design professionals and homeowners

🎨 Transform spaces with AI-powered visualization! 🏠✨