pages/Translation_Affine.py

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 */
    }
</style>
"""

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

st.markdown("<h2 style='text-align: left; color: Black;'>What is Translation </h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
   "Translation of an Image refers to the process of shifting an image in the horizontal (x-axis) and vertical (y-axis) directions without altering its dimensions or content. In computer vision and image processing, this operation is performed using geometric transformations."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
   "Steps to Translate an Image:"
    "</p>", 
    unsafe_allow_html=True
)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Load the image using cv2.imread()."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Create a translation matrix specifying the x and y shifts."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Use the cv2.warpAffine() function to apply the translation."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown("<h2 style='text-align: left; color: Black;'>What is Affine </h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
   "An Affine Transformation is a geometric operation that maintains the integrity of points, straight lines, and planes. It encompasses actions such as translation, scaling, rotation, reflection, and shearing. While it does not guarantee the preservation of angles or distances, it ensures that parallel lines remain parallel throughout the transformation."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown("<h3 style='text-align: left; color: Black;'> Affine Methods </h3>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "OpenCV provides the cv2.warpAffine() function to apply affine transformations."
    "</p>", 
    unsafe_allow_html=True
    )
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Translation: Shifts the image by a certain amount in the x and y directions."
     "</p>", 
    unsafe_allow_html=True
)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Scaling: Resizes the image by a scaling factor."
     "</p>", 
    unsafe_allow_html=True
)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
   "Rotation: Rotates the image around a specified center."
     "</p>", 
    unsafe_allow_html=True
)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
   "Shearing: Skews the image in one direction (x or y)."
     "</p>", 
    unsafe_allow_html=True
)
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/Translation.ipynb' target='_blank' style='color: #FFD700;'>Affine Methods</a><br>"
    "</p>", 
    unsafe_allow_html=True
)