import streamlit as st
import pandas as pd
import numpy as np

# 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 */
    }
    stButton>button:hover {
        background-color: #45a049; /* Darker Green on hover */
        color:Balck;
    }
    .stButton>div:nth-child(1)>button {
        background-color: #2196F3; /* Blue */
    }
    .stButton>div:nth-child(2)>button {
        background-color: #f44336; /* Green */
    }
    .stButton>div:nth-child(3)>button {
        background-color: #FF9800; /* Orange */
    }
</style>
"""

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

# What is an Image
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. It can take various forms, including photographs, illustrations, artworks, or computer-generated visuals."
    "</p>", 
    unsafe_allow_html=True
)

# Features of an Image
st.markdown("<h2 style='text-align: left; color: Black;'>Features of IMAGE</h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Pixels: Images are composed of small dots called pixels, each containing color data that together create the overall image."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "File Formats: Images can be stored in different formats, such as:<br>"
    "<b>JPEG/JPG:</b> Widely used for photographs and online images due to their efficient balance between quality and file size.<br>"
    "<b>PNG:</b> Preferred for high-quality visuals or images requiring transparency, such as logos.<br>"
    "<b>GIF:</b> Commonly utilized for basic animations or compact graphics."
    "</p>", 
    unsafe_allow_html=True
)

# Basic Operations in Image
st.markdown("<h2 style='text-align: left; color: Black;'>Basic Operations in IMAGE</h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "For performing these basic operations, we use the <b>cv2</b> module from the OpenCV library.<br>"
    "cv2 is the Python module for OpenCV (Open Source Computer Vision Library), a powerful library used for computer vision and image processing tasks. It provides a wide range of tools and algorithms for analyzing and manipulating images and videos."
    "</p>", 
    unsafe_allow_html=True
)

# Why cv2 is Used
st.markdown("<h3 style='text-align: left; color: Black;'>Why cv2 is Used</h3>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "cv2 is used for various purposes, including:<br>"
    "1. <b>Image Processing:</b> Tasks like filtering, resizing, and format conversion.<br>"
    "2. <b>Video Analysis:</b> Techniques for video frame manipulation and analysis.<br>"
    "3. <b>Feature Detection:</b> Identifying features such as edges, corners, or objects in images.<br>"
    "4. <b>Image Transformations:</b> Rotations, translations, and other geometric operations."
    "</p>", 
    unsafe_allow_html=True
)

# Operations Used
st.markdown("<h3 style='text-align: left; color: Black;'>Operations Used</h3>", unsafe_allow_html=True)
st.markdown("1. imread()")
st.markdown("2. imshow()")
st.markdown("3. imwrite()")
st.markdown("4. cv2.waitKey()")
st.markdown("5. destroyAllWindows()")

# Add links to the GitHub repositories
st.markdown(
    "<p style='font-size: 16px; color: White;'>"
    "You can explore the code examples on GitHub:<br>"
    "<a href='https://github.com/Sathwik4119/IMAGE/blob/main/IMAGE.ipynb' target='_blank' style='color: #FFD700;'>IMAGE Creation</a><br>"
    "<a href='https://github.com/Sathwik4119/IMAGE/blob/main/Basicoperations_on_image.ipynb' target='_blank' style='color: #FFD700;'>Basic Operations on Image</a>"
    "</p>", 
    unsafe_allow_html=True
)
# Buttons for each stage
st.markdown("### Affine Methods:")
col1, col2,col3 = st.columns(3)

with col1:
    if st.button("Translation&Affine"):
        st.switch_page("pages/Translation_Affine.py")