Update app.py

app.py

@@ -1,32 +1,51 @@
 import gradio as gr
-from PIL import Image, ImageEnhance
+from PIL import Image, ImageEnhance, ImageDraw
 import os
 
-# --- 1. Processing Logic (Same as before) ---
+# --- 1. Processing Logic (Updated with Preview) ---
 def process_image(image, split_count, should_enhance, format_type):
-    if image is None: return None
+    if image is None: return None, None # Return 2 nones (Preview & Gallery)
+    
+    # A. Enhancement
     if should_enhance:
         enhancer = ImageEnhance.Sharpness(image)
         image = enhancer.enhance(1.5)
         contrast = ImageEnhance.Contrast(image)
         image = contrast.enhance(1.1)
+    
     img_width, img_height = image.size
     split_width = img_width // int(split_count)
     output_files = []
+    
+    # B. Creating the "Insta-Preview" (Stitching parts together)
+    # Hum parts ko wapas jod kar dikhayenge taaki user ko 'Seamless' feel aaye
+    preview_img = Image.new('RGB', (img_width, img_height))
+    
     if not os.path.exists("outputs"): os.makedirs("outputs")
+    
     for i in range(int(split_count)):
         left = i * split_width
         right = (i + 1) * split_width
+        
+        # Crop
         part = image.crop((left, 0, right, img_height))
+        
+        # Transparency Fix
         if part.mode in ('RGBA', 'LA') or (part.mode == 'P' and 'transparency' in part.info):
             part = part.convert('RGB')
+        
+        # Save for Gallery
         ext = "png" if format_type == "PNG (HQ)" else "jpg"
         save_path = f"outputs/ts_part_{i+1}.{ext}"
         part.save(save_path, quality=95)
         output_files.append(save_path)
-    return output_files
+        
+        # Add to Preview (Paste side by side)
+        preview_img.paste(part, (left, 0))
+        
+    return preview_img, output_files
 
-# --- 2. New Premium Lighting CSS ---
+# --- 2. New Premium Lighting CSS (SAME AS YOURS) ---
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&display=swap');
 
@@ -38,19 +57,18 @@ body, .gradio-container {
 
 /* The Main Card with Lighting Effect */
 #main_card {
-    background: rgba(30, 30, 40, 0.8); /* Darker, smoother glass */
+    background: rgba(30, 30, 40, 0.8);
     backdrop-filter: blur(30px);
     -webkit-backdrop-filter: blur(30px);
-    border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle white border */
+    border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 30px;
-    padding: 50px; /* Khula khula spacing */
-    /* THE LIGHTING EFFECT GLOW */
+    padding: 50px;
     box-shadow: 0 0 50px rgba(100, 200, 255, 0.15), inset 0 0 20px rgba(255, 255, 255, 0.05);
-    max-width: 1000px;
+    max-width: 1100px;
     margin: 40px auto;
 }
 
-/* New TS Logo Style - Clean White Glow */
+/* New TS Logo Style */
 #logo_text h1 {
     color: #ffffff;
     font-size: 5rem !important;
@@ -58,7 +76,6 @@ body, .gradio-container {
     text-align: center;
     margin-bottom: 0px;
     letter-spacing: -2px;
-    /* White Lighting Glow on Text */
     text-shadow: 0 0 25px rgba(150, 220, 255, 0.8);
 }
 
@@ -72,30 +89,27 @@ body, .gradio-container {
     letter-spacing: 1px;
 }
 
-/* Input Controls Styling - Spaced out */
+/* Input Controls Styling */
 .block, .svelte-12cmxck, .form {
     background: rgba(255,255,255,0.03) !important;
     border: 1px solid rgba(255,255,255,0.1) !important;
     border-radius: 20px !important;
-    padding: 20px !important; /* Internal spacing */
-}
-/* Fixing the cutting issue */
-.gradio-row {
-    gap: 25px !important; /* Space between elements */
-    flex-wrap: wrap; /* Ensure things don't cut off on small screens */
+    padding: 20px !important;
 }
+
+.gradio-row { gap: 25px !important; flex-wrap: wrap; }
 label span { color: #fff !important; font-weight: 600; font-size: 1rem;}
 
 /* The Button - Glowing */
 .primary-btn {
     background: linear-gradient(135deg, #ffffff, #d0d0d0) !important;
-    color: #000 !important; /* Black text on white button */
+    color: #000 !important;
     border: none !important;
     font-size: 1.3rem !important;
     font-weight: 900 !important;
     padding: 20px !important;
     border-radius: 20px !important;
-    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3); /* White button glow */
+    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
     transition: all 0.3s ease;
 }
 .primary-btn:hover {
@@ -111,27 +125,27 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
         gr.Markdown("# TS", elem_id="logo_text")
         gr.Markdown("### PREMIUM CAROUSEL STUDIO", elem_id="subtitle_text")
         
-        # Using Row without 'panel' variant for cleaner look
         with gr.Row():
-            # Left Side (Inputs) - Increased width scale
-            with gr.Column(scale=1.5):
+            # Left Side (Inputs)
+            with gr.Column(scale=1):
                 inp_img = gr.Image(type="pil", label="1. Drop Your Wide Image", sources=["upload", "clipboard"], height=300)
                 
-                # Spacing out controls
-                with gr.Column(): # Removed Group for more space
+                with gr.Column():
                     slider = gr.Slider(2, 5, value=3, step=1, label="2. How many parts?")
                     
-                    # Checkboxes in their own spacious row
                     with gr.Row():
-                        enhance_opt = gr.Checkbox(label="Magic Enhance (Fix Blur)", value=True)
-                        fmt_opt = gr.Radio(["JPG", "PNG (HQ)"], label="Output Format", value="JPG")
+                        enhance_opt = gr.Checkbox(label="Magic Enhance", value=True)
+                        fmt_opt = gr.Radio(["JPG", "PNG (HQ)"], label="Format", value="JPG")
                 
-                btn = gr.Button("⚡ GENERATE NOW", variant="primary", elem_classes=["primary-btn"])
+                btn = gr.Button("⚡ GENERATE & PREVIEW", variant="primary", elem_classes=["primary-btn"])
 
-            # Right Side (Output)
-            with gr.Column(scale=2):
-                out_gal = gr.Gallery(label="Your Ready-to-Post Carousel", columns=3, height="auto", object_fit="contain")
+            # Right Side (Output - Now with Preview)
+            with gr.Column(scale=1.5):
+                # Ye hai wo naya FEATURE:
+                preview_out = gr.Image(label="📱 Insta-Preview (Check Seamless Look)", interactive=False)
+                out_gal = gr.Gallery(label="⬇️ Download Parts Here", columns=3, height="auto", object_fit="contain")
 
-    btn.click(process_image, inputs=[inp_img, slider, enhance_opt, fmt_opt], outputs=out_gal)
+    # Connect both outputs (Preview + Gallery)
+    btn.click(process_image, inputs=[inp_img, slider, enhance_opt, fmt_opt], outputs=[preview_out, out_gal])
 
 app.launch()