Upload app.py

app.py

@@ -522,108 +522,58 @@ def main():
         </div>
         """, unsafe_allow_html=True)
         
-        # Mobile Camera Instructions
+        # Mobile-friendly file uploader
         st.markdown("**📱 Take Photo or Upload Image**")
         
-        # 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 here → Camera (Mobile) | 📁 Browse files (Desktop)",
-            type=['jpg', 'jpeg', 'png', 'bmp', 'tiff'],
-            help="📱 Mobile: Tap this button and select 'Camera' option | 💻 Desktop: Click to browse files"
-        )
-        
-        # Enhanced mobile camera support with continuous monitoring
+        # Clear mobile instructions
         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);
-            });
-        }
+        <div style="background: #e3f2fd; padding: 15px; border-radius: 10px; margin: 15px 0; border-left: 4px solid #2196f3;">
+            <p style="margin: 0; color: #1976d2; font-weight: bold;">📱 Mobile Users:</p>
+            <p style="margin: 5px 0 0 0; color: #1976d2;">
+                Tap "Browse files" below → Select <strong>"Camera"</strong> to take a photo<br>
+                Or select <strong>"Photos"</strong> to choose from gallery
+            </p>
+        </div>
+        """, unsafe_allow_html=True)
         
-        function handleFileClick(e) {
-            const input = e.target;
-            // Force camera attributes right before opening
-            input.setAttribute('accept', 'image/*');
-            input.setAttribute('capture', 'environment');
+        # Troubleshooting info
+        with st.expander("🔧 Camera not working? Click here for help"):
+            st.markdown("""
+            **If you don't see the Camera option:**
             
-            // 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
-        });
+            1. **✅ Check your browser:**
+               - Use Chrome, Safari, or Firefox (latest versions)
+               - Edge or other browsers may not support camera
+            
+            2. **🔐 Ensure secure connection:**
+               - Camera requires HTTPS (✅ Hugging Face uses HTTPS)
+               - Local development requires HTTPS for camera access
+            
+            3. **📱 Mobile device requirements:**
+               - iOS: Safari 11+ or Chrome 64+
+               - Android: Chrome 53+ or Firefox 68+
+               - Some older devices may not support camera
+            
+            4. **🛠️ Try these steps:**
+               - Refresh the page and try again
+               - Clear browser cache and cookies
+               - Try a different browser
+               - Check if camera works on other websites
+            
+            5. **🔄 Alternative options:**
+               - Take photo with your camera app first
+               - Then select "Photos" to upload the saved image
+               - Or use the desktop version for file upload
+            """)
+            
+            st.info("💡 **Note**: Camera access depends on your browser and device. If it doesn't work, you can still upload photos from your gallery!")
         
-        // Also run periodically as backup
-        setInterval(enableMobileCamera, 1000);
-        </script>
-        """, unsafe_allow_html=True)
+        # Standard Streamlit file uploader
+        uploaded_file = st.file_uploader(
+            "Browse files",
+            type=['jpg', 'jpeg', 'png'],
+            help="📱 Mobile: Tap to see Camera and Photos options | 💻 Desktop: Click to browse files"
+        )
         
         # Process the uploaded image
         image = None