community_icon_html = """""" loading_icon_html = """""" share_js = """async () => { async function uploadFile(file){ const UPLOAD_URL = 'https://huggingface.co/uploads'; const response = await fetch(UPLOAD_URL, { method: 'POST', headers: { 'Content-Type': file.type, 'X-Requested-With': 'XMLHttpRequest', }, body: file, /// <- File inherits from Blob }); const url = await response.text(); return url; } async function getInputImageFile(imageEl){ const res = await fetch(imageEl.src); const blob = await res.blob(); const imageId = Date.now(); const fileName = `rich-text-image-${{imageId}}.png`; return new File([blob], fileName, { type: 'image/png'}); } const gradioEl = document.querySelector("gradio-app").shadowRoot || document.querySelector('body > gradio-app'); const text_input = gradioEl.querySelector('#text_input input').value; const negative_prompt = gradioEl.querySelector('#negative_prompt input').value; const seed = gradioEl.querySelector('#seed input').value; const richTextImg = gradioEl.querySelector('#rich-text-image img'); const plainTextImg = gradioEl.querySelector('#plain-text-image img'); const text_input_obj = JSON.parse(text_input); const plain_prompt = text_input_obj.ops.map(e=> e.insert).join(''); const linkSrc = `https://huggingface.co/spaces/songweig/rich-text-to-image?prompt=${encodeURIComponent(text_input)}`; const titleTxt = `RT2I: ${plain_prompt.slice(0, 50)}...`; const shareBtnEl = gradioEl.querySelector('#share-btn'); const shareIconEl = gradioEl.querySelector('#share-btn-share-icon'); const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon'); if(!richTextImg){ return; }; shareBtnEl.style.pointerEvents = 'none'; shareIconEl.style.display = 'none'; loadingIconEl.style.removeProperty('display'); const richImgFile = await getInputImageFile(richTextImg); const plainImgFile = await getInputImageFile(plainTextImg); const richImgURL = await uploadFile(richImgFile); const plainImgURL = await uploadFile(plainImgFile); const descriptionMd = ` ### Plain Prompt ${plain_prompt} 🔗 Shareable Link + Params: [here](${linkSrc}) ### Rich Tech Image ### Plain Text Image `; const params = new URLSearchParams({ title: titleTxt, description: descriptionMd, }); const paramsStr = params.toString(); window.open(`https://huggingface.co/spaces/songweig/rich-text-to-image/discussions/new?${paramsStr}`, '_blank'); shareBtnEl.style.removeProperty('pointer-events'); shareIconEl.style.removeProperty('display'); loadingIconEl.style.display = 'none'; }""" css = """ #share-btn-container { 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; margin-top: 10px; margin-left: auto; flex: unset !important; } #share-btn { 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; } #share-btn * { all: unset !important; } #share-btn-container div:nth-child(-n+2){ width: auto !important; min-height: 0px !important; } #share-btn-container .wrap { display: none !important; } """