community_icon_html = """""" loading_icon_html = """""" share_js = r"""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, }); const url = await response.text(); return url; } function getButtonText(componentId) { const buttonEl = gradioEl.querySelector(`${componentId} button`); return buttonEl ? buttonEl.textContent : ''; } const gradioEl = document.querySelector('body > gradio-app'); const imgEls = [gradioEl.querySelector('#input_image img'), gradioEl.querySelector('#output_image img')]; const concepts = [ { value: getButtonText('#box1'), parent: gradioEl.querySelector('#box1 span[data-testid="block-info"]') }, { value: getButtonText('#box2'), parent: gradioEl.querySelector('#box2 span[data-testid="block-info"]') }, { value: getButtonText('#box3'), parent: gradioEl.querySelector('#box3 span[data-testid="block-info"]') } ]; const promptTxt = gradioEl.querySelector('#target_prompt input').value; const shareBtnEl = gradioEl.querySelector('#share-btn'); const shareIconEl = gradioEl.querySelector('#share-btn-share-icon'); const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon'); if(!imgEls[1]){ return; }; shareBtnEl.style.pointerEvents = 'none'; shareIconEl.style.display = 'none'; loadingIconEl.style.removeProperty('display'); async function processImage(imgEl, imgId) { const res = await fetch(imgEl.src); const blob = await res.blob(); const fileType = blob.type.includes('png') ? 'png' : 'jpg'; const fileName = `diffuse-the-rest-${imgId}.${fileType}`; return new File([blob], fileName, { type: blob.type }); } const files = await Promise.all(imgEls.map((imgEl, index) => processImage(imgEl, Date.now() + index % 200))); const urls = await Promise.all(files.map((file) => uploadFile(file))); const labels = ['Source image', 'Target image']; const htmlImgs = urls.map((url, index) => `
${labels[index]}:
`); let descriptionMd = `
${htmlImgs.join(`\n`)}
`; if (promptTxt) { descriptionMd += `Target image prompt: ${promptTxt}
`; } else { descriptionMd += `Target image prompt: ""
`; } const conceptHeaders = []; const conceptDescriptions = []; const conceptTableRows = []; concepts.forEach((concept, index) => { if (concept.value) { const label = concept.parent.textContent.includes('Negative') ? `remove concept` : `add concept`; conceptHeaders.push(`${label}`); conceptDescriptions.push(`${label}: ${concept.value}`); conceptTableRows.push(`${concept.value}`); } }); let title = 'Editing'; if (promptTxt) { title += ` "${promptTxt}"`; } if (conceptDescriptions.length > 0) { title += ` to ${conceptDescriptions.join(', ')}`; descriptionMd += ` ${conceptHeaders.join('\n')} ${conceptTableRows.join('\n')}
`; } const params = new URLSearchParams({ title: title, description: descriptionMd, preview: true, }); const paramsStr = params.toString(); window.open(`https://huggingface.co/spaces/editing-images/ledits/discussions/new?${paramsStr}`, '_blank'); shareBtnEl.style.removeProperty('pointer-events'); shareIconEl.style.removeProperty('display'); loadingIconEl.style.display = 'none'; }"""