Update app.py

app.py

@@ -1,32 +1,65 @@
 import gradio as gr
-import os
-
-# Function to handle image upload and layout setting
-def process_images(layout, image_files):
-    # Save uploaded images
-    img_paths = []
-    for img_file in image_files:
-        img_path = f"temp_images/{img_file.name}"
-        img_file.save(img_path)
-        img_paths.append(img_path)
-    
-    # Return the layout and image paths to the front-end (HTML and JS will take care of it)
-    return layout, img_paths
-
-# Gradio Interface setup
-iface = gr.Interface(
-    fn=process_images, 
-    inputs=[
-        gr.CheckboxGroup(
-            label="Choose Grid Layout", 
+from PIL import Image
+
+# Function to process and display the images in grid format
+def create_collage(uploaded_files, grid_layout):
+    # Open images
+    images = [Image.open(file.name) for file in uploaded_files]
+
+    # Determine grid dimensions based on layout
+    if grid_layout == "1x2":
+        rows, cols = 1, 2
+    elif grid_layout == "1x3":
+        rows, cols = 1, 3
+    elif grid_layout == "2x2":
+        rows, cols = 2, 2
+    elif grid_layout == "2x3":
+        rows, cols = 2, 3
+
+    # Create a blank canvas for the collage without spacing
+    collage_width = max(img.width for img in images) * cols
+    collage_height = max(img.height for img in images) * rows
+    collage = Image.new("RGB", (collage_width, collage_height))
+
+    # Resize images to fit the grid
+    resized_images = []
+    for img in images:
+        # Resize or crop image to fit the grid cell size
+        img_width = collage_width // cols
+        img_height = collage_height // rows
+        img_resized = img.resize((img_width, img_height), Image.ANTIALIAS)  # Resize to fit
+        resized_images.append(img_resized)
+
+    # Place images on the canvas in grid format without spacing
+    for i, img in enumerate(resized_images):
+        row = i // cols
+        col = i % cols
+        collage.paste(img, (col * img.width, row * img.height))
+
+    return collage
+
+# Gradio Interface
+with gr.Blocks() as app:
+    with gr.Column():
+        # Step 1: File upload for multiple images
+        uploaded_files = gr.Files(label="Upload Images", file_count="multiple", file_types=["image"])
+
+        # Step 2: Grid selection
+        grid_layout = gr.Radio(
             choices=["1x2", "1x3", "2x2", "2x3"],
-            type="value"  # This allows for the selection of multiple options if needed
-        ),
-        gr.File(label="Upload Images", type="file", multiple=True)  # Multiple image upload
-    ], 
-    outputs=["text", "json"],  # We'll output a layout and list of image paths
-    live=True  # Updates in real-time
-)
-
-# Run Gradio app
-iface.launch(share=True)
+            label="Select Grid Layout",
+            value="1x2"  # Default value
+        )
+
+        # Step 3: Display preview of the grid
+        output = gr.Image(label="Collage Preview")
+
+        # Step 4: Process the images when files are uploaded or grid layout is selected
+        uploaded_files.change(create_collage, inputs=[uploaded_files, grid_layout], outputs=output)
+        grid_layout.change(create_collage, inputs=[uploaded_files, grid_layout], outputs=output)
+
+        # Step 5: Download button for the final collage
+        download_button = gr.Button("Download Collage")
+        download_button.click(create_collage, inputs=[uploaded_files, grid_layout], outputs=output)
+
+app.launch()