Upload app.py

app.py

@@ -192,6 +192,56 @@ st.markdown("""
         width: auto;
         object-fit: contain;
     }
+    
+    /* Mobile-friendly camera and tabs */
+    .stTabs > div > div > div > div {
+        padding: 10px 15px;
+        font-weight: bold;
+    }
+    
+    .stTabs > div > div > div > div[aria-selected="true"] {
+        background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
+        color: white;
+        border-radius: 10px;
+    }
+    
+    /* Camera input styling */
+    .stCamera > div {
+        border-radius: 15px;
+        overflow: hidden;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    }
+    
+    /* Mobile responsive adjustments */
+    @media (max-width: 768px) {
+        .main-header h1 {
+            font-size: 2rem;
+        }
+        
+        .main-header p {
+            font-size: 1rem;
+        }
+        
+        .upload-section {
+            height: 80px;
+        }
+        
+        .upload-section h3 {
+            font-size: 1.1rem;
+        }
+        
+        .result-fire h2, .result-no-fire h2 {
+            font-size: 1rem;
+        }
+        
+        .result-fire, .result-no-fire {
+            height: 80px;
+        }
+        
+        .stImage > img {
+            max-height: 300px;
+        }
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -432,21 +482,44 @@ def main():
         # Upload section
         st.markdown("""
         <div class="upload-section">
-            <h3>📸 Upload Data Center Image</h3>
-            <p>Upload an image to detect fire or smoke in your data center</p>
+            <h3>📸 Fire Detection Input</h3>
+            <p>Upload an image or take a photo to detect fire or smoke in your data center</p>
         </div>
         """, unsafe_allow_html=True)
         
-        uploaded_file = st.file_uploader(
-            "Choose an image...",
-            type=['jpg', 'jpeg', 'png', 'bmp', 'tiff'],
-            help="Upload an image from your data center for fire detection"
-        )
+        # Create tabs for different input methods
+        tab1, tab2 = st.tabs(["📁 Upload File", "📱 Take Photo"])
+        
+        image = None
+        image_source = None
+        
+        with tab1:
+            uploaded_file = st.file_uploader(
+                "Choose an image...",
+                type=['jpg', 'jpeg', 'png', 'bmp', 'tiff'],
+                help="Upload an image from your data center for fire detection"
+            )
+            
+            if uploaded_file is not None:
+                image = Image.open(uploaded_file)
+                image_source = "uploaded"
+        
+        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"
+            )
+            
+            if camera_photo is not None:
+                image = Image.open(camera_photo)
+                image_source = "camera"
         
-        if uploaded_file is not None:
-            # Display uploaded image
-            image = Image.open(uploaded_file)
-            st.image(image, caption="Uploaded Image", use_column_width=True)
+        # 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"
+            st.image(image, caption=caption, use_column_width=True)
             
             # Get prediction
             transform = get_inference_transform()
@@ -462,6 +535,7 @@ def main():
                 with st.expander("🔬 Technical Details"):
                     st.markdown(f"""
                     **Prediction Details:**
+                    - Input Source: {image_source.title()}
                     - Predicted Class: {predicted_label}
                     - Confidence Score: {confidence_score:.4f}
                     - Fire Probability: {all_probs[0]:.4f}