Image-Mixer

A sophisticated web application for mixing and manipulating Fourier Transform components of images. This tool allows you to load multiple images, analyze their frequency domain representations, and create novel images by combining different Fourier components (magnitude, phase, real, and imaginary parts) from various source images.

🎯 Features

• Multi-Image Processing: Load up to 4 images simultaneously and process them in parallel
• Fourier Transform Analysis: View and manipulate magnitude, phase, real, and imaginary components of images
• Component Mixing: Combine Fourier components from different images using adjustable weights
• Two Mixing Modes:
  • Magnitude/Phase Mode: Mix magnitude and phase components separately
  • Real/Imaginary Mode: Mix real and imaginary components separately
• Region-Based Filtering: Apply mixing to specific frequency regions (inner/outer)
• Dual Output Ports: Generate two different output images with different mixing configurations
• Real-Time Visualization: View component changes with adjustable brightness and contrast
• Asynchronous Processing: Non-blocking image processing with progress tracking
• Auto-Resizing: Automatically resize images to match dimensions ("One Size" rule)

🏗️ Architecture

Backend (Python/Flask)

• backend_api.py: Main API interface coordinating all backend operations
• server.py: Flask REST API server handling HTTP requests
• Classes:
  • ImageProcessor: Handles image loading, FFT computation, and component extraction
  • FourierMixer: Mixes Fourier components from multiple images with advanced filtering
  • ComponentVisualizer: Visualizes Fourier components with normalization

Frontend (React/Vite)

• React 19 with modern hooks
• Zustand for state management
• Tailwind CSS for styling
• Vite for fast development and building
• Modular Component Architecture:
  • ImageViewer: Display and control image components
  • Layout: Main layout and sidebar for controls
  • UI: Reusable UI components (sliders, progress bars)

📋 Prerequisites

• Python 3.8+
• Node.js 16+ and npm
• pip (Python package manager)

🚀 Installation

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Create a virtual environment (recommended):

python -m venv venv
# Windows
venv\Scripts\activate
# Linux/Mac
source venv/bin/activate

3. Install Python dependencies:

pip install -r requirements.txt

Frontend Setup

1. Navigate to the frontend directory:

cd frontend/ft-mixer-frontend

2. Install Node dependencies:

npm install

🎮 Running the Application

Start the Backend Server

From the backend directory:

python server.py

The Flask server will start on http://localhost:5000

Start the Frontend Development Server

From the frontend/ft-mixer-frontend directory:

npm run dev

The Vite development server will start on http://localhost:5173

Access the Application

Open your browser and navigate to http://localhost:5173

📖 Usage Guide

Loading Images

1. Click on any of the 4 input slots
2. Upload an image file (PNG, JPG, etc.)
3. Images are automatically converted to grayscale and resized to match dimensions

Viewing Components

For each input image, you can view:

• Original: The original color image
• Greyscale: Grayscale conversion
• Magnitude: Amplitude of frequency components
• Phase: Phase angle of frequency components
• Real: Real part of complex Fourier transform
• Imaginary: Imaginary part of complex Fourier transform

Mixing Images

1. Select Mixing Mode:

   • Magnitude/Phase: Mix magnitude and phase independently
   • Real/Imaginary: Mix real and imaginary parts independently

2. Adjust Component Weights (0.0 to 1.0):

   • Set weights for each component from each input image
   • Higher weight = more influence from that component

3. Configure Region Filtering (optional):

   • Enable region-based filtering
   • Choose between unified or per-image regions
   • Select inner/outer region for each component
   • Adjust region position and size

4. Select Output Port (1 or 2):

   • Choose which output slot to render the result

5. Click "Mix Images":

   • Processing happens asynchronously
   • Progress bar shows mixing status
   • Result appears in the selected output port

Advanced Features

• Brightness/Contrast Control: Adjust visualization parameters for each component
• Multiple Mixing Configurations: Use two output ports to compare different mixing settings
• Progress Tracking: Monitor long-running operations
• Cancellable Operations: Stop processing if needed

🔧 API Endpoints

Image Upload

POST /upload/<slot_id>
Body: multipart/form-data with 'file' field
Returns: Processed grayscale image data

View Component

GET /view/<slot_id>/<component_type>
Parameters: 
  - slot_id: 0-3 (input slot)
  - component_type: Original, Greyscale, Magnitude, Phase, Real, Imaginary
Returns: Component visualization as base64 image

Start Mixing

POST /mix
Body: JSON with mixing configuration
{
  "mode": "magnitude_phase" | "real_imaginary",
  "weights": { "magnitude": [...], "phase": [...], ... },
  "region": { ... },
  "target_output_port": 1 | 2
}
Returns: Operation status

Get Output

GET /output/<port_id>
Parameters: port_id (1 or 2)
Returns: Mixed output image

Check Progress

GET /progress
Returns: Current processing progress (0-100)

Cancel Operation

POST /cancel
Returns: Cancellation status

📁 Project Structure

Image-Mixer/
├── backend/
│   ├── backend_api.py          # Main API interface
│   ├── server.py               # Flask REST server
│   ├── requirements.txt        # Python dependencies
│   ├── classes/
│   │   ├── image_processor.py  # Image loading and FFT
│   │   ├── fourier_mixer.py    # Component mixing logic
│   │   └── component_visualizer.py  # Visualization utilities
│   └── tests/                  # Unit and integration tests
├── frontend/
│   └── ft-mixer-frontend/
│       ├── src/
│       │   ├── components/     # React components
│       │   ├── store/          # Zustand state management
│       │   └── utils/          # API client utilities
│       ├── package.json        # Node dependencies
│       └── vite.config.js      # Vite configuration
└── README.md

🧪 Testing

Run backend tests:

cd backend
python -m pytest tests/

Available test suites:

• test_image_processor.py: Image loading and FFT operations
• test_fourier_mixer.py: Component mixing logic
• test_component_visualizer.py: Visualization functions
• test_async_operations.py: Asynchronous processing
• test_integration.py: End-to-end workflows
• test_verification.py: System verification

🛠️ Technologies Used

Backend

• NumPy: Numerical computations and FFT
• Pillow (PIL): Image loading and manipulation
• SciPy: Advanced signal processing
• Matplotlib: Visualization support
• Flask: Web framework
• Flask-CORS: Cross-origin resource sharing

Frontend

• React 19: UI framework
• Zustand: State management
• Vite: Build tool and dev server
• Tailwind CSS: Utility-first CSS framework
• Lucide React: Icon library

🔬 How It Works

Fourier Transform Fundamentals

The application leverages the 2D Fourier Transform to decompose images into their frequency components:

1. Forward FFT: Converts spatial domain image to frequency domain
2. Component Extraction: Separates magnitude, phase, real, and imaginary parts
3. Component Mixing: Combines components from different images using weighted averages
4. Inverse FFT: Reconstructs spatial domain image from mixed components

Mixing Process

1. Load images and compute their FFTs
2. Extract desired components (magnitude/phase or real/imaginary)
3. Apply weights to each component from each image
4. Optionally filter by frequency regions
5. Combine weighted components
6. Perform inverse FFT to generate output image
7. Normalize and convert to displayable format

Region Filtering

• Inner Region: Low frequency components (smooth features)
• Outer Region: High frequency components (edges and details)
• Allows selective mixing of different frequency bands from different images

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch
3. Make your changes with clear commit messages
4. Add tests for new functionality
5. Submit a pull request

📝 License

This project is open source and available for educational and research purposes.

🐛 Troubleshooting

Backend Issues

• Port 5000 already in use: Change port in server.py
• Module import errors: Ensure virtual environment is activated and dependencies installed
• Image loading fails: Check file permissions and supported formats

Frontend Issues

• CORS errors: Verify backend is running and CORS is properly configured
• API connection failed: Check backend URL in api.js
• Build errors: Clear node_modules and reinstall dependencies

Common Problems

• Images different sizes: The app auto-resizes, but ensure images are reasonable dimensions
• Slow processing: Large images take longer to process; consider resizing before upload
• Memory errors: Reduce image size or number of simultaneous operations

📧 Contact & Support

For issues, questions, or contributions, please open an issue on the project repository.

---

Happy Image Mixing! 🎨✨