Polish: Add performance tracking, download button, FAQ, mobile optimization

- Add PerformanceTracker for inference statistics
- Add download button for stylized results
- Add optional watermark for social sharing
- Add style descriptions with dynamic updates
- Add comprehensive FAQ section
- Add mobile-responsive CSS
- Improve UI with gradient header and better styling
- Update README with badges and proper documentation

README.md

@@ -12,39 +12,89 @@ license: mit
 
 # StyleForge: Real-Time Neural Style Transfer
 
-Transform your images with artistic styles using fast neural style transfer.
+Transform your photos into artwork using fast neural style transfer.
 
-## 🎨 Features
+[![Open in Spaces](https://huggingface.co/datasets/huggingface/badges/raw/main/open-in-hf-spaces-sm.svg)](https://huggingface.co/spaces/olivialiau/styleforge)
+[![GitHub](https://img.shields.io/badge/GitHub-StyleForge-blue?logo=github)](https://github.com/olivialiau/StyleForge)
+[![License: MIT](https://img.shields.io/badge/License-MIT-purple.svg)](https://opensource.org/licenses/MIT)
+
+## Features
 
 - **4 Artistic Styles**: Candy, Mosaic, Rain Princess, and Udnie
 - **Real-Time Processing**: Fast inference on both CPU and GPU
 - **Simple Interface**: Just upload an image and select a style
-- **Comparison View**: Option to see side-by-side before/after
+- **Side-by-Side Comparison**: See before and after together
+- **Download Results**: Save your stylized images
+- **Watermark Option**: Add branding for social sharing
+
+## Quick Start
+
+1. **Upload** any image (JPG, PNG)
+2. **Select** an artistic style
+3. **Click** "Stylize Image"
+4. **Download** your result!
+
+## How It Works
 
-## 🚀 How It Works
+StyleForge uses **Fast Neural Style Transfer** based on Johnson et al.'s paper "Perceptual Losses for Real-Time Style Transfer".
 
-This Space uses **Fast Neural Style Transfer** based on the paper by Johnson et al.
-Unlike slow optimization-based methods, this approach trains a separate network per style
-that can transform images in a single forward pass.
+Unlike slow optimization-based methods, this uses pre-trained networks that transform images in milliseconds.
 
 ### Architecture
 
-- **Encoder**: 3 convolutional layers with Instance Normalization
-- **Transformer**: 5 residual blocks
-- **Decoder**: 3 upsampling layers with Instance Normalization
+- **Encoder**: 3 Conv layers + Instance Normalization
+- **Transformer**: 5 Residual blocks
+- **Decoder**: 3 Upsample Conv layers + Instance Normalization
+
+### Performance
+
+| Resolution | GPU | CPU |
+|------------|-----|-----|
+| 256x256 | ~5ms | ~50ms |
+| 512x512 | ~15ms | ~150ms |
+| 1024x1024 | ~50ms | ~500ms |
+
+## Styles
 
-## 📚 Resources
+- 🍬 **Candy**: Bright, colorful pop-art style
+- 🎨 **Mosaic**: Fragmented tile-like reconstruction
+- 🌧️ **Rain Princess**: Moody impressionistic
+- 🖼️ **Udnie**: Bold abstract expressionist
 
-- [GitHub Repository](https://github.com/olivialiau/StyleForge)
-- [Paper: Perceptual Losses for Real-Time Style Transfer](https://arxiv.org/abs/1603.08155)
-- [Original Implementation](https://github.com/jcjohnson/fast-neural-style)
+## Run Locally
 
-## 👤 Author
+```bash
+git clone https://github.com/olivialiau/StyleForge
+cd StyleForge/huggingface-space
+pip install -r requirements.txt
+python app.py
+```
+
+Open http://localhost:7860 in your browser.
+
+## Embed in Your Website
+
+```html
+<iframe
+  src="https://olivialiau-styleforge.hf.space"
+  frameborder="0"
+  width="100%"
+  height="800px"
+></iframe>
+```
+
+## Author
 
 **Olivia** - USC Computer Science
 
 [GitHub](https://github.com/olivialiau/StyleForge)
 
-## 📄 License
+## License
+
+MIT License - see [LICENSE](LICENSE) for details
+
+## Acknowledgments
 
-MIT License
+- [Johnson et al.](https://arxiv.org/abs/1603.08155) - Perceptual Losses for Real-Time Style Transfer
+- [yakhyo](https://github.com/yakhyo/fast-neural-style-transfer) - Pre-trained model weights
+- [Hugging Face](https://huggingface.co) - Spaces platform

app.py

@@ -9,12 +9,14 @@ https://arxiv.org/abs/1603.08155
 import gradio as gr
 import torch
 import torch.nn as nn
-from PIL import Image
+from PIL import Image, ImageDraw, ImageFont
 import numpy as np
 import time
 import os
 from pathlib import Path
 from typing import Optional, Tuple
+from datetime import datetime
+from collections import deque
 
 # ============================================================================
 # Configuration
@@ -32,8 +34,51 @@ STYLES = {
     'udnie': 'Udnie',
 }
 
+STYLE_DESCRIPTIONS = {
+    'candy': 'Bright, colorful transformation inspired by pop art',
+    'mosaic': 'Fragmented, tile-like artistic reconstruction',
+    'rain_princess': 'Moody, impressionistic with subtle textures',
+    'udnie': 'Bold, abstract expressionist style',
+}
+
+# ============================================================================
+# Performance Tracking
+# ============================================================================
+
+class PerformanceTracker:
+    """Track and display Space performance metrics"""
+
+    def __init__(self, max_samples=100):
+        self.inference_times = deque(maxlen=max_samples)
+        self.total_inferences = 0
+        self.start_time = datetime.now()
+
+    def record(self, elapsed_ms):
+        """Record an inference time"""
+        self.inference_times.append(elapsed_ms)
+        self.total_inferences += 1
+
+    def get_stats(self):
+        """Get performance statistics"""
+        if not self.inference_times:
+            return None
+
+        times = list(self.inference_times)
+        uptime = (datetime.now() - self.start_time).total_seconds()
+
+        return {
+            'avg_ms': sum(times) / len(times),
+            'min_ms': min(times),
+            'max_ms': max(times),
+            'total_inferences': self.total_inferences,
+            'uptime_hours': uptime / 3600,
+        }
+
+# Global tracker
+perf_tracker = PerformanceTracker()
+
 # ============================================================================
-# Model Definition (Simplified for HF Spaces deployment)
+# Model Definition
 # ============================================================================
 
 
@@ -116,12 +161,7 @@ class UpsampleConvLayer(nn.Module):
 
 
 class TransformerNet(nn.Module):
-    """
-    Fast Neural Style Transfer Network
-
-    Args:
-        num_residual_blocks: Number of residual blocks (default: 5)
-    """
+    """Fast Neural Style Transfer Network"""
 
     def __init__(self, num_residual_blocks: int = 5):
         super().__init__()
@@ -173,36 +213,20 @@ class TransformerNet(nn.Module):
 
         # Create mapping for different naming conventions
         name_mapping = {
-            "in1": "conv1.norm",
-            "in2": "conv2.norm",
-            "in3": "conv3.norm",
-            "conv1.conv2d": "conv1.conv",
-            "conv2.conv2d": "conv2.conv",
-            "conv3.conv2d": "conv3.conv",
-            "res1.conv1.conv2d": "residual_blocks.0.conv1.conv",
-            "res1.in1": "residual_blocks.0.conv1.norm",
-            "res1.conv2.conv2d": "residual_blocks.0.conv2.conv",
-            "res1.in2": "residual_blocks.0.conv2.norm",
-            "res2.conv1.conv2d": "residual_blocks.1.conv1.conv",
-            "res2.in1": "residual_blocks.1.conv1.norm",
-            "res2.conv2.conv2d": "residual_blocks.1.conv2.conv",
-            "res2.in2": "residual_blocks.1.conv2.norm",
-            "res3.conv1.conv2d": "residual_blocks.2.conv1.conv",
-            "res3.in1": "residual_blocks.2.conv1.norm",
-            "res3.conv2.conv2d": "residual_blocks.2.conv2.conv",
-            "res3.in2": "residual_blocks.2.conv2.norm",
-            "res4.conv1.conv2d": "residual_blocks.3.conv1.conv",
-            "res4.in1": "residual_blocks.3.conv1.norm",
-            "res4.conv2.conv2d": "residual_blocks.3.conv2.conv",
-            "res4.in2": "residual_blocks.3.conv2.norm",
-            "res5.conv1.conv2d": "residual_blocks.4.conv1.conv",
-            "res5.in1": "residual_blocks.4.conv1.norm",
-            "res5.conv2.conv2d": "residual_blocks.4.conv2.conv",
-            "res5.in2": "residual_blocks.4.conv2.norm",
-            "deconv1.conv2d": "deconv1.conv",
-            "in4": "deconv1.norm",
-            "deconv2.conv2d": "deconv2.conv",
-            "in5": "deconv2.norm",
+            "in1": "conv1.norm", "in2": "conv2.norm", "in3": "conv3.norm",
+            "conv1.conv2d": "conv1.conv", "conv2.conv2d": "conv2.conv", "conv3.conv2d": "conv3.conv",
+            "res1.conv1.conv2d": "residual_blocks.0.conv1.conv", "res1.in1": "residual_blocks.0.conv1.norm",
+            "res1.conv2.conv2d": "residual_blocks.0.conv2.conv", "res1.in2": "residual_blocks.0.conv2.norm",
+            "res2.conv1.conv2d": "residual_blocks.1.conv1.conv", "res2.in1": "residual_blocks.1.conv1.norm",
+            "res2.conv2.conv2d": "residual_blocks.1.conv2.conv", "res2.in2": "residual_blocks.1.conv2.norm",
+            "res3.conv1.conv2d": "residual_blocks.2.conv1.conv", "res3.in1": "residual_blocks.2.conv1.norm",
+            "res3.conv2.conv2d": "residual_blocks.2.conv2.conv", "res3.in2": "residual_blocks.2.conv2.norm",
+            "res4.conv1.conv2d": "residual_blocks.3.conv1.conv", "res4.in1": "residual_blocks.3.conv1.norm",
+            "res4.conv2.conv2d": "residual_blocks.3.conv2.conv", "res4.in2": "residual_blocks.3.conv2.norm",
+            "res5.conv1.conv2d": "residual_blocks.4.conv1.conv", "res5.in1": "residual_blocks.4.conv1.norm",
+            "res5.conv2.conv2d": "residual_blocks.4.conv2.conv", "res5.in2": "residual_blocks.4.conv2.norm",
+            "deconv1.conv2d": "deconv1.conv", "in4": "deconv1.norm",
+            "deconv2.conv2d": "deconv2.conv", "in5": "deconv2.norm",
             "deconv3.conv2d": "deconv3.1",
         }
 
@@ -238,8 +262,6 @@ class TransformerNet(nn.Module):
 # ============================================================================
 
 MODEL_CACHE = {}
-
-# Pre-download models on startup (for Hugging Face Spaces)
 MODELS_DIR = Path("models")
 MODELS_DIR.mkdir(exist_ok=True)
 
@@ -249,7 +271,6 @@ def get_model_path(style: str) -> Path:
     model_path = MODELS_DIR / f"{style}.pth"
 
     if not model_path.exists():
-        # Download from GitHub releases
         url_map = {
             'candy': 'https://github.com/yakhyo/fast-neural-style-transfer/releases/download/v1.0/candy.pth',
             'mosaic': 'https://github.com/yakhyo/fast-neural-style-transfer/releases/download/v1.0/mosaic.pth',
@@ -285,14 +306,19 @@ def load_model(style: str) -> TransformerNet:
 
 
 # Preload all models on startup
+print("=" * 50)
+print("StyleForge - Initializing...")
+print("=" * 50)
+print(f"Device: {DEVICE.type.upper()}")
 print("Preloading models...")
 for style in STYLES.keys():
     try:
         load_model(style)
+        print(f"  {STYLES[style]}: Ready")
     except Exception as e:
-        print(f"Warning: Could not load {style}: {e}")
-print("Models preloaded")
-
+        print(f"  {STYLES[style]}: Failed - {e}")
+print("All models loaded!")
+print("=" * 50)
 
 # ============================================================================
 # Image Processing Functions
@@ -307,46 +333,69 @@ def preprocess_image(img: Image.Image) -> torch.Tensor:
 
 def postprocess_tensor(tensor: torch.Tensor) -> Image.Image:
     """Convert tensor to PIL Image."""
-    # Remove batch dimension
     if tensor.dim() == 4:
         tensor = tensor.squeeze(0)
-
-    # Clamp to valid range
     tensor = torch.clamp(tensor, 0, 1)
-
-    # Convert to PIL
     transform = transforms.ToPILImage()
     return transform(tensor)
 
 
-def create_side_by_side(img1: Image.Image, img2: Image.Image) -> Image.Image:
+def create_side_by_side(img1: Image.Image, img2: Image.Image, style_name: str) -> Image.Image:
     """Create side-by-side comparison."""
-    from PIL import ImageDraw, ImageFont
-
-    # Resize to same height
     if img1.size != img2.size:
         img2 = img2.resize(img1.size, Image.LANCZOS)
 
     w, h = img1.size
-    combined = Image.new('RGB', (w * 2 + 20, h + 60), 'white')
+    combined = Image.new('RGB', (w * 2 + 20, h + 70), 'white')
 
-    # Paste images
-    combined.paste(img1, (0, 60))
-    combined.paste(img2, (w + 20, 60))
+    combined.paste(img1, (0, 70))
+    combined.paste(img2, (w + 20, 70))
 
-    # Add labels
     draw = ImageDraw.Draw(combined)
     try:
-        font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 24)
+        font_title = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 28)
+        font_label = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", 20)
     except:
-        font = ImageFont.load_default()
+        font_title = ImageFont.load_default()
+        font_label = ImageFont.load_default()
+
+    # Style title
+    draw.text((w + 10, 20), f"Style: {style_name}", fill='#667eea', font=font_title)
 
-    draw.text((w // 2, 20), "Original", fill='black', font=font, anchor='mm')
-    draw.text((w * 1.5 + 10, 20), "Stylized", fill='black', font=font, anchor='mm')
+    # Labels
+    draw.text((w // 2, 50), "Original", fill='#555', font=font_label, anchor='mm')
+    draw.text((w * 1.5 + 10, 50), "Stylized", fill='#555', font=font_label, anchor='mm')
 
     return combined
 
 
+def add_watermark(img: Image.Image, style_name: str) -> Image.Image:
+    """Add subtle watermark for social sharing."""
+    result = img.copy()
+    draw = ImageDraw.Draw(result)
+    w, h = result.size
+
+    text = f"StyleForge • {style_name}"
+    try:
+        font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", int(w / 40))
+    except:
+        font = ImageFont.load_default()
+
+    # Get text size
+    bbox = draw.textbbox((0, 0), text, font=font)
+    text_w = bbox[2] - bbox[0]
+    text_h = bbox[3] - bbox[1]
+
+    # Semi-transparent background
+    overlay = Image.new('RGBA', (text_w + 20, text_h + 10), (0, 0, 0, 100))
+    result.paste(overlay, (w - text_w - 25, h - text_h - 15), overlay)
+
+    # Text
+    draw.text((w - text_w - 15, h - text_h - 10), text, fill=(255, 255, 255, 200), font=font)
+
+    return result
+
+
 # ============================================================================
 # Gradio Interface Functions
 # ============================================================================
@@ -354,13 +403,12 @@ def create_side_by_side(img1: Image.Image, img2: Image.Image) -> Image.Image:
 def stylize_image(
     input_image: Optional[Image.Image],
     style: str,
-    show_comparison: bool
-) -> Tuple[Optional[Image.Image], str]:
-    """
-    Main stylization function for Gradio.
-    """
+    show_comparison: bool,
+    add_watermark: bool
+) -> Tuple[Optional[Image.Image], str, Optional[str]]:
+    """Main stylization function for Gradio."""
     if input_image is None:
-        return None, "Please upload an image first."
+        return None, "Please upload an image first.", None
 
     try:
         # Convert to RGB if needed
@@ -384,30 +432,45 @@ def stylize_image(
 
         elapsed_ms = (time.perf_counter() - start) * 1000
 
+        # Record performance
+        perf_tracker.record(elapsed_ms)
+
         # Postprocess
         output_image = postprocess_tensor(output_tensor.cpu())
 
+        # Add watermark if requested
+        if add_watermark:
+            output_image = add_watermark(output_image, STYLES[style])
+
         # Create comparison if requested
         if show_comparison:
-            output_image = create_side_by_side(input_image, output_image)
+            output_image = create_side_by_side(input_image, output_image, STYLES[style])
+
+        # Save for download
+        download_path = f"/tmp/styleforge_{int(time.time())}.png"
+        output_image.save(download_path, quality=95)
 
         # Generate stats
+        stats = perf_tracker.get_stats()
         fps = 1000 / elapsed_ms if elapsed_ms > 0 else 0
         width, height = input_image.size
 
-        stats = f"""
-### Performance Stats
+        stats_text = f"""
+### Performance
 
 | Metric | Value |
 |--------|-------|
 | **Style** | {STYLES[style]} |
-| **Inference Time** | {elapsed_ms:.2f} ms |
-| **FPS** | {fps:.1f} |
+| **This Image** | {elapsed_ms:.1f} ms ({fps:.0f} FPS) |
+| **Average** | {stats['avg_ms']:.1f if stats else elapsed_ms:.1f} ms |
+| **Total Processed** | {stats['total_inferences'] if stats else 1} images |
 | **Image Size** | {width}x{height} |
 | **Device** | {DEVICE.type.upper()} |
+
+**About this style:** {STYLE_DESCRIPTIONS.get(style, '')}
 """
 
-        return output_image, stats
+        return output_image, stats_text, download_path
 
     except Exception as e:
         import traceback
@@ -418,7 +481,7 @@ def stylize_image(
 **{str(e)}**
 
 <details>
-<summary>Error Details</summary>
+<summary>Show details</summary>
 
 ```
 {error_details}
@@ -426,7 +489,12 @@ def stylize_image(
 
 </details>
 """
-        return None, error_msg
+        return None, error_msg, None
+
+
+def get_style_description(style: str) -> str:
+    """Get description for selected style."""
+    return STYLE_DESCRIPTIONS.get(style, "")
 
 
 # ============================================================================
@@ -435,8 +503,8 @@ def stylize_image(
 
 custom_css = """
 .gradio-container {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    max-width: 1200px;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    max-width: 1280px;
     margin: auto;
 }
 
@@ -444,17 +512,40 @@ custom_css = """
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     border: none !important;
     color: white !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
 }
 
 .gr-button-primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-    transition: all 0.2s;
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
+}
+
+.gr-button-secondary {
+    background: #f3f4f6 !important;
+    color: #374151 !important;
+    border: 1px solid #e5e7eb !important;
 }
 
 h1 {
     text-align: center;
-    color: #2C3E50;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.style-card {
+    border: 2px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 16px;
+    margin: 8px 0;
+    transition: all 0.2s;
+}
+
+.style-card:hover {
+    border-color: #667eea;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
 }
 
 .footer {
@@ -464,6 +555,19 @@ h1 {
     border-top: 1px solid #eee;
     color: #666;
 }
+
+/* Mobile optimization */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 1rem 0.5rem !important;
+    }
+    .gr-row {
+        flex-direction: column !important;
+    }
+    .gr-column {
+        width: 100% !important;
+    }
+}
 """
 
 with gr.Blocks(
@@ -477,36 +581,45 @@ with gr.Blocks(
 
     # Header
     gr.Markdown("""
-    # StyleForge: Real-Time Neural Style Transfer
+    # StyleForge
 
-    Transform your images with artistic styles using fast neural style transfer.
+    ### Real-time neural style transfer. Transform your photos into artwork.
 
-    **Based on:** Johnson et al. "Perceptual Losses for Real-Time Style Transfer" ([arXiv:1603.08155](https://arxiv.org/abs/1603.08155))
+    **Fast. Free. No sign-up required.**
     """)
 
+    # Style description box
+    style_desc_box = gr.Markdown("*Select a style to see description*")
+
     # Main interface
     with gr.Row():
         with gr.Column(scale=1):
             # Input controls
             input_image = gr.Image(
-                label="Upload Your Image",
+                label="Upload Image",
                 type="pil",
                 sources=["upload", "webcam", "clipboard"],
-                height=400
+                height=350
             )
 
-            style = gr.Dropdown(
+            style = gr.Radio(
                 choices=list(STYLES.keys()),
                 value='candy',
-                label="Select Artistic Style",
-                type="value"
+                label="Artistic Style",
+                info="Choose your preferred style"
             )
 
-            show_comparison = gr.Checkbox(
-                label="Show side-by-side comparison",
-                value=False,
-                info="Display original and stylized images together"
-            )
+            with gr.Row():
+                show_comparison = gr.Checkbox(
+                    label="Side-by-side",
+                    value=False,
+                    info="Show before/after"
+                )
+                add_watermark = gr.Checkbox(
+                    label="Add watermark",
+                    value=False,
+                    info="For sharing"
+                )
 
             submit_btn = gr.Button(
                 "Stylize Image",
@@ -514,112 +627,155 @@ with gr.Blocks(
                 size="lg"
             )
 
+            # Style preview hints
             gr.Markdown("""
-            ### Tips
-            - Works best with images 256-1024px
-            - Try different styles to find your favorite
-            - GPU acceleration is available when supported
+            **Style Guide:**
+            - 🍬 **Candy**: Bright, colorful pop-art style
+            - 🎨 **Mosaic**: Fragmented tile-like reconstruction
+            - 🌧️ **Rain Princess**: Moody impressionistic
+            - 🖼️ **Udnie**: Bold abstract expressionist
             """)
 
         with gr.Column(scale=1):
             # Output
             output_image = gr.Image(
-                label="Stylized Result",
+                label="Result",
                 type="pil",
-                height=400
+                height=350
             )
 
+            with gr.Row():
+                download_btn = gr.DownloadButton(
+                    label="Download",
+                    variant="secondary",
+                    visible=False
+                )
+
             stats_text = gr.Markdown(
-                "Upload an image and click **'Stylize Image'** to begin!"
+                "> Upload an image and click **Stylize** to begin!"
             )
 
     # Examples section
     gr.Markdown("---")
-    gr.Markdown("### Try These Examples")
 
-    # Create a simple example image programmatically
     def create_example_image():
-        """Create a simple example image for testing."""
-        import numpy as np
-        # Create a gradient image
+        """Create example image for testing."""
         arr = np.zeros((256, 256, 3), dtype=np.uint8)
         for i in range(256):
-            arr[:, i, 0] = i  # Red gradient
-            arr[:, i, 1] = 255 - i  # Blue gradient
-            arr[:, i, 2] = 128  # Constant green
+            arr[:, i, 0] = i
+            arr[:, i, 1] = 255 - i
+            arr[:, i, 2] = 128
         return Image.fromarray(arr)
 
     example_img = create_example_image()
 
     gr.Examples(
         examples=[
-            [example_img, "candy", False],
-            [example_img, "mosaic", False],
-            [example_img, "rain_princess", True],
+            [example_img, "candy", False, False],
+            [example_img, "mosaic", False, False],
+            [example_img, "rain_princess", True, False],
         ],
-        inputs=[input_image, style, show_comparison],
-        outputs=[output_image, stats_text],
+        inputs=[input_image, style, show_comparison, add_watermark],
+        outputs=[output_image, stats_text, download_btn],
         fn=stylize_image,
         cache_examples=False,
+        label="Quick Examples"
     )
 
-    # Technical details
+    # FAQ Section
     gr.Markdown("---")
 
-    with gr.Accordion("Technical Details", open=False):
+    with gr.Accordion("FAQ & Help", open=False):
         gr.Markdown("""
-        ### Architecture
+        ### How does this work?
 
-        Fast Neural Style Transfer uses a feed-forward network trained per style:
+        StyleForge uses **Fast Neural Style Transfer** based on Johnson et al.'s research.
+        Unlike slow optimization methods, this uses pre-trained networks that transform
+        images in milliseconds.
 
-        **Network Architecture:**
-        - **Encoder:** 3 convolutional layers with Instance Normalization
-        - **Transformer:** 5 residual blocks
-        - **Decoder:** 3 upsampling layers with Instance Normalization
+        ### Which image sizes work best?
 
-        ### How It Works
+        - **Optimal**: 512-1024 pixels
+        - **Works with**: Any size (auto-resized)
+        - **Note**: Larger images take longer but produce better results
 
-        Unlike optimization-based style transfer (slow, ~seconds per image),
-        this approach trains a separate network per style that can transform
-        images in real-time (~milliseconds per image).
+        ### Why is the first request slow?
 
-        1. The network is trained on style images (e.g., Starry Night)
-        2. It learns a direct mapping from content photos to stylized outputs
-        3. At inference, it applies this transformation in a single forward pass
+        Hugging Face Spaces "sleep" after inactivity. The first request wakes it up
+        (~30 seconds). Subsequent requests are instant.
 
-        ### Performance
+        ### Can I use this commercially?
 
-        This model processes images significantly faster than traditional
-        optimization-based style transfer while maintaining quality.
+        Yes! StyleForge is open source (MIT license). The pre-trained models are from
+        the [fast-neural-style-transfer](https://github.com/yakhyo/fast-neural-style-transfer) project.
 
-        | Resolution | Time (GPU) | Time (CPU) |
-        |------------|------------|------------|
-        | 256x256    | ~5ms       | ~50ms      |
-        | 512x512    | ~15ms      | ~150ms     |
-        | 1024x1024  | ~50ms      | ~500ms     |
+        ### How to run locally?
+
+        ```bash
+        git clone https://github.com/olivialiau/StyleForge
+        cd StyleForge/huggingface-space
+        pip install -r requirements.txt
+        python app.py
+        ```
+        """)
+
+    # Technical details
+    with gr.Accordion("Technical Details", open=False):
+        gr.Markdown("""
+        ### Architecture
+
+        **Network:** Encoder-Decoder with Residual Blocks
+
+        - **Encoder**: 3 Conv layers + Instance Normalization
+        - **Transformer**: 5 Residual blocks
+        - **Decoder**: 3 Upsample Conv layers + Instance Normalization
+
+        ### Performance Benchmarks
+
+        | Resolution | GPU | CPU |
+        |------------|-----|-----|
+        | 256x256 | ~5ms | ~50ms |
+        | 512x512 | ~15ms | ~150ms |
+        | 1024x1024 | ~50ms | ~500ms |
 
         ### Resources
 
         - [GitHub Repository](https://github.com/olivialiau/StyleForge)
         - [Paper: Perceptual Losses for Real-Time Style Transfer](https://arxiv.org/abs/1603.08155)
-        - [Original Implementation](https://github.com/jcjohnson/fast-neural-style)
         """)
 
     # Footer
     gr.Markdown("""
     <div class="footer">
         <p>
-            <strong>StyleForge</strong> | USC Computer Science<br>
-            Built with Hugging Face Spaces 🤗
+            <strong>StyleForge</strong> • Created by Olivia • USC Computer Science<br>
+            <a href="https://github.com/olivialiau/StyleForge">GitHub</a> •
+            Built with <a href="https://huggingface.co/spaces">Hugging Face Spaces</a> 🤗
         </p>
     </div>
     """)
 
-    # Event handlers
+    # Style description updater
+    style.change(
+        fn=get_style_description,
+        inputs=[style],
+        outputs=[style_desc_box]
+    )
+
+    # Also update description on load
+    demo.load(
+        fn=lambda: gr.Markdown("*Bright, colorful pop-art style*"),
+        outputs=[style_desc_box]
+    )
+
+    # Main event handler
     submit_btn.click(
         fn=stylize_image,
-        inputs=[input_image, style, show_comparison],
-        outputs=[output_image, stats_text]
+        inputs=[input_image, style, show_comparison, add_watermark],
+        outputs=[output_image, stats_text, download_btn]
+    ).then(
+        lambda: gr.DownloadButton(visible=True),
+        outputs=[download_btn]
     )