import streamlit as st
import numpy as np
from PIL import Image

st.title("OpenCv")
st.markdown("""`OpenCV (Open Source Computer Vision Library)` is an open-source,
 cross-platform library of programming functions primarily aimed at real-time
  computer vision and image processing. Developed initially by Intel, OpenCV 
  provides a comprehensive set of tools and algorithms for tasks such as `object detection`, `image transformation`, `facial recognition`, `motion tracking`, and `camera calibration`, and it supports integration with machine learning frameworks.
""")

st.markdown("Let's Start with Image")
st.header("What do we mean by an Image?")
st.markdown("""
**Definition:**  
An image is a **2D representation of visible light**, which is part of the electromagnetic spectrum.

**Light Spectrum Includes:**
- Visible Light
- Infrared (IR)
- Ultraviolet (UV)

These are classified by their **wavelengths**.

**Reflection Principle:**  
Light reflects off objects and is captured by sensors (e.g., eyes, cameras), resulting in an image.

**Conceptual View:**  
The image is treated as a **2D surface**, where each point corresponds to light intensity (based on wavelength).
""")

st.header("How to Represent an Image Numerically?")
st.markdown("""
### Grid-Like Structure (Matrix Format)
- Images are composed of **pixels**
- Stored as a **2D array (matrix)** → `width × height`
- Each pixel holds a **value** (either intensity or RGB color info)

### High Resolution
- More pixels = Better image quality (higher detail)

### Numerical Representation:
- **Rows** = Pixels or Data Points (DP)
- **Columns** = Features (e.g., RGB channels)

### Tabular Analogy:
- Similar to a **DataFrame (DF)** or a **Structured Dataset (SD)**
- Each **row** = A data point (like a pixel or patch)
- Each **column** = A feature (color value, intensity, etc.)
""")

st.title("Color Spaces Introduction")

st.header("1. Color Spaces")
st.markdown("""
Color spaces are systems to represent colors numerically, allowing computers to process and understand color information effectively.
""")

st.header("2. Black and White")
st.markdown("""
- **Binary Representation**:
  - Black = 0
  - White = 1
- **Shades of Gray**: Only two levels – black or white.
- **Thresholding**: Used to convert grayscale to binary.
- **Example**: A binary matrix using only 0s and 1s.
""")
bw_image = Image.open("bw.png")
st.image(bw_image, caption="Black and White Image Representation")

st.header("3. Grayscale")
st.markdown("""
- **Range**: 0 (black) to 255 (white)
- **Pixel Values**: Single channel, each value represents brightness
- **Matrix Format**: Still 2D, e.g., a 4×4 matrix with intensity values like 90, 80, etc.
""")
gray_image = Image.open("grayscale.png")
st.image(gray_image, caption="Black and White Image Representation")

st.header("4. RGB (Red, Green, Blue)")
st.markdown("""
- **Color Representation**:
  - Stored as 3 separate channels: Red, Green, Blue
- **Structure**:
  - Each channel is a 2D matrix of same size
  - Combined together as a 3D array with shape `(height, width, 3)`
- **Intensity Range**: 0 to 255 per channel
- **Processing**:
  - Can split and merge channels for manipulation and analysis
""")
rgb_image = Image.open("rgb.png")
st.image(rgb_image, caption="Black and White Image Representation")

st.header("5. HSV (Hue, Saturation, Value)")
st.markdown("""
- **Purpose**: More intuitive for tasks like color segmentation
- **Hue (H)**:
  - Type of color
  - Range: 0–360
- **Saturation (S)**:
  - Intensity of the color
  - Range: 0–255
- **Value (V)**:
  - Brightness
  - Range: 0–255
- **Applications**:
  - Frequently used for filtering and identifying specific colors in an image
""")
hsv_image = Image.open("hsv.png")
st.image(hsv_image, caption="Black and White Image Representation")