enable examples via richtext

#5
by radames - opened
Files changed (2) hide show
  1. app.py +10 -1
  2. rich-text-to-json-iframe.html +5 -1
app.py CHANGED
@@ -35,6 +35,14 @@ async (text_input, negative_prompt, height, width, seed, steps, guidance_weight,
35
  return [text_input, negative_prompt, height, width, seed, steps, guidance_weight, color_guidance_weight, JSON.stringify(data)];
36
  }
37
  """
 
 
 
 
 
 
 
 
38
 
39
  def main():
40
  device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
@@ -57,7 +65,7 @@ def main():
57
  width = int(width)
58
  steps = 41 if not steps else steps
59
  guidance_weight = 8.5 if not guidance_weight else guidance_weight
60
- text_input = text_input if text_input != '' else rich_text_input
61
  print('text_input', text_input)
62
  # parse json to span attributes
63
  base_text_prompt, style_text_prompts, footnote_text_prompts, footnote_target_tokens,\
@@ -383,6 +391,7 @@ def main():
383
  outputs=[plaintext_result, richtext_result, token_map],
384
  _js=get_js_data
385
  )
 
386
  demo.queue(concurrency_count=1)
387
  demo.launch(share=False)
388
 
 
35
  return [text_input, negative_prompt, height, width, seed, steps, guidance_weight, color_guidance_weight, JSON.stringify(data)];
36
  }
37
  """
38
+ set_js_data = """
39
+ async (text_input) => {
40
+ const richEl = document.getElementById("rich-text-root");
41
+ const data = text_input ? JSON.parse(text_input) : null;
42
+ if (richEl && data) richEl.contentDocument.body.setQuillContents(data);
43
+ }
44
+ """
45
+
46
 
47
  def main():
48
  device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
 
65
  width = int(width)
66
  steps = 41 if not steps else steps
67
  guidance_weight = 8.5 if not guidance_weight else guidance_weight
68
+ text_input = rich_text_input if rich_text_input != '' else text_input
69
  print('text_input', text_input)
70
  # parse json to span attributes
71
  base_text_prompt, style_text_prompts, footnote_text_prompts, footnote_target_tokens,\
 
391
  outputs=[plaintext_result, richtext_result, token_map],
392
  _js=get_js_data
393
  )
394
+ text_input.change(fn=None, inputs=[text_input], outputs=None, _js=set_js_data, queue=False)
395
  demo.queue(concurrency_count=1)
396
  demo.launch(share=False)
397
 
rich-text-to-json-iframe.html CHANGED
@@ -245,7 +245,7 @@
245
  return url;
246
  }
247
  const SizeStyle = Quill.import('attributors/style/size');
248
- SizeStyle.whitelist = ['10px', '18px', '32px', '50px', '64px'];
249
  Quill.register(SizeStyle, true);
250
  Quill.register(Link, true);
251
  Quill.register(Font, true);
@@ -264,6 +264,10 @@
264
  // keep qull data inside _data to communicate with Gradio
265
  document.body._data = quill.getContents()
266
  })
 
 
 
 
267
  </script>
268
  </body>
269
 
 
245
  return url;
246
  }
247
  const SizeStyle = Quill.import('attributors/style/size');
248
+ SizeStyle.whitelist = ['10px', '18px', '20px', '32px', '50px', '60px', '64px', '70px'];
249
  Quill.register(SizeStyle, true);
250
  Quill.register(Link, true);
251
  Quill.register(Font, true);
 
264
  // keep qull data inside _data to communicate with Gradio
265
  document.body._data = quill.getContents()
266
  })
267
+ function setQuillContents(content) {
268
+ quill.setContents(content);
269
+ }
270
+ document.body.setQuillContents = setQuillContents
271
  </script>
272
  </body>
273