## HTML and JS code to give Gradio HTML
before_prompt = """
  <div id = "img_placeholder">
  </div>
  <div class="relative" id="capture" align="justify" style="display:none;">
    <div class="absolute font-semibold" style="left:7%; right:7%; bottom:32%; top:7%; font-size: 8rem; line-height: 1; padding: 1rem; font-family:-apple-system, BlinkMacSystemFont, 'Arial', sans-serif;" id="text_box">
      <p class="text" style="color:white; white-space:pre-wrap;" dir="auto" id = "prompt">"""
prompt_to_generation = """</p>
        <p class="text" style="color:#FE57A0; white-space:pre-wrap;" dir="auto" id="generation">"""
after_generation = """</p>
    </div>
    <img src="https://huggingface.co/spaces/huggingface/bloom_demo/raw/main/bg.jpg" class="w-full" />
  </div>
"""

js_save = """() => {
      /*might need to add .root to launch locally */
      var gradioapp = document.body.getElementsByTagName('gradio-app')[0]; 
      
      /* Save image */
      capture = gradioapp.querySelector('#capture')
      img_placeholder = gradioapp.querySelector('#img_placeholder')
      html2canvas(capture, {
            useCORS: true,
            onclone: function (clonedDoc) {
                  clonedDoc.querySelector('#capture').style.display = 'block';
                  
                  /*Fits text to box*/
                  var text_box = clonedDoc.querySelector('#text_box');
                  var prompt = clonedDoc.querySelector('#prompt');
                  var generation = clonedDoc.querySelector('#generation');
                  console.log(text_box, generation, prompt)
                  cur_font_size = getComputedStyle(text_box).getPropertyValue("font-size")
                  while( (text_box.clientHeight < text_box.scrollHeight || text_box.clientWidth < text_box.scrollWidth) &  parseInt(cur_font_size) > 10) {
                    console.log(cur_font_size, text_box.clientHeight, text_box.scrollHeight, text_box.clientWidth, text_box.scrollWidth)
                    cur_font_size = 0.98 * parseInt(cur_font_size) + "px"
                    cur_line_height = 1.1 * parseInt(cur_font_size) + "px"
                    text_box.style.fontSize = cur_font_size
                    prompt.style.fontSize = cur_font_size
                    generation.style.fontSize = cur_font_size
                    text_box.style.lineHeight = cur_line_height
                    prompt.style.lineHeight = cur_line_height
                    generation.style.lineHeight = cur_line_height
                  }
            }
        }).then((canvas)=>{
          img_placeholder.prepend(canvas);
        })
}"""


js_load_script="""() => {
                  var script = document.createElement('script');
                  script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
                  document.head.appendChild(script);
}"""