Fix image preprocessing preview for Hugging Face compatibility

- Reduced image width in preview from 600 to 300 for better compatibility
- Added additional CSS fixes for image display within Streamlit expanders
- Improved handling of image containers in the preview UI

app.py

@@ -935,13 +935,15 @@ with main_tab1:
                     
                     with preview_cols[0]:
                         st.markdown("**Original Image**")
-                        st.image(uploaded_file, width=600)
+                        # Fixed width parameter to ensure compatibility
+                        st.image(uploaded_file, width=300)
                     
                     with preview_cols[1]:
                         st.markdown("**Preprocessed Image**")
                         try:
                             processed_bytes = preprocess_image(uploaded_file.getvalue(), preprocessing_options)
-                            st.image(io.BytesIO(processed_bytes), width=600)
+                            # Fixed width parameter to ensure compatibility
+                            st.image(io.BytesIO(processed_bytes), width=300)
                         except Exception as e:
                             st.error(f"Error in preprocessing: {str(e)}")
                             st.info("Try using grayscale preprocessing for PNG images with transparency")

ui/custom.css

@@ -77,6 +77,17 @@
     object-fit: contain !important;
 }
 
+/* Additional fixes for image preprocessing preview in expanders */
+.streamlit-expanderContent {
+    overflow: hidden !important;
+}
+
+.streamlit-expanderContent img {
+    max-width: 95% !important;
+    height: auto !important;
+    object-fit: contain !important;
+}
+
 /* Additional image fixes for all containers */
 .document-content img,
 .markdown-text-container img,