app.py

import streamlit as st
from PIL import Image

# --- Page Configuration ---
st.set_page_config(page_title="Image Data Augmentation", layout="wide")

# --- Custom CSS for better visuals ---
st.markdown("""
    <style>
    .title {
        text-align: center;
        color: #4CAF50;
        font-size: 50px;
        font-weight: bold;
    }
    .subtitle {
        font-size: 22px;
        color: #555;
    }
    .section {
        background-color: #f9f9f9;
        padding: 25px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    hr {
        border: 1px solid #ccc;
    }
    </style>
""", unsafe_allow_html=True)

# --- Title ---
st.markdown("<div class='title'>🖼️ Image Data Augmentation</div>", unsafe_allow_html=True)
st.markdown("<hr>", unsafe_allow_html=True)

# --- What is Image Data Augmentation? ---
st.markdown("<div class='section'>", unsafe_allow_html=True)
st.subheader("🔍 What is Image Data Augmentation?")
st.markdown("""
Image Data Augmentation is a technique used to artificially expand your training dataset by generating modified versions of existing images.
This allows your model to:
- Learn from variations (rotation, lighting, etc.)
- Become more robust
- Reduce overfitting
""")
st.markdown("</div>", unsafe_allow_html=True)

# --- Why Use It? ---
st.markdown("<div class='section'>", unsafe_allow_html=True)
st.subheader("💡 Why Do We Use It?")
cols = st.columns(2)
with cols[0]:
    st.markdown("""
    - 🚀 Boost model performance  
    - 🧠 Improve generalization  
    - 🔍 Simulate real-world scenarios  
    - 💾 Reduce need for collecting more data  
    """)
with cols[1]:
    st.image("https://raw.githubusercontent.com/aleju/imgaug-doc/master/images/examples_grid.jpg",
             caption="Augmentation Examples (imgaug)", use_container_width=True)
st.markdown("</div>", unsafe_allow_html=True)

# --- Types of Augmentations ---
st.markdown("<div class='section'>", unsafe_allow_html=True)
st.subheader("🧰 Types of Image Augmentations")
cols = st.columns(2)
with cols[0]:
    st.markdown("""
    - 🔄 **Rotation**  
    - 🔁 **Flipping**  
    - 🔍 **Zooming**  
    - 🌗 **Brightness/Contrast**  
    - ✂️ **Cropping**
    """)
with cols[1]:
    st.markdown("""
    - 🚚 **Translation**  
    - 🧮 **Scaling**  
    - 📐 **Shearing**  
    - 🧲 **Affine Transformations**  
    """)
st.markdown("</div>", unsafe_allow_html=True)

# --- Affine Transformations ---
st.markdown("<div class='section'>", unsafe_allow_html=True)
st.subheader("📐 What Are Affine Transformations?")
st.markdown("""
Affine transformations maintain the shape of objects while changing their **position**, **size**, or **angle**:
- 🔃 **Translation**: Move image  
- 🔎 **Scaling**: Resize image  
- 🌀 **Rotation**: Turn image  
- 📏 **Shearing**: Slant/stretch image
""")
st.success("✅ These help the model recognize patterns under different conditions.")
st.markdown("</div>", unsafe_allow_html=True)

# --- Footer ---
st.markdown("<hr>", unsafe_allow_html=True)
st.markdown("<p style='text-align: center;'>🚧 Created with ❤️ using Streamlit</p>", unsafe_allow_html=True)