bloom_demo / screenshot.py
clefourrier's picture
clefourrier HF staff
Update origin of screenshot background
357d87d
raw
history blame
2.87 kB
## 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);
}"""