Update app.py

app.py

@@ -11,7 +11,7 @@ generated_gifs = []
 
 def preprocess_image(image_data):
     # Extract the image and crop data from the ImageEditor output
-    image = image_data["image"].convert('RGBA')
+    image = image_data["composite"].convert('RGBA')
     crop_data = image_data.get("crop")
 
     if crop_data:
@@ -19,15 +19,10 @@ def preprocess_image(image_data):
         left, top, width, height = crop_data
         image = image.crop((left, top, left + width, top + height))
 
-    # Resize image to fit within 256x256 while maintaining aspect ratio
-    image.thumbnail((256, 256), Image.LANCZOS)
-
-    # Create a new 256x256 image with a transparent background
-    new_image = Image.new("RGBA", (256, 256), (255, 255, 255, 0))
-    
-    # Paste the resized image at the center
-    offset = ((256 - image.width) // 2, (256 - image.height) // 2)
-    new_image.paste(image, offset)
+    # Ensure the image is square by padding it
+    size = max(image.size)
+    new_image = Image.new("RGBA", (size, size), (255, 255, 255, 0))
+    new_image.paste(image, ((size - image.width) // 2, (size - image.height) // 2))
     
     return new_image
 
@@ -37,11 +32,18 @@ def create_gif(editor1_output, editor2_output, transition_type):
     total_frames = 18  # Total number of frames
 
     try:
-        # Preprocess images
-        img1 = preprocess_image(editor1_output)
-        img2 = preprocess_image(editor2_output)
+        # Open images
+        img1 = editor1_output["composite"].convert('RGBA')
+        img2 = editor2_output["composite"].convert('RGBA')
 
+        # Preprocess images to make them square and same size
+        img1 = preprocess_image(img1)
+        img2 = preprocess_image(img2)
+
+        # Set size for the GIF
         size = (256, 256)
+        img1 = img1.resize(size, Image.LANCZOS)
+        img2 = img2.resize(size, Image.LANCZOS)
 
         if transition_type == "slide":
             # Calculate step size for consistent speed
@@ -52,10 +54,10 @@ def create_gif(editor1_output, editor2_output, transition_type):
             for i in range(0, full_width, step):
                 frame = Image.new('RGBA', size)
                 frame.paste(img1, (0, 0))
-                frame.paste(img2.crop((0, 0, i, size[1])), (full_width - i, 0), mask=img2.crop((0, 0, i, size[1])))
+                frame.paste(img2.crop((i, 0, full_width, size[1])), (i, 0), mask=img2.crop((i, 0, full_width, size[1])))
 
                 draw = ImageDraw.Draw(frame)
-                draw.line((full_width - i, 0, full_width - i, size[1]), fill=(0, 255, 0), width=2)
+                draw.line((i, 0, i, size[1]), fill=(0, 255, 0), width=2)
 
                 # Convert frame to P mode which is a palette-based image
                 frame = frame.convert('P', palette=Image.ADAPTIVE)
@@ -64,11 +66,11 @@ def create_gif(editor1_output, editor2_output, transition_type):
             # Generate frames from right to left
             for i in range(full_width, step, -step):
                 frame = Image.new('RGBA', size)
-                frame.paste(img2, (0, 0))
-                frame.paste(img1.crop((0, 0, i, size[1])), (full_width - i, 0), mask=img1.crop((0, 0, i, size[1])))
+                frame.paste(img1, (0, 0))
+                frame.paste(img2.crop((i, 0, full_width, size[1])), (i, 0), mask=img2.crop((i, 0, full_width, size[1])))
 
                 draw = ImageDraw.Draw(frame)
-                draw.line((full_width - i, 0, full_width - i, size[1]), fill=(0, 255, 0), width=2)
+                draw.line((i, 0, i, size[1]), fill=(0, 255, 0), width=2)
 
                 # Convert frame to P mode which is a palette-based image
                 frame = frame.convert('P', palette=Image.ADAPTIVE)
@@ -130,8 +132,8 @@ with gr.Blocks() as iface:
                 label="Edit Image 1",
                 brush=gr.Brush(colors=["#ff0000", "#00ff00", "#0000ff"]),
                 eraser=gr.Eraser(default_size=10),
-                height=350,
-                width=350,
+                height=400,
+                width="100%",
                 crop_size="1:1",
                 layers=True,
                 type="pil"
@@ -141,8 +143,8 @@ with gr.Blocks() as iface:
                 label="Edit Image 2",
                 brush=gr.Brush(colors=["#ff0000", "#00ff00", "#0000ff"]),
                 eraser=gr.Eraser(default_size=10),
-                height=350,
-                width=350,
+                height=400,
+                width="100%",
                 crop_size="1:1",
                 layers=True,
                 type="pil"
@@ -159,7 +161,7 @@ with gr.Blocks() as iface:
             elem_id="output_gallery",
             columns=3,
             rows=2,
-            height=350,
+            height=400,
             object_fit="contain"
         )