File size: 5,165 Bytes
242038e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50fcc3f
 
362ac29
50fcc3f
 
 
 
 
cf32fa2
50fcc3f
 
 
 
242038e
 
 
 
bf46c6b
c055556
 
bf46c6b
242038e
bf46c6b
 
 
 
 
c055556
 
bf46c6b
 
 
 
 
 
 
 
 
c055556
 
 
 
bf46c6b
 
 
c055556
 
bf46c6b
 
 
c055556
bf46c6b
 
 
 
c055556
 
bf46c6b
 
 
c055556
 
 
 
 
bf46c6b
 
 
c055556
 
bf46c6b
c055556
 
 
 
 
bf46c6b
c055556
bf46c6b
 
c055556
 
 
bf46c6b
 
242038e
286af5a
83295eb
286af5a
 
 
e006394
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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")