pages/Info _of_Image.py

import streamlit as st

# Custom CSS for styling
custom_css = """
<style>
    html, body, [data-testid="stAppViewContainer"] {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.6), 
            rgba(0, 0, 0, 0.6)
        ), 
        url("https://www.istockphoto.com/photo/tech-or-space-background-abstract-3d-illustration-gm1367865109-437999705?utm_source=pixabay&utm_medium=affiliate&utm_campaign=SRP_photo_sponsored&utm_content=https%3A%2F%2Fpixabay.com%2Fphotos%2Fsearch%2Fbackground%2520datascience%2F&utm_term=background+datascience.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: white;  /* Ensures all text is readable */
    }
    h2, h3 {
        color: #FFD700; /* Gold color for headings */
    }
    p {
        color: #FFFFFF; /* White text for paragraphs */
    }
    button {
        font-size: 16px;
        font-weight: bold;
        padding: 10px 20px;
        margin: 10px 5px;
        border-radius: 10px;
        border: none;
        cursor: pointer;
    }
</style>
"""

# Inject the CSS into the app
st.markdown(custom_css, unsafe_allow_html=True)

# Page Content
st.markdown("<h2 style='text-align: left; color: Black;'>What is IMAGE</h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "An image is a visual depiction of a subject, such as a person, object, scene, or idea, created or captured through means like photography, drawing, painting, or digital tools."
    "</p>", 
    unsafe_allow_html=True
)

# Buttons
col1, col2, col3 = st.columns(3)
with col1:
    if st.button("Colour Space"):
        st.markdown("<h3 style='text-align: left; color: Gold;'>Colour Space</h3>", unsafe_allow_html=True)
        st.markdown(
            "<p style='font-size: 16px; color: White;'>"
            "Colour spaces define how colors are represented in an image. Common spaces include RGB (Red, Green, Blue), HSV (Hue, Saturation, Value), and LAB. "
            "Using OpenCV, you can convert between color spaces with functions like `cv2.cvtColor()`."
            "</p>", 
            unsafe_allow_html=True
        )

with col2:
    if st.button("Video Formation"):
        st.markdown("<h3 style='text-align: left; color: Gold;'>Video Formation</h3>", unsafe_allow_html=True)
        st.markdown(
            "<p style='font-size: 16px; color: White;'>"
            "To create videos, you can use OpenCV's `cv2.VideoWriter` class. It allows capturing frames and saving them as a video file. "
            "Specify the codec, frame rate, and resolution for the output."
            "</p>", 
            unsafe_allow_html=True
        )
        st.markdown(
            "<p style='font-size: 16px; color: White;'>Example:</p>"
            "<pre style='background: #333; color: white; padding: 10px;'>"
            "import cv2\n"
            "fourcc = cv2.VideoWriter_fourcc(*'XVID')\n"
            "out = cv2.VideoWriter('output.avi', fourcc, 20.0, (640, 480))\n"
            "# Capture frames and write them using out.write(frame)"
            "</pre>", 
            unsafe_allow_html=True
        )

with col3:
    if st.button("Affine Methods"):
        st.markdown("<h3 style='text-align: left; color: Gold;'>Affine Methods</h3>", unsafe_allow_html=True)
        st.markdown(
            "<p style='font-size: 16px; color: White;'>"
            "Affine transformations involve operations like scaling, rotating, and translating images. OpenCV functions like `cv2.getAffineTransform` "
            "and `cv2.warpAffine` are used for these tasks."
            "</p>", 
            unsafe_allow_html=True
        )
        st.markdown(
            "<p style='font-size: 16px; color: White;'>Example:</p>"
            "<pre style='background: #333; color: white; padding: 10px;'>"
            "import cv2\n"
            "import numpy as np\n"
            "rows, cols = img.shape[:2]\n"
            "pts1 = np.float32([[50, 50], [200, 50], [50, 200]])\n"
            "pts2 = np.float32([[10, 100], [200, 50], [100, 250]])\n"
            "M = cv2.getAffineTransform(pts1, pts2)\n"
            "dst = cv2.warpAffine(img, M, (cols, rows))\n"
            "</pre>", 
            unsafe_allow_html=True
        )

# Link to Colab
st.markdown(
    "<p style='font-size: 16px; color: White;'>"
    "You can view and run the code in Colab: "
    "<a href='https://colab.research.google.com/drive/1fvP-k70HJnp1iCN7Vs-tkfFs8vq--WGc?usp=sharing' target='_blank' style='color: #FFD700;'>Colab Notebook</a>"
    "</p>", 
    unsafe_allow_html=True
)