Face Morph Studio - KivyMD UI

A beautiful Material Design mobile app for real-time face morphing, built with KivyMD.

🎨 Features

• Material Design 3 UI with dark theme
• Navigation Drawer for category selection (Animals, Celebrities, Historical Figures, Races, Addons)
• Real-time preview area for morphed images
• Morph intensity slider (0-100%)
• Camera controls (start/stop streaming)
• Save options (image and video)
• Clean architecture ready for backend integration

📁 Project Structure

task5_gui/
├── main.py              # App entry point
├── main.kv              # UI layout (KivyMD)
├── ui/
│   ├── __init__.py
│   ├── screens.py       # Main screen logic
│   └── components.py    # Reusable UI components
├── requirements.txt     # Python dependencies
├── buildozer.spec       # Android build configuration
└── README.md

🚀 Getting Started

Development (Desktop)

1. Install dependencies:

   pip install -r requirements.txt

2. Run the app:

   python main.py

Building APK (Android)

1. Install Buildozer:

   pip install buildozer

2. Build APK:

   buildozer android debug

3. Find APK:

   bin/facemorphstudio-1.0-debug.apk
   

🔌 Backend Integration Points

The UI is ready for your backend team to integrate. Look for comments marked:

# ==========================================
# BACKEND INTEGRATION POINT #X
# ==========================================

Key Integration Points:

1. Initialize morphing engine (screens.py - __init__)
2. Load target images (select_category())
3. Apply morphing (call_backend_morph())
4. Camera capture (start_camera_stream())
5. Frame processing (on_frame_received())
6. Update preview (update_preview())
7. Save functionality (save_current_frame(), save_video())

Example Backend Integration:

def call_backend_morph(self, frame, target, alpha):
    """Your morphing algorithm here"""
    # Load target
    target_data = self.morph_engine.get_target(target)
    
    # Morph
    morphed = self.morph_engine.blend(frame, target_data, alpha)
    
    return morphed

def on_frame_received(self, dt):
    """Camera frame processing"""
    ret, frame = self.camera.read()
    
    if ret and self.selected_target:
        morphed = self.call_backend_morph(frame, self.selected_target, self.morph_alpha)
        self.update_preview(morphed)

🎯 Frame Format for update_preview()

The preview widget accepts frames as:

• Type: NumPy array (np.ndarray)
• Shape: (height, width, 3)
• Color: RGB (not BGR!)
• Data type: uint8 (0-255)

Example:

import numpy as np

# Your morphed frame
frame = np.array(...)  # Shape: (480, 640, 3), dtype: uint8

# Update preview
self.update_preview(frame)

📱 UI Components

Top App Bar

• App title
• Menu button (opens navigation drawer)
• Info button

Navigation Drawer

• Category selection with icons
• Beautiful header
• Smooth animations

Preview Area

• Large preview card (400dp height)
• Live/Offline status chip
• Placeholder when camera is off
• Automatic texture updates

Morph Slider

• Range: 0% (real face) to 100% (full morph)
• Real-time value display
• Smooth hint animations

Control Buttons

• Select Target: Choose morph target from category
• Start Camera: Begin camera stream
• Stop Camera: End camera stream
• Save Image: Save current frame
• Save Video: Record morphing session

🎨 Theme Customization

Edit main.py to change colors:

def build(self):
    self.theme_cls.primary_palette = "DeepPurple"  # Change to your color
    self.theme_cls.accent_palette = "Pink"         # Change accent
    self.theme_cls.theme_style = "Dark"            # "Light" or "Dark"

📝 Notes for Backend Team

1. Camera frames should be passed to on_frame_received(dt) at ~30 FPS
2. Morphing function should be implemented in call_backend_morph()
3. Face detection can be added in on_frame_received() before morphing
4. Save functions need actual file I/O implementation
5. Target loading should load images/models based on category and target name

🛠️ TODO for Backend

• Implement face detection
• Add morphing algorithm
• Setup camera capture (OpenCV/MediaPipe)
• Implement save image functionality
• Implement video recording
• Load actual target images
• Add error handling
• Optimize for real-time performance

📄 License

MIT License - Feel free to modify and use!

👥 Credits

UI designed with KivyMD - Material Design for Kivy Built for Face Morphing Project

---

Need help? Check the integration points in ui/screens.py!