init3

javascript/ui.js

@@ -0,0 +1,387 @@
+// various functions for interaction with ui.py not large enough to warrant putting them in separate files
+
+function set_theme(theme) {
+    var gradioURL = window.location.href;
+    if (!gradioURL.includes('?__theme=')) {
+        window.location.replace(gradioURL + '?__theme=' + theme);
+    }
+}
+
+function all_gallery_buttons() {
+    var allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
+    var visibleGalleryButtons = [];
+    allGalleryButtons.forEach(function(elem) {
+        if (elem.parentElement.offsetParent) {
+            visibleGalleryButtons.push(elem);
+        }
+    });
+    return visibleGalleryButtons;
+}
+
+function selected_gallery_button() {
+    var allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected');
+    var visibleCurrentButton = null;
+    allCurrentButtons.forEach(function(elem) {
+        if (elem.parentElement.offsetParent) {
+            visibleCurrentButton = elem;
+        }
+    });
+    return visibleCurrentButton;
+}
+
+function selected_gallery_index() {
+    var buttons = all_gallery_buttons();
+    var button = selected_gallery_button();
+
+    var result = -1;
+    buttons.forEach(function(v, i) {
+        if (v == button) {
+            result = i;
+        }
+    });
+
+    return result;
+}
+
+function extract_image_from_gallery(gallery) {
+    if (gallery.length == 0) {
+        return [null];
+    }
+    if (gallery.length == 1) {
+        return [gallery[0]];
+    }
+
+    var index = selected_gallery_index();
+
+    if (index < 0 || index >= gallery.length) {
+        // Use the first image in the gallery as the default
+        index = 0;
+    }
+
+    return [gallery[index]];
+}
+
+window.args_to_array = Array.from; // Compatibility with e.g. extensions that may expect this to be around
+
+function switch_to_txt2img() {
+    gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
+
+    return Array.from(arguments);
+}
+
+function switch_to_img2img_tab(no) {
+    gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
+    gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
+}
+function switch_to_img2img() {
+    switch_to_img2img_tab(0);
+    return Array.from(arguments);
+}
+
+function switch_to_sketch() {
+    switch_to_img2img_tab(1);
+    return Array.from(arguments);
+}
+
+function switch_to_inpaint() {
+    switch_to_img2img_tab(2);
+    return Array.from(arguments);
+}
+
+function switch_to_inpaint_sketch() {
+    switch_to_img2img_tab(3);
+    return Array.from(arguments);
+}
+
+function switch_to_extras() {
+    gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
+
+    return Array.from(arguments);
+}
+
+function get_tab_index(tabId) {
+    let buttons = gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button');
+    for (let i = 0; i < buttons.length; i++) {
+        if (buttons[i].classList.contains('selected')) {
+            return i;
+        }
+    }
+    return 0;
+}
+
+function create_tab_index_args(tabId, args) {
+    var res = Array.from(args);
+    res[0] = get_tab_index(tabId);
+    return res;
+}
+
+function get_img2img_tab_index() {
+    let res = Array.from(arguments);
+    res.splice(-2);
+    res[0] = get_tab_index('mode_img2img');
+    return res;
+}
+
+function create_submit_args(args) {
+    var res = Array.from(args);
+
+    // As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image.
+    // This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate.
+    // I don't know why gradio is sending outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some.
+    // If gradio at some point stops sending outputs, this may break something
+    if (Array.isArray(res[res.length - 3])) {
+        res[res.length - 3] = null;
+    }
+
+    return res;
+}
+
+function showSubmitButtons(tabname, show) {
+    gradioApp().getElementById(tabname + '_interrupt').style.display = show ? "none" : "block";
+    gradioApp().getElementById(tabname + '_skip').style.display = show ? "none" : "block";
+}
+
+function showRestoreProgressButton(tabname, show) {
+    var button = gradioApp().getElementById(tabname + "_restore_progress");
+    if (!button) return;
+
+    button.style.display = show ? "flex" : "none";
+}
+
+function submit() {
+    showSubmitButtons('txt2img', false);
+
+    var id = randomId();
+    localStorage.setItem("txt2img_task_id", id);
+
+    requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
+        showSubmitButtons('txt2img', true);
+        localStorage.removeItem("txt2img_task_id");
+        showRestoreProgressButton('txt2img', false);
+    });
+
+    var res = create_submit_args(arguments);
+
+    res[0] = id;
+
+    return res;
+}
+
+function submit_img2img() {
+    showSubmitButtons('img2img', false);
+
+    var id = randomId();
+    localStorage.setItem("img2img_task_id", id);
+
+    requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
+        showSubmitButtons('img2img', true);
+        localStorage.removeItem("img2img_task_id");
+        showRestoreProgressButton('img2img', false);
+    });
+
+    var res = create_submit_args(arguments);
+
+    res[0] = id;
+    res[1] = get_tab_index('mode_img2img');
+
+    return res;
+}
+
+function restoreProgressTxt2img() {
+    showRestoreProgressButton("txt2img", false);
+    var id = localStorage.getItem("txt2img_task_id");
+
+    id = localStorage.getItem("txt2img_task_id");
+
+    if (id) {
+        requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
+            showSubmitButtons('txt2img', true);
+        }, null, 0);
+    }
+
+    return id;
+}
+
+function restoreProgressImg2img() {
+    showRestoreProgressButton("img2img", false);
+
+    var id = localStorage.getItem("img2img_task_id");
+
+    if (id) {
+        requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
+            showSubmitButtons('img2img', true);
+        }, null, 0);
+    }
+
+    return id;
+}
+
+
+onUiLoaded(function() {
+    showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id"));
+    showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id"));
+});
+
+
+function modelmerger() {
+    var id = randomId();
+    requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function() {});
+
+    var res = create_submit_args(arguments);
+    res[0] = id;
+    return res;
+}
+
+
+function ask_for_style_name(_, prompt_text, negative_prompt_text) {
+    var name_ = prompt('Style name:');
+    return [name_, prompt_text, negative_prompt_text];
+}
+
+function confirm_clear_prompt(prompt, negative_prompt) {
+    if (confirm("Delete prompt?")) {
+        prompt = "";
+        negative_prompt = "";
+    }
+
+    return [prompt, negative_prompt];
+}
+
+
+var opts = {};
+onAfterUiUpdate(function() {
+    if (Object.keys(opts).length != 0) return;
+
+    var json_elem = gradioApp().getElementById('settings_json');
+    if (json_elem == null) return;
+
+    var textarea = json_elem.querySelector('textarea');
+    var jsdata = textarea.value;
+    opts = JSON.parse(jsdata);
+
+    executeCallbacks(optionsChangedCallbacks); /*global optionsChangedCallbacks*/
+
+    Object.defineProperty(textarea, 'value', {
+        set: function(newValue) {
+            var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
+            var oldValue = valueProp.get.call(textarea);
+            valueProp.set.call(textarea, newValue);
+
+            if (oldValue != newValue) {
+                opts = JSON.parse(textarea.value);
+            }
+
+            executeCallbacks(optionsChangedCallbacks);
+        },
+        get: function() {
+            var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
+            return valueProp.get.call(textarea);
+        }
+    });
+
+    json_elem.parentElement.style.display = "none";
+
+    setupTokenCounters();
+
+    var show_all_pages = gradioApp().getElementById('settings_show_all_pages');
+    var settings_tabs = gradioApp().querySelector('#settings div');
+    if (show_all_pages && settings_tabs) {
+        settings_tabs.appendChild(show_all_pages);
+        show_all_pages.onclick = function() {
+            gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
+                if (elem.id == "settings_tab_licenses") {
+                    return;
+                }
+
+                elem.style.display = "block";
+            });
+        };
+    }
+});
+
+onOptionsChanged(function() {
+    var elem = gradioApp().getElementById('sd_checkpoint_hash');
+    var sd_checkpoint_hash = opts.sd_checkpoint_hash || "";
+    var shorthash = sd_checkpoint_hash.substring(0, 10);
+
+    if (elem && elem.textContent != shorthash) {
+        elem.textContent = shorthash;
+        elem.title = sd_checkpoint_hash;
+        elem.href = "https://google.com/search?q=" + sd_checkpoint_hash;
+    }
+});
+
+let txt2img_textarea, img2img_textarea = undefined;
+
+function restart_reload() {
+    document.body.innerHTML = '<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
+
+    var requestPing = function() {
+        requestGet("./internal/ping", {}, function(data) {
+            location.reload();
+        }, function() {
+            setTimeout(requestPing, 500);
+        });
+    };
+
+    setTimeout(requestPing, 2000);
+
+    return [];
+}
+
+// Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits
+// will only visible on web page and not sent to python.
+function updateInput(target) {
+    let e = new Event("input", {bubbles: true});
+    Object.defineProperty(e, "target", {value: target});
+    target.dispatchEvent(e);
+}
+
+
+var desiredCheckpointName = null;
+function selectCheckpoint(name) {
+    desiredCheckpointName = name;
+    gradioApp().getElementById('change_checkpoint').click();
+}
+
+function currentImg2imgSourceResolution(w, h, scaleBy) {
+    var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img');
+    return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy];
+}
+
+function updateImg2imgResizeToTextAfterChangingImage() {
+    // At the time this is called from gradio, the image has no yet been replaced.
+    // There may be a better solution, but this is simple and straightforward so I'm going with it.
+
+    setTimeout(function() {
+        gradioApp().getElementById('img2img_update_resize_to').click();
+    }, 500);
+
+    return [];
+
+}
+
+
+
+function setRandomSeed(elem_id) {
+    var input = gradioApp().querySelector("#" + elem_id + " input");
+    if (!input) return [];
+
+    input.value = "-1";
+    updateInput(input);
+    return [];
+}
+
+function switchWidthHeight(tabname) {
+    var width = gradioApp().querySelector("#" + tabname + "_width input[type=number]");
+    var height = gradioApp().querySelector("#" + tabname + "_height input[type=number]");
+    if (!width || !height) return [];
+
+    var tmp = width.value;
+    width.value = height.value;
+    height.value = tmp;
+
+    updateInput(width);
+    updateInput(height);
+    return [];
+}

modules/ui_components.py

@@ -0,0 +1,74 @@
+import gradio as gr
+
+
+class FormComponent:
+    def get_expected_parent(self):
+        return gr.components.Form
+
+
+gr.Dropdown.get_expected_parent = FormComponent.get_expected_parent
+
+
+class ToolButton(FormComponent, gr.Button):
+    """Small button with single emoji as text, fits inside gradio forms"""
+
+    def __init__(self, *args, **kwargs):
+        classes = kwargs.pop("elem_classes", [])
+        super().__init__(*args, elem_classes=["tool", *classes], **kwargs)
+
+    def get_block_name(self):
+        return "button"
+
+
+class FormRow(FormComponent, gr.Row):
+    """Same as gr.Row but fits inside gradio forms"""
+
+    def get_block_name(self):
+        return "row"
+
+
+class FormColumn(FormComponent, gr.Column):
+    """Same as gr.Column but fits inside gradio forms"""
+
+    def get_block_name(self):
+        return "column"
+
+
+class FormGroup(FormComponent, gr.Group):
+    """Same as gr.Row but fits inside gradio forms"""
+
+    def get_block_name(self):
+        return "group"
+
+
+class FormHTML(FormComponent, gr.HTML):
+    """Same as gr.HTML but fits inside gradio forms"""
+
+    def get_block_name(self):
+        return "html"
+
+
+class FormColorPicker(FormComponent, gr.ColorPicker):
+    """Same as gr.ColorPicker but fits inside gradio forms"""
+
+    def get_block_name(self):
+        return "colorpicker"
+
+
+class DropdownMulti(FormComponent, gr.Dropdown):
+    """Same as gr.Dropdown but always multiselect"""
+    def __init__(self, **kwargs):
+        super().__init__(multiselect=True, **kwargs)
+
+    def get_block_name(self):
+        return "dropdown"
+
+
+class DropdownEditable(FormComponent, gr.Dropdown):
+    """Same as gr.Dropdown but allows editing value"""
+    def __init__(self, **kwargs):
+        super().__init__(allow_custom_value=True, **kwargs)
+
+    def get_block_name(self):
+        return "dropdown"
+