Updated gradio version and layout (#1)

- Update Gradio (bf962dc2fae17dcbabd794093d99a4b2ca425aa5)
- Updated app layout (352248636249cfeed91d8deb906060b348873ed7)
- Updated share button (0f5e0cd5afa1aec1ba56772789a369fb9d7a4c59)
- header with link (dfbd204814c8932864389238dd7e6c3320766379)
- Update app.py (807ffbaaa1eaf1f25fd3723114f6fb0d2f51f732)
- Update header.html (6e974555a76f24f0e2613a249db854498a840a8f)

README.md

@@ -4,7 +4,7 @@ emoji: 🔥
 colorFrom: green
 colorTo: pink
 sdk: gradio
-sdk_version: 3.6
+sdk_version: 3.41.2
 app_file: app.py
 pinned: false
 duplicated_from: runwayml/stable-diffusion-inpainting

app.py

@@ -5,8 +5,8 @@ from diffusers import AutoPipelineForInpainting, UNet2DConditionModel
 import diffusers
 from share_btn import community_icon_html, loading_icon_html, share_js
 
-unet = UNet2DConditionModel.from_pretrained("valhalla/sdxl-inpaint-ema", torch_dtype=torch.float16, revision="d5593e75323fa2a5285ebe02c1aba504a695bbf7")  # 50k
-pipe = AutoPipelineForInpainting.from_pretrained("stabilityai/stable-diffusion-xl-base-1.0", unet=unet, torch_dtype=torch.float16, variant="fp16").to("cuda")
+device = "cuda" if torch.cuda.is_available() else "cpu"
+pipe = AutoPipelineForInpainting.from_pretrained("diffusers/inpainting-sdxl-0.1", torch_dtype=torch.float16, variant="fp16").to(device)
 
 def read_content(file_path: str) -> str:
     """read the content of target file
@@ -16,7 +16,8 @@ def read_content(file_path: str) -> str:
 
     return content
 
-def predict(dict, prompt="", guidance_scale=7.5, steps=20, strength=1.0, scheduler="EulerDiscreteScheduler"):
+def predict(dict, prompt="", negative_prompt="", guidance_scale=7.5, steps=20, strength=1.0, scheduler="EulerDiscreteScheduler"):
+
     scheduler_class_name = scheduler.split("-")[0]
 
     add_kwargs = {}
@@ -31,13 +32,13 @@ def predict(dict, prompt="", guidance_scale=7.5, steps=20, strength=1.0, schedul
     init_image = dict["image"].convert("RGB").resize((1024, 1024))
     mask = dict["mask"].convert("RGB").resize((1024, 1024))
     
-    output = pipe(prompt = prompt, image=init_image, mask_image=mask, guidance_scale=guidance_scale, num_inference_steps=int(steps), strength=strength)
+    output = pipe(prompt = prompt, negative_prompt=negative_prompt, image=init_image, mask_image=mask, guidance_scale=guidance_scale, num_inference_steps=int(steps), strength=strength)
     
-    return output.images[0], gr.update(visible=True), gr.update(visible=True), gr.update(visible=True)
+    return output.images[0], gr.update(visible=True)
 
 
 css = '''
-.container {max-width: 1150px;margin: auto;padding-top: 1.5rem}
+.gradio-container{max-width: 1100px !important}
 #image_upload{min-height:400px}
 #image_upload [data-testid="image"], #image_upload [data-testid="image"] > div{min-height: 400px}
 #mask_radio .gr-form{background:transparent; border: none}
@@ -57,61 +58,55 @@ 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;
-}
+#share-btn-container {padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; max-width: 13rem; margin-left: auto;}
+div#share-btn-container > div {flex-direction: row;background: black;align-items: center}
+#share-btn-container:hover {background-color: #060606}
+#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.5rem !important; padding-bottom: 0.5rem !important;right:0;}
+#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}
+#share-btn-container.hidden {display: none!important}
+#prompt input{width: calc(100% - 160px);border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
+#run_button{position:absolute;margin-top: 11px;right: 0;margin-right: 0.8em;border-bottom-left-radius: 0px;
+    border-top-left-radius: 0px;}
+#prompt-container{margin-top:-18px;}
+#prompt-container .form{border-top-left-radius: 0;border-top-right-radius: 0}
+#image_upload{border-bottom-left-radius: 0px;border-bottom-right-radius: 0px}
 '''
 
-image_blocks = gr.Blocks(css=css)
+image_blocks = gr.Blocks(css=css, elem_id="total-container")
 with image_blocks as demo:
     gr.HTML(read_content("header.html"))
-    with gr.Group():
-        with gr.Box():
-            with gr.Row():
+    with gr.Row():
                 with gr.Column():
                     image = gr.Image(source='upload', tool='sketch', elem_id="image_upload", type="pil", label="Upload").style(height=400)
-                    with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
-                        prompt = gr.Textbox(placeholder = 'Your prompt (what you want in place of what is erased)', show_label=False, elem_id="input-text")
-
-                    with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
-                        guidance_scale = gr.Number(value=7.5, minimum=1.0, maximum=20.0, step=0.1, label="guidance_scale")
-                        steps = gr.Number(value=20, minimum=10, maximum=50, step=0.1, label="steps")
-                        strength = gr.Number(value=1.0, minimum=0.0, maximum=1.0, step=0.05, label="strength")
-
-                    with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
-                        schedulers = ["DEISMultistepScheduler", "HeunDiscreteScheduler", "EulerDiscreteScheduler", "DPMSolverMultistepScheduler", "DPMSolverMultistepScheduler-Karras", "DPMSolverMultistepScheduler-Karras-SDE"]
-                        scheduler = gr.Dropdown(choices=schedulers, value="EulerDiscreteScheduler")
+                    with gr.Row(elem_id="prompt-container", mobile_collapse=False, equal_height=True):
+                        with gr.Row():
+                            prompt = gr.Textbox(placeholder="Your prompt (what you want in place of what is erased)", show_label=False, elem_id="prompt")
+                            btn = gr.Button("Inpaint!", elem_id="run_button")
+                    
+                    with gr.Accordion(label="Advanced Settings", open=False):
+                        with gr.Row(mobile_collapse=False, equal_height=True):
+                            guidance_scale = gr.Number(value=7.5, minimum=1.0, maximum=20.0, step=0.1, label="guidance_scale")
+                            steps = gr.Number(value=20, minimum=10, maximum=30, step=1, label="steps")
+                            strength = gr.Number(value=0.99, minimum=0.01, maximum=0.99, step=0.01, label="strength")
+                            negative_prompt = gr.Textbox(label="negative_prompt", placeholder="Your negative prompt", info="what you don't want to see in the image")
+                        with gr.Row(mobile_collapse=False, equal_height=True):
+                            schedulers = ["DEISMultistepScheduler", "HeunDiscreteScheduler", "EulerDiscreteScheduler", "DPMSolverMultistepScheduler", "DPMSolverMultistepScheduler-Karras", "DPMSolverMultistepScheduler-Karras-SDE"]
+                            scheduler = gr.Dropdown(label="Schedulers", choices=schedulers, value="EulerDiscreteScheduler")
                         
-                        btn = gr.Button("Inpaint!").style(
-                            margin=False,
-                            rounded=(False, True, True, False),
-                            full_width=False,
-                        )
                 with gr.Column():
                     image_out = gr.Image(label="Output", elem_id="output-img").style(height=400)
-                    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)
+                    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",visible=True)
             
 
-            btn.click(fn=predict, inputs=[image, prompt, guidance_scale, steps, strength, scheduler], outputs=[image_out, community_icon, loading_icon, share_button])
-            share_button.click(None, [], [], _js=share_js)
+    btn.click(fn=predict, inputs=[image, prompt, negative_prompt, guidance_scale, steps, strength, scheduler], outputs=[image_out, share_btn_container])
+    share_button.click(None, [], [], _js=share_js)
 
-            gr.Examples(
+    gr.Examples(
                 examples=[
                     ["./imgs/aaa (8).png"],
                     ["./imgs/download (1).jpeg"],
@@ -127,14 +122,14 @@ with image_blocks as demo:
                 fn=predict,
                 inputs=[image],
                 cache_examples=False,
-            )
-            gr.HTML(
-                """
-                    <div class="footer">
-                        <p>Model by <a href="https://huggingface.co/diffusers" style="text-decoration: underline;" target="_blank">Diffusers</a> - Gradio Demo by 🤗 Hugging Face
-                        </p>
-                    </div>
-                """
-            )
+    )
+    gr.HTML(
+        """
+            <div class="footer">
+                <p>Model by <a href="https://huggingface.co/diffusers" style="text-decoration: underline;" target="_blank">Diffusers</a> - Gradio Demo by 🤗 Hugging Face
+                </p>
+            </div>
+        """
+    )
 
-image_blocks.launch()
+image_blocks.launch()

header.html

@@ -12,6 +12,6 @@
   </div>
   <div>
     <p style="align-items: center; margin-bottom: 7px;">
-      Stable Diffusion XL Inpainting, add a mask and text prompt for what you want to replace
+      Demo for the <a href="https://huggingface.co/diffusers/inpainting-sdxl-0.1" target="_blank">Stable Diffusion XL Inpainting model</a>, add a mask and text prompt for what you want to replace
   </div>
-</div>
+</div>

share_btn.py

@@ -42,7 +42,7 @@ share_js = """async () => {
     // const gradioEl = document.querySelector("gradio-app").shadowRoot;
     const inputImgCanvas = gradioEl.querySelector('canvas[key="drawing"]');
     const outputImgEl = gradioEl.querySelector('#output-img img');
-    const promptTxt = gradioEl.querySelector('#input-text textarea').value;
+    const promptTxt = gradioEl.querySelector('#prompt textarea').value;
     let titleTxt = promptTxt;
     if(titleTxt.length > 100){
         titleTxt = titleTxt.slice(0, 100) + ' ...';
@@ -85,7 +85,8 @@ ${outputImgUrl}
     });
 
 	const paramsStr = params.toString();
-	window.open(`${window.location.href}/discussions/new?${paramsStr}`, '_blank');
+ 
+	window.open(`https://huggingface.co/spaces/diffusers/stable-diffusion-xl-inpainting/discussions/new?${paramsStr}&preview=true`, '_blank');
 
     shareBtnEl.style.removeProperty('pointer-events');
     shareIconEl.style.removeProperty('display');