Files changed (5) hide show
  1. README.md +6 -7
  2. app.py +119 -96
  3. requirements.txt +2 -1
  4. share_btn.py +8 -0
  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.4b2
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,26 +1,62 @@
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}")
@@ -112,6 +148,12 @@ css = """
112
  font-weight: bold;
113
  font-size: 115%;
114
  }
 
 
 
 
 
 
115
  .animate-spin {
116
  animation: spin 1s linear infinite;
117
  }
@@ -125,32 +167,19 @@ css = """
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,28 +187,38 @@ 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
 
@@ -187,7 +226,7 @@ examples = [
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,19 +268,20 @@ 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
  """
@@ -249,29 +289,17 @@ with block:
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),
@@ -283,43 +311,43 @@ with block:
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
  [],
@@ -329,21 +357,16 @@ with block:
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
+ #import torch
3
+ #from torch import autocast
4
+ #from diffusers import StableDiffusionPipeline
5
  from datasets import load_dataset
6
  from PIL import Image
7
+ #from io import BytesIO
8
+ #import base64
9
  import re
10
  import os
11
  import requests
12
 
13
+
14
  from share_btn import community_icon_html, loading_icon_html, share_js
15
 
16
+ model_id = "CompVis/stable-diffusion-v1-4"
17
+ device = "cuda"
18
+
19
+ #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.
20
+ #pipe = StableDiffusionPipeline.from_pretrained(model_id, use_auth_token=True, revision="fp16", torch_dtype=torch.float16)
21
+ #pipe = pipe.to(device)
22
+ #torch.backends.cudnn.benchmark = True
23
+
24
+ #When running locally, you won`t have access to this, so you can remove this part
25
  word_list_dataset = load_dataset("stabilityai/word-list", data_files="list.txt", use_auth_token=True)
26
  word_list = word_list_dataset["train"]['text']
27
 
28
  is_gpu_busy = False
29
+ def infer(prompt):
30
  global is_gpu_busy
31
+ samples = 4
32
+ steps = 50
33
+ scale = 7.5
34
+ #When running locally you can also remove this filter
35
  for filter in word_list:
36
  if re.search(rf"\b{filter}\b", prompt):
37
  raise gr.Error("Unsafe content found. Please try again with different prompts.")
38
 
39
+ #generator = torch.Generator(device=device).manual_seed(seed)
40
+ #print("Is GPU busy? ", is_gpu_busy)
41
  images = []
42
+ #if(not is_gpu_busy):
43
+ # is_gpu_busy = True
44
+ # images_list = pipe(
45
+ # [prompt] * samples,
46
+ # num_inference_steps=steps,
47
+ # guidance_scale=scale,
48
+ #generator=generator,
49
+ # )
50
+ # is_gpu_busy = False
51
+ # safe_image = Image.open(r"unsafe.png")
52
+ # for i, image in enumerate(images_list["sample"]):
53
+ # if(images_list["nsfw_content_detected"][i]):
54
+ # images.append(safe_image)
55
+ # else:
56
+ # images.append(image)
57
+ #else:
58
  url = os.getenv('JAX_BACKEND_URL')
59
+ payload = {'prompt': prompt}
60
  images_request = requests.post(url, json = payload)
61
  for image in images_request.json()["images"]:
62
  image_b64 = (f"data:image/jpeg;base64,{image}")
 
148
  font-weight: bold;
149
  font-size: 115%;
150
  }
151
+ #container-advanced-btns{
152
+ display: flex;
153
+ flex-wrap: wrap;
154
+ justify-content: space-between;
155
+ align-items: center;
156
+ }
157
  .animate-spin {
158
  animation: spin 1s linear infinite;
159
  }
 
167
  }
168
  #share-btn-container {
169
  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;
 
 
170
  }
171
  #share-btn {
172
+ 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;
173
  }
174
  #share-btn * {
175
  all: unset;
176
  }
 
 
 
 
 
 
 
 
177
  .gr-form{
178
  flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
179
  }
180
  #prompt-container{
181
  gap: 0;
182
  }
 
 
 
183
  """
184
 
185
  block = gr.Blocks(css=css)
 
187
  examples = [
188
  [
189
  'A high tech solarpunk utopia in the Amazon rainforest',
190
+ # 4,
191
+ # 45,
192
+ # 7.5,
193
+ # 1024,
194
  ],
195
  [
196
  'A pikachu fine dining with a view to the Eiffel Tower',
197
+ # 4,
198
+ # 45,
199
+ # 7,
200
+ # 1024,
201
  ],
202
  [
203
  'A mecha robot in a favela in expressionist style',
204
+ # 4,
205
+ # 45,
206
+ # 7,
207
+ # 1024,
208
  ],
209
  [
210
  'an insect robot preparing a delicious meal',
211
+ # 4,
212
+ # 45,
213
+ # 7,
214
+ # 1024,
215
  ],
216
  [
217
  "A small cabin on top of a snowy mountain in the style of Disney, artstation",
218
+ # 4,
219
+ # 45,
220
+ # 7,
221
+ # 1024,
222
  ],
223
  ]
224
 
 
226
  with block:
227
  gr.HTML(
228
  """
229
+ <div style="text-align: center; max-width: 650px; margin: 0 auto;">
230
  <div
231
  style="
232
  display: inline-flex;
 
268
  <rect x="23" y="115" width="23" height="23" fill="#AEAEAE"></rect>
269
  <rect x="23" y="69" width="23" height="23" fill="black"></rect>
270
  </svg>
271
+ <h1 style="font-weight: 900; margin-bottom: 7px;">
272
+ Stable Diffusion Demo
273
  </h1>
274
  </div>
275
+ <p style="margin-bottom: 10px; font-size: 94%">
276
+ Stable Diffusion is a state of the art text-to-image model that generates
277
+ images from text.<br>For faster generation and API
278
  access you can try
279
  <a
280
  href="http://beta.dreamstudio.ai/"
281
  style="text-decoration: underline;"
282
  target="_blank"
283
  >DreamStudio Beta</a
284
+ >
285
  </p>
286
  </div>
287
  """
 
289
  with gr.Group():
290
  with gr.Box():
291
  with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
292
+ text = gr.Textbox(
293
+ label="Enter your prompt",
294
+ show_label=False,
295
+ max_lines=1,
296
+ placeholder="Enter your prompt",
297
+ elem_id="prompt-text-input",
298
+ ).style(
299
+ border=(True, False, True, True),
300
+ rounded=(True, False, False, True),
301
+ container=False,
302
+ )
 
 
 
 
 
 
 
 
 
 
 
 
303
  btn = gr.Button("Generate image").style(
304
  margin=False,
305
  rounded=(False, True, True, False),
 
311
  ).style(grid=[2], height="auto")
312
 
313
  with gr.Group(elem_id="container-advanced-btns"):
314
+ advanced_button = gr.Button("Advanced options", elem_id="advanced-btn")
315
  with gr.Group(elem_id="share-btn-container"):
316
  community_icon = gr.HTML(community_icon_html)
317
  loading_icon = gr.HTML(loading_icon_html)
318
  share_button = gr.Button("Share to community", elem_id="share-btn")
319
 
320
+ with gr.Row(elem_id="advanced-options"):
321
+ gr.Markdown("Advanced settings are temporarily unavailable")
322
+ samples = gr.Slider(label="Images", minimum=1, maximum=4, value=4, step=1)
323
+ steps = gr.Slider(label="Steps", minimum=1, maximum=50, value=45, step=1)
324
+ scale = gr.Slider(
325
+ label="Guidance Scale", minimum=0, maximum=50, value=7.5, step=0.1
326
+ )
327
+ seed = gr.Slider(
328
+ label="Seed",
329
+ minimum=0,
330
+ maximum=2147483647,
331
+ step=1,
332
+ randomize=True,
333
+ )
334
 
335
+ ex = gr.Examples(examples=examples, fn=infer, inputs=text, outputs=[gallery, community_icon, loading_icon, share_button], cache_examples=False)
336
  ex.dataset.headers = [""]
337
+
338
+ text.submit(infer, inputs=text, outputs=[gallery], postprocess=False)
339
+ btn.click(infer, inputs=text, outputs=[gallery], postprocess=False)
340
 
341
+ advanced_button.click(
342
+ None,
343
+ [],
344
+ text,
345
+ _js="""
346
+ () => {
347
+ const options = document.querySelector("body > gradio-app").querySelector("#advanced-options");
348
+ options.style.display = ["none", ""].includes(options.style.display) ? "flex" : "none";
349
+ }""",
350
+ )
351
  share_button.click(
352
  None,
353
  [],
 
357
  gr.HTML(
358
  """
359
  <div class="footer">
360
+ <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> - 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
361
  </p>
362
  </div>
363
+ <div class="acknowledgments">
 
 
 
 
364
  <p><h4>LICENSE</h4>
365
+ 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>
366
  <p><h4>Biases and content acknowledgment</h4>
367
  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>
368
  </div>
369
+ """
370
+ )
 
371
 
372
+ block.queue(concurrency_count=40, max_size=20).launch(max_threads=150)
requirements.txt CHANGED
@@ -1 +1,2 @@
1
- python-dotenv
 
 
1
+ python-dotenv
2
+ https://gradio-builds.s3.amazonaws.com/queue-disconnect/v3/gradio-3.4b2-py3-none-any.whl
share_btn.py CHANGED
@@ -22,18 +22,22 @@ share_js = """async () => {
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);
@@ -43,17 +47,21 @@ share_js = """async () => {
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';
 
22
  const url = await response.text();
23
  return url;
24
  }
25
+
26
  const gradioEl = document.querySelector('body > gradio-app');
27
  const imgEls = gradioEl.querySelectorAll('#gallery img');
28
  const promptTxt = gradioEl.querySelector('#prompt-text-input input').value;
29
  const shareBtnEl = gradioEl.querySelector('#share-btn');
30
  const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
31
  const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
32
+
33
  if(!imgEls.length){
34
  return;
35
  };
36
+
37
  shareBtnEl.style.pointerEvents = 'none';
38
  shareIconEl.style.display = 'none';
39
  loadingIconEl.style.removeProperty('display');
40
+
41
  const files = await Promise.all(
42
  [...imgEls].map(async (imgEl) => {
43
  const res = await fetch(imgEl.src);
 
47
  return new File([blob], fileName, { type: 'image/jpeg' });
48
  })
49
  );
50
+
51
  const urls = await Promise.all(files.map((f) => uploadFile(f)));
52
  const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);
53
  const descriptionMd = `<div style='display: flex; flex-wrap: wrap; column-gap: 0.75rem;'>
54
  ${htmlImgs.join(`\n`)}
55
  </div>`;
56
+
57
  const params = new URLSearchParams({
58
  title: promptTxt,
59
  description: descriptionMd,
60
  });
61
+
62
  const paramsStr = params.toString();
63
  window.open(`https://huggingface.co/spaces/stabilityai/stable-diffusion/discussions/new?${paramsStr}`, '_blank');
64
+
65
  shareBtnEl.style.removeProperty('pointer-events');
66
  shareIconEl.style.removeProperty('display');
67
  loadingIconEl.style.display = 'none';
unsafe.png ADDED