Updated gradio version and layout

#1
by multimodalart HF staff - opened
Files changed (4) hide show
  1. README.md +1 -1
  2. app.py +54 -59
  3. header.html +2 -2
  4. share_btn.py +3 -2
README.md CHANGED
@@ -4,7 +4,7 @@ emoji: 🔥
4
  colorFrom: green
5
  colorTo: pink
6
  sdk: gradio
7
- sdk_version: 3.6
8
  app_file: app.py
9
  pinned: false
10
  duplicated_from: runwayml/stable-diffusion-inpainting
 
4
  colorFrom: green
5
  colorTo: pink
6
  sdk: gradio
7
+ sdk_version: 3.41.2
8
  app_file: app.py
9
  pinned: false
10
  duplicated_from: runwayml/stable-diffusion-inpainting
app.py CHANGED
@@ -5,8 +5,8 @@ from diffusers import AutoPipelineForInpainting, UNet2DConditionModel
5
  import diffusers
6
  from share_btn import community_icon_html, loading_icon_html, share_js
7
 
8
- unet = UNet2DConditionModel.from_pretrained("valhalla/sdxl-inpaint-ema", torch_dtype=torch.float16, revision="d5593e75323fa2a5285ebe02c1aba504a695bbf7") # 50k
9
- pipe = AutoPipelineForInpainting.from_pretrained("stabilityai/stable-diffusion-xl-base-1.0", unet=unet, torch_dtype=torch.float16, variant="fp16").to("cuda")
10
 
11
  def read_content(file_path: str) -> str:
12
  """read the content of target file
@@ -16,7 +16,8 @@ def read_content(file_path: str) -> str:
16
 
17
  return content
18
 
19
- def predict(dict, prompt="", guidance_scale=7.5, steps=20, strength=1.0, scheduler="EulerDiscreteScheduler"):
 
20
  scheduler_class_name = scheduler.split("-")[0]
21
 
22
  add_kwargs = {}
@@ -31,13 +32,13 @@ def predict(dict, prompt="", guidance_scale=7.5, steps=20, strength=1.0, schedul
31
  init_image = dict["image"].convert("RGB").resize((1024, 1024))
32
  mask = dict["mask"].convert("RGB").resize((1024, 1024))
33
 
34
- output = pipe(prompt = prompt, image=init_image, mask_image=mask, guidance_scale=guidance_scale, num_inference_steps=int(steps), strength=strength)
35
 
36
- return output.images[0], gr.update(visible=True), gr.update(visible=True), gr.update(visible=True)
37
 
38
 
39
  css = '''
40
- .container {max-width: 1150px;margin: auto;padding-top: 1.5rem}
41
  #image_upload{min-height:400px}
42
  #image_upload [data-testid="image"], #image_upload [data-testid="image"] > div{min-height: 400px}
43
  #mask_radio .gr-form{background:transparent; border: none}
@@ -57,61 +58,55 @@ css = '''
57
  transform: rotate(360deg);
58
  }
59
  }
60
- #share-btn-container {
61
- 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;
62
- }
63
- #share-btn {
64
- 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;
65
- }
66
- #share-btn * {
67
- all: unset;
68
- }
69
- #share-btn-container div:nth-child(-n+2){
70
- width: auto !important;
71
- min-height: 0px !important;
72
- }
73
- #share-btn-container .wrap {
74
- display: none !important;
75
- }
76
  '''
77
 
78
- image_blocks = gr.Blocks(css=css)
79
  with image_blocks as demo:
80
  gr.HTML(read_content("header.html"))
81
- with gr.Group():
82
- with gr.Box():
83
- with gr.Row():
84
  with gr.Column():
85
  image = gr.Image(source='upload', tool='sketch', elem_id="image_upload", type="pil", label="Upload").style(height=400)
86
- with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
87
- prompt = gr.Textbox(placeholder = 'Your prompt (what you want in place of what is erased)', show_label=False, elem_id="input-text")
88
-
89
- with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
90
- guidance_scale = gr.Number(value=7.5, minimum=1.0, maximum=20.0, step=0.1, label="guidance_scale")
91
- steps = gr.Number(value=20, minimum=10, maximum=50, step=0.1, label="steps")
92
- strength = gr.Number(value=1.0, minimum=0.0, maximum=1.0, step=0.05, label="strength")
93
-
94
- with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
95
- schedulers = ["DEISMultistepScheduler", "HeunDiscreteScheduler", "EulerDiscreteScheduler", "DPMSolverMultistepScheduler", "DPMSolverMultistepScheduler-Karras", "DPMSolverMultistepScheduler-Karras-SDE"]
96
- scheduler = gr.Dropdown(choices=schedulers, value="EulerDiscreteScheduler")
 
 
 
97
 
98
- btn = gr.Button("Inpaint!").style(
99
- margin=False,
100
- rounded=(False, True, True, False),
101
- full_width=False,
102
- )
103
  with gr.Column():
104
  image_out = gr.Image(label="Output", elem_id="output-img").style(height=400)
105
- with gr.Group(elem_id="share-btn-container"):
106
- community_icon = gr.HTML(community_icon_html, visible=False)
107
- loading_icon = gr.HTML(loading_icon_html, visible=False)
108
- share_button = gr.Button("Share to community", elem_id="share-btn", visible=False)
109
 
110
 
111
- btn.click(fn=predict, inputs=[image, prompt, guidance_scale, steps, strength, scheduler], outputs=[image_out, community_icon, loading_icon, share_button])
112
- share_button.click(None, [], [], _js=share_js)
113
 
114
- gr.Examples(
115
  examples=[
116
  ["./imgs/aaa (8).png"],
117
  ["./imgs/download (1).jpeg"],
@@ -127,14 +122,14 @@ with image_blocks as demo:
127
  fn=predict,
128
  inputs=[image],
129
  cache_examples=False,
130
- )
131
- gr.HTML(
132
- """
133
- <div class="footer">
134
- <p>Model by <a href="https://huggingface.co/diffusers" style="text-decoration: underline;" target="_blank">Diffusers</a> - Gradio Demo by 🤗 Hugging Face
135
- </p>
136
- </div>
137
- """
138
- )
139
 
140
- image_blocks.launch()
 
5
  import diffusers
6
  from share_btn import community_icon_html, loading_icon_html, share_js
7
 
8
+ device = "cuda" if torch.cuda.is_available() else "cpu"
9
+ pipe = AutoPipelineForInpainting.from_pretrained("diffusers/inpainting-sdxl-0.1", torch_dtype=torch.float16, variant="fp16").to(device)
10
 
11
  def read_content(file_path: str) -> str:
12
  """read the content of target file
 
16
 
17
  return content
18
 
19
+ def predict(dict, prompt="", negative_prompt="", guidance_scale=7.5, steps=20, strength=1.0, scheduler="EulerDiscreteScheduler"):
20
+
21
  scheduler_class_name = scheduler.split("-")[0]
22
 
23
  add_kwargs = {}
 
32
  init_image = dict["image"].convert("RGB").resize((1024, 1024))
33
  mask = dict["mask"].convert("RGB").resize((1024, 1024))
34
 
35
+ 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)
36
 
37
+ return output.images[0], gr.update(visible=True)
38
 
39
 
40
  css = '''
41
+ .gradio-container{max-width: 1100px !important}
42
  #image_upload{min-height:400px}
43
  #image_upload [data-testid="image"], #image_upload [data-testid="image"] > div{min-height: 400px}
44
  #mask_radio .gr-form{background:transparent; border: none}
 
58
  transform: rotate(360deg);
59
  }
60
  }
61
+ #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;}
62
+ div#share-btn-container > div {flex-direction: row;background: black;align-items: center}
63
+ #share-btn-container:hover {background-color: #060606}
64
+ #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;}
65
+ #share-btn * {all: unset}
66
+ #share-btn-container div:nth-child(-n+2){width: auto !important;min-height: 0px !important;}
67
+ #share-btn-container .wrap {display: none !important}
68
+ #share-btn-container.hidden {display: none!important}
69
+ #prompt input{width: calc(100% - 160px);border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
70
+ #run_button{position:absolute;margin-top: 11px;right: 0;margin-right: 0.8em;border-bottom-left-radius: 0px;
71
+ border-top-left-radius: 0px;}
72
+ #prompt-container{margin-top:-18px;}
73
+ #prompt-container .form{border-top-left-radius: 0;border-top-right-radius: 0}
74
+ #image_upload{border-bottom-left-radius: 0px;border-bottom-right-radius: 0px}
 
 
75
  '''
76
 
77
+ image_blocks = gr.Blocks(css=css, elem_id="total-container")
78
  with image_blocks as demo:
79
  gr.HTML(read_content("header.html"))
80
+ with gr.Row():
 
 
81
  with gr.Column():
82
  image = gr.Image(source='upload', tool='sketch', elem_id="image_upload", type="pil", label="Upload").style(height=400)
83
+ with gr.Row(elem_id="prompt-container", mobile_collapse=False, equal_height=True):
84
+ with gr.Row():
85
+ prompt = gr.Textbox(placeholder="Your prompt (what you want in place of what is erased)", show_label=False, elem_id="prompt")
86
+ btn = gr.Button("Inpaint!", elem_id="run_button")
87
+
88
+ with gr.Accordion(label="Advanced Settings", open=False):
89
+ with gr.Row(mobile_collapse=False, equal_height=True):
90
+ guidance_scale = gr.Number(value=7.5, minimum=1.0, maximum=20.0, step=0.1, label="guidance_scale")
91
+ steps = gr.Number(value=20, minimum=10, maximum=30, step=1, label="steps")
92
+ strength = gr.Number(value=0.99, minimum=0.01, maximum=0.99, step=0.01, label="strength")
93
+ negative_prompt = gr.Textbox(label="negative_prompt", placeholder="Your negative prompt", info="what you don't want to see in the image")
94
+ with gr.Row(mobile_collapse=False, equal_height=True):
95
+ schedulers = ["DEISMultistepScheduler", "HeunDiscreteScheduler", "EulerDiscreteScheduler", "DPMSolverMultistepScheduler", "DPMSolverMultistepScheduler-Karras", "DPMSolverMultistepScheduler-Karras-SDE"]
96
+ scheduler = gr.Dropdown(label="Schedulers", choices=schedulers, value="EulerDiscreteScheduler")
97
 
 
 
 
 
 
98
  with gr.Column():
99
  image_out = gr.Image(label="Output", elem_id="output-img").style(height=400)
100
+ with gr.Group(elem_id="share-btn-container", visible=False) as share_btn_container:
101
+ community_icon = gr.HTML(community_icon_html)
102
+ loading_icon = gr.HTML(loading_icon_html)
103
+ share_button = gr.Button("Share to community", elem_id="share-btn",visible=True)
104
 
105
 
106
+ btn.click(fn=predict, inputs=[image, prompt, negative_prompt, guidance_scale, steps, strength, scheduler], outputs=[image_out, share_btn_container])
107
+ share_button.click(None, [], [], _js=share_js)
108
 
109
+ gr.Examples(
110
  examples=[
111
  ["./imgs/aaa (8).png"],
112
  ["./imgs/download (1).jpeg"],
 
122
  fn=predict,
123
  inputs=[image],
124
  cache_examples=False,
125
+ )
126
+ gr.HTML(
127
+ """
128
+ <div class="footer">
129
+ <p>Model by <a href="https://huggingface.co/diffusers" style="text-decoration: underline;" target="_blank">Diffusers</a> - Gradio Demo by 🤗 Hugging Face
130
+ </p>
131
+ </div>
132
+ """
133
+ )
134
 
135
+ image_blocks.launch()
header.html CHANGED
@@ -12,6 +12,6 @@
12
  </div>
13
  <div>
14
  <p style="align-items: center; margin-bottom: 7px;">
15
- Stable Diffusion XL Inpainting, add a mask and text prompt for what you want to replace
16
  </div>
17
- </div>
 
12
  </div>
13
  <div>
14
  <p style="align-items: center; margin-bottom: 7px;">
15
+ 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
16
  </div>
17
+ </div>
share_btn.py CHANGED
@@ -42,7 +42,7 @@ share_js = """async () => {
42
  // const gradioEl = document.querySelector("gradio-app").shadowRoot;
43
  const inputImgCanvas = gradioEl.querySelector('canvas[key="drawing"]');
44
  const outputImgEl = gradioEl.querySelector('#output-img img');
45
- const promptTxt = gradioEl.querySelector('#input-text textarea').value;
46
  let titleTxt = promptTxt;
47
  if(titleTxt.length > 100){
48
  titleTxt = titleTxt.slice(0, 100) + ' ...';
@@ -85,7 +85,8 @@ ${outputImgUrl}
85
  });
86
 
87
  const paramsStr = params.toString();
88
- window.open(`${window.location.href}/discussions/new?${paramsStr}`, '_blank');
 
89
 
90
  shareBtnEl.style.removeProperty('pointer-events');
91
  shareIconEl.style.removeProperty('display');
 
42
  // const gradioEl = document.querySelector("gradio-app").shadowRoot;
43
  const inputImgCanvas = gradioEl.querySelector('canvas[key="drawing"]');
44
  const outputImgEl = gradioEl.querySelector('#output-img img');
45
+ const promptTxt = gradioEl.querySelector('#prompt textarea').value;
46
  let titleTxt = promptTxt;
47
  if(titleTxt.length > 100){
48
  titleTxt = titleTxt.slice(0, 100) + ' ...';
 
85
  });
86
 
87
  const paramsStr = params.toString();
88
+
89
+ window.open(`https://huggingface.co/spaces/diffusers/stable-diffusion-xl-inpainting/discussions/new?${paramsStr}&preview=true`, '_blank');
90
 
91
  shareBtnEl.style.removeProperty('pointer-events');
92
  shareIconEl.style.removeProperty('display');