Update app.py

app.py

@@ -45,15 +45,14 @@ def process_image(image, outline_size, outline_color):
         # Overlay original image
         outlined_img = Image.alpha_composite(outlined_img, processed_img)
 
-
         # Save the result as bytes for Gradio
         output_buffer = io.BytesIO()
         outlined_img.save(output_buffer, format="PNG", dpi=(300, 300))  # Set DPI here
         output_buffer.seek(0)
-        img_data = base64.b64encode(output_buffer.read()).decode("utf-8")
-        data_url = f"data:image/png;base64,{img_data}"
+        #img_data = base64.b64encode(output_buffer.read()).decode("utf-8")
+        #data_url = f"data:image/png;base64,{img_data}"
 
-        return data_url
+        return output_buffer  # Return the image as bytes
 
     except Exception as e:
         print(f"Error processing image: {e}")  # Log the error
@@ -62,7 +61,7 @@ def process_image(image, outline_size, outline_color):
 # Gradio Interface
 with gr.Blocks(title="Sticker Maker") as interface:
     gr.Markdown("# Sticker Maker")
-    gr.Markdown("Upload an image to remove the background and add a white outline.")
+    gr.Markdown("Upload an image to remove the background and add an outline.")
 
     with gr.Row():
         with gr.Column():
@@ -78,45 +77,22 @@ with gr.Blocks(title="Sticker Maker") as interface:
             create_btn = gr.Button("Create Sticker", variant="primary")
 
         with gr.Column():
-            # Use HTML to create an image and a download link
-            image_output_html = gr.HTML(
-                """
-                <div style="position: relative;">
-                    <img id="sticker-preview" src="" style="max-width: 100%; max-height: 400px;">
-                    <a id="download-link" style="position: absolute; top: 10px; right: 10px; background-color: rgba(255, 255, 255, 0.7); padding: 5px; border-radius: 5px; display:none;" download="sticker.png">Download</a>
-                </div>
-                """
-            )
+            # Use gr.Image for the preview pane
+            image_output = gr.Image(label="Sticker Preview", type="pil", image_mode="RGBA")
 
     def update_image(image, outline_size, outline_color):
-        try:
-            data_url = process_image(image, outline_size, outline_color)
-            if data_url:
-                return f"""
-                    <div style="position: relative;">
-                        <img id="sticker-preview" src="{data_url}" style="max-width: 100%; max-height: 400px;">
-                        <a id="download-link" href="{data_url}" download="sticker.png" style="position: absolute; top: 10px; right: 10px; background-color: rgba(255, 255, 255, 0.7); padding: 5px; border-radius: 5px;">Download</a>
-                    </div>
-                    """
-            else:
-                return """
-                    <div style="position: relative;">
-                        <img id="sticker-preview" src="" style="max-width: 100%; max-height: 400px;">
-                        <a id="download-link" style="position: absolute; top: 10px; right: 10px; background-color: rgba(255, 255, 255, 0.7); padding: 5px; border-radius: 5px; display:none;" download="sticker.png">Download</a>
-                    </div>
-                    """
-        except Exception as e:
-            print(f"Error in update_image: {e}")  # Log the error
-            return f"""
-                    <div style="position: relative;">
-                        Error: {e}
-                    </div>
-                    """
+        processed_image = process_image(image, outline_size, outline_color)
+        if processed_image is None:
+            return None  # Return None if there was an error
+        else:
+            # Load the image from bytes
+            img = Image.open(io.BytesIO(processed_image.getvalue()))
+            return img  #Return the PIL Image
 
     create_btn.click(
         fn=update_image,
         inputs=[image_upload, outline_size, outline_color],
-        outputs=image_output_html,
+        outputs=image_output,
     )
 
 if __name__ == "__main__":