| import os |
| import gradio as gr |
|
|
| head=""" |
| <!-- Google Analytics START --> |
| <!-- Google tag (gtag.js) --> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-KJJSKYGN1Q"></script> |
| <script> |
| window.dataLayer = window.dataLayer || []; |
| function gtag(){dataLayer.push(arguments);} |
| gtag('js', new Date()); |
| |
| gtag('config', 'G-KJJSKYGN1Q'); |
| </script> |
| <!-- Google Analytics END --> |
| """ |
| css=""" |
| div#component-49,div#component-97,div#component-110,div#component-130 { |
| overflow-x: hidden !important; |
| } |
| """ |
| js=""" |
| function start() { |
| """ |
| |
| |
| js +=""" |
| //console.log('🚀 Simple filename capture initialized'); |
| |
| function updateTextbox(textboxId, filename) { |
| const container = document?.querySelector(`#${textboxId}`); |
| if ( container ) { |
| const textbox = container?.querySelector('input, textarea'); |
| if (textbox) { |
| textbox.value = filename; |
| textbox.dispatchEvent(new Event('input', { bubbles: true })); |
| //console.log(`Updated ${textboxId}: ${filename}`); |
| } |
| } |
| } |
| |
| function getTextboxForElement(element) { |
| // Simple mapping based on common parent sections |
| let parent = element; |
| while (parent && parent.tagName !== 'BODY') { |
| |
| // Check for textboxes in the same section |
| if (parent.querySelector('#t2i_cii_hidden_filename_viajs_tbox')) return 't2i_cii_hidden_filename_viajs_tbox'; |
| if (parent.querySelector('#i2i_hidden_filename_viajs_tbox')) return 'i2i_hidden_filename_viajs_tbox'; |
| if (parent.querySelector('#i2i_cii_hidden_filename_viajs_tbox')) return 'i2i_cii_hidden_filename_viajs_tbox'; |
| if (parent.querySelector('#editimg_input_image1_hidden_filename_viajs_tbox')) return 'editimg_input_image1_hidden_filename_viajs_tbox'; |
| if (parent.querySelector('#editimg_input_image2_hidden_filename_viajs_tbox')) return 'editimg_input_image2_hidden_filename_viajs_tbox'; |
| if (parent.querySelector('#editimg_input_image3_hidden_filename_viajs_tbox')) return 'editimg_input_image3_hidden_filename_viajs_tbox'; |
| if (parent.querySelector('#editimg_input_image4_hidden_filename_viajs_tbox')) return 'editimg_input_image4_hidden_filename_viajs_tbox'; |
| if (parent.querySelector('#upscale_hidden_filename_viajs_tbox')) return 'upscale_hidden_filename_viajs_tbox'; |
| if (parent.querySelector('#rmbg_hidden_filename_viajs_tbox')) return 'rmbg_hidden_filename_viajs_tbox'; |
| parent = parent?.parentElement; |
| } |
| return null; |
| } |
| |
| // Handle file selection |
| document.addEventListener('change', e => { |
| if (e?.target && e.target?.files && e.target.files?.[0] && e.target.files[0]?.type && e.target.files[0].type !=="" && e.target?.type && e.target.type === "file") { |
| if ( !e.target.files[0].type.startsWith('image/') ) |
| { |
| console.log("Selected file is not an image!"); |
| } |
| else |
| { |
| const file = e.target.files[0]; |
| const filesize = file.size.toLocaleString('en-US').replace(/,/g, ' '); |
| const textboxId = getTextboxForElement(e.target); |
| |
| // Create FileReader to read the image |
| const reader = new FileReader(); |
| |
| reader.onload = function(event) { |
| const img = new Image(); |
| |
| img.onload = function() { |
| // Include dimensions in the filename string |
| const filename = `${file.name}, ${filesize} bytes, ${img.width}x${img.height} px`; |
| |
| if (textboxId) { |
| updateTextbox(textboxId, filename); |
| } |
| }; |
| |
| img.src = event.target.result; |
| }; |
| |
| reader.readAsDataURL(file); |
| } |
| } |
| }, true); |
| |
| // Handle drag & drop |
| document.addEventListener('drop', e => { |
| if (e?.dataTransfer && e.dataTransfer?.files && e.dataTransfer.files?.[0] && e.dataTransfer.files[0]?.type && e.dataTransfer.files[0].type !== "" && e.dataTransfer?.types && e.dataTransfer.types?.[0] && e.dataTransfer.types[0] === "Files") { |
| if ( !e.dataTransfer.files[0].type.startsWith('image/') ) |
| { |
| console.log("Dragged file is not an image!"); |
| } |
| else |
| { |
| const file = e.dataTransfer.files[0]; |
| const filesize = file.size.toLocaleString('en-US').replace(/,/g, ' '); |
| const textboxId = getTextboxForElement(e.target); |
| |
| // Create FileReader to read the image |
| const reader = new FileReader(); |
| |
| reader.onload = function(event) { |
| const img = new Image(); |
| |
| img.onload = function() { |
| // Include dimensions in the filename string |
| const filename = `${file.name}, ${filesize} bytes, ${img.width}x${img.height} px`; |
| |
| if (textboxId) { |
| updateTextbox(textboxId, filename); |
| } |
| }; |
| |
| img.src = event.target.result; |
| }; |
| |
| reader.readAsDataURL(file); |
| } |
| } |
| }, true); |
| |
| // Handle remove buttons |
| document.addEventListener('click', e => { |
| """ |
| |
| |
| js +=""" |
| let button = null; |
| let clicked = e?.target; |
| while (clicked && clicked !== document.body ) { |
| if ( clicked?.getAttribute('aria-label') && clicked.getAttribute('aria-label')?.includes('Remove Image')) { |
| button = clicked; |
| break; |
| } |
| clicked = clicked?.parentNode; |
| } |
| """ |
| |
| |
| js +=""" |
| let containerImage = null; |
| const constantPrefix = "prefix__"; |
| while (button && button !== document.body ) { |
| if ( button?.getAttribute('id') && button.getAttribute('id')?.includes(constantPrefix)) { |
| containerImage = button; |
| break; |
| } |
| button = button?.parentNode; |
| } |
| //3. |
| if ( containerImage && containerImage?.id ) { |
| |
| const containerImageId = containerImage.id; |
| if ( containerImageId && containerImageId.length > constantPrefix.length ) { |
| |
| const containerTextareaId1 = containerImageId.substring(constantPrefix.length); |
| if ( containerTextareaId1 && containerTextareaId1.length > constantPrefix.length ) { |
| |
| const containerTextareaId2 = document?.getElementById(containerTextareaId1); |
| if ( containerTextareaId2 ) { |
| |
| //In this div container exist the 1st and only textarea to put/erase the filename |
| const textareas = containerTextareaId2?.getElementsByTagName("textarea"); |
| if ( textareas && textareas?.[0] ) { |
| textareas[0].value = ""; |
| updateTextbox(containerTextareaId1, ""); |
| } |
| } |
| } |
| } |
| } |
| |
| //IV. |
| //1/2. |
| const btn = e.target.closest('button[aria-label="Download"]'); |
| if (btn) |
| { |
| //btn.click(); |
| e.preventDefault(); |
| e.stopPropagation(); |
| OverrideEmbeddedDownloadButtonInImageOrGalleryGradioControl(); |
| } |
| }, true); |
| |
| //console.log('✅ Simple filename capture system ready'); |
| """ |
| |
| |
| |
| |
| js +=""" |
| } |
| start(); |
| """ |
| |
| |
| |
| js +=""" |
| function OverrideEmbeddedDownloadButtonInImageOrGalleryGradioControl() { |
| let img = null; |
| const images = document.querySelectorAll("div.gallery-container span.preview button.media-button img, div.image-container button div.image-frame img"); //in gr.Gallery() and in gr.Image() |
| for (const currentimage of images) { |
| const style = window.getComputedStyle(currentimage); |
| if ( style.display !== "none" && style.visibility !== "hidden" && currentimage.offsetWidth > 0 && currentimage.offsetHeight > 0 ) |
| { |
| img = currentimage; |
| break; |
| } |
| else |
| continue; |
| } |
| if (!img) { |
| console.log('No img found'); |
| } else { |
| window.open(img.src, "_blank"); |
| } |
| } |
| """ |
|
|
|
|
| read_key = os.environ.get('HF_TOKEN__PRIVATE2PUBLIC', None) |
| app = gr.load(name="angelts/flux-gguf-lora-upscale-rmbg-t2i-i2i-controlnetunionpro2-AngelTs-Gradio2Comfyui", src="spaces", token=read_key, api_name=False) |
| app.queue(api_open=False, max_size=20).launch(share=True,debug=False,footer_links=["gradio", "settings"],head=head,css=css,js=js) |
|
|
