Update pages/Data Collection.py

pages/Data Collection.py

@@ -1,111 +1,92 @@
 import streamlit as st
 
-# Title
-st.title("📸 Understanding Images and How to Handle Them")
+# Helper function for subheadings
+def subheading(text):
+    """Displays a subheader with consistent styling."""
+    st.markdown(f"<h3 style='color:teal;'>{text}</h3>", unsafe_allow_html=True)
 
-# Helper function to style text with HTML
-def colored_subheader(text, color):
-    st.markdown(f"<h3 style='color:{color};'>{text}</h3>", unsafe_allow_html=True)
+# Sidebar for navigation
+st.sidebar.title("Navigation")
+page = st.sidebar.radio("Go to", ["Introduction", "Understanding Images", "Color Spaces", "Basic Operations"])
 
-# What is an Image?
-st.header("What is an Image? 🖼️")
-st.write("An image is a **2D representation of the visible light spectrum**. It is created when light reflects off objects and is captured by a device like a camera or our eyes.")
-
-# How is an Image Formed?
-st.header("How is an Image Formed? 🌞📸")
-colored_subheader("1. Source of Light 🌟", "blue")
-st.write("- Light comes from sources like the **sun**, **moon**, or **stars**.")
-
-colored_subheader("2. Reflection 🔄", "green")
-st.write("- Light hits an object and **bounces back** (this is called reflection).")
-
-colored_subheader("3. Capture 📸", "orange")
-st.write("- The reflected light is captured by a camera or eyes, forming an image.")
-
-colored_subheader("4. Visible Light Only 🌈", "purple")
-st.write("- Not all light can create images (e.g., gamma rays or X-rays are invisible).")
-st.write("- **Visible light** is required to see and capture images.")
-
-# Images and Pixels
-st.header("Images and Pixels 🟦⬜")
-colored_subheader("What are Pixels? 📏", "red")
-st.write("- Pixels are tiny squares that make up an image.")
-st.write("- Each pixel contains information about color and brightness.")
-
-colored_subheader("Resolution 📐", "darkblue")
-st.write("- The number of pixels in an image determines its resolution.")
-st.write("- **More pixels = Clearer image = More details.**")
-
-# Why are Images Like a Grid?
-st.header("Why are Images Like a Grid? 🔳")
-colored_subheader("Grid Structure 🧩", "darkgreen")
-st.write("- Images are stored as grids because they are made of pixels, each representing a feature like color or brightness.")
-
-colored_subheader("Difference from Tabular Data 📊", "teal")
-st.write("- Tabular data has rows as data points and columns as features.")
-st.write("- In images, the entire grid represents a **single data point**, with each pixel as a feature.")
-
-# How Are Images Represented in Python?
-st.header("How Are Images Represented in Python? 🐍")
-colored_subheader("Using NumPy Arrays 📊", "maroon")
-st.write("- Images are converted into arrays of numbers for computers to process.")
-st.write("- Example: A black-and-white image is represented as a 2D array.")
-
-# Color Spaces in Images
-st.header("Color Spaces in Images 🌈")
-
-# Black and White
-colored_subheader("1. Black and White 🏴", "black")
-st.write("- Represents two colors: **Black (0)** and **White (255)**.")
-st.write("- **Demerit**: Cannot preserve other colors like red, blue, or green.")
-
-# Grayscale
-colored_subheader("2. Grayscale 🖤", "gray")
-st.write("- Preserves **256 shades of gray** (from 0 to 255).")
-st.write("- **Demerit**: Cannot handle colored images (like red, green, blue).")
-
-# RGB
-colored_subheader("3. RGB (Red, Green, Blue) 🌈", "blue")
-st.write("- Most common color space.")
-st.write("- Colors are created by mixing **Red**, **Green**, and **Blue** intensities.")
-st.write("- Each channel has values ranging from **0 to 255**.")
-st.write("- **Advantages**: Can represent up to **16 million colors**.")
-
-# How Images are Converted to Arrays
-st.header("How Images are Converted to Arrays 🖩")
-colored_subheader("Steps to Convert Images 🛠️", "brown")
-st.write("""
-1. **Step 1: Convert the Image to Numbers**: Each pixel’s color and brightness are stored as numbers.
-2. **Step 2: Create Arrays**:
-   - A black-and-white image becomes a **2D array** (rows and columns).
-   - A colored image (RGB) becomes a **3D array** with separate layers for red, green, and blue.
-3. **Step 3: Process the Array**: The computer processes these arrays to analyze or modify the image.
-""")
-
-# Differences Between 2D and 3D Arrays in Images
-st.header("Differences Between 2D and 3D Arrays in Images 📏")
-colored_subheader("Comparison 🆚", "indigo")
-st.table({
-    "Type": ["2D Array (Grayscale)", "3D Array (RGB)"],
-    "Explanation": ["Used for grayscale images (shades of gray).", "Used for RGB images (multiple channels)."],
-    "Values": ["0–255", "(R, G, B) values, each 0–255"]
-})
-
-# Notes
-st.header("Notes 📝")
-colored_subheader("Key Points ✏️", "gold")
+# App Title and Description
+st.title("Image Processing Fundamentals")
 st.write("""
-- **Color Spaces**: Essential to represent and preserve the colors in an image.
-- **Numpy Library**: Widely used in Python for processing images as arrays.
+This app introduces the basics of image processing, helping you understand how images are formed, represented, and handled programmatically. 
+It's designed for beginners exploring computer vision concepts.
 """)
 
-# Buttons
-col1, col2 = st.columns(2)
-
-with col1:
-    if st.button("🔄 Basic Operations Using OpenCV"):
-        st.write("Redirecting to the next section: Basic Operations Using OpenCV...")
-
-with col2:
-    if st.button("🔙 Back"):
-        st.write("Going back to the previous section...")
+# Introduction Section
+if page == "Introduction":
+    st.header("Introduction")
+    st.write("""
+    Images play a crucial role in various fields, including art, science, and technology.  
+    In this app, you will learn:
+    - How images are captured and represented.
+    - Different color spaces and their applications.
+    - Basic operations on images using Python libraries.
+    """)
+
+# Understanding Images Section
+elif page == "Understanding Images":
+    st.header("Understanding Images")
+    
+    # Subsections
+    subheading("What is an Image?")
+    st.write("""
+    An image is a **2D representation of light**, created when light reflects off an object and is captured by a camera or our eyes.
+    """)
+
+    subheading("How is an Image Formed?")
+    st.write("""
+    - **Light Source**: Light from sources like the sun or a bulb hits an object.
+    - **Reflection**: Light bounces off the object's surface.
+    - **Capture**: The reflected light is recorded by a camera sensor or the human eye.
+    """)
+
+    subheading("Why is an Image Represented as a Grid?")
+    st.write("""
+    - Images are stored as grids of **pixels**, where each pixel represents a single point of color and brightness.
+    - These grids are also called **image matrices**.
+    """)
+
+# Color Spaces Section
+elif page == "Color Spaces":
+    st.header("Color Spaces")
+    
+    subheading("1. Black and White")
+    st.write("""
+    - Represents two colors: **Black (0)** and **White (255)**.
+    - Used for simple image processing tasks where color isn't essential.
+    """)
+
+    subheading("2. Grayscale")
+    st.write("""
+    - Extends black and white to include **256 shades of gray**.
+    - Preserves brightness details but loses color information.
+    """)
+
+    subheading("3. RGB (Red, Green, Blue)")
+    st.write("""
+    - Combines three color channels: **Red**, **Green**, and **Blue**.
+    - Most commonly used for colored images, capable of representing over **16 million colors**.
+    """)
+
+# Basic Operations Section
+elif page == "Basic Operations":
+    st.header("Basic Operations Using OpenCV")
+    st.write("""
+    OpenCV is a powerful library for image processing. Here are some basic operations you can perform:
+    - Load and display images.
+    - Convert between color spaces (e.g., RGB to Grayscale).
+    - Resize and crop images.
+    - Apply filters and transformations.
+    """)
+
+    if st.button("Go Back"):
+        st.experimental_set_query_params(page="Introduction")
+
+# Footer
+st.sidebar.markdown("---")
+st.sidebar.write("**Created by a 22-year-old enthusiast exploring Streamlit!**")
+st.sidebar.write("[GitHub](https://github.com/your-repo) | [LinkedIn](https://linkedin.com/in/your-profile)")