Update app.py

app.py

@@ -18,25 +18,39 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for styling
+# Custom CSS for styling with all white changed to black
 st.markdown("""
     <style>
+        :root {
+            --primary-color: #3498db;
+            --secondary-color: #2c3e50;
+            --background-color: #121212;
+            --text-color: black;
+            --card-color: #1e1e1e;
+        }
+        
+        body {
+            color: var(--text-color);
+            background-color: var(--background-color);
+        }
+        
         .stApp {
-            background-color: #f8f9fa;
+            background-color: var(--background-color);
+            color: var(--text-color);
         }
         .header {
-            color: #2c3e50;
+            color: var(--primary-color);
             font-size: 2.5rem;
             font-weight: bold;
             margin-bottom: 1rem;
         }
         .subheader {
-            color: #3498db;
+            color: var(--primary-color);
             font-size: 1.5rem;
             margin-bottom: 1rem;
         }
         .stButton>button {
-            background-color: #3498db;
+            background-color: var(--primary-color);
             color: black;
             border-radius: 5px;
             padding: 0.5rem 1rem;
@@ -53,6 +67,7 @@ st.markdown("""
             border-radius: 10px;
             padding: 2rem;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            color: black;
         }
         .model-card {
             border-radius: 10px;
@@ -61,6 +76,7 @@ st.markdown("""
             background-color: black;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             transition: all 0.3s;
+            color: black;
         }
         .model-card:hover {
             transform: translateY(-5px);
@@ -69,9 +85,53 @@ st.markdown("""
         .stSelectbox>div>div>select {
             border-radius: 5px;
             padding: 0.5rem;
+            background-color: black;
+            color: black;
         }
         .stSlider>div>div>div>div {
-            background-color: #3498db;
+            background-color: var(--primary-color);
+        }
+        .stTextInput>div>div>input {
+            color: black;
+            background-color: black;
+        }
+        .stMarkdown {
+            color: black;
+        }
+        .stAlert {
+            background-color: black;
+            color: black;
+        }
+        .stProgress>div>div>div>div {
+            background-color: var(--primary-color);
+        }
+        .stCheckbox>label {
+            color: black;
+        }
+        .stRadio>label {
+            color: black;
+        }
+        .stFileUploader>label {
+            color: black;
+        }
+        .stMetric {
+            color: black;
+        }
+        .stInfo {
+            background-color: black;
+            color: black;
+        }
+        .stSuccess {
+            background-color: black;
+            color: black;
+        }
+        .stWarning {
+            background-color: black;
+            color: black;
+        }
+        .stError {
+            background-color: black;
+            color: black;
         }
     </style>
 """, unsafe_allow_html=True)
@@ -102,9 +162,6 @@ class ObjectDetector:
         self.colors = np.random.uniform(0, 255, size=(len(self.classes), 3))
         
     def detect(self, image):
-        # In a real app, you would use an actual model here
-        # This is a simplified version for demonstration
-        
         # Convert image to numpy array
         frame = np.array(image)