Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,726 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+from PIL import Image, ImageFile
+import numpy as np
+import matplotlib.pyplot as plt
+import io
+
+# ------------------------------------------------------------------------
+# Page configuration and custom styling
+st.set_page_config(
+    page_title="SVD Image Compression",
+    layout="wide",
+    page_icon="🎨",
+    initial_sidebar_state="expanded"
+)
+
+st.markdown("""
+    <style>
+    /* Import Google Fonts */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+    
+    /* Global Styling */
+    * {
+        font-family: 'Inter', sans-serif;
+    }
+    
+    /* Hide Streamlit default elements */
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    .stDeployButton {display: none;}
+    
+    /* Main Background with Gradient */
+    .main {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background-attachment: fixed;
+    }
+    
+    /* Content Container */
+    .block-container {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 20px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    }
+    
+    /* Sidebar Styling */
+    [data-testid="stSidebar"] {
+        background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    }
+    
+    [data-testid="stSidebar"] * {
+        color: white !important;
+    }
+    
+    [data-testid="stSidebar"] h2 {
+        color: white !important;
+        font-weight: 700;
+        margin-top: 0;
+    }
+    
+    [data-testid="stSidebar"] h4 {
+        color: #ffd700 !important;
+        font-weight: 600;
+        margin-top: 1.5rem;
+    }
+    
+    /* Main Title */
+    h1 {
+        text-align: center;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-weight: 700;
+        font-size: 3rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    /* Subtitle */
+    .subtitle {
+        text-align: center;
+        color: #666;
+        font-size: 1.1rem;
+        margin-bottom: 2rem;
+    }
+    
+    /* Section Headers */
+    h3 {
+        color: #667eea;
+        font-weight: 700;
+        border-left: 4px solid #667eea;
+        padding-left: 12px;
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+    }
+    
+    /* File Uploader Styling */
+    [data-testid="stFileUploader"] {
+        background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
+        border: 2px dashed #667eea;
+        border-radius: 15px;
+        padding: 2rem;
+        transition: all 0.3s ease;
+    }
+    
+    [data-testid="stFileUploader"]:hover {
+        border-color: #764ba2;
+        background: linear-gradient(135deg, #667eea25 0%, #764ba225 100%);
+    }
+    
+    /* Info Box */
+    .stAlert {
+        background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
+        border-left: 4px solid #667eea;
+        border-radius: 10px;
+    }
+    
+    /* Slider Styling */
+    .stSlider {
+        padding: 1rem 0;
+    }
+    
+    /* Compression Stats Card */
+    .stats-card {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 2rem;
+        border-radius: 15px;
+        color: white;
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+        margin: 2rem 0;
+    }
+    
+    .stats-card h4 {
+        color: white;
+        margin-top: 0;
+        font-size: 1.3rem;
+        font-weight: 700;
+        border-bottom: 2px solid rgba(255, 255, 255, 0.3);
+        padding-bottom: 0.8rem;
+        margin-bottom: 1.5rem;
+    }
+    
+    .stat-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.8rem 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    
+    .stat-row:last-child {
+        border-bottom: none;
+    }
+    
+    .stat-label {
+        font-weight: 600;
+        font-size: 1rem;
+    }
+    
+    .stat-value {
+        font-weight: 700;
+        font-size: 1.1rem;
+        background: rgba(255, 255, 255, 0.2);
+        padding: 0.3rem 1rem;
+        border-radius: 20px;
+    }
+    
+    .compression-highlight {
+        background: #ffd700;
+        color: #764ba2;
+        padding: 0.5rem 1.5rem;
+        border-radius: 25px;
+        font-size: 1.3rem;
+        font-weight: 700;
+        text-align: center;
+        margin-top: 1rem;
+        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
+    }
+    
+    /* Image Container */
+    .image-container {
+        background: white;
+        padding: 1.5rem;
+        border-radius: 15px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        margin: 1rem 0;
+    }
+    
+    /* Subheader in columns */
+    .stColumn h4 {
+        color: #667eea;
+        font-weight: 700;
+        text-align: center;
+        margin-bottom: 1rem;
+    }
+    
+    /* Progress Bar */
+    .stProgress > div > div {
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    }
+    
+    /* Footer */
+    .footer {
+        text-align: center;
+        margin-top: 3rem;
+        padding: 2rem;
+        background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
+        border-radius: 15px;
+        color: #667eea;
+        font-weight: 600;
+    }
+    
+    /* Metric Cards */
+    [data-testid="stMetricValue"] {
+        font-size: 2rem;
+        color: #667eea;
+        font-weight: 700;
+    }
+    
+    /* Buttons */
+    .stButton > button {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        font-weight: 600;
+        border: none;
+        border-radius: 10px;
+        padding: 0.5rem 2rem;
+        transition: all 0.3s ease;
+    }
+    
+    .stButton > button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+    }
+    </style>
+""", unsafe_allow_html=True)
+
+# Allow large image processing
+ImageFile.LOAD_TRUNCATED_IMAGES = True
+Image.MAX_IMAGE_PIXELS = None
+
+# ------------------------------------------------------------------------
+# Sidebar: Information and Instructions
+with st.sidebar:
+    st.markdown("## 📌 About This App")
+    st.write(
+        "This application demonstrates **Singular Value Decomposition (SVD)** for image compression. "
+        "Upload any image and adjust the rank slider to see real-time compression effects."
+    )
+    
+    st.divider()
+    
+    st.markdown("#### 📖 What is SVD?")
+    st.write(
+        "SVD decomposes a matrix into three components: **U**, **Σ**, and **V^T**. "
+        "By retaining only the largest singular values, we can approximate the original image "
+        "while significantly reducing storage requirements."
+    )
+    
+    st.divider()
+    
+    st.markdown("#### 🎯 How to Use")
+    st.markdown("""
+    1. **Upload** an image file (PNG, JPG, JPEG, BMP, or TIFF)
+    2. **Adjust** the rank slider to control compression level
+    3. **Compare** original vs. reconstructed images side-by-side
+    4. **Analyze** compression statistics and ratio
+    5. **Download** your compressed image
+    """)
+    
+    st.divider()
+    
+    st.markdown("#### 💡 Pro Tips")
+    st.info("""
+    • **Lower rank** = higher compression but lower quality
+    
+    • **Higher rank** = better quality but less compression
+    
+    • **Sweet spot**: Usually around 25-50% of max rank
+    
+    • Use **Quick Presets** for common compression levels
+    """)
+    
+    st.divider()
+    
+    st.markdown("#### 🔬 Educational Value")
+    st.write(
+        "This tool helps students and professionals understand how linear algebra "
+        "concepts apply to real-world data compression problems."
+    )
+
+# ------------------------------------------------------------------------
+# App Title and Header
+st.markdown("<h1>🎨 SVD Image Compression Studio</h1>", unsafe_allow_html=True)
+st.markdown("<p class='subtitle'>Explore the power of linear algebra in image compression using Singular Value Decomposition</p>", unsafe_allow_html=True)
+
+# ------------------------------------------------------------------------
+# Image Upload
+st.markdown("### 📤 Step 1: Upload Your Image")
+
+uploaded_file = st.file_uploader(
+    "Choose an image file to compress",
+    type=["png", "jpg", "jpeg", "bmp", "tiff"],
+    help="Supported formats: PNG, JPG, JPEG, BMP, TIFF | Max recommended size: 1024×1024 pixels"
+)
+
+if uploaded_file is None:
+    # Welcome screen with instructions
+    st.markdown("""
+    <div style='background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); 
+                padding: 2rem; border-radius: 15px; margin: 2rem 0;
+                border-left: 5px solid #667eea;'>
+        <h3 style='color: #667eea; margin-top: 0;'>👋 Welcome to SVD Image Compression Studio!</h3>
+        <p style='font-size: 1.1rem; margin-bottom: 1.5rem;'>
+            This tool uses <strong>Singular Value Decomposition</strong>, a powerful linear algebra technique, 
+            to compress images while maintaining visual quality.
+        </p>
+        <h4 style='color: #764ba2;'>🎯 What You'll Discover:</h4>
+        <ul style='font-size: 1rem; line-height: 1.8;'>
+            <li>Real-time image compression using SVD</li>
+            <li>Visual comparison between original and compressed images</li>
+            <li>Detailed compression statistics and ratios</li>
+            <li>Interactive control over compression level</li>
+            <li>Download capability for compressed images</li>
+        </ul>
+        <h4 style='color: #764ba2; margin-top: 1.5rem;'>🚀 Getting Started:</h4>
+        <p style='font-size: 1rem;'>
+            Simply <strong>upload an image</strong> using the file uploader above to begin exploring!
+        </p>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # Show demo information
+    col1, col2, col3 = st.columns(3)
+    
+    with col1:
+        st.markdown("""
+        <div style='background: white; padding: 1.5rem; border-radius: 12px; 
+                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center;'>
+            <div style='font-size: 3rem; margin-bottom: 0.5rem;'>🔥</div>
+            <h4 style='color: #667eea; margin: 0.5rem 0;'>Max Compression</h4>
+            <p style='font-size: 0.9rem; color: #666; margin: 0;'>
+                ~50:1 ratio<br/>
+                Heavy compression<br/>
+                Lower quality
+            </p>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    with col2:
+        st.markdown("""
+        <div style='background: white; padding: 1.5rem; border-radius: 12px; 
+                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center;'>
+            <div style='font-size: 3rem; margin-bottom: 0.5rem;'>⚖️</div>
+            <h4 style='color: #667eea; margin: 0.5rem 0;'>Balanced</h4>
+            <p style='font-size: 0.9rem; color: #666; margin: 0;'>
+                ~10:1 ratio<br/>
+                Good compression<br/>
+                Balanced quality
+            </p>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    with col3:
+        st.markdown("""
+        <div style='background: white; padding: 1.5rem; border-radius: 12px; 
+                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center;'>
+            <div style='font-size: 3rem; margin-bottom: 0.5rem;'>✨</div>
+            <h4 style='color: #667eea; margin: 0.5rem 0;'>High Quality</h4>
+            <p style='font-size: 0.9rem; color: #666; margin: 0;'>
+                ~5:1 ratio<br/>
+                Light compression<br/>
+                High quality
+            </p>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    st.stop()
+
+# Load Image
+try:
+    image = Image.open(uploaded_file)
+    st.success(f"✅ Image loaded successfully: **{uploaded_file.name}**")
+except Exception as e:
+    st.error(f"❌ Error loading image: {e}")
+    st.stop()
+
+# Resize image if too large
+max_dimensions = (1024, 1024)
+if image.width > max_dimensions[0] or image.height > max_dimensions[1]:
+    st.warning("⚠️ Resizing large image for optimal processing performance...")
+    try:
+        resample_filter = Image.Resampling.LANCZOS if hasattr(Image, "Resampling") else Image.LANCZOS
+        image.thumbnail(max_dimensions, resample_filter)
+    except Exception as e:
+        st.error(f"❌ Error resizing image: {e}")
+        st.stop()
+
+# Convert image to grayscale numpy array
+image_np = np.array(image)
+gray_image = np.array(image.convert("L"))
+
+# ------------------------------------------------------------------------
+# Compute image properties
+image_height, image_width = gray_image.shape
+num_pixels = image_height * image_width
+
+# Determine max rank
+max_rank = min(image_height, image_width)
+default_rank = min(50, max_rank)
+
+# ------------------------------------------------------------------------
+# Rank Selection with better UX
+st.markdown("### 🎚️ Step 2: Adjust Compression Level")
+
+# Info box about rank selection
+st.markdown("""
+<div style='background: #f8f9fa; padding: 1rem; border-radius: 10px; 
+            border-left: 4px solid #667eea; margin-bottom: 1.5rem;'>
+    <p style='margin: 0; color: #666;'>
+        <strong>💡 Tip:</strong> The rank determines how many singular values are used. 
+        Lower rank = higher compression but lower quality. Higher rank = better quality but less compression.
+    </p>
+</div>
+""", unsafe_allow_html=True)
+
+# Initialize session state for rank if not exists
+if 'rank' not in st.session_state:
+    st.session_state.rank = default_rank
+
+# Quick presets with better styling
+st.markdown("<p style='text-align: center; font-weight: 600; margin: 0 0 0.5rem 0;'>⚡ Quick Presets:</p>", unsafe_allow_html=True)
+
+preset_col1, preset_col2, preset_col3, preset_col4 = st.columns(4)
+
+with preset_col1:
+    if st.button("🔥 Max Compression", use_container_width=True, help="~5% of max rank"):
+        st.session_state.rank = max(1, max_rank // 20)
+        st.rerun()
+        
+with preset_col2:
+    if st.button("⚖️ Balanced", use_container_width=True, help="25% of max rank"):
+        st.session_state.rank = max_rank // 4
+        st.rerun()
+        
+with preset_col3:
+    if st.button("✨ High Quality", use_container_width=True, help="50% of max rank"):
+        st.session_state.rank = max_rank // 2
+        st.rerun()
+        
+with preset_col4:
+    if st.button("🎯 Ultra HD", use_container_width=True, help="90% of max rank"):
+        st.session_state.rank = int(max_rank * 0.9)
+        st.rerun()
+
+# Slider below presets
+col1, col2, col3 = st.columns([1, 3, 1])
+
+with col2:
+    rank = st.slider(
+        "Select Compression Rank",
+        min_value=1,
+        max_value=max_rank,
+        value=st.session_state.rank,
+        step=1,
+        help=f"Lower values = more compression. Range: 1 to {max_rank}"
+    )
+    
+    # Update session state when slider changes
+    st.session_state.rank = rank
+    
+    # Show percentage
+    rank_percentage = (rank / max_rank) * 100
+    st.caption(f"Current: **{rank}** ({rank_percentage:.1f}% of maximum rank)")
+
+# ------------------------------------------------------------------------
+# Perform SVD
+with st.spinner("🔄 Processing SVD compression..."):
+    U, S, VT = np.linalg.svd(gray_image, full_matrices=False)
+    S_diag = np.diag(S[:rank])
+    Xprox = U[:, :rank] @ S_diag @ VT[:rank, :]
+
+# ------------------------------------------------------------------------
+# Compute Compression Statistics (moved here before image display)
+uncompressed_size = num_pixels
+compressed_size = rank * (image_width + image_height + 1)
+compression_ratio = uncompressed_size / compressed_size if compressed_size > 0 else float('inf')
+space_saved = ((uncompressed_size - compressed_size) / uncompressed_size) * 100
+
+# ------------------------------------------------------------------------
+# Layout: Original and Reconstructed Images
+st.markdown("### 🖼️ Step 3: Visual Comparison")
+
+col_original, col_reconstructed = st.columns(2)
+
+with col_original:
+    st.markdown("""
+    <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                padding: 0.5rem; border-radius: 12px 12px 0 0; text-align: center;'>
+        <h4 style='color: white; margin: 0; font-size: 1.1rem;'>📌 Original Image</h4>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    fig1, ax1 = plt.subplots(figsize=(8, 8), facecolor='white')
+    ax1.imshow(gray_image, cmap="gray")
+    ax1.axis("off")
+    plt.tight_layout()
+    st.pyplot(fig1)
+    plt.close(fig1)
+    
+    st.caption(f"Size: {image_width}×{image_height} | Total: {num_pixels:,} pixels")
+
+with col_reconstructed:
+    st.markdown("""
+    <div style='background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); 
+                padding: 0.5rem; border-radius: 12px 12px 0 0; text-align: center;'>
+        <h4 style='color: white; margin: 0; font-size: 1.1rem;'>🔧 Compressed Image (Rank {})</h4>
+    </div>
+    """.format(rank), unsafe_allow_html=True)
+    
+    fig2, ax2 = plt.subplots(figsize=(8, 8), facecolor='white')
+    ax2.imshow(Xprox, cmap="gray")
+    ax2.axis("off")
+    plt.tight_layout()
+    st.pyplot(fig2)
+    plt.close(fig2)
+    
+    st.caption(f"Compressed Size: {compressed_size:,} values | Ratio: {compression_ratio:.2f}:1")
+
+# ------------------------------------------------------------------------
+# Display Metrics
+st.markdown("### 📊 Step 4: Compression Analytics")
+
+# Create a nice header for metrics
+st.markdown("""
+<div style='background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%); 
+            padding: 1rem; border-radius: 10px; margin-bottom: 1rem;'>
+    <p style='margin: 0; text-align: center; color: #666; font-size: 0.95rem;'>
+        📈 Key Performance Indicators
+    </p>
+</div>
+""", unsafe_allow_html=True)
+
+metric_col1, metric_col2, metric_col3, metric_col4 = st.columns(4)
+
+with metric_col1:
+    st.metric(
+        label="🖼️ Image Size",
+        value=f"{image_width}×{image_height}",
+        delta=None,
+        help=f"Total pixels: {num_pixels:,}"
+    )
+
+with metric_col2:
+    st.metric(
+        label="🎚️ Current Rank",
+        value=f"{rank}",
+        delta=f"{(rank/max_rank)*100:.1f}%",
+        help=f"Using {rank} out of {max_rank} possible singular values"
+    )
+
+with metric_col3:
+    st.metric(
+        label="⚡ Compression Ratio",
+        value=f"{compression_ratio:.2f}:1",
+        delta="Higher is better",
+        help="How much the image is compressed"
+    )
+
+with metric_col4:
+    st.metric(
+        label="💾 Space Saved",
+        value=f"{space_saved:.1f}%",
+        delta=f"{uncompressed_size - compressed_size:,}",
+        help="Reduction in storage requirements"
+    )
+
+# ------------------------------------------------------------------------
+# Detailed Statistics Card - Using Streamlit Components
+st.markdown("### 📈 Detailed Compression Report")
+
+# Create a nice container for stats
+stats_container = st.container()
+
+with stats_container:
+    # Create columns for better layout
+    stat_col1, stat_col2 = st.columns(2)
+    
+    with stat_col1:
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                    padding: 1.5rem; border-radius: 12px; color: white; margin-bottom: 1rem;'>
+            <p style='margin: 0; font-size: 0.9rem; opacity: 0.9;'>📏 Image Dimensions</p>
+            <p style='margin: 0.3rem 0 0 0; font-size: 1.5rem; font-weight: bold;'>{} × {} pixels</p>
+        </div>
+        """.format(image_width, image_height), unsafe_allow_html=True)
+        
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                    padding: 1.5rem; border-radius: 12px; color: white; margin-bottom: 1rem;'>
+            <p style='margin: 0; font-size: 0.9rem; opacity: 0.9;'>📂 Uncompressed Size</p>
+            <p style='margin: 0.3rem 0 0 0; font-size: 1.5rem; font-weight: bold;'>{:,} values</p>
+        </div>
+        """.format(uncompressed_size), unsafe_allow_html=True)
+        
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                    padding: 1.5rem; border-radius: 12px; color: white; margin-bottom: 1rem;'>
+            <p style='margin: 0; font-size: 0.9rem; opacity: 0.9;'>🎯 Singular Values Used</p>
+            <p style='margin: 0.3rem 0 0 0; font-size: 1.5rem; font-weight: bold;'>{} / {}</p>
+        </div>
+        """.format(rank, max_rank), unsafe_allow_html=True)
+    
+    with stat_col2:
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                    padding: 1.5rem; border-radius: 12px; color: white; margin-bottom: 1rem;'>
+            <p style='margin: 0; font-size: 0.9rem; opacity: 0.9;'>🔢 Total Pixels</p>
+            <p style='margin: 0.3rem 0 0 0; font-size: 1.5rem; font-weight: bold;'>{:,}</p>
+        </div>
+        """.format(num_pixels), unsafe_allow_html=True)
+        
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                    padding: 1.5rem; border-radius: 12px; color: white; margin-bottom: 1rem;'>
+            <p style='margin: 0; font-size: 0.9rem; opacity: 0.9;'>🗜️ Compressed Size</p>
+            <p style='margin: 0.3rem 0 0 0; font-size: 1.5rem; font-weight: bold;'>{:,} values</p>
+        </div>
+        """.format(compressed_size), unsafe_allow_html=True)
+        
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                    padding: 1.5rem; border-radius: 12px; color: white; margin-bottom: 1rem;'>
+            <p style='margin: 0; font-size: 0.9rem; opacity: 0.9;'>💾 Space Saved</p>
+            <p style='margin: 0.3rem 0 0 0; font-size: 1.5rem; font-weight: bold;'>{:.1f}%</p>
+        </div>
+        """.format(space_saved), unsafe_allow_html=True)
+
+# Highlight the compression ratio
+st.markdown("""
+<div style='background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); 
+            padding: 1.5rem 2rem; border-radius: 15px; 
+            text-align: center; margin: 1.5rem 0;
+            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);'>
+    <p style='margin: 0; font-size: 1.1rem; color: #764ba2; font-weight: 600;'>🚀 Compression Ratio</p>
+    <p style='margin: 0.5rem 0 0 0; font-size: 2.5rem; color: #764ba2; font-weight: bold;'>{:.2f}:1</p>
+</div>
+""".format(compression_ratio), unsafe_allow_html=True)
+
+# ------------------------------------------------------------------------
+# Compression Progress Visualization
+st.markdown("### 📉 Compression Efficiency")
+progress_value = min(1.0, rank / max_rank)
+st.progress(progress_value)
+st.caption(f"Using {rank} out of {max_rank} available singular values ({(rank/max_rank)*100:.1f}%)")
+
+# ------------------------------------------------------------------------
+# Additional Insights
+with st.expander("🔍 View Technical Details"):
+    st.write(f"""
+    **SVD Decomposition Details:**
+    - **U matrix shape**: {U.shape}
+    - **Σ (Singular values) shape**: {S.shape}
+    - **V^T matrix shape**: {VT.shape}
+    - **Reconstructed matrix shape**: {Xprox.shape}
+    - **Data type**: {gray_image.dtype}
+    - **Rank used**: {rank}
+    - **Maximum possible rank**: {max_rank}
+    
+    **Storage Analysis:**
+    - Original: {uncompressed_size:,} values
+    - Compressed (U): {rank * image_height:,} values
+    - Compressed (Σ): {rank:,} values
+    - Compressed (V^T): {rank * image_width:,} values
+    - **Total compressed**: {compressed_size:,} values
+    - **Reduction**: {space_saved:.2f}%
+    """)
+
+# ------------------------------------------------------------------------
+# Download Option
+st.markdown("### 💾 Step 5: Export Your Compressed Image")
+
+st.markdown("""
+<div style='background: #f8f9fa; padding: 1rem; border-radius: 10px; 
+            border-left: 4px solid #667eea; margin-bottom: 1rem;'>
+    <p style='margin: 0; color: #666;'>
+        <strong>📥 Ready to download?</strong> Save your compressed image to your device.
+    </p>
+</div>
+""", unsafe_allow_html=True)
+
+col_d1, col_d2, col_d3 = st.columns([1, 2, 1])
+
+with col_d2:
+    # Convert reconstructed image to PIL
+    reconstructed_pil = Image.fromarray(np.uint8(np.clip(Xprox, 0, 255)))
+    
+    # Save to bytes
+    buf = io.BytesIO()
+    reconstructed_pil.save(buf, format='PNG')
+    byte_im = buf.getvalue()
+    
+    st.download_button(
+        label="⬇️ Download Compressed Image",
+        data=byte_im,
+        file_name=f"compressed_rank_{rank}_{uploaded_file.name}",
+        mime="image/png",
+        help="Download the reconstructed image as PNG",
+        use_container_width=True
+    )
+    
+    st.caption(f"📁 Filename: compressed_rank_{rank}_{uploaded_file.name}")
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+# ------------------------------------------------------------------------
+# Footer
+st.markdown("""
+<div class='footer'>
+    <p style='font-size: 1.1rem; margin-bottom: 0.5rem;'><strong>👨‍🏫 Developed by Dr. Jishan Ahmed</strong></p>
+    <p style='margin: 0.3rem 0; font-size: 0.95rem;'>Data Science Assistant Professor</p>
+    <p style='margin: 0.3rem 0; font-size: 0.95rem;'>Department of Mathematics</p>
+    <p style='margin: 0.3rem 0 1rem 0; font-size: 0.95rem;'>Weber State University</p>
+    <p style='margin-top: 1rem; font-size: 0.85rem; opacity: 0.7;'>
+        Powered by NumPy, Matplotlib, and Streamlit | Linear Algebra in Action 🚀
+    </p>
+</div>
+""", unsafe_allow_html=True)