add 'save' button to download image for mobile devices

app.py

@@ -192,7 +192,7 @@ def predict(input, img_enhancer):
         image = np.array(image_pil)
         mask = np.array(mask_pil.convert("L"))
     output = model_process(image, mask, img_enhancer)
-    return output, gr.update(visible=True), gr.update(visible=True)
+    return output, gr.update(visible=True)
 
 css = '''    
     .container {max-width: 1150px; margin: auto;padding-top: 1.5rem}
@@ -209,9 +209,12 @@ css = '''
     #image_output{margin: 0 auto; text-align: center;width:640px}
 
     #download-container{margin: 0 auto; text-align: center;width:fit-content; min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
-    #download-btn-container{margin: 0 auto; text-align: center;width:100px;border-width:1px;border-color:#2c9748}
+
+    #download-btn-container{margin: 0 auto; text-align: center;width: 100px;border-width:1px;border-color:#2c9748}
     #download-btn {padding:0;}
 
+    #share-container{margin: 0 auto; text-align: center;width:fit-content; min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
+
     #image_upload .touch-none{display: flex}
     @keyframes spin {
         from {
@@ -272,6 +275,8 @@ set_page_elements = """async() => {
         const share_btn_container = gradioEl.querySelectorAll('#share-btn-container')[0];  
         share_btn_container.setAttribute('style', 'width: 0px; height:0px;'); 
 
+        const share_btn_share_icon = gradioEl.querySelectorAll('#share-btn-share-icon')[0];  
+        share_btn_share_icon.setAttribute('style', 'width: 0px; height:0px;'); 
     } else {
         max_height = 800;
         image_upload.setAttribute('style', 'min-height: ' + max_height + 'px; overflow-x: overlay');
@@ -365,18 +370,19 @@ with image_blocks as demo:
             with gr.Row(elem_id="output-container"):             
                 with gr.Column():
                     image_out = gr.Image(elem_id="image_output",label="Result", show_label=False)
-                    with gr.Group(elem_id="share-btn-container", visible=False) as share_btn_container:
-                        community_icon = gr.HTML(community_icon_html)
-                        loading_icon = gr.HTML(loading_icon_html)
-                        share_button = gr.Button("Share to community", elem_id="share-btn")  
             with gr.Row(elem_id="download-container", visible=False) as download_container:             
-                with gr.Column(elem_id="download-btn-container"):
-                    download_button = gr.Button(elem_id="download-btn", value="Save(→)")
-   
-            erase_btn.click(fn=predict, inputs=[image_input, img_enhancer], outputs=[image_out, download_container, share_btn_container])
+                with gr.Column(elem_id="download-btn-container") as download_btn_container:
+                    download_button = gr.Button(elem_id="download-btn", value="Save(→)")  
+                with gr.Column(elem_id="share-container") as share_container:                                          
+                    with gr.Group(elem_id="share-btn-container"):
+                        community_icon = gr.HTML(community_icon_html, elem_id="community-icon", visible=True)
+                        loading_icon = gr.HTML(loading_icon_html, elem_id="loading-icon", visible=True)
+                        share_button = gr.Button("Share to community", elem_id="share-btn", visible=True)  
+
+            erase_btn.click(fn=predict, inputs=[image_input, img_enhancer], outputs=[image_out, download_container])
             download_button.click(None, [], [], _js=download_img)
             share_button.click(None, [], [], _js=share_js)
     
         begin_button.click(fn=None, inputs=[], outputs=[group_1, group_2], _js=set_page_elements)
 
-image_blocks.launch(server_name='0.0.0.0')
+image_blocks.launch(server_name='0.0.0.0')