Update app.py

app.py

@@ -49,10 +49,11 @@ def process_image(image, outline_size, outline_color):
         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}"
 
-        return output_buffer  # Return the image as bytes
+        img_data = base64.b64encode(output_buffer.read()).decode("utf-8")
+        data_url = f"data:image/png;base64,{img_data}"
+
+        return data_url # Return data_url for display
 
     except Exception as e:
         print(f"Error processing image: {e}")  # Log the error
@@ -77,22 +78,44 @@ with gr.Blocks(title="Sticker Maker") as interface:
             create_btn = gr.Button("Create Sticker", variant="primary")
 
         with gr.Column():
-            # Use gr.Image for the preview pane
-            image_output = gr.Image(label="Sticker Preview", type="pil", image_mode="RGBA")
+          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>
+                """
+            )
 
     def update_image(image, outline_size, outline_color):
-        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
+        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>
+                    """
 
     create_btn.click(
         fn=update_image,
         inputs=[image_upload, outline_size, outline_color],
-        outputs=image_output,
+        outputs=image_output_html,
     )
 
 if __name__ == "__main__":