Update app.py

app.py

@@ -13,6 +13,8 @@ import time
 import imghdr
 from loguru import logger
 
+from share_btn import community_icon_html, loading_icon_html, share_js
+
 from lama_cleaner.model_manager import ModelManager
 from lama_cleaner.schema import Config
 
@@ -190,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
+    return output, gr.update(visible=True), gr.update(visible=True), gr.update(visible=True)
 
 
 css = '''
@@ -212,6 +214,22 @@ css = '''
         transform: rotate(360deg);
     }
 }
+#share-btn-container {
+    display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
+}
+#share-btn {
+    all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;
+}
+#share-btn * {
+    all: unset;
+}
+#share-btn-container div:nth-child(-n+2){
+    width: auto !important;
+    min-height: 0px !important;
+}
+#share-btn-container .wrap {
+    display: none !important;
+}
 '''
 set_page_elements = """async () => {
     function isMobile() {
@@ -222,30 +240,31 @@ set_page_elements = """async () => {
         }
     }
 
-    var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
+    const gradioEl = document.querySelector('body > gradio-app').shadowRoot;
     if (!gradioEl) {
         gradioEl = document.querySelector('body > gradio-app');
     }
-    var group1 = gradioEl.querySelectorAll('#group_1')[0];
-    var group2 = gradioEl.querySelectorAll('#group_2')[0];    
-    var image_upload = gradioEl.querySelectorAll('#image_upload')[0];
-    var image_output = gradioEl.querySelectorAll('#image_output')[0];
-    var data_image = gradioEl.querySelectorAll('#image_upload [data-testid="image"]')[0];
-    var data_image_div = gradioEl.querySelectorAll('#image_upload [data-testid="image"] > div')[0];
+    const group1 = gradioEl.querySelectorAll('#group_1')[0];
+    const group2 = gradioEl.querySelectorAll('#group_2')[0];    
+    const image_upload = gradioEl.querySelectorAll('#image_upload')[0];
+    const image_output = gradioEl.querySelectorAll('#image_output')[0];
+    const data_image = gradioEl.querySelectorAll('#image_upload [data-testid="image"]')[0];
+    const data_image_div = gradioEl.querySelectorAll('#image_upload [data-testid="image"] > div')[0];
 
     if (isMobile()) {
-        var group1_width = group1.offsetWidth;
+        const group1_width = group1.offsetWidth;
         image_upload.setAttribute('style', 'width:' + (group1_width - 13*2) + 'px; min-height:none;');
         data_image.setAttribute('style', 'width: ' + (group1_width - 14*2) + 'px;min-height:none;');
         data_image_div.setAttribute('style', 'width: ' + (group1_width - 14*2) + 'px;min-height:none;');
         image_output.setAttribute('style', 'width: ' + (group1_width - 13*2) + 'px;min-height:none;'); 
-        var enhancer = gradioEl.querySelectorAll('#enhancer-checkbox')[0];  
+        const enhancer = gradioEl.querySelectorAll('#enhancer-checkbox')[0];  
         enhancer.style.display = "none";
     } else {
-        image_upload.setAttribute('style', 'min-height: 600px; overflow-x: overlay');
-        data_image.setAttribute('style', 'height: 600px');
-        data_image_div.setAttribute('style', 'min-height: 600px');
-        image_output.setAttribute('style', 'width: 600px'); 
+        max_height = 800;
+        image_upload.setAttribute('style', 'min-height: ' + max_height + 'px; overflow-x: overlay');
+        data_image.setAttribute('style', 'height: ' + max_height + 'px');
+        data_image_div.setAttribute('style', 'min-height: ' + max_height + 'px');
+        image_output.setAttribute('style', 'width: ' + max_height + 'px'); 
     }
     group1.style.display = "none";
     group2.style.display = "block";
@@ -283,9 +302,14 @@ 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"):
+                        community_icon = gr.HTML(community_icon_html, visible=False)
+                        loading_icon = gr.HTML(loading_icon_html, visible=False)
+                        share_button = gr.Button("Share to community", elem_id="share-btn", visible=False)                    
                     
-            btn_erase.click(fn=predict, inputs=[image, img_enhancer], outputs=[image_out])
+            btn_erase.click(fn=predict, inputs=[image, img_enhancer], outputs=[image_out, community_icon, loading_icon, share_button])
+            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()