Update app.py

app.py

@@ -10,14 +10,14 @@ import torch
 # Set page config
 st.set_page_config(page_title="Building Detection App", page_icon="🏢", layout="wide")
 
-# Custom CSS
+# Custom CSS with theme compatibility
 st.markdown("""
 <style>
     .reportview-container {
-        background: #f0f2f6
+        background: var(--background-color);
     }
     .main {
-        background-color: #ffffff;
+        background-color: var(--background-color);
         padding: 2rem;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -41,6 +41,9 @@ st.markdown("""
         padding: 2rem;
         text-align: center;
     }
+    .theme-text {
+        color: var(--text-color);
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -81,30 +84,30 @@ def process_image(image):
     return cv2.cvtColor(annotated_image, cv2.COLOR_BGR2RGB)
 
 def main():
-    st.title("🏢 Building Detection App")
-    st.markdown("Upload an image to detect buildings using our advanced AI model.")
+    st.title("Building Detection App")
+    st.markdown('<p class="theme-text">Upload an image to detect buildings using our advanced AI model.</p>', unsafe_allow_html=True)
 
     col1, col2 = st.columns(2)
 
     with col1:
-        st.markdown("### Upload Image")
+        st.markdown('<h3 class="theme-text">Upload Image</h3>', unsafe_allow_html=True)
         uploaded_file = st.file_uploader("Choose an image...", type=["jpg", "jpeg", "png"])
         
         if uploaded_file is not None:
             image = Image.open(uploaded_file)
             st.image(image, caption="Uploaded Image", use_column_width=True)
             
-            if st.button("🔍 Detect Buildings"):
+            if st.button("Detect Buildings"):
                 with st.spinner("Processing..."):
                     result_image = process_image(image)
                     with col2:
-                        st.markdown("### Detection Results")
+                        st.markdown('<h3 class="theme-text">Detection Results</h3>', unsafe_allow_html=True)
                         st.image(result_image, caption="Processed Image", use_column_width=True)
                     st.success("Detection completed successfully!")
         else:
             st.markdown(
                 """
-                <div class="upload-box">
+                <div class="upload-box theme-text">
                     <h3>📁 Upload an image to get started</h3>
                     <p>Supported formats: JPG, JPEG, PNG</p>
                 </div>
@@ -114,19 +117,21 @@ def main():
 
     with col2:
         if uploaded_file is None:
-            st.markdown("### How it works")
+            st.markdown('<h3 class="theme-text">How it works</h3>', unsafe_allow_html=True)
             st.markdown(
                 """
-                1. **Upload** an image using the file uploader on the left.
-                2. Click the **Detect Buildings** button to process the image.
-                3. View the results with bounding boxes around detected buildings.
-
-                Our AI model is trained to identify various types of buildings from satellite images.
-                """
+                <p class="theme-text">
+                1. <strong>Upload</strong> an image using the file uploader on the left.<br>
+                2. Click the <strong>Detect Buildings</strong> button to process the image.<br>
+                3. View the results with bounding boxes around detected buildings.<br><br>
+                Our AI model is trained to identify various types of buildings in different environments.
+                </p>
+                """,
+                unsafe_allow_html=True
             )
 
     st.markdown("---")
-    st.markdown("Developed with ❤️ using Streamlit and YOLOv8")
+    #st.markdown('<p class="theme-text"></p>', unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main()