Upload app.py

app.py

@@ -61,26 +61,29 @@ st.markdown("""
     .upload-section {
         background: linear-gradient(135deg, #a8e6cf 0%, #74b9ff 100%);
         color: white;
-        padding: 15px 20px;
+        padding: 20px 25px;
         border-radius: 15px;
         text-align: center;
         margin-bottom: 20px;
         box-shadow: 0 6px 20px rgba(168, 230, 207, 0.3);
-        height: 100px;
+        height: 130px;
         display: flex;
         flex-direction: column;
         justify-content: center;
+        line-height: 1.4;
     }
     
     .upload-section h3 {
         font-size: 1.3rem;
-        margin: 0 0 5px 0;
+        margin: 0 0 8px 0;
+        font-weight: bold;
     }
     
     .upload-section p {
-        font-size: 0.9rem;
+        font-size: 0.95rem;
         margin: 0;
         opacity: 0.9;
+        line-height: 1.3;
     }
     
     .result-fire {
@@ -205,6 +208,10 @@ st.markdown("""
         padding: 20px;
         background: rgba(116, 185, 255, 0.05);
         transition: all 0.3s ease;
+        min-height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
     
     .stFileUploader > div > div:hover {
@@ -214,6 +221,25 @@ st.markdown("""
         box-shadow: 0 4px 15px rgba(116, 185, 255, 0.2);
     }
     
+    /* Mobile specific styling */
+    @media (max-width: 768px) {
+        .stFileUploader > div > div {
+            min-height: 100px;
+            padding: 25px;
+            font-size: 1.1rem;
+        }
+        
+        .stFileUploader button {
+            padding: 15px 25px;
+            font-size: 1.1rem;
+            border-radius: 10px;
+            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
+            color: white;
+            border: none;
+            font-weight: bold;
+        }
+    }
+    
     /* Mobile responsive adjustments */
     @media (max-width: 768px) {
         .main-header h1 {
@@ -225,11 +251,18 @@ st.markdown("""
         }
         
         .upload-section {
-            height: 80px;
+            height: 110px;
+            padding: 18px 20px;
         }
         
         .upload-section h3 {
             font-size: 1.1rem;
+            margin: 0 0 6px 0;
+        }
+        
+        .upload-section p {
+            font-size: 0.9rem;
+            line-height: 1.2;
         }
         
         .result-fire h2, .result-no-fire h2 {
@@ -485,19 +518,19 @@ def main():
         st.markdown("""
         <div class="upload-section">
             <h3>📸 Fire Detection Input</h3>
-            <p>Upload an image or take a photo to detect fire or smoke in your data center</p>
+            <p>Upload an image or take a photo to detect fire or smoke<br>in your data center</p>
         </div>
         """, unsafe_allow_html=True)
         
         # Mobile-friendly file uploader that opens native camera
         st.markdown("**📱 Take Photo or Upload Image**")
-        st.markdown("📸 **On Mobile**: Tap below → Choose 'Take Photo' to open camera")
-        st.markdown("💻 **On Desktop**: Click below to select image files")
+        st.markdown("📸 **On Mobile**: Tap 'Browse files' below → Choose 'Camera' to take photo")
+        st.markdown("💻 **On Desktop**: Click 'Browse files' below to select image files")
         
         uploaded_file = st.file_uploader(
-            "Choose an image or take a photo...",
+            "📸 Tap 'Browse files' → Camera (Mobile) | 📁 Choose file (Desktop)",
             type=['jpg', 'jpeg', 'png', 'bmp', 'tiff'],
-            help="📱 Mobile: Tap to open camera or gallery | 💻 Desktop: Click to browse files"
+            help="📱 Mobile: Tap 'Browse files' then select 'Camera' | 💻 Desktop: Click to browse files"
         )
         
         # Process the uploaded image