feat: working image template in Safari on IOS and Chrome in Android" [fragrantica ad71397] feat: working image template in Safari on IOS and Chrome in Android (#7)

- feat: working image template in Safari on IOS and Chrome in Android" [fragrantica ad71397] feat: working image template in Safari on IOS and Chrome in Android (228c16d9e9ff09e8703581026e46ec515906efa8)

app.py

@@ -144,33 +144,54 @@ def clean_env_vars():
     os.environ.pop("OPENAI_MODEL_NAME", None)
 
 js_share_logic = """
-async (image_data_url) => {
-    if (!image_data_url) {
-        console.error("Share button clicked, but no image data URL found.");
+async (image_url) => {
+    if (!image_url) {
+        console.error("Share button clicked, but no image URL found.");
         alert("No image to share. Please generate an image first.");
         return;
     }
 
-    const dataUrl = image_data_url;
-
     try {
-        const response = await fetch(dataUrl);
+        const response = await fetch(image_url);
         const blob = await response.blob();
-        const file = new File([blob], "shared_image.png", { type: "image/png" });
-
-        if (navigator.share && navigator.canShare({ files: [file] })) {
-            await navigator.share({
-                files: [file],
-                title: "Check out this image!",
-                text: "Created with a cool Gradio app.",
-            });
-        } else {
-            alert("Sharing not supported on this browser.");
-        }
+
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+        reader.onloadend = async function() {
+            const base64data = reader.result;
+
+            const parts = base64data.split(';base64,');
+            const contentType = parts[0].split(':')[1];
+            const raw = window.atob(parts[1]);
+            const rawLength = raw.length;
+            const uInt8Array = new Uint8Array(rawLength);
+
+            for (let i = 0; i < rawLength; ++i) {
+                uInt8Array[i] = raw.charCodeAt(i);
+            }
+
+            const newBlob = new Blob([uInt8Array], { type: contentType });
+            const fileName = `shared_image_${new Date().getTime()}.png`;
+            const file = new File([newBlob], fileName, { type: contentType });
+
+            if (navigator.share && navigator.canShare({ files: [file] })) {
+                await navigator.share({
+                    files: [file],
+                    title: "Image",
+                    text: "Shared from app.",
+                });
+            } else {
+                alert("Sharing not supported on this browser.");
+            }
+        };
+        reader.onerror = function(error) {
+            console.error("Error converting blob to data URL:", error);
+            alert("An error occurred while preparing image for sharing.");
+        };
+
     } catch (error) {
         if (error.name === 'AbortError') {
             console.log("Share dialog cancelled by user.");
-            // Do nothing, as this is a user-initiated cancellation
         } else {
             console.error("Error sharing:", error);
             alert("An error occurred while trying to share.");
@@ -235,12 +256,8 @@ with gr.Blocks() as demo:
                 image_coupon_code_input = gr.Textbox(label="Coupon Code", placeholder="Enter coupon code...")
                 gen_image_btn = gr.Button("Generate Image")
             with gr.Column():
-                image_output = gr.Image(label="Generated Image", height=500, type="pil", interactive=False)
-                image_data_url_storage = gr.Textbox(
-                    label="Image Data URL (for debugging)",
-                    visible=True,
-                    elem_id="image_data_url_storage"
-                )
+                image_output = gr.Image(label="Generated Image", height=500, type="filepath", interactive=False)
+                base64_debug_output = gr.Textbox(label="Base64 Debug Output", visible=True, interactive=False)
                 share_button = gr.Button("🚀 Share Image", interactive=False)
 
     with gr.Tab("Settings"):
@@ -271,24 +288,14 @@ with gr.Blocks() as demo:
             return
         yield report.raw
 
-    def image_to_base64(pil_image):
-        print(f"image_to_base64 called. pil_image type: {type(pil_image)}")
-        if pil_image is None:
-            print("pil_image is None. Returning empty string and interactive=False.")
-            return "", gr.update(interactive=False)
-        buffered = BytesIO()
-        pil_image.save(buffered, format="PNG")
-        img_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
-        data_url = f"data:image/png;base64,{img_str}"
-        print("Returning data_url and interactive=True.")
-        return data_url, gr.update(interactive=True)
+    
 
     def generate_image(product_image_url, product_name, original_price, final_price, coupon_code):
         tool = GenerateImageTool()
         original_price_str = f"{original_price:.2f}".replace('.', ',')
         final_price_str = f"{final_price:.2f}".replace('.', ',')
         
-        yield gr.update(interactive=False, value="Generating..."), None
+        yield gr.update(interactive=False, value="Generating..."), None, gr.update(interactive=False)
 
         image_path = tool._run(
             product_image_url=product_image_url,
@@ -298,17 +305,28 @@ with gr.Blocks() as demo:
             coupon_code=coupon_code
         )
         
-        pil_image = Image.open(image_path)
-        yield gr.update(interactive=True, value="Generate Image"), pil_image
+        yield gr.update(interactive=True, value="Generate Image"), image_path, gr.update(interactive=True)
+
+    def process_image_for_sharing(image_path):
+        if image_path is None:
+            return ""
+        try:
+            with open(image_path, "rb") as image_file:
+                encoded_string = base64.b64encode(image_file.read()).decode("utf-8")
+            data_url = f"data:image/png;base64,{encoded_string}"
+            return data_url
+        except Exception as e:
+            print(f"Error processing image for sharing: {e}")
+            return ""
 
     generate_ad_button.click(generate_ad, inputs=[url_input, store_name_input, main_cupom_input, main_cupom_discount_percentage_input, cupom_1_input, original_price_input, discounted_price_input, openai_key_input, natura_token_input, openai_base_url_input, openai_model_name_input], outputs=[generate_ad_button, ad_output])
     clear_button.click(clear_fields, inputs=[], outputs=[url_input, original_price_input, discounted_price_input])
     analyze_fragrantica_button.click(analyze_fragrantica_url, inputs=[fragrantica_url_input, openai_key_input, natura_token_input, openai_base_url_input, openai_model_name_input], outputs=fragrantica_output)
-    gen_image_btn.click(generate_image, 
-                                inputs=[image_product_url_input, image_product_name_input, image_original_price_input, image_final_price_input, image_coupon_code_input], 
-                                outputs=[gen_image_btn, image_output])
-    image_output.change(image_to_base64, inputs=image_output, outputs=[image_data_url_storage, share_button])
-    share_button.click(fn=None, inputs=[image_data_url_storage], js=js_share_logic)
+    gen_image_btn.click(generate_image,
+                        inputs=[image_product_url_input, image_product_name_input, image_original_price_input, image_final_price_input, image_coupon_code_input],
+                        outputs=[gen_image_btn, image_output, share_button])
+    share_button.click(fn=process_image_for_sharing, inputs=[image_output], outputs=[base64_debug_output])
+    base64_debug_output.change(fn=None, inputs=[base64_debug_output], js=js_share_logic)
 
 if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", server_port=7860)