Files changed (5) hide show
  1. README.md +6 -7
  2. app.py +97 -144
  3. requirements.txt +5 -1
  4. share_btn.py +0 -60
  5. unsafe.png +0 -0
README.md CHANGED
@@ -1,14 +1,13 @@
1
  ---
2
- title: Stable Diffusion 2-1
3
- emoji: 🔥
4
- colorFrom: yellow
5
- colorTo: gray
6
  sdk: gradio
7
- sdk_version: 3.20.0
8
  app_file: app.py
9
- pinned: true
10
  license: mit
11
- disable_embedding: true
12
  ---
13
 
14
  Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: Stable Diffusion
3
+ emoji: 🏃
4
+ colorFrom: red
5
+ colorTo: red
6
  sdk: gradio
7
+ sdk_version: 3.1.7
8
  app_file: app.py
9
+ pinned: false
10
  license: mit
 
11
  ---
12
 
13
  Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
app.py CHANGED
@@ -1,34 +1,47 @@
1
  import gradio as gr
 
 
 
 
2
  from datasets import load_dataset
3
  from PIL import Image
4
-
5
  import re
6
- import os
7
- import requests
8
 
9
- from share_btn import community_icon_html, loading_icon_html, share_js
 
10
 
 
 
 
 
11
  word_list_dataset = load_dataset("stabilityai/word-list", data_files="list.txt", use_auth_token=True)
12
  word_list = word_list_dataset["train"]['text']
13
 
14
- is_gpu_busy = False
15
- def infer(prompt, negative, scale):
16
- global is_gpu_busy
17
  for filter in word_list:
18
  if re.search(rf"\b{filter}\b", prompt):
19
  raise gr.Error("Unsafe content found. Please try again with different prompts.")
20
 
21
- images = []
22
- url = os.getenv('JAX_BACKEND_URL')
23
- payload = {'prompt': prompt, 'negative_prompt': negative, 'guidance_scale': scale}
24
- images_request = requests.post(url, json = payload)
25
- for image in images_request.json()["images"]:
26
- image_b64 = (f"data:image/jpeg;base64,{image}")
27
- images.append(image_b64)
28
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  return images
30
 
31
-
32
  css = """
33
  .gradio-container {
34
  font-family: 'IBM Plex Sans', sans-serif;
@@ -112,45 +125,6 @@ css = """
112
  font-weight: bold;
113
  font-size: 115%;
114
  }
115
- .animate-spin {
116
- animation: spin 1s linear infinite;
117
- }
118
- @keyframes spin {
119
- from {
120
- transform: rotate(0deg);
121
- }
122
- to {
123
- transform: rotate(360deg);
124
- }
125
- }
126
- #share-btn-container {
127
- 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;
128
- margin-top: 10px;
129
- margin-left: auto;
130
- }
131
- #share-btn {
132
- 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;right:0;
133
- }
134
- #share-btn * {
135
- all: unset;
136
- }
137
- #share-btn-container div:nth-child(-n+2){
138
- width: auto !important;
139
- min-height: 0px !important;
140
- }
141
- #share-btn-container .wrap {
142
- display: none !important;
143
- }
144
-
145
- .gr-form{
146
- flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
147
- }
148
- #prompt-container{
149
- gap: 0;
150
- }
151
- #prompt-text-input, #negative-prompt-text-input{padding: .45rem 0.625rem}
152
- #component-16{border-top-width: 1px!important;margin-top: 1em}
153
- .image_duplication{position: absolute; width: 100px; left: 50px}
154
  """
155
 
156
  block = gr.Blocks(css=css)
@@ -158,36 +132,45 @@ block = gr.Blocks(css=css)
158
  examples = [
159
  [
160
  'A high tech solarpunk utopia in the Amazon rainforest',
161
- 'low quality',
162
- 9
 
 
163
  ],
164
  [
165
  'A pikachu fine dining with a view to the Eiffel Tower',
166
- 'low quality',
167
- 9
 
 
168
  ],
169
  [
170
  'A mecha robot in a favela in expressionist style',
171
- 'low quality, 3d, photorealistic',
172
- 9
 
 
173
  ],
174
  [
175
  'an insect robot preparing a delicious meal',
176
- 'low quality, illustration',
177
- 9
 
 
178
  ],
179
  [
180
  "A small cabin on top of a snowy mountain in the style of Disney, artstation",
181
- 'low quality, ugly',
182
- 9
 
 
183
  ],
184
  ]
185
 
186
-
187
  with block:
188
  gr.HTML(
189
  """
190
- <div style="text-align: center; margin: 0 auto;">
191
  <div
192
  style="
193
  display: inline-flex;
@@ -229,121 +212,91 @@ with block:
229
  <rect x="23" y="115" width="23" height="23" fill="#AEAEAE"></rect>
230
  <rect x="23" y="69" width="23" height="23" fill="black"></rect>
231
  </svg>
232
- <h1 style="font-weight: 900; margin-bottom: 7px;margin-top:5px">
233
- Stable Diffusion 2.1 Demo
234
  </h1>
235
  </div>
236
- <p style="margin-bottom: 10px; font-size: 94%; line-height: 23px;">
237
- Stable Diffusion 2.1 is the latest text-to-image model from StabilityAI. <a style="text-decoration: underline;" href="https://huggingface.co/spaces/stabilityai/stable-diffusion-1">Access Stable Diffusion 1 Space here</a><br>For faster generation and API
 
238
  access you can try
239
  <a
240
  href="http://beta.dreamstudio.ai/"
241
  style="text-decoration: underline;"
242
  target="_blank"
243
  >DreamStudio Beta</a
244
- >.</a>
245
  </p>
246
  </div>
247
  """
248
  )
249
  with gr.Group():
250
  with gr.Box():
251
- with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
252
- with gr.Column():
253
- text = gr.Textbox(
254
- label="Enter your prompt",
255
- show_label=False,
256
- max_lines=1,
257
- placeholder="Enter your prompt",
258
- elem_id="prompt-text-input",
259
- ).style(
260
- border=(True, False, True, True),
261
- rounded=(True, False, False, True),
262
- container=False,
263
- )
264
- negative = gr.Textbox(
265
- label="Enter your negative prompt",
266
- show_label=False,
267
- max_lines=1,
268
- placeholder="Enter a negative prompt",
269
- elem_id="negative-prompt-text-input",
270
- ).style(
271
- border=(True, False, True, True),
272
- rounded=(True, False, False, True),
273
- container=False,
274
- )
275
  btn = gr.Button("Generate image").style(
276
  margin=False,
277
  rounded=(False, True, True, False),
278
- full_width=False,
279
  )
280
 
281
  gallery = gr.Gallery(
282
  label="Generated images", show_label=False, elem_id="gallery"
283
  ).style(grid=[2], height="auto")
284
 
285
- with gr.Group(elem_id="container-advanced-btns"):
286
- #advanced_button = gr.Button("Advanced options", elem_id="advanced-btn")
287
- with gr.Group(elem_id="share-btn-container"):
288
- community_icon = gr.HTML(community_icon_html)
289
- loading_icon = gr.HTML(loading_icon_html)
290
- share_button = gr.Button("Share to community", elem_id="share-btn")
291
 
292
- with gr.Accordion("Advanced settings", open=False):
293
- # gr.Markdown("Advanced settings are temporarily unavailable")
294
- # samples = gr.Slider(label="Images", minimum=1, maximum=4, value=4, step=1)
295
- # steps = gr.Slider(label="Steps", minimum=1, maximum=50, value=45, step=1)
296
- guidance_scale = gr.Slider(
297
- label="Guidance Scale", minimum=0, maximum=50, value=9, step=0.1
298
- )
299
- # seed = gr.Slider(
300
- # label="Seed",
301
- # minimum=0,
302
- # maximum=2147483647,
303
- # step=1,
304
- # randomize=True,
305
- # )
306
 
307
- ex = gr.Examples(examples=examples, fn=infer, inputs=[text, negative, guidance_scale], outputs=[gallery, community_icon, loading_icon, share_button], cache_examples=False)
308
  ex.dataset.headers = [""]
309
- negative.submit(infer, inputs=[text, negative, guidance_scale], outputs=[gallery], postprocess=False)
310
- text.submit(infer, inputs=[text, negative, guidance_scale], outputs=[gallery], postprocess=False)
311
- btn.click(infer, inputs=[text, negative, guidance_scale], outputs=[gallery], postprocess=False)
312
 
313
- #advanced_button.click(
314
- # None,
315
- # [],
316
- # text,
317
- # _js="""
318
- # () => {
319
- # const options = document.querySelector("body > gradio-app").querySelector("#advanced-options");
320
- # options.style.display = ["none", ""].includes(options.style.display) ? "flex" : "none";
321
- # }""",
322
- #)
323
- share_button.click(
324
  None,
325
  [],
326
- [],
327
- _js=share_js,
 
 
 
 
328
  )
329
  gr.HTML(
330
  """
331
  <div class="footer">
332
- <p>Model by <a href="https://huggingface.co/stabilityai" style="text-decoration: underline;" target="_blank">StabilityAI</a> - backend running JAX on TPUs due to generous support of <a href="https://sites.research.google/trc/about/" style="text-decoration: underline;" target="_blank">Google TRC program</a> - Gradio Demo by 🤗 Hugging Face
333
  </p>
334
  </div>
335
- """
336
- )
337
- with gr.Accordion(label="License", open=False):
338
- gr.HTML(
339
- """<div class="acknowledgments">
340
  <p><h4>LICENSE</h4>
341
- The model is licensed with a <a href="https://huggingface.co/stabilityai/stable-diffusion-2/blob/main/LICENSE-MODEL" style="text-decoration: underline;" target="_blank">CreativeML OpenRAIL++</a> license. The authors claim no rights on the outputs you generate, you are free to use them and are accountable for their use which must not go against the provisions set in this license. The license forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, spread misinformation and target vulnerable groups. For the full list of restrictions please <a href="https://huggingface.co/spaces/CompVis/stable-diffusion-license" target="_blank" style="text-decoration: underline;" target="_blank">read the license</a></p>
342
  <p><h4>Biases and content acknowledgment</h4>
343
  Despite how impressive being able to turn text into image is, beware to the fact that this model may output content that reinforces or exacerbates societal biases, as well as realistic faces, pornography and violence. The model was trained on the <a href="https://laion.ai/blog/laion-5b/" style="text-decoration: underline;" target="_blank">LAION-5B dataset</a>, which scraped non-curated image-text-pairs from the internet (the exception being the removal of illegal content) and is meant for research purposes. You can read more in the <a href="https://huggingface.co/CompVis/stable-diffusion-v1-4" style="text-decoration: underline;" target="_blank">model card</a></p>
344
  </div>
345
- """
346
- )
347
-
348
 
349
- block.queue(concurrency_count=80, max_size=100).launch(max_threads=150)
 
1
  import gradio as gr
2
+
3
+ import torch
4
+ from torch import autocast
5
+ from diffusers import StableDiffusionPipeline
6
  from datasets import load_dataset
7
  from PIL import Image
 
8
  import re
 
 
9
 
10
+ model_id = "CompVis/stable-diffusion-v1-4"
11
+ device = "cuda"
12
 
13
+ #If you are running this code locally, you need to either do a 'huggingface-cli login` or paste your User Access Token from here https://huggingface.co/settings/tokens into the use_auth_token field below.
14
+ pipe = StableDiffusionPipeline.from_pretrained(model_id, use_auth_token=True, revision="fp16", torch_dtype=torch.float16)
15
+ pipe = pipe.to(device)
16
+ #When running locally, you won`t have access to this, so you can remove this part
17
  word_list_dataset = load_dataset("stabilityai/word-list", data_files="list.txt", use_auth_token=True)
18
  word_list = word_list_dataset["train"]['text']
19
 
20
+ def infer(prompt, samples, steps, scale, seed):
21
+ #When running locally you can also remove this filter
 
22
  for filter in word_list:
23
  if re.search(rf"\b{filter}\b", prompt):
24
  raise gr.Error("Unsafe content found. Please try again with different prompts.")
25
 
26
+ generator = torch.Generator(device=device).manual_seed(seed)
 
 
 
 
 
 
27
 
28
+ #If you are running locally with CPU, you can remove the `with autocast("cuda")`
29
+ with autocast("cuda"):
30
+ images_list = pipe(
31
+ [prompt] * samples,
32
+ num_inference_steps=steps,
33
+ guidance_scale=scale,
34
+ generator=generator,
35
+ )
36
+ images = []
37
+ safe_image = Image.open(r"unsafe.png")
38
+ for i, image in enumerate(images_list["sample"]):
39
+ if(images_list["nsfw_content_detected"][i]):
40
+ images.append(safe_image)
41
+ else:
42
+ images.append(image)
43
  return images
44
 
 
45
  css = """
46
  .gradio-container {
47
  font-family: 'IBM Plex Sans', sans-serif;
 
125
  font-weight: bold;
126
  font-size: 115%;
127
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
  """
129
 
130
  block = gr.Blocks(css=css)
 
132
  examples = [
133
  [
134
  'A high tech solarpunk utopia in the Amazon rainforest',
135
+ 4,
136
+ 45,
137
+ 7.5,
138
+ 1024,
139
  ],
140
  [
141
  'A pikachu fine dining with a view to the Eiffel Tower',
142
+ 4,
143
+ 45,
144
+ 7,
145
+ 1024,
146
  ],
147
  [
148
  'A mecha robot in a favela in expressionist style',
149
+ 4,
150
+ 45,
151
+ 7,
152
+ 1024,
153
  ],
154
  [
155
  'an insect robot preparing a delicious meal',
156
+ 4,
157
+ 45,
158
+ 7,
159
+ 1024,
160
  ],
161
  [
162
  "A small cabin on top of a snowy mountain in the style of Disney, artstation",
163
+ 4,
164
+ 45,
165
+ 7,
166
+ 1024,
167
  ],
168
  ]
169
 
 
170
  with block:
171
  gr.HTML(
172
  """
173
+ <div style="text-align: center; max-width: 650px; margin: 0 auto;">
174
  <div
175
  style="
176
  display: inline-flex;
 
212
  <rect x="23" y="115" width="23" height="23" fill="#AEAEAE"></rect>
213
  <rect x="23" y="69" width="23" height="23" fill="black"></rect>
214
  </svg>
215
+ <h1 style="font-weight: 900; margin-bottom: 7px;">
216
+ Stable Diffusion Demo
217
  </h1>
218
  </div>
219
+ <p style="margin-bottom: 10px; font-size: 94%">
220
+ Stable Diffusion is a state of the art text-to-image model that generates
221
+ images from text.<br>For faster generation and forthcoming API
222
  access you can try
223
  <a
224
  href="http://beta.dreamstudio.ai/"
225
  style="text-decoration: underline;"
226
  target="_blank"
227
  >DreamStudio Beta</a
228
+ >
229
  </p>
230
  </div>
231
  """
232
  )
233
  with gr.Group():
234
  with gr.Box():
235
+ with gr.Row().style(mobile_collapse=False, equal_height=True):
236
+ text = gr.Textbox(
237
+ label="Enter your prompt",
238
+ show_label=False,
239
+ max_lines=1,
240
+ placeholder="Enter your prompt",
241
+ ).style(
242
+ border=(True, False, True, True),
243
+ rounded=(True, False, False, True),
244
+ container=False,
245
+ )
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  btn = gr.Button("Generate image").style(
247
  margin=False,
248
  rounded=(False, True, True, False),
 
249
  )
250
 
251
  gallery = gr.Gallery(
252
  label="Generated images", show_label=False, elem_id="gallery"
253
  ).style(grid=[2], height="auto")
254
 
255
+ advanced_button = gr.Button("Advanced options", elem_id="advanced-btn")
 
 
 
 
 
256
 
257
+ with gr.Row(elem_id="advanced-options"):
258
+ samples = gr.Slider(label="Images", minimum=1, maximum=4, value=4, step=1)
259
+ steps = gr.Slider(label="Steps", minimum=1, maximum=50, value=45, step=1)
260
+ scale = gr.Slider(
261
+ label="Guidance Scale", minimum=0, maximum=50, value=7.5, step=0.1
262
+ )
263
+ seed = gr.Slider(
264
+ label="Seed",
265
+ minimum=0,
266
+ maximum=2147483647,
267
+ step=1,
268
+ randomize=True,
269
+ )
 
270
 
271
+ ex = gr.Examples(examples=examples, fn=infer, inputs=[text, samples, steps, scale, seed], outputs=gallery, cache_examples=True)
272
  ex.dataset.headers = [""]
273
+
 
 
274
 
275
+ text.submit(infer, inputs=[text, samples, steps, scale, seed], outputs=gallery)
276
+ btn.click(infer, inputs=[text, samples, steps, scale, seed], outputs=gallery)
277
+ advanced_button.click(
 
 
 
 
 
 
 
 
278
  None,
279
  [],
280
+ text,
281
+ _js="""
282
+ () => {
283
+ const options = document.querySelector("body > gradio-app").querySelector("#advanced-options");
284
+ options.style.display = ["none", ""].includes(options.style.display) ? "flex" : "none";
285
+ }""",
286
  )
287
  gr.HTML(
288
  """
289
  <div class="footer">
290
+ <p>Model by <a href="https://huggingface.co/CompVis" style="text-decoration: underline;" target="_blank">CompVis</a> and <a href="https://huggingface.co/stabilityai" style="text-decoration: underline;" target="_blank">Stability AI</a> - Gradio Demo by 🤗 Hugging Face
291
  </p>
292
  </div>
293
+ <div class="acknowledgments">
 
 
 
 
294
  <p><h4>LICENSE</h4>
295
+ The model is licensed with a <a href="https://huggingface.co/spaces/CompVis/stable-diffusion-license" style="text-decoration: underline;" target="_blank">CreativeML Open RAIL-M</a> license. The authors claim no rights on the outputs you generate, you are free to use them and are accountable for their use which must not go against the provisions set in this license. The license forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, spread misinformation and target vulnerable groups. For the full list of restrictions please <a href="https://huggingface.co/spaces/CompVis/stable-diffusion-license" target="_blank" style="text-decoration: underline;" target="_blank">read the license</a></p>
296
  <p><h4>Biases and content acknowledgment</h4>
297
  Despite how impressive being able to turn text into image is, beware to the fact that this model may output content that reinforces or exacerbates societal biases, as well as realistic faces, pornography and violence. The model was trained on the <a href="https://laion.ai/blog/laion-5b/" style="text-decoration: underline;" target="_blank">LAION-5B dataset</a>, which scraped non-curated image-text-pairs from the internet (the exception being the removal of illegal content) and is meant for research purposes. You can read more in the <a href="https://huggingface.co/CompVis/stable-diffusion-v1-4" style="text-decoration: underline;" target="_blank">model card</a></p>
298
  </div>
299
+ """
300
+ )
 
301
 
302
+ block.queue(max_size=25).launch()
requirements.txt CHANGED
@@ -1 +1,5 @@
1
- python-dotenv
 
 
 
 
 
1
+ diffusers
2
+ transformers
3
+ nvidia-ml-py3
4
+ ftfy
5
+ --extra-index-url https://download.pytorch.org/whl/cu113 torch
share_btn.py DELETED
@@ -1,60 +0,0 @@
1
- community_icon_html = """<svg id="share-btn-share-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32">
2
- <path d="M20.6081 3C21.7684 3 22.8053 3.49196 23.5284 4.38415C23.9756 4.93678 24.4428 5.82749 24.4808 7.16133C24.9674 7.01707 25.4353 6.93643 25.8725 6.93643C26.9833 6.93643 27.9865 7.37587 28.696 8.17411C29.6075 9.19872 30.0124 10.4579 29.8361 11.7177C29.7523 12.3177 29.5581 12.8555 29.2678 13.3534C29.8798 13.8646 30.3306 14.5763 30.5485 15.4322C30.719 16.1032 30.8939 17.5006 29.9808 18.9403C30.0389 19.0342 30.0934 19.1319 30.1442 19.2318C30.6932 20.3074 30.7283 21.5229 30.2439 22.6548C29.5093 24.3704 27.6841 25.7219 24.1397 27.1727C21.9347 28.0753 19.9174 28.6523 19.8994 28.6575C16.9842 29.4379 14.3477 29.8345 12.0653 29.8345C7.87017 29.8345 4.8668 28.508 3.13831 25.8921C0.356375 21.6797 0.754104 17.8269 4.35369 14.1131C6.34591 12.058 7.67023 9.02782 7.94613 8.36275C8.50224 6.39343 9.97271 4.20438 12.4172 4.20438H12.4179C12.6236 4.20438 12.8314 4.2214 13.0364 4.25468C14.107 4.42854 15.0428 5.06476 15.7115 6.02205C16.4331 5.09583 17.134 4.359 17.7682 3.94323C18.7242 3.31737 19.6794 3 20.6081 3ZM20.6081 5.95917C20.2427 5.95917 19.7963 6.1197 19.3039 6.44225C17.7754 7.44319 14.8258 12.6772 13.7458 14.7131C13.3839 15.3952 12.7655 15.6837 12.2086 15.6837C11.1036 15.6837 10.2408 14.5497 12.1076 13.1085C14.9146 10.9402 13.9299 7.39584 12.5898 7.1776C12.5311 7.16799 12.4731 7.16355 12.4172 7.16355C11.1989 7.16355 10.6615 9.33114 10.6615 9.33114C10.6615 9.33114 9.0863 13.4148 6.38031 16.206C3.67434 18.998 3.5346 21.2388 5.50675 24.2246C6.85185 26.2606 9.42666 26.8753 12.0653 26.8753C14.8021 26.8753 17.6077 26.2139 19.1799 25.793C19.2574 25.7723 28.8193 22.984 27.6081 20.6107C27.4046 20.212 27.0693 20.0522 26.6471 20.0522C24.9416 20.0522 21.8393 22.6726 20.5057 22.6726C20.2076 22.6726 19.9976 22.5416 19.9116 22.222C19.3433 20.1173 28.552 19.2325 27.7758 16.1839C27.639 15.6445 27.2677 15.4256 26.746 15.4263C24.4923 15.4263 19.4358 19.5181 18.3759 19.5181C18.2949 19.5181 18.2368 19.4937 18.2053 19.4419C17.6743 18.557 17.9653 17.9394 21.7082 15.6009C25.4511 13.2617 28.0783 11.8545 26.5841 10.1752C26.4121 9.98141 26.1684 9.8956 25.8725 9.8956C23.6001 9.89634 18.2311 14.9403 18.2311 14.9403C18.2311 14.9403 16.7821 16.496 15.9057 16.496C15.7043 16.496 15.533 16.4139 15.4169 16.2112C14.7956 15.1296 21.1879 10.1286 21.5484 8.06535C21.7928 6.66715 21.3771 5.95917 20.6081 5.95917Z" fill="#FF9D00"></path>
3
- <path d="M5.50686 24.2246C3.53472 21.2387 3.67446 18.9979 6.38043 16.206C9.08641 13.4147 10.6615 9.33111 10.6615 9.33111C10.6615 9.33111 11.2499 6.95933 12.59 7.17757C13.93 7.39581 14.9139 10.9401 12.1069 13.1084C9.29997 15.276 12.6659 16.7489 13.7459 14.713C14.8258 12.6772 17.7747 7.44316 19.304 6.44221C20.8326 5.44128 21.9089 6.00204 21.5484 8.06532C21.188 10.1286 14.795 15.1295 15.4171 16.2118C16.0391 17.2934 18.2312 14.9402 18.2312 14.9402C18.2312 14.9402 25.0907 8.49588 26.5842 10.1752C28.0776 11.8545 25.4512 13.2616 21.7082 15.6008C17.9646 17.9393 17.6744 18.557 18.2054 19.4418C18.7372 20.3266 26.9998 13.1351 27.7759 16.1838C28.5513 19.2324 19.3434 20.1173 19.9117 22.2219C20.48 24.3274 26.3979 18.2382 27.6082 20.6107C28.8193 22.9839 19.2574 25.7722 19.18 25.7929C16.0914 26.62 8.24723 28.3726 5.50686 24.2246Z" fill="#FFD21E"></path>
4
- </svg>"""
5
-
6
- loading_icon_html = """<svg id="share-btn-loading-icon" style="display:none;" class="animate-spin"
7
- style="color: #ffffff;
8
- "
9
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" fill="none" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="white" stroke-width="4"></circle><path style="opacity: 0.75;" fill="white" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>"""
10
-
11
- share_js = """async () => {
12
- async function uploadFile(file){
13
- const UPLOAD_URL = 'https://huggingface.co/uploads';
14
- const response = await fetch(UPLOAD_URL, {
15
- method: 'POST',
16
- headers: {
17
- 'Content-Type': file.type,
18
- 'X-Requested-With': 'XMLHttpRequest',
19
- },
20
- body: file, /// <- File inherits from Blob
21
- });
22
- const url = await response.text();
23
- return url;
24
- }
25
- const gradioEl = document.querySelector('body > gradio-app');
26
- const imgEls = gradioEl.querySelectorAll('#gallery img');
27
- const promptTxt = gradioEl.querySelector('#prompt-text-input input').value;
28
- const shareBtnEl = gradioEl.querySelector('#share-btn');
29
- const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
30
- const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
31
- if(!imgEls.length){
32
- return;
33
- };
34
- shareBtnEl.style.pointerEvents = 'none';
35
- shareIconEl.style.display = 'none';
36
- loadingIconEl.style.removeProperty('display');
37
- const files = await Promise.all(
38
- [...imgEls].map(async (imgEl) => {
39
- const res = await fetch(imgEl.src);
40
- const blob = await res.blob();
41
- const imgId = Date.now() % 200;
42
- const fileName = `diffuse-the-rest-${{imgId}}.jpg`;
43
- return new File([blob], fileName, { type: 'image/jpeg' });
44
- })
45
- );
46
- const urls = await Promise.all(files.map((f) => uploadFile(f)));
47
- const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);
48
- const descriptionMd = `<div style='display: flex; flex-wrap: wrap; column-gap: 0.75rem;'>
49
- ${htmlImgs.join(`\n`)}
50
- </div>`;
51
- const params = new URLSearchParams({
52
- title: promptTxt,
53
- description: descriptionMd,
54
- });
55
- const paramsStr = params.toString();
56
- window.open(`https://huggingface.co/spaces/stabilityai/stable-diffusion/discussions/new?${paramsStr}`, '_blank');
57
- shareBtnEl.style.removeProperty('pointer-events');
58
- shareIconEl.style.removeProperty('display');
59
- loadingIconEl.style.display = 'none';
60
- }"""
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
unsafe.png ADDED