Upload app.py

app.py

@@ -193,37 +193,22 @@ st.markdown("""
         object-fit: contain;
     }
     
-    /* Mobile-friendly camera and tabs - Fixed styling */
+    /* Simplified tab styling */
     .stTabs {
         margin-top: 10px;
     }
     
     .stTabs > div > div > div > div {
-        padding: 8px 12px;
+        padding: 10px 15px;
         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 !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 */
@@ -263,20 +248,6 @@ st.markdown("""
             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;
@@ -530,68 +501,46 @@ def main():
         """, unsafe_allow_html=True)
         
         # Create tabs for different input methods
-        tab1, tab2 = st.tabs(["📱 Mobile Camera", "📁 Upload File"])
+        tab1, tab2 = st.tabs(["📷 Camera", "📁 Upload"])
         
         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)
+            st.markdown("**📱 Take a Live Photo**")
             
-            # Mobile-optimized file uploader
-            uploaded_file = st.file_uploader(
-                "📱 Tap to Take Photo or Upload Image",
-                type=['jpg', 'jpeg', 'png', 'bmp', 'tiff'],
-                help="On mobile: Tap 'Browse files' then select 'Camera' to take a photo, or 'Photo Library' to upload existing images",
-                key="mobile_uploader"
+            # Direct camera input - this opens native mobile camera
+            camera_photo = st.camera_input(
+                "📸 Take a picture",
+                help="Click to access your device camera and take a photo for fire detection"
             )
             
-            if uploaded_file is not None:
-                image = Image.open(uploaded_file)
-                image_source = "mobile"
+            if camera_photo is not None:
+                image = Image.open(camera_photo)
+                image_source = "camera"
         
         with tab2:
-            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)
+            st.markdown("**📁 Upload from Device**")
             
-            # Desktop file uploader
-            desktop_file = st.file_uploader(
-                "Choose an image file...",
+            # File uploader for existing images
+            uploaded_file = st.file_uploader(
+                "Choose an image...",
                 type=['jpg', 'jpeg', 'png', 'bmp', 'tiff'],
-                help="Upload an image from your computer for fire detection",
-                key="desktop_uploader"
+                help="Upload an existing image from your device for fire detection"
             )
             
-            if desktop_file is not None:
-                image = Image.open(desktop_file)
-                image_source = "desktop"
+            if uploaded_file is not None:
+                image = Image.open(uploaded_file)
+                image_source = "uploaded"
         
         # Process the image (whether uploaded or from camera)
         if image is not None:
             # Display the image with appropriate caption
             caption_map = {
-                "mobile": "📱 Mobile Photo",
-                "desktop": "💻 Desktop Image",
-                "camera": "📷 Camera Photo"
+                "camera": "📷 Camera Photo",
+                "uploaded": "📁 Uploaded Image"
             }
-            caption = caption_map.get(image_source, "Uploaded Image")
+            caption = caption_map.get(image_source, "Image")
             st.image(image, caption=caption, use_column_width=True)
             
             # Get prediction