Upload app.py

app.py

@@ -522,17 +522,109 @@ def main():
         </div>
         """, unsafe_allow_html=True)
         
-        # Mobile-friendly file uploader that opens native camera
+        # Mobile Camera Instructions
         st.markdown("**📱 Take Photo or Upload Image**")
-        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")
         
+        # Add helpful mobile instructions
+        st.info("📸 **Mobile Users**: The file uploader below will automatically show 'Camera' option when you tap it on mobile devices!")
+        
+        # Enhanced file uploader with mobile camera support
         uploaded_file = st.file_uploader(
-            "📸 Tap 'Browse files' → Camera (Mobile) | 📁 Choose file (Desktop)",
+            "📸 Tap here → Camera (Mobile) | 📁 Browse files (Desktop)",
             type=['jpg', 'jpeg', 'png', 'bmp', 'tiff'],
-            help="📱 Mobile: Tap 'Browse files' then select 'Camera' | 💻 Desktop: Click to browse files"
+            help="📱 Mobile: Tap this button and select 'Camera' option | 💻 Desktop: Click to browse files"
         )
         
+        # Enhanced mobile camera support with continuous monitoring
+        st.markdown("""
+        <style>
+        /* Enhanced file uploader styling for mobile */
+        .stFileUploader label {
+            font-size: 1.1rem !important;
+            font-weight: bold !important;
+            color: #0984e3 !important;
+        }
+        
+        .stFileUploader button {
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
+            color: white !important;
+            border: none !important;
+            border-radius: 10px !important;
+            padding: 12px 20px !important;
+            font-size: 1.1rem !important;
+            font-weight: bold !important;
+            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3) !important;
+            transition: all 0.3s ease !important;
+        }
+        
+        .stFileUploader button:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4) !important;
+        }
+        
+        /* Mobile specific enhancements */
+        @media (max-width: 768px) {
+            .stFileUploader button {
+                padding: 15px 25px !important;
+                font-size: 1.2rem !important;
+                width: 100% !important;
+                margin: 10px 0 !important;
+            }
+        }
+        </style>
+        
+        <script>
+        // Aggressive mobile camera support - continuously monitor and fix file inputs
+        function enableMobileCamera() {
+            const fileInputs = document.querySelectorAll('input[type="file"]');
+            fileInputs.forEach(input => {
+                // Set multiple attributes to ensure camera appears
+                input.setAttribute('accept', 'image/*');
+                input.setAttribute('capture', 'environment');
+                input.setAttribute('multiple', 'false');
+                
+                // Remove any existing event listeners to avoid duplicates
+                input.removeEventListener('click', handleFileClick);
+                input.addEventListener('click', handleFileClick);
+            });
+        }
+        
+        function handleFileClick(e) {
+            const input = e.target;
+            // Force camera attributes right before opening
+            input.setAttribute('accept', 'image/*');
+            input.setAttribute('capture', 'environment');
+            
+            // Small delay to ensure attributes are set
+            setTimeout(() => {
+                input.setAttribute('accept', 'image/*');
+                input.setAttribute('capture', 'environment');
+            }, 10);
+        }
+        
+        // Run immediately and continuously
+        enableMobileCamera();
+        
+        // Monitor for new file inputs (Streamlit creates them dynamically)
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'childList') {
+                    enableMobileCamera();
+                }
+            });
+        });
+        
+        // Start observing the entire document for changes
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+        
+        // Also run periodically as backup
+        setInterval(enableMobileCamera, 1000);
+        </script>
+        """, unsafe_allow_html=True)
+        
         # Process the uploaded image
         image = None
         image_source = "uploaded"