Update app.py

app.py

@@ -3,40 +3,51 @@ import streamlit as st
 from PIL import Image, ImageOps
 import io
 
-st.set_page_config(page_title="Image Filter App", layout="centered")
+st.set_page_config(page_title="Image Filter App", layout="wide")
 
-st.title("🖼️ Simple Image Filter App")
-st.write("Upload a PNG or JPG image under 5MB to apply filters.")
-st.caption("📦 Only PNG or JPG under 5MB allowed.")
+st.title("🖼️ Image Filter App")
 
+# 3-column layout
+col1, col2, col3 = st.columns([1, 1, 1])  # equal width
 
-# File uploader with type restriction
-uploaded_file = st.file_uploader("Upload Image", type=["png", "jpg", "jpeg"])
+with col1:
+    st.header("📤 Upload Image")
+    st.caption("Max 5MB • Only PNG, JPG")
+    uploaded_file = st.file_uploader("Choose an image", type=["png", "jpg", "jpeg"])
+
+image = None
+filtered_image = None
+filter_option = "None"
 
 if uploaded_file:
-    # Check file size
+    # Size check
     uploaded_file.seek(0, io.SEEK_END)
     file_size = uploaded_file.tell()
-    uploaded_file.seek(0)  # Reset pointer
+    uploaded_file.seek(0)
 
     if file_size > 5 * 1024 * 1024:
-        st.error("❌ File size exceeds 5MB. Please upload a smaller image.")
+        with col1:
+            st.error("❌ File too large! Must be under 5MB.")
     else:
         image = Image.open(uploaded_file)
-        st.image(image, caption="Original Image", use_container_width=True)
 
-        st.subheader("Choose a Filter")
-        filter_option = st.radio("Select filter:", ["None", "Grayscale", "Invert Colors"])
+        with col2:
+            st.header("🎛️ Select Filter")
+            filter_option = st.radio("Choose filter:", ["None", "Grayscale", "Invert Colors"])
+
+        with col3:
+            st.header("🔍 Preview Output")
+
+            if filter_option == "Grayscale":
+                filtered_image = ImageOps.grayscale(image)
+                st.image(filtered_image, caption="Grayscale", use_container_width=True)
 
-        if filter_option == "Grayscale":
-            filtered_image = ImageOps.grayscale(image)
-            st.image(filtered_image, caption="Grayscale Image", use_container_width=True)
+            elif filter_option == "Invert Colors":
+                if image.mode != "RGB":
+                    image = image.convert("RGB")
+                filtered_image = ImageOps.invert(image)
+                st.image(filtered_image, caption="Inverted", use_container_width=True)
 
-        elif filter_option == "Invert Colors":
-            if image.mode != "RGB":
-                image = image.convert("RGB")
-            filtered_image = ImageOps.invert(image)
-            st.image(filtered_image, caption="Inverted Image", use_container_width=True)
+            else:
+                st.info("Select a filter to see output.")
 
-        elif filter_option == "None":
-            st.info("Select a filter to apply to the image.")