initial commit

app.py

@@ -18,7 +18,8 @@ if 'mode' not in st.session_state:
     st.session_state['mode'] = 'Light Mode'
 
 # Light/Dark mode toggle
-mode = st.sidebar.selectbox('Select Mode', options=['Light Mode', 'Dark Mode'], index=0 if st.session_state['mode'] == 'Light Mode' else 1)
+mode = st.sidebar.selectbox('Select Mode', options=['Light Mode', 'Dark Mode'],
+                            index=0 if st.session_state['mode'] == 'Light Mode' else 1)
 
 st.session_state['mode'] = mode
 
@@ -28,96 +29,85 @@ def local_css(mode='Light Mode'):
         css_string = '''
         <style>
         /* Light mode CSS */
-        /* Main layout */
-        .main {
+        body {
             background-color: #f0f2f6;
+            color: #000000;
         }
         /* Title styling */
         .title h1 {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             text-align: center;
-            color: #000000; /* Black color */
+            color: #000000;
             font-size: 3rem;
             margin-bottom: 20px;
         }
         /* Image styling */
-        .st-image img {
+        img {
             border-radius: 15px;
             margin-bottom: 20px;
             max-width: 100%;
         }
         /* Sidebar styling */
         [data-testid="stSidebar"] {
-            background-color: #ffffff; /* White color */
-        }
-        [data-testid="stSidebar"] .css-ng1t4o {
-            color: #000000; /* Black color */
-        }
-        [data-testid="stSidebar"] .css-1d391kg {
-            color: #000000; /* Black color */
+            background-color: #ffffff;
+            color: #000000;
         }
         /* File uploader styling */
         .stFileUploader {
-            border: 2px dashed #000000; /* Black color */
+            border: 2px dashed #000000;
             border-radius: 10px;
             padding: 20px;
             text-align: center;
-            color: #000000; /* Black color */
-            background-color: #ffffff; /* White background */
+            color: #000000;
+            background-color: #ffffff;
             font-weight: bold;
         }
-        /* File uploader hover effect */
         .stFileUploader:hover {
             background-color: #e0e0e0;
         }
         /* Button styling */
-        .stButton>button {
-            background-color: #000000; /* Black background */
-            color: #ffffff; /* White text */
-            border: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 5px;
-            font-size: 1.1rem;
-            font-weight: bold;
-            margin-top: 10px;
-        }
-        .stButton>button:hover {
-            background-color: #333333; /* Darker black */
-            color: #ffffff;
+        button {
+            background-color: #000000 !important;
+            color: #ffffff !important;
+            border: none !important;
+            padding: 0.7rem 1.5rem !important;
+            border-radius: 5px !important;
+            font-size: 1.1rem !important;
+            font-weight: bold !important;
+            margin-top: 10px !important;
+        }
+        button:hover {
+            background-color: #333333 !important;
+            color: #ffffff !important;
         }
         /* Headers styling */
-        h2 {
-            color: #000000; /* Black color */
-            margin-top: 30px;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        h3 {
-            color: #000000; /* Black color */
+        h2, h3 {
+            color: #000000;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         /* Text styling */
-        .stMarkdown p {
+        p {
             font-size: 1.1rem;
             color: #000000;
         }
-        /* Footer styling */
+        /* Hide footer */
         footer {
             visibility: hidden;
         }
-        /* Hide sidebar on small screens */
+        /* Responsive Design */
         @media only screen and (max-width: 600px) {
             [data-testid="stSidebar"] {
                 display: none;
             }
-            .main .block-container {
+            .block-container {
                 padding-left: 1rem;
                 padding-right: 1rem;
             }
             .title h1 {
                 font-size: 2rem;
             }
-            .stButton>button {
-                width: 100%;
+            button {
+                width: 100% !important;
             }
         }
         /* Sample images grid */
@@ -136,7 +126,7 @@ def local_css(mode='Light Mode'):
             border: 2px solid transparent;
         }
         .sample-images img:hover {
-            border: 2px solid #000000; /* Black border on hover */
+            border: 2px solid #000000;
         }
         </style>
         '''
@@ -144,96 +134,85 @@ def local_css(mode='Light Mode'):
         css_string = '''
         <style>
         /* Dark mode CSS */
-        /* Main layout */
-        .main {
+        body {
             background-color: #1e1e1e;
+            color: #ffffff;
         }
         /* Title styling */
         .title h1 {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             text-align: center;
-            color: #ffffff; /* White color */
+            color: #ffffff;
             font-size: 3rem;
             margin-bottom: 20px;
         }
         /* Image styling */
-        .st-image img {
+        img {
             border-radius: 15px;
             margin-bottom: 20px;
             max-width: 100%;
         }
         /* Sidebar styling */
         [data-testid="stSidebar"] {
-            background-color: #333333; /* Dark gray */
-        }
-        [data-testid="stSidebar"] .css-ng1t4o {
-            color: #ffffff; /* White color */
-        }
-        [data-testid="stSidebar"] .css-1d391kg {
-            color: #ffffff; /* White color */
+            background-color: #333333;
+            color: #ffffff;
         }
         /* File uploader styling */
         .stFileUploader {
-            border: 2px dashed #ffffff; /* White color */
+            border: 2px dashed #ffffff;
             border-radius: 10px;
             padding: 20px;
             text-align: center;
-            color: #ffffff; /* White color */
-            background-color: #1e1e1e; /* Dark background */
+            color: #ffffff;
+            background-color: #1e1e1e;
             font-weight: bold;
         }
-        /* File uploader hover effect */
         .stFileUploader:hover {
             background-color: #333333;
         }
         /* Button styling */
-        .stButton>button {
-            background-color: #ffffff; /* White background */
-            color: #000000; /* Black text */
-            border: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 5px;
-            font-size: 1.1rem;
-            font-weight: bold;
-            margin-top: 10px;
-        }
-        .stButton>button:hover {
-            background-color: #e0e0e0; /* Lighter gray */
-            color: #000000;
+        button {
+            background-color: #ffffff !important;
+            color: #000000 !important;
+            border: none !important;
+            padding: 0.7rem 1.5rem !important;
+            border-radius: 5px !important;
+            font-size: 1.1rem !important;
+            font-weight: bold !important;
+            margin-top: 10px !important;
+        }
+        button:hover {
+            background-color: #e0e0e0 !important;
+            color: #000000 !important;
         }
         /* Headers styling */
-        h2 {
-            color: #ffffff; /* White color */
-            margin-top: 30px;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        h3 {
-            color: #ffffff; /* White color */
+        h2, h3 {
+            color: #ffffff;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         /* Text styling */
-        .stMarkdown p {
+        p {
             font-size: 1.1rem;
-            color: #ffffff; /* White text */
+            color: #ffffff;
         }
-        /* Footer styling */
+        /* Hide footer */
         footer {
             visibility: hidden;
         }
-        /* Hide sidebar on small screens */
+        /* Responsive Design */
         @media only screen and (max-width: 600px) {
             [data-testid="stSidebar"] {
                 display: none;
             }
-            .main .block-container {
+            .block-container {
                 padding-left: 1rem;
                 padding-right: 1rem;
             }
             .title h1 {
                 font-size: 2rem;
             }
-            .stButton>button {
-                width: 100%;
+            button {
+                width: 100% !important;
             }
         }
         /* Sample images grid */
@@ -252,12 +231,13 @@ def local_css(mode='Light Mode'):
             border: 2px solid transparent;
         }
         .sample-images img:hover {
-            border: 2px solid #ffffff; /* White border on hover */
+            border: 2px solid #ffffff;
         }
         </style>
         '''
     st.markdown(css_string, unsafe_allow_html=True)
 
+# Apply the custom CSS based on the selected mode
 local_css(st.session_state['mode'])
 
 # Load the image classification pipeline