Spaces:
Running
Running
| ## 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); | |
| }""" |