Upload app.py

app.py

@@ -193,16 +193,37 @@ st.markdown("""
         object-fit: contain;
     }
     
-    /* Mobile-friendly camera and tabs */
+    /* Mobile-friendly camera and tabs - Fixed styling */
+    .stTabs {
+        margin-top: 10px;
+    }
+    
     .stTabs > div > div > div > div {
-        padding: 10px 15px;
+        padding: 8px 12px;
         font-weight: bold;
+        border: none;
+        background: transparent;
+        color: #333;
+        border-radius: 8px;
+        margin-right: 5px;
+        transition: all 0.3s ease;
     }
     
     .stTabs > div > div > div > div[aria-selected="true"] {
         background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
-        color: white;
-        border-radius: 10px;
+        color: white !important;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(116, 185, 255, 0.3);
+    }
+    
+    .stTabs > div > div > div > div:hover {
+        background: rgba(116, 185, 255, 0.1);
+        color: #0984e3;
+    }
+    
+    /* Fix tab underline */
+    .stTabs > div > div > div {
+        border-bottom: none;
     }
     
     /* Camera input styling */
@@ -241,6 +262,27 @@ st.markdown("""
         .stImage > img {
             max-height: 300px;
         }
+        
+        /* Mobile-specific file uploader improvements */
+        .stFileUploader > div > div > div > div {
+            padding: 15px;
+            border-radius: 10px;
+            border: 2px dashed #74b9ff;
+            background: rgba(116, 185, 255, 0.05);
+            text-align: center;
+        }
+        
+        .stFileUploader > div > div > div > div:hover {
+            border-color: #0984e3;
+            background: rgba(116, 185, 255, 0.1);
+        }
+        
+        /* Make tabs more touch-friendly on mobile */
+        .stTabs > div > div > div > div {
+            padding: 12px 16px;
+            font-size: 1rem;
+            min-height: 44px;
+        }
     }
 </style>
 """, unsafe_allow_html=True)
@@ -488,37 +530,68 @@ def main():
         """, unsafe_allow_html=True)
         
         # Create tabs for different input methods
-        tab1, tab2 = st.tabs(["📁 Upload File", "📱 Take Photo"])
+        tab1, tab2 = st.tabs(["📱 Mobile Camera", "📁 Upload File"])
         
         image = None
         image_source = None
         
         with tab1:
+            st.markdown("""
+            <div style="background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%); 
+                       padding: 15px; border-radius: 10px; margin: 10px 0;
+                       border: 2px solid #81c784; text-align: center;">
+                <h4 style="color: #2e7d32; margin: 0;">📱 Best for Mobile Users</h4>
+                <p style="color: #388e3c; margin: 5px 0; font-size: 14px;">
+                    Click "Browse files" → "Camera" to open your phone's camera app
+                </p>
+            </div>
+            """, unsafe_allow_html=True)
+            
+            # Mobile-optimized file uploader
             uploaded_file = st.file_uploader(
-                "Choose an image...",
+                "📱 Tap to Take Photo or Upload Image",
                 type=['jpg', 'jpeg', 'png', 'bmp', 'tiff'],
-                help="Upload an image from your data center for fire detection"
+                help="On mobile: Tap 'Browse files' then select 'Camera' to take a photo, or 'Photo Library' to upload existing images",
+                key="mobile_uploader"
             )
             
             if uploaded_file is not None:
                 image = Image.open(uploaded_file)
-                image_source = "uploaded"
+                image_source = "mobile"
         
         with tab2:
-            # Camera input for mobile devices
-            camera_photo = st.camera_input(
-                "Take a picture",
-                help="Use your device's camera to take a photo for fire detection"
+            st.markdown("""
+            <div style="background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); 
+                       padding: 15px; border-radius: 10px; margin: 10px 0;
+                       border: 2px solid #64b5f6; text-align: center;">
+                <h4 style="color: #1976d2; margin: 0;">💻 Desktop Upload</h4>
+                <p style="color: #1976d2; margin: 5px 0; font-size: 14px;">
+                    Select an image file from your computer
+                </p>
+            </div>
+            """, unsafe_allow_html=True)
+            
+            # Desktop file uploader
+            desktop_file = st.file_uploader(
+                "Choose an image file...",
+                type=['jpg', 'jpeg', 'png', 'bmp', 'tiff'],
+                help="Upload an image from your computer for fire detection",
+                key="desktop_uploader"
             )
             
-            if camera_photo is not None:
-                image = Image.open(camera_photo)
-                image_source = "camera"
+            if desktop_file is not None:
+                image = Image.open(desktop_file)
+                image_source = "desktop"
         
         # Process the image (whether uploaded or from camera)
         if image is not None:
             # Display the image with appropriate caption
-            caption = "Uploaded Image" if image_source == "uploaded" else "Camera Photo"
+            caption_map = {
+                "mobile": "📱 Mobile Photo",
+                "desktop": "💻 Desktop Image",
+                "camera": "📷 Camera Photo"
+            }
+            caption = caption_map.get(image_source, "Uploaded Image")
             st.image(image, caption=caption, use_column_width=True)
             
             # Get prediction