Alex McKinney commited on
Commit
693d97d
1 Parent(s): 5d57acf

adds html description to app

Browse files
Files changed (5) hide show
  1. README.md +0 -2
  2. app.css +114 -0
  3. app.py +7 -2
  4. app_header.html +58 -0
  5. app_license.html +27 -0
README.md CHANGED
@@ -13,12 +13,10 @@ license: creativeml-openrail-m
13
  Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
14
 
15
  ### Notes on Gradio changes
16
- - is there a way to stop the loading icon appearing? Would rather copy last input than flicker
17
  - onclick events for canvas? we can draw, but can I get coordinates?
18
  - checkboxes seem a bit busted with indexes
19
  - set canvas default to segmentation output, make small edits rather than doing whole thing
20
 
21
  ### ToDos:
22
- - [ ] inverse mask
23
  - [ ] click support
24
  - [ ] draw on mask
 
13
  Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
14
 
15
  ### Notes on Gradio changes
 
16
  - onclick events for canvas? we can draw, but can I get coordinates?
17
  - checkboxes seem a bit busted with indexes
18
  - set canvas default to segmentation output, make small edits rather than doing whole thing
19
 
20
  ### ToDos:
 
21
  - [ ] click support
22
  - [ ] draw on mask
app.css ADDED
@@ -0,0 +1,114 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .gradio-container {
2
+ font-family: 'IBM Plex Sans', sans-serif;
3
+ }
4
+ .gr-button {
5
+ color: white;
6
+ border-color: black;
7
+ background: black;
8
+ }
9
+ input[type='range'] {
10
+ accent-color: black;
11
+ }
12
+ .dark input[type='range'] {
13
+ accent-color: #dfdfdf;
14
+ }
15
+ .container {
16
+ max-width: 730px;
17
+ margin: auto;
18
+ padding-top: 1.5rem;
19
+ }
20
+ #gallery {
21
+ min-height: 22rem;
22
+ margin-bottom: 15px;
23
+ margin-left: auto;
24
+ margin-right: auto;
25
+ border-bottom-right-radius: .5rem !important;
26
+ border-bottom-left-radius: .5rem !important;
27
+ }
28
+ #gallery>div>.h-full {
29
+ min-height: 20rem;
30
+ }
31
+ .details:hover {
32
+ text-decoration: underline;
33
+ }
34
+ .gr-button {
35
+ white-space: nowrap;
36
+ }
37
+ .gr-button:focus {
38
+ border-color: rgb(147 197 253 / var(--tw-border-opacity));
39
+ outline: none;
40
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
41
+ --tw-border-opacity: 1;
42
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
43
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
44
+ --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
45
+ --tw-ring-opacity: .5;
46
+ }
47
+ #advanced-btn {
48
+ font-size: .7rem !important;
49
+ line-height: 19px;
50
+ margin-top: 12px;
51
+ margin-bottom: 12px;
52
+ padding: 2px 8px;
53
+ border-radius: 14px !important;
54
+ }
55
+ #advanced-options {
56
+ display: none;
57
+ margin-bottom: 20px;
58
+ }
59
+ .footer {
60
+ margin-bottom: 45px;
61
+ margin-top: 35px;
62
+ text-align: center;
63
+ border-bottom: 1px solid #e5e5e5;
64
+ }
65
+ .footer>p {
66
+ font-size: .8rem;
67
+ display: inline-block;
68
+ padding: 0 10px;
69
+ transform: translateY(10px);
70
+ background: white;
71
+ }
72
+ .dark .footer {
73
+ border-color: #303030;
74
+ }
75
+ .dark .footer>p {
76
+ background: #0b0f19;
77
+ }
78
+ .acknowledgments h4{
79
+ margin: 1.25em 0 .25em 0;
80
+ font-weight: bold;
81
+ font-size: 115%;
82
+ }
83
+ #container-advanced-btns{
84
+ display: flex;
85
+ flex-wrap: wrap;
86
+ justify-content: space-between;
87
+ align-items: center;
88
+ }
89
+ .animate-spin {
90
+ animation: spin 1s linear infinite;
91
+ }
92
+ @keyframes spin {
93
+ from {
94
+ transform: rotate(0deg);
95
+ }
96
+ to {
97
+ transform: rotate(360deg);
98
+ }
99
+ }
100
+ #share-btn-container {
101
+ 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;
102
+ }
103
+ #share-btn {
104
+ 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;
105
+ }
106
+ #share-btn * {
107
+ all: unset;
108
+ }
109
+ .gr-form{
110
+ flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
111
+ }
112
+ #prompt-container{
113
+ gap: 0;
114
+ }
app.py CHANGED
@@ -157,9 +157,12 @@ def fn_diffusion(
157
 
158
  return inpainted_image
159
 
160
- demo = gr.Blocks()
161
 
162
  with demo:
 
 
 
163
  # Input image control
164
  input_image = gr.Image(value="http://images.cocodataset.org/val2017/000000039769.jpg", type='pil', label="Input Image")
165
 
@@ -190,6 +193,8 @@ with demo:
190
 
191
  inpainted_image = gr.Image(type='pil', label="Inpainted Image")
192
 
 
 
193
  update_mask_inputs = [input_image, mask_storage, mask_checkboxes, max_slider, min_slider, invert_mask]
194
  update_mask_outputs = [mask_image, masked_image]
195
 
@@ -201,7 +206,6 @@ with demo:
201
  bt_masks.click(fn_segmentation, inputs=[input_image, max_slider, min_slider], outputs=[mask_storage, mask_checkboxes, mask_image, masked_image])
202
 
203
  # Update mask callbacks
204
- # TODO: can we replace this with `mask_image.change`? Not sure if it will actively update.
205
  max_slider.change(fn_update_mask, inputs=update_mask_inputs, outputs=update_mask_outputs, show_progress=False)
206
  min_slider.change(fn_update_mask, inputs=update_mask_inputs, outputs=update_mask_outputs, show_progress=False)
207
  mask_checkboxes.change(fn_update_mask, inputs=update_mask_inputs, outputs=update_mask_outputs, show_progress=False)
@@ -216,5 +220,6 @@ with demo:
216
  guidance_slider,
217
  negative_prompt
218
  ], outputs=inpainted_image)
 
219
 
220
  demo.launch()
 
157
 
158
  return inpainted_image
159
 
160
+ demo = gr.Blocks(css=open('app.css').read())
161
 
162
  with demo:
163
+ gr.HTML(open('app_header.html').read())
164
+ # gr.Markdown("# Stable Diffusion Inpainting Segmentation")
165
+
166
  # Input image control
167
  input_image = gr.Image(value="http://images.cocodataset.org/val2017/000000039769.jpg", type='pil', label="Input Image")
168
 
 
193
 
194
  inpainted_image = gr.Image(type='pil', label="Inpainted Image")
195
 
196
+ # TODO: saw a better way of handling many inputs online..
197
+ # forgot where though
198
  update_mask_inputs = [input_image, mask_storage, mask_checkboxes, max_slider, min_slider, invert_mask]
199
  update_mask_outputs = [mask_image, masked_image]
200
 
 
206
  bt_masks.click(fn_segmentation, inputs=[input_image, max_slider, min_slider], outputs=[mask_storage, mask_checkboxes, mask_image, masked_image])
207
 
208
  # Update mask callbacks
 
209
  max_slider.change(fn_update_mask, inputs=update_mask_inputs, outputs=update_mask_outputs, show_progress=False)
210
  min_slider.change(fn_update_mask, inputs=update_mask_inputs, outputs=update_mask_outputs, show_progress=False)
211
  mask_checkboxes.change(fn_update_mask, inputs=update_mask_inputs, outputs=update_mask_outputs, show_progress=False)
 
220
  guidance_slider,
221
  negative_prompt
222
  ], outputs=inpainted_image)
223
+ gr.HTML(open('app_license.html').read())
224
 
225
  demo.launch()
app_header.html ADDED
@@ -0,0 +1,58 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <div style="text-align: center; max-width: 650px; margin: 0 auto;">
2
+ <div
3
+ style="
4
+ display: inline-flex;
5
+ align-items: center;
6
+ gap: 0.8rem;
7
+ font-size: 1.75rem;
8
+ "
9
+ >
10
+ <svg
11
+ width="0.65em"
12
+ height="0.65em"
13
+ viewBox="0 0 115 115"
14
+ fill="none"
15
+ xmlns="http://www.w3.org/2000/svg"
16
+ >
17
+ <rect width="23" height="23" fill="white"></rect>
18
+ <rect y="69" width="23" height="23" fill="white"></rect>
19
+ <rect x="23" width="23" height="23" fill="#AEAEAE"></rect>
20
+ <rect x="23" y="69" width="23" height="23" fill="#AEAEAE"></rect>
21
+ <rect x="46" width="23" height="23" fill="white"></rect>
22
+ <rect x="46" y="69" width="23" height="23" fill="white"></rect>
23
+ <rect x="69" width="23" height="23" fill="black"></rect>
24
+ <rect x="69" y="69" width="23" height="23" fill="black"></rect>
25
+ <rect x="92" width="23" height="23" fill="#D9D9D9"></rect>
26
+ <rect x="92" y="69" width="23" height="23" fill="#AEAEAE"></rect>
27
+ <rect x="115" y="46" width="23" height="23" fill="white"></rect>
28
+ <rect x="115" y="115" width="23" height="23" fill="white"></rect>
29
+ <rect x="115" y="69" width="23" height="23" fill="#D9D9D9"></rect>
30
+ <rect x="92" y="46" width="23" height="23" fill="#AEAEAE"></rect>
31
+ <rect x="92" y="115" width="23" height="23" fill="#AEAEAE"></rect>
32
+ <rect x="92" y="69" width="23" height="23" fill="white"></rect>
33
+ <rect x="69" y="46" width="23" height="23" fill="white"></rect>
34
+ <rect x="69" y="115" width="23" height="23" fill="white"></rect>
35
+ <rect x="69" y="69" width="23" height="23" fill="#D9D9D9"></rect>
36
+ <rect x="46" y="46" width="23" height="23" fill="black"></rect>
37
+ <rect x="46" y="115" width="23" height="23" fill="black"></rect>
38
+ <rect x="46" y="69" width="23" height="23" fill="black"></rect>
39
+ <rect x="23" y="46" width="23" height="23" fill="#D9D9D9"></rect>
40
+ <rect x="23" y="115" width="23" height="23" fill="#AEAEAE"></rect>
41
+ <rect x="23" y="69" width="23" height="23" fill="black"></rect>
42
+ </svg>
43
+ <h1 style="font-weight: 900; margin-bottom: 7px; margin-top: 7px">
44
+ Stable Diffusion x Segmentation Masking 😷
45
+ </h1>
46
+ </div>
47
+ <p style="margin-bottom: 10px; font-size: 94%">
48
+ Stable Diffusion is a state of the art text-to-image model that generates
49
+ images from text. Finetuning the model can make it suitable for inpainting
50
+ when provided with a starting image, mask, and text prompt.
51
+ </p>
52
+ <p style="margin-bottom: 10px; font-size: 94%">
53
+ However, depending on how complex the area you want to mask is, creating
54
+ the mask can be tedious. This demo incorporates a segmentation model to
55
+ generate per-class masks for you, which can be combined to produce a final
56
+ diffusion mask.
57
+ </p>
58
+ </div>
app_license.html ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <div class="acknowledgments">
2
+ <p><h4>LICENSE</h4>
3
+ The model is licensed with a <a
4
+ href="https://huggingface.co/spaces/CompVis/stable-diffusion-license"
5
+ style="text-decoration: underline;" target="_blank">CreativeML Open RAIL-M</a>
6
+ license. The authors claim no rights on the outputs you generate, you are free
7
+ to use them and are accountable for their use which must not go against the
8
+ provisions set in this license. The license forbids you from sharing any content
9
+ that violates any laws, produce any harm to a person, disseminate any personal
10
+ information that would be meant for harm, spread misinformation and target
11
+ vulnerable groups. For the full list of restrictions please <a
12
+ href="https://huggingface.co/spaces/CompVis/stable-diffusion-license"
13
+ target="_blank" style="text-decoration: underline;" target="_blank">read the
14
+ license</a></p>
15
+ <p><h4>Biases and content acknowledgment</h4>
16
+ Despite how impressive being able to turn text into image is, beware to the fact
17
+ that this model may output content that reinforces or exacerbates societal
18
+ biases, as well as realistic faces, pornography and violence. The model was
19
+ trained on the <a href="https://laion.ai/blog/laion-5b/" style="text-decoration:
20
+ underline;" target="_blank">LAION-5B dataset</a>, which scraped non-curated
21
+ image-text-pairs from the internet (the exception being the removal of illegal
22
+ content) and is meant for research purposes. You can read more in the <a
23
+ href="https://huggingface.co/CompVis/stable-diffusion-v1-4"
24
+ style="text-decoration: underline;" target="_blank">model card</a>. Additionally,
25
+ you can read more about the inpainting finetuning process in this
26
+ <a href="https://huggingface.co/runwayml/stable-diffusion-inpainting" style="text-decoration: underline">model card</a>.</p>
27
+ </div>