diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index fee5c45d..a3605bdc 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -1,3 +1,5 @@ +// allows drag-dropping files into gradio image elements, and also pasting images from clipboard + function isValidImageList( files ) { return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type); } diff --git a/javascript/hints.js b/javascript/hints.js index 3d286654..c5b73da2 100644 --- a/javascript/hints.js +++ b/javascript/hints.js @@ -1,4 +1,4 @@ - +// mouseover tooltips for various UI elements titles = { "Sampling steps": "How many times to improve the generated image iteratively; higher values take longer; very low values can produce bad results", diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index e62d1e6c..6ca2b4a9 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -1,3 +1,4 @@ +// A full size 'lightbox' preview modal shown when left clicking on gallery previews function closeModal() { gradioApp().getElementById("lightboxModal").style.display = "none"; diff --git a/javascript/progressbar.js b/javascript/progressbar.js index a627b724..1fcd544c 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -1,7 +1,9 @@ +// code related to showing and updating progressbar shown as the image is being made + global_progressbar = null onUiUpdate(function(){ - progressbar = root.getElementById('progressbar') + progressbar = gradioApp().getElementById('progressbar') if(progressbar!= null && progressbar != global_progressbar){ global_progressbar = progressbar @@ -27,3 +29,10 @@ onUiUpdate(function(){ mutationObserver.observe( progressbar, { childList:true, subtree:true }) } }) + +function requestProgress(){ + btn = gradioApp().getElementById("check_progress"); + if(btn==null) return; + + btn.click(); +} diff --git a/javascript/ui.js b/javascript/ui.js index 5d864cf3..e649dc6e 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -1,24 +1,4 @@ -function gradioApp(){ - return document.getElementsByTagName('gradio-app')[0].shadowRoot; -} - -uiUpdateCallbacks = [] -function onUiUpdate(callback){ - uiUpdateCallbacks.push(callback) -} - -function uiUpdate(root){ - uiUpdateCallbacks.forEach(function(x){ - x() - }) -} - -document.addEventListener("DOMContentLoaded", function() { - var mutationObserver = new MutationObserver(function(m){ - uiUpdate(gradioApp()); - }); - mutationObserver.observe( gradioApp(), { childList:true, subtree:true }) -}); +// various functions for interation with ui.py not large enough to warrant putting them in separate files function selected_gallery_index(){ var gr = gradioApp() @@ -55,14 +35,8 @@ function extract_image_from_gallery_extras(gallery){ return extract_image_from_gallery(gallery); } -function requestProgress(){ - btn = gradioApp().getElementById("check_progress"); - if(btn==null) return; - - btn.click(); -} - function submit(){ + // this calls a function from progressbar.js window.setTimeout(requestProgress, 500) res = [] diff --git a/script.js b/script.js index 5d864cf3..1a258cd9 100644 --- a/script.js +++ b/script.js @@ -19,69 +19,3 @@ document.addEventListener("DOMContentLoaded", function() { }); mutationObserver.observe( gradioApp(), { childList:true, subtree:true }) }); - -function selected_gallery_index(){ - var gr = gradioApp() - var buttons = gradioApp().querySelectorAll(".gallery-item") - var button = gr.querySelector(".gallery-item.\\!ring-2") - - var result = -1 - buttons.forEach(function(v, i){ if(v==button) { result = i } }) - - return result -} - -function extract_image_from_gallery(gallery){ - if(gallery.length == 1){ - return gallery[0] - } - - index = selected_gallery_index() - - if (index < 0 || index >= gallery.length){ - return [null] - } - - return gallery[index]; -} - -function extract_image_from_gallery_img2img(gallery){ - gradioApp().querySelectorAll('button')[1].click(); - return extract_image_from_gallery(gallery); -} - -function extract_image_from_gallery_extras(gallery){ - gradioApp().querySelectorAll('button')[2].click(); - return extract_image_from_gallery(gallery); -} - -function requestProgress(){ - btn = gradioApp().getElementById("check_progress"); - if(btn==null) return; - - btn.click(); -} - -function submit(){ - window.setTimeout(requestProgress, 500) - - res = [] - for(var i=0;i