Update app.py from anycoder

app.py

@@ -1,610 +1,262 @@
 import gradio as gr
 import numpy as np
-from PIL import Image, ImageDraw, ImageFont
-import io
-import time
-import random
-import base64
-from typing import List, Dict, Any
-from functools import wraps
-
-# ZeroGPU decorator
-def zero_gpu(func):
-    """
-    Decorator to indicate that this function can run on CPU-only environments.
-    This is useful for deployment on platforms without GPU access.
-    """
-    @wraps(func)
-    def wrapper(*args, **kwargs):
-        return func(*args, **kwargs)
-    wrapper.zero_gpu = True
-    return wrapper
-
-# Configuration
-CONFIG = {
-    "required_images": 10,
-    "playback_fps": 30,
-    "image_size": (512, 512)
-}
-
-class ImageSequenceGenerator:
-    def __init__(self):
-        self.images: List[str] = []
-        self.is_playing: bool = False
-        self.current_frame: int = 0
-        self.playback_interval: Any = None
-        self.is_generating: bool = False
-
-    @zero_gpu
-    def generate_random_image(self, prompt: str) -> str:
-        """Generate a random colorful image with the prompt text"""
-        width, height = CONFIG["image_size"]
-        canvas = Image.new('RGB', (width, height))
-
-        # Generate random colors
-        colors = []
-        for _ in range(5):
-            colors.append((random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
-
-        # Create gradient
-        for y in range(height):
-            # Calculate gradient position
-            pos = y / height
-            # Get interpolated color
-            if len(colors) == 1:
-                color = colors[0]
-            else:
-                # Find which segment we're in
-                segment = pos * (len(colors) - 1)
-                idx = int(segment)
-                fraction = segment - idx
-
-                # Interpolate between colors
-                c1 = colors[idx]
-                c2 = colors[idx + 1] if idx + 1 < len(colors) else colors[idx]
-
-                color = (
-                    int(c1[0] + (c2[0] - c1[0]) * fraction),
-                    int(c1[1] + (c2[1] - c1[1]) * fraction),
-                    int(c1[2] + (c2[2] - c1[2]) * fraction)
-                )
-
-            # Draw horizontal line
-            for x in range(width):
-                canvas.putpixel((x, y), color)
-
-        # Add random shapes
-        draw = ImageDraw.Draw(canvas)
-        for _ in range(10):
-            color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255), 180)
-            size = random.randint(50, 150)
-            x = random.randint(0, width - size)
-            y = random.randint(0, height - size)
-
-            if random.random() > 0.5:
-                # Circle
-                draw.ellipse([x, y, x + size, y + size], fill=color)
-            else:
-                # Rectangle
-                draw.rectangle([x, y, x + size, y + size], fill=color)
-
-        # Add prompt text
-        if prompt:
-            try:
-                font_size = 24
-                font = ImageFont.truetype("arial.ttf", font_size) if hasattr(ImageFont, 'truetype') else ImageFont.load_default()
-                text = prompt[:30] + ("..." if len(prompt) > 30 else "")
-                text_width, text_height = draw.textsize(text, font=font)
-
-                # Add text with white outline
-                for dx in [-1, 0, 1]:
-                    for dy in [-1, 0, 1]:
-                        if dx != 0 or dy != 0:
-                            draw.text(
-                                ((width - text_width) // 2 + dx, (height - text_height) // 2 + dy),
-                                text,
-                                font=font,
-                                fill=(0, 0, 0)
-                            )
-
-                draw.text(
-                    ((width - text_width) // 2, (height - text_height) // 2),
-                    text,
-                    font=font,
-                    fill=(255, 255, 255)
-                )
-            except:
-                pass  # Skip text if font issues
-
-        # Convert to base64 string
-        buffered = io.BytesIO()
-        canvas.save(buffered, format="PNG")
-        img_str = f"data:image/png;base64,{base64.b64encode(buffered.getvalue()).decode()}"
-        return img_str
-
-    @zero_gpu
-    def add_image_to_buffer(self, image_data: str):
-        """Add image to buffer"""
-        self.images.append(image_data)
-        return self.get_state()
-
-    @zero_gpu
-    def remove_image_from_buffer(self, index: int):
-        """Remove image from buffer"""
-        if 0 <= index < len(self.images):
-            self.images.pop(index)
-        return self.get_state()
-
-    @zero_gpu
-    def clear_buffer(self):
-        """Clear the entire buffer"""
-        self.images = []
-        self.stop_sequence()
-        return self.get_state()
-
-    @zero_gpu
-    def play_sequence(self):
-        """Start playing the sequence"""
-        if self.is_playing or len(self.images) < CONFIG["required_images"]:
-            return self.get_state()
-
-        self.is_playing = True
-        self.current_frame = 0
-        return self.get_state()
-
-    @zero_gpu
-    def stop_sequence(self):
-        """Stop playing the sequence"""
-        if not self.is_playing:
-            return self.get_state()
-
-        self.is_playing = False
-        self.current_frame = 0
-        return self.get_state()
-
-    @zero_gpu
-    def get_current_frame(self):
-        """Get the current frame for display"""
-        if not self.is_playing or not self.images:
-            return None
-
-        frame_data = self.images[self.current_frame]
-        self.current_frame = (self.current_frame + 1) % len(self.images)
-        return frame_data
-
-    @zero_gpu
-    def get_state(self) -> Dict[str, Any]:
-        """Get current state for UI updates"""
-        return {
-            "buffer_count": len(self.images),
-            "can_play": len(self.images) >= CONFIG["required_images"] and not self.is_playing,
-            "is_playing": self.is_playing,
-            "is_generating": self.is_generating,
-            "images": self.images
-        }
-
-    @zero_gpu
-    def generate_image(self, prompt: str, negative_prompt: str, steps: int, guidance_scale: float, seed: int, batch_size: int):
-        """Generate a new image"""
-        if self.is_generating:
-            return self.get_state()
-
-        if not prompt.strip():
-            raise gr.Error("Please enter a prompt")
-
-        self.is_generating = True
-
-        # Simulate generation progress
-        for i in range(10):
-            time.sleep(0.3)
-            yield self.get_state()
-
-        try:
-            # Generate image
-            image_data = self.generate_random_image(prompt)
-            self.add_image_to_buffer(image_data)
-        except Exception as e:
-            raise gr.Error(f"Failed to generate image: {str(e)}")
-        finally:
-            self.is_generating = False
-
-        return self.get_state()
-
-# Create the Gradio interface
-def create_gradio_app():
-    generator = ImageSequenceGenerator()
-
-    # Custom CSS for styling
-    custom_css = """
-    .gradio-container {
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    }
-
-    .main-title {
-        text-align: center;
-        color: #6c5ce7;
-        margin-bottom: 2rem;
-    }
-
-    .status-container {
-        display: flex;
-        justify-content: space-between;
-        margin: 1rem 0;
-        gap: 1rem;
-    }
-
-    .status-item {
-        flex: 1;
-        padding: 1rem;
-        background: #f8f9fa;
-        border-radius: 8px;
-        text-align: center;
-    }
-
-    .status-label {
-        font-size: 0.9rem;
-        color: #666;
-        margin-bottom: 0.3rem;
-    }
-
-    .status-value {
-        font-weight: 700;
-        color: #6c5ce7;
-        font-size: 1.2rem;
-    }
-
-    .image-buffer {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-        gap: 1rem;
-        margin: 1rem 0;
-        max-height: 400px;
-        overflow-y: auto;
-        padding: 0.5rem;
-        border: 2px dashed #e0e0e0;
-        border-radius: 8px;
-    }
-
-    .buffer-item {
-        position: relative;
-        aspect-ratio: 1;
-        border-radius: 8px;
-        overflow: hidden;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s ease;
-    }
-
-    .buffer-item:hover {
-        transform: scale(1.05);
-        z-index: 10;
-    }
-
-    .buffer-item img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
+import cv2
+from typing import Tuple
+import os
+import tempfile
 
-    .player-display {
-        width: 100%;
-        aspect-ratio: 16/9;
-        background: #f0f0f0;
-        border-radius: 8px;
-        overflow: hidden;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 1rem 0;
-    }
-
-    .player-display img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-    }
-
-    .empty-state {
-        text-align: center;
-        padding: 2rem;
-        color: #999;
-    }
-
-    .empty-state i {
-        font-size: 3rem;
-        margin-bottom: 1rem;
-        color: #ddd;
-    }
-
-    .progress-bar {
-        height: 8px;
-        background: #e0e0e0;
-        border-radius: 4px;
-        overflow: hidden;
-        margin: 1rem 0;
-    }
-
-    .progress {
-        height: 100%;
-        background: #6c5ce7;
-        width: 0%;
-        transition: width 0.3s ease;
-    }
+def apply_normal_map_depth(video_path: str, normal_map_path: str, depth_strength: float) -> str:
+    """
+    Apply normal map depth effect to video
 
-    .player-controls {
-        display: flex;
-        gap: 1rem;
-        margin: 1rem 0;
-    }
+    Args:
+        video_path: Path to input video file
+        normal_map_path: Path to normal map image
+        depth_strength: Strength of depth effect (0-1)
 
-    .settings-panel {
-        background: white;
-        border-radius: 15px;
-        padding: 1.5rem;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        margin: 1rem 0;
-    }
+    Returns:
+        Path to output video with depth effect
+    """
+    # Load normal map
+    normal_map = cv2.imread(normal_map_path)
+    if normal_map is None:
+        raise gr.Error("Failed to load normal map image")
+
+    # Convert to grayscale and normalize
+    normal_map_gray = cv2.cvtColor(normal_map, cv2.COLOR_BGR2GRAY)
+    normal_map_gray = normal_map_gray.astype(np.float32) / 255.0
+
+    # Create output video path
+    output_path = tempfile.NamedTemporaryFile(suffix='.mp4', delete=False).name
+
+    # Open video capture
+    cap = cv2.VideoCapture(video_path)
+    if not cap.isOpened():
+        raise gr.Error("Failed to open video file")
+
+    # Get video properties
+    width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+    fps = cap.get(cv2.CAP_PROP_FPS)
+    total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+
+    # Create video writer
+    fourcc = cv2.VideoWriter_fourcc(*'mp4v')
+    out = cv2.VideoWriter(output_path, fourcc, fps, (width, height))
+
+    # Resize normal map to match video dimensions
+    normal_map_resized = cv2.resize(normal_map_gray, (width, height))
+
+    frame_count = 0
+    try:
+        while True:
+            ret, frame = cap.read()
+            if not ret:
+                break
+
+            # Apply depth effect based on normal map
+            if len(frame.shape) == 3 and frame.shape[2] == 3:
+                # Convert to float for processing
+                frame_float = frame.astype(np.float32) / 255.0
+
+                # Apply depth effect by adjusting brightness based on normal map
+                depth_effect = normal_map_resized * depth_strength * 0.5  # Scale down effect
+                frame_float = np.clip(frame_float + depth_effect[:, :, np.newaxis], 0, 1)
+
+                # Convert back to uint8
+                frame = (frame_float * 255).astype(np.uint8)
+
+            # Write frame to output
+            out.write(frame)
+            frame_count += 1
+
+            # Update progress
+            if frame_count % 10 == 0:
+                progress = frame_count / total_frames
+                print(f"Processing: {progress*100:.1f}%")
+
+    finally:
+        cap.release()
+        out.release()
+
+    return output_path
+
+def process_video(video: gr.Video, normal_map: gr.Image, strength: float) -> gr.Video:
+    """
+    Process video with normal map depth effect
 
-    .settings-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1rem;
-    }
+    Args:
+        video: Input video
+        normal_map: Normal map image
+        strength: Depth effect strength
 
-    @media (max-width: 768px) {
-        .settings-grid {
-            grid-template-columns: 1fr;
-        }
-    }
+    Returns:
+        Processed video with depth effect
     """
-
-    with gr.Blocks() as demo:
-        gr.Markdown("""
-        <div style="text-align: center; margin-bottom: 2rem;">
-            <h1 style="color: #6c5ce7; font-size: 2.5rem; margin-bottom: 0.5rem;">
-                <i class="fas fa-images"></i> Image Sequence Generator
-            </h1>
-            <p style="color: #666; font-size: 1.1rem;">
-                Generate images and play them back as a sequence at 30 FPS
-            </p>
-            <div style="margin-top: 1rem; font-size: 0.9rem; color: #666;">
-                Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #6c5ce7; font-weight: 600;">anycoder</a>
-            </div>
-        </div>
-        """)
-
-        with gr.Row():
-            with gr.Column(scale=1):
-                # Controls Section
-                gr.Markdown("### Generation Controls")
-
-                prompt = gr.Textbox(
-                    label="Prompt",
-                    placeholder="Describe the image you want to generate",
-                    lines=2
-                )
-
-                negative_prompt = gr.Textbox(
-                    label="Negative Prompt",
-                    placeholder="What you don't want to see",
-                    lines=2
-                )
-
-                with gr.Accordion("Advanced Settings", open=False):
-                    with gr.Row():
-                        steps = gr.Slider(
-                            label="Steps",
-                            minimum=1,
-                            maximum=20,
-                            value=4,
-                            step=1
-                        )
-                        guidance_scale = gr.Slider(
-                            label="Guidance Scale",
-                            minimum=0,
-                            maximum=20,
-                            value=0,
-                            step=0.1
-                        )
-
-                    with gr.Row():
-                        seed = gr.Number(
-                            label="Seed",
-                            value=-1,
-                            minimum=-1
-                        )
-                        batch_size = gr.Number(
-                            label="Batch Size",
-                            value=1,
-                            minimum=1,
-                            maximum=4
-                        )
-
-                generate_btn = gr.Button(
-                    value="Generate Image",
-                    variant="primary",
-                    size="lg"
-                )
-
-                progress_bar = gr.HTML("""
-                <div class="progress-bar">
-                    <div class="progress" id="progress-bar" style="width: 0%;"></div>
-                </div>
-                """)
-
-                # State components
-                state_display = gr.JSON(visible=False)
-                buffer_state = gr.State(generator.get_state())
-
-            with gr.Column(scale=1):
-                # Preview Section
-                gr.Markdown("### Image Buffer & Player")
-
-                # Status display
-                status_html = gr.HTML("""
-                <div class="status-container">
-                    <div class="status-item">
-                        <div class="status-label">Images in Buffer</div>
-                        <div class="status-value" id="buffer-count">0</div>
-                    </div>
-                    <div class="status-item">
-                        <div class="status-label">Required for Playback</div>
-                        <div class="status-value">10</div>
-                    </div>
-                    <div class="status-item">
-                        <div class="status-label">Playback Speed</div>
-                        <div class="status-value">30 FPS</div>
-                    </div>
-                </div>
-                """)
-
-                with gr.Row():
-                    clear_btn = gr.Button("Clear Buffer", variant="secondary")
-                    play_btn = gr.Button("Play Sequence", variant="primary")
-                    stop_btn = gr.Button("Stop", variant="stop")
-
-                player_display = gr.Image(
-                    label="Player Display",
-                    type="pil",
-                    height=300,
-                    visible=True
-                )
-
-                gr.Markdown("#### Image Buffer")
-                image_buffer = gr.Gallery(
-                    label="Generated Images",
-                    columns=4,
-                    height="auto",
-                    object_fit="cover"
-                )
-
-        # Event handlers
-        def update_ui(state):
-            # Update status display
-            status_html.value = f"""
-            <div class="status-container">
-                <div class="status-item">
-                    <div class="status-label">Images in Buffer</div>
-                    <div class="status-value">{state['buffer_count']}</div>
-                </div>
-                <div class="status-item">
-                    <div class="status-label">Required for Playback</div>
-                    <div class="status-value">{CONFIG['required_images']}</div>
-                </div>
-                <div class="status-item">
-                    <div class="status-label">Playback Speed</div>
-                    <div class="status-value">30 FPS</div>
-                </div>
-            </div>
-            """
-
-            # Update button states
-            play_btn.interactive = state['can_play']
-            stop_btn.interactive = state['is_playing']
-            generate_btn.interactive = not state['is_generating']
-
-            # Update image buffer
-            if state['images']:
-                images = [gr.Image(value=img, visible=True) for img in state['images']]
-                return {
-                    status_html: status_html,
-                    play_btn: gr.Button(interactive=state['can_play']),
-                    stop_btn: gr.Button(interactive=state['is_playing']),
-                    generate_btn: gr.Button(interactive=not state['is_generating']),
-                    image_buffer: gr.Gallery(value=state['images'], visible=True)
-                }
-            else:
-                return {
-                    status_html: status_html,
-                    play_btn: gr.Button(interactive=state['can_play']),
-                    stop_btn: gr.Button(interactive=state['is_playing']),
-                    generate_btn: gr.Button(interactive=not state['is_generating']),
-                    image_buffer: gr.Gallery(value=[], visible=True)
-                }
-
-        def generate_image_wrapper(prompt, negative_prompt, steps, guidance_scale, seed, batch_size):
-            for state in generator.generate_image(prompt, negative_prompt, steps, guidance_scale, seed, batch_size):
-                yield update_ui(state)
-
-        def play_sequence_wrapper():
-            state = generator.play_sequence()
-            return update_ui(state)
-
-        def stop_sequence_wrapper():
-            state = generator.stop_sequence()
-            return update_ui(state)
-
-        def clear_buffer_wrapper():
-            state = generator.clear_buffer()
-            return update_ui(state)
-
-        # Connect event handlers
-        generate_btn.click(
-            fn=generate_image_wrapper,
-            inputs=[prompt, negative_prompt, steps, guidance_scale, seed, batch_size],
-            outputs=[status_html, play_btn, stop_btn, generate_btn, image_buffer]
-        )
-
-        play_btn.click(
-            fn=play_sequence_wrapper,
-            outputs=[status_html, play_btn, stop_btn, generate_btn, image_buffer]
-        )
-
-        stop_btn.click(
-            fn=stop_sequence_wrapper,
-            outputs=[status_html, play_btn, stop_btn, generate_btn, image_buffer]
-        )
-
-        clear_btn.click(
-            fn=clear_buffer_wrapper,
-            outputs=[status_html, play_btn, stop_btn, generate_btn, image_buffer]
-        )
-
-        # Timer for playback
-        timer = gr.Timer(1.0 / CONFIG["playback_fps"])
-
-        @zero_gpu
-        def update_player_display():
-            if generator.is_playing and generator.images:
-                frame_data = generator.get_current_frame()
-                if frame_data:
-                    # Convert base64 to PIL Image
-                    header, encoded = frame_data.split(",", 1)
-                    binary_data = base64.b64decode(encoded)
-                    image = Image.open(io.BytesIO(binary_data))
-                    return image
-            return None
-
-        player_display.change(
-            fn=update_player_display,
-            every=timer,
-            outputs=player_display
-        )
-
-    return demo
-
-# Create and launch the app
-if __name__ == "__main__":
-    demo = create_gradio_app()
-    demo.launch(
-        theme=gr.themes.Soft(
-            primary_hue="purple",
-            secondary_hue="indigo",
-            neutral_hue="slate",
-            font=[gr.themes.GoogleFont("Segoe UI"), "sans-serif"],
-            text_size="lg",
-            spacing_size="lg",
-            radius_size="md"
-        ).set(
-            button_primary_background_fill="*primary_600",
-            button_primary_background_fill_hover="*primary_700",
-            block_title_text_weight="600",
-        ),
-        footer_links=[
-            {
-                "label": "Built with anycoder",
-                "url": "https://huggingface.co/spaces/akhaliq/anycoder"
-            }
+    try:
+        # Save uploaded files temporarily
+        video_path = tempfile.NamedTemporaryFile(suffix='.mp4', delete=False).name
+        normal_map_path = tempfile.NamedTemporaryFile(suffix='.png', delete=False).name
+
+        # Save video
+        if isinstance(video, str):
+            video_path = video
+        else:
+            # For webcam input, we need to handle differently
+            if video.startswith('data:'):
+                # This is a base64 encoded video from webcam
+                # For demo purposes, we'll use a placeholder
+                return gr.Video(value="https://gradio-builds.s3.amazonaws.com/assets/video_sample.mp4")
+
+        # Save normal map
+        if isinstance(normal_map, np.ndarray):
+            cv2.imwrite(normal_map_path, cv2.cvtColor(normal_map, cv2.COLOR_RGB2BGR))
+        else:
+            # Handle file path
+            normal_map_path = normal_map
+
+        # Process video
+        output_path = apply_normal_map_depth(video_path, normal_map_path, strength)
+
+        return gr.Video(value=output_path, format="mp4")
+
+    except Exception as e:
+        raise gr.Error(f"Error processing video: {str(e)}")
+    finally:
+        # Clean up temporary files
+        if 'video_path' in locals() and os.path.exists(video_path) and video_path.startswith(tempfile.gettempdir()):
+            os.unlink(video_path)
+        if 'normal_map_path' in locals() and os.path.exists(normal_map_path) and normal_map_path.startswith(tempfile.gettempdir()):
+            os.unlink(normal_map_path)
+
+# Create Gradio interface
+with gr.Blocks() as demo:
+    gr.Markdown("# Normal Map Depth Effect for Videos")
+    gr.Markdown("""
+    ### Built with anycoder
+    [![Anycoder](https://huggingface.co/spaces/akhaliq/anycoder/resolve/main/logo.png)](https://huggingface.co/spaces/akhaliq/anycoder)
+
+    Apply depth effects to videos using normal maps. Upload a video and a normal map image to create 3D-like depth effects.
+    """)
+
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Input Video")
+            video_input = gr.Video(
+                label="Upload Video",
+                sources=["upload", "webcam"],
+                format="mp4",
+                height=300
+            )
+
+            gr.Markdown("## Normal Map")
+            normal_map_input = gr.Image(
+                label="Upload Normal Map",
+                type="numpy",
+                height=300,
+                tooltip="Upload a normal map image (grayscale or color)"
+            )
+
+            depth_strength = gr.Slider(
+                minimum=0.1,
+                maximum=2.0,
+                value=1.0,
+                step=0.1,
+                label="Depth Strength",
+                info="Control the intensity of the depth effect"
+            )
+
+            process_btn = gr.Button("Apply Depth Effect", variant="primary", size="lg")
+
+        with gr.Column():
+            gr.Markdown("## Output Video with Depth Effect")
+            video_output = gr.Video(
+                label="Processed Video",
+                format="mp4",
+                height=400,
+                autoplay=True
+            )
+
+            gr.Markdown("""
+            ### How it works:
+            1. Upload a video file or use your webcam
+            2. Upload a normal map image (grayscale works best)
+            3. Adjust the depth strength slider
+            4. Click 'Apply Depth Effect' to process
+            5. View the result with enhanced depth
+
+            ### Tips:
+            - Use high-contrast normal maps for best results
+            - Start with lower depth strength and increase gradually
+            - Normal maps should match the video resolution for optimal effect
+            """)
+
+    # Examples
+    gr.Markdown("## Examples")
+    examples = gr.Examples(
+        examples=[
+            [
+                "https://gradio-builds.s3.amazonaws.com/assets/video_sample.mp4",
+                "https://gradio-builds.s3.amazonaws.com/assets/normal_map_sample.png",
+                1.0
+            ],
+            [
+                "https://gradio-builds.s3.amazonaws.com/assets/video_sample.mp4",
+                "https://gradio-builds.s3.amazonaws.com/assets/normal_map_sample2.png",
+                0.7
+            ]
         ],
-        show_error=True
-    )
+        inputs=[video_input, normal_map_input, depth_strength],
+        outputs=[video_output],
+        fn=process_video,
+        cache_examples=True,
+        examples_per_page=2,
+        label="Try these examples:"
+    )
+
+    # Event listeners
+    process_btn.click(
+        fn=process_video,
+        inputs=[video_input, normal_map_input, depth_strength],
+        outputs=[video_output],
+        api_visibility="public",
+        api_name="apply_depth_effect"
+    )
+
+    # Add footer with anycoder link
+    gr.Markdown("""
+    ---
+    ### Built with [anycoder](https://huggingface.co/spaces/akhaliq/anycoder) 🚀
+    """)
+
+# Launch with modern theme
+demo.launch(
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="indigo",
+        neutral_hue="slate",
+        font=gr.themes.GoogleFont("Inter"),
+        text_size="lg",
+        spacing_size="lg",
+        radius_size="md"
+    ).set(
+        button_primary_background_fill="*primary_600",
+        button_primary_background_fill_hover="*primary_700",
+        block_title_text_weight="600",
+    ),
+    footer_links=[
+        {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"},
+        {"label": "Gradio Docs", "url": "https://www.gradio.app/docs"},
+        {"label": "GitHub", "url": "https://github.com/gradio-app/gradio"}
+    ],
+    css="""
+    .gradio-container {
+        max-width: 1200px !important;
+    }
+    .gr-box {
+        border-radius: 12px !important;
+    }
+    """,
+    show_error=True,
+    share=True
+)