Downgrade Gradio to 4.38.1

ImageEditor color switching is broken on newer versions.
Bump Gradio to 4.42.0
2024-09-08 22:52:10 -06:00 · 2024-09-04 19:46:13 -06:00 · 2024-09-04 15:21:47 -06:00 · 2024-09-04 15:14:44 -06:00 · 2024-09-01 21:38:43 -06:00 · 2024-07-27 15:50:26 +03:00
31 changed files with 686 additions and 489 deletions
@@ -16,6 +16,20 @@ onUiLoaded(async() => {
    // Helper functions
    // Get active tab

+    function debounce(func, wait) {
+        let timeout;
+
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+
    /**
     * Waits for an element to be present in the DOM.
     */
@@ -58,6 +72,30 @@ onUiLoaded(async() => {
        }
    }

+    // // Hack to make the cursor always be the same size
+    function fixCursorSize() {
+        window.scrollBy(0, 1);
+    }
+
+    function copySpecificStyles(sourceElement, targetElement, zoomLevel = 1) {
+        const stylesToCopy = ['top', 'left', 'width', 'height'];
+
+        stylesToCopy.forEach(styleName => {
+            if (sourceElement.style[styleName]) {
+                // Convert style value to number and multiply by zoomLevel.
+                let adjustedStyleValue = parseFloat(sourceElement.style[styleName]) / zoomLevel;
+
+                // Set the adjusted style value back to target element's style.
+                // Important: this will work fine for top and left styles as they are usually in px.
+                // But be careful with other units like em or % that might need different handling.
+                targetElement.style[styleName] = `${adjustedStyleValue}px`;
+            }
+        });
+
+        targetElement.style["opacity"] = sourceElement.style["opacity"];
+    }
+
+
    // Detect whether the element has a horizontal scroll bar
    function hasHorizontalScrollbar(element) {
        return element.scrollWidth > element.clientWidth;
@@ -167,48 +205,6 @@ onUiLoaded(async() => {
        return config;
    }

-    /**
-     * The restoreImgRedMask function displays a red mask around an image to indicate the aspect ratio.
-     * If the image display property is set to 'none', the mask breaks. To fix this, the function
-     * temporarily sets the display property to 'block' and then hides the mask again after 300 milliseconds
-     * to avoid breaking the canvas. Additionally, the function adjusts the mask to work correctly on
-     * very long images.
-     */
-    function restoreImgRedMask(elements) {
-        const mainTabId = getTabId(elements);
-
-        if (!mainTabId) return;
-
-        const mainTab = gradioApp().querySelector(mainTabId);
-        const img = mainTab.querySelector("img");
-        const imageARPreview = gradioApp().querySelector("#imageARPreview");
-
-        if (!img || !imageARPreview) return;
-
-        imageARPreview.style.transform = "";
-        if (parseFloat(mainTab.style.width) > 865) {
-            const transformString = mainTab.style.transform;
-            const scaleMatch = transformString.match(
-                /scale\(([-+]?[0-9]*\.?[0-9]+)\)/
-            );
-            let zoom = 1; // default zoom
-
-            if (scaleMatch && scaleMatch[1]) {
-                zoom = Number(scaleMatch[1]);
-            }
-
-            imageARPreview.style.transformOrigin = "0 0";
-            imageARPreview.style.transform = `scale(${zoom})`;
-        }
-
-        if (img.style.display !== "none") return;
-
-        img.style.display = "block";
-
-        setTimeout(() => {
-            img.style.display = "none";
-        }, 400);
-    }

    const hotkeysConfigOpts = await waitForOpts();

@@ -224,7 +220,6 @@ onUiLoaded(async() => {
        canvas_hotkey_grow_brush: "KeyW",
        canvas_disabled_functions: [],
        canvas_show_tooltip: true,
-        canvas_auto_expand: true,
        canvas_blur_prompt: false,
    };

@@ -264,18 +259,6 @@ onUiLoaded(async() => {
    );
    const elemData = {};

-    // Apply functionality to the range inputs. Restore redmask and correct for long images.
-    const rangeInputs = elements.rangeGroup ?
-        Array.from(elements.rangeGroup.querySelectorAll("input")) :
-        [
-            gradioApp().querySelector("#img2img_width input[type='range']"),
-            gradioApp().querySelector("#img2img_height input[type='range']")
-        ];
-
-    for (const input of rangeInputs) {
-        input?.addEventListener("input", () => restoreImgRedMask(elements));
-    }
-
    function applyZoomAndPan(elemId, isExtension = true) {
        const targetElement = gradioApp().querySelector(elemId);

@@ -289,14 +272,118 @@ onUiLoaded(async() => {
        elemData[elemId] = {
            zoom: 1,
            panX: 0,
-            panY: 0
+            panY: 0,
        };
+
        let fullScreenMode = false;

+
+        // Cursor manipulation script for a painting application.
+        // The purpose of this code is to create custom cursors (for painting and erasing)
+        // that can change depending on which button the user presses.
+        // When the mouse moves over the canvas, the appropriate custom cursor also moves,
+        // replicating its appearance dynamically based on various CSS properties.
+
+        // This is done because the original cursor is tied to the size of the kanvas, it can not be changed, so I came up with a hack that creates an exact copy that works properly
+
+        const eraseButton = targetElement.querySelector(`button[aria-label='Erase button']`);
+        const paintButton = targetElement.querySelector(`button[aria-label='Draw button']`);
+
+        const canvasCursors = targetElement.querySelectorAll("span.svelte-btgkrd");
+        const paintCursorCopy = canvasCursors[0].cloneNode(true);
+        const eraserCursorCopy = canvasCursors[1].cloneNode(true);
+
+        canvasCursors.forEach(cursor => cursor.style.display = "none");
+
+        canvasCursors[0].parentNode.insertBefore(paintCursorCopy, canvasCursors[0].nextSibling);
+        canvasCursors[1].parentNode.insertBefore(eraserCursorCopy, canvasCursors[1].nextSibling);
+
+
+        // targetElement.appendChild(paintCursorCopy);
+        // paintCursorCopy.style.display = "none";
+
+        // targetElement.appendChild(eraserCursorCopy);
+        // eraserCursorCopy.style.display = "none";
+
+        let activeCursor;
+
+        paintButton.addEventListener('click', () => {
+            activateTool(paintButton, eraseButton, paintCursorCopy);
+        });
+
+        eraseButton.addEventListener('click', () => {
+            activateTool(eraseButton, paintButton, eraserCursorCopy);
+        });
+
+        function activateTool(activeButton, inactiveButton, activeCursorCopy) {
+            activeButton.classList.add("active");
+            inactiveButton.classList.remove("active");
+
+            // canvasCursors.forEach(cursor => cursor.style.display = "none");
+
+            if (activeCursor) {
+                activeCursor.style.display = "none";
+            }
+
+            activeCursor = activeCursorCopy;
+            // activeCursor.style.display = "none";
+            activeCursor.style.position = "absolute";
+        }
+
+        const canvasAreaEventsHandler = e => {
+
+            canvasCursors.forEach(cursor => cursor.style.display = "none");
+
+            if (!activeCursor) return;
+
+            const cursorNum = eraseButton.classList.contains("active") ? 1 : 0;
+
+            if (elemData[elemId].zoomLevel != 1) {
+                copySpecificStyles(canvasCursors[cursorNum], activeCursor, elemData[elemId].zoomLevel);
+            } else {
+                // Update the styles of the currently active cursor
+                copySpecificStyles(canvasCursors[cursorNum], activeCursor);
+            }
+
+            let offsetXAdjusted = e.offsetX;
+            let offsetYAdjusted = e.offsetY;
+
+            // Position the cursor based on the current mouse coordinates within target element.
+            activeCursor.style.transform =
+           `translate(${offsetXAdjusted}px, ${offsetYAdjusted}px)`;
+        };
+
+        const canvasAreaLeaveHandler = () => {
+            if (activeCursor) {
+                // activeCursor.style.opacity = 0
+                activeCursor.style.display = "none";
+            }
+        };
+
+        const canvasAreaEnterHandler = () => {
+            if (activeCursor) {
+                // activeCursor.style.opacity = 1
+                activeCursor.style.display = "block";
+            }
+        };
+
+        const canvasArea = targetElement.querySelector("canvas");
+
+        // Attach event listeners to the target element and canvas area
+        targetElement.addEventListener("mousemove", canvasAreaEventsHandler);
+        canvasArea.addEventListener("mouseout", canvasAreaLeaveHandler);
+        canvasArea.addEventListener("mouseenter", canvasAreaEnterHandler);
+
+        // Additional listener for handling zoom or other transformations which might affect visual representation
+        targetElement.addEventListener("wheel", canvasAreaEventsHandler);
+
+        // Remove border, cause bags
+        const canvasBorder = targetElement.querySelector(".border");
+        canvasBorder.style.display = "none";
+
        // Create tooltip
        function createTooltip() {
-            const toolTipElement =
-                targetElement.querySelector(".image-container");
+            const toolTipElement = targetElement.querySelector(".image-container");
            const tooltip = document.createElement("div");
            tooltip.className = "canvas-tooltip";

@@ -359,25 +446,15 @@ onUiLoaded(async() => {

            // Add a hint element to the target element
            toolTipElement.appendChild(tooltip);
+
+            return tooltip;
        }

        //Show tool tip if setting enable
-        if (hotkeysConfig.canvas_show_tooltip) {
-            createTooltip();
-        }
+        const canvasTooltip = createTooltip();

-        // In the course of research, it was found that the tag img is very harmful when zooming and creates white canvases. This hack allows you to almost never think about this problem, it has no effect on webui.
-        function fixCanvas() {
-            const activeTab = getActiveTab(elements)?.textContent.trim();
-
-            if (activeTab && activeTab !== "img2img") {
-                const img = targetElement.querySelector(`${elemId} img`);
-
-                if (img && img.style.display !== "none") {
-                    img.style.display = "none";
-                    img.style.visibility = "hidden";
-                }
-            }
+        if (!hotkeysConfig.canvas_show_tooltip) {
+            canvasTooltip.style.display = "none";
        }

        // Reset the zoom level and pan position of the target element to their initial values
@@ -385,7 +462,7 @@ onUiLoaded(async() => {
            elemData[elemId] = {
                zoomLevel: 1,
                panX: 0,
-                panY: 0
+                panY: 0,
            };

            if (isExtension) {
@@ -394,45 +471,22 @@ onUiLoaded(async() => {

            targetElement.isZoomed = false;

-            fixCanvas();
            targetElement.style.transform = `scale(${elemData[elemId].zoomLevel}) translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px)`;

            const canvas = gradioApp().querySelector(
-                `${elemId} canvas[key="interface"]`
+                `${elemId} canvas`
            );

            toggleOverlap("off");
            fullScreenMode = false;

-            const closeBtn = targetElement.querySelector("button[aria-label='Remove Image']");
+            const closeBtn = targetElement.querySelector("button[aria-label='Clear canvas']");
            if (closeBtn) {
                closeBtn.addEventListener("click", resetZoom);
            }

-            if (canvas && isExtension) {
-                const parentElement = targetElement.closest('[id^="component-"]');
-                if (
-                    canvas &&
-                    parseFloat(canvas.style.width) > parentElement.offsetWidth &&
-                    parseFloat(targetElement.style.width) > parentElement.offsetWidth
-                ) {
-                    fitToElement();
-                    return;
-                }
-
-            }
-
-            if (
-                canvas &&
-                !isExtension &&
-                parseFloat(canvas.style.width) > 865 &&
-                parseFloat(targetElement.style.width) > 865
-            ) {
-                fitToElement();
-                return;
-            }
-
            targetElement.style.width = "";
+            fixCursorSize();
        }

        // Toggle the zIndex of the target element between two values, allowing it to overlap or be overlapped by other elements
@@ -459,10 +513,10 @@ onUiLoaded(async() => {
        ) {
            const input =
                gradioApp().querySelector(
-                    `${elemId} input[aria-label='Brush radius']`
+                    `${elemId} input[type='range']`
                ) ||
                gradioApp().querySelector(
-                    `${elemId} button[aria-label="Use brush"]`
+                    `${elemId} button[aria-label="Size button"]`
                );

            if (input) {
@@ -482,10 +536,15 @@ onUiLoaded(async() => {

        // Reset zoom when uploading a new image
        const fileInput = gradioApp().querySelector(
-            `${elemId} input[type="file"][accept="image/*"].svelte-116rqfv`
+            `${elemId} .upload-container input[type="file"][accept="image/*"]`
        );
+
        fileInput.addEventListener("click", resetZoom);

+        // Create clickble area
+        const inputCanvas = targetElement.querySelector("canvas");
+
+
        // Update the zoom level and pan position of the target element based on the values of the zoomLevel, panX and panY variables
        function updateZoom(newZoomLevel, mouseX, mouseY) {
            newZoomLevel = Math.max(0.1, Math.min(newZoomLevel, 15));
@@ -503,6 +562,9 @@ onUiLoaded(async() => {
                targetElement.style.overflow = "visible";
            }

+            // Hack to make the cursor always be the same size
+            fixCursorSize();
+
            return newZoomLevel;
        }

@@ -538,67 +600,6 @@ onUiLoaded(async() => {
            }
        }

-        /**
-         * This function fits the target element to the screen by calculating
-         * the required scale and offsets. It also updates the global variables
-         * zoomLevel, panX, and panY to reflect the new state.
-         */
-
-        function fitToElement() {
-            //Reset Zoom
-            targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
-
-            let parentElement;
-
-            if (isExtension) {
-                parentElement = targetElement.closest('[id^="component-"]');
-            } else {
-                parentElement = targetElement.parentElement;
-            }
-
-
-            // Get element and screen dimensions
-            const elementWidth = targetElement.offsetWidth;
-            const elementHeight = targetElement.offsetHeight;
-
-            const screenWidth = parentElement.clientWidth;
-            const screenHeight = parentElement.clientHeight;
-
-            // Get element's coordinates relative to the parent element
-            const elementRect = targetElement.getBoundingClientRect();
-            const parentRect = parentElement.getBoundingClientRect();
-            const elementX = elementRect.x - parentRect.x;
-
-            // Calculate scale and offsets
-            const scaleX = screenWidth / elementWidth;
-            const scaleY = screenHeight / elementHeight;
-            const scale = Math.min(scaleX, scaleY);
-
-            const transformOrigin =
-                window.getComputedStyle(targetElement).transformOrigin;
-            const [originX, originY] = transformOrigin.split(" ");
-            const originXValue = parseFloat(originX);
-            const originYValue = parseFloat(originY);
-
-            const offsetX =
-                (screenWidth - elementWidth * scale) / 2 -
-                originXValue * (1 - scale);
-            const offsetY =
-                (screenHeight - elementHeight * scale) / 2.5 -
-                originYValue * (1 - scale);
-
-            // Apply scale and offsets to the element
-            targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
-
-            // Update global variables
-            elemData[elemId].zoomLevel = scale;
-            elemData[elemId].panX = offsetX;
-            elemData[elemId].panY = offsetY;
-
-            fullScreenMode = false;
-            toggleOverlap("off");
-        }
-
        /**
         * This function fits the target element to the screen by calculating
         * the required scale and offsets. It also updates the global variables
@@ -608,9 +609,11 @@ onUiLoaded(async() => {
        // Fullscreen mode
        function fitToScreen() {
            const canvas = gradioApp().querySelector(
-                `${elemId} canvas[key="interface"]`
+                `${elemId} canvas`
            );

+            // print(canvas)
+
            if (!canvas) return;

            if (canvas.offsetWidth > 862 || isExtension) {
@@ -621,6 +624,7 @@ onUiLoaded(async() => {
                targetElement.style.overflow = "visible";
            }

+            fixCursorSize();
            if (fullScreenMode) {
                resetZoom();
                fullScreenMode = false;
@@ -728,7 +732,7 @@ onUiLoaded(async() => {

        targetElement.isExpanded = false;
        function autoExpand() {
-            const canvas = document.querySelector(`${elemId} canvas[key="interface"]`);
+            const canvas = document.querySelector(`${elemId} canvas`);
            if (canvas) {
                if (hasHorizontalScrollbar(targetElement) && targetElement.isExpanded === false) {
                    targetElement.style.visibility = "hidden";
@@ -744,26 +748,6 @@ onUiLoaded(async() => {

        targetElement.addEventListener("mousemove", getMousePosition);

-        //observers
-        // Creating an observer with a callback function to handle DOM changes
-        const observer = new MutationObserver((mutationsList, observer) => {
-            for (let mutation of mutationsList) {
-                // If the style attribute of the canvas has changed, by observation it happens only when the picture changes
-                if (mutation.type === 'attributes' && mutation.attributeName === 'style' &&
-                    mutation.target.tagName.toLowerCase() === 'canvas') {
-                    targetElement.isExpanded = false;
-                    setTimeout(resetZoom, 10);
-                }
-            }
-        });
-
-        // Apply auto expand if enabled
-        if (hotkeysConfig.canvas_auto_expand) {
-            targetElement.addEventListener("mousemove", autoExpand);
-            // Set up an observer to track attribute changes
-            observer.observe(targetElement, {attributes: true, childList: true, subtree: true});
-        }
-
        // Handle events only inside the targetElement
        let isKeyDownHandlerAttached = false;

@@ -790,15 +774,7 @@ onUiLoaded(async() => {
        targetElement.addEventListener("mouseleave", handleMouseLeave);

        // Reset zoom when click on another tab
-        if (elements.img2imgTabs) {
-            elements.img2imgTabs.addEventListener("click", resetZoom);
-            elements.img2imgTabs.addEventListener("click", () => {
-                // targetElement.style.width = "";
-                if (parseInt(targetElement.style.width) > 865) {
-                    setTimeout(fitToElement, 0);
-                }
-            });
-        }
+        elements.img2imgTabs.addEventListener("click", resetZoom);

        targetElement.addEventListener("wheel", e => {
            // change zoom level
@@ -878,6 +854,7 @@ onUiLoaded(async() => {
            elemData[elemId].panY += movementY * panSpeed;

            // Delayed redraw of an element
+            const canvas = targetElement.querySelector("canvas");
            requestAnimationFrame(() => {
                targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${elemData[elemId].zoomLevel})`;
                toggleOverlap("on");
@@ -936,7 +913,6 @@ onUiLoaded(async() => {

        gradioApp().addEventListener("mousemove", handleMoveByKey);

-
    }

    applyZoomAndPan(elementIDs.sketch, false);
@@ -966,9 +942,30 @@ onUiLoaded(async() => {
    };

    window.applyZoomAndPan = applyZoomAndPan; // Only 1 elements, argument elementID, for example applyZoomAndPan("#txt2img_controlnet_ControlNet_input_image")
-
    window.applyZoomAndPanIntegration = applyZoomAndPanIntegration; // for any extension

+
+    // Return zoom functionality when send img via buttons
+    const img2imgArea = document.querySelector("#img2img_settings");
+    const checkForTooltip = (e) => {
+        const tabId = getTabId(elements); // Make sure that the item is passed correctly to determine the tabId
+
+        if (tabId === "#img2img_sketch" || tabId === "#inpaint_sketch" || tabId === "#img2maskimg") {
+            const zoomTooltip = document.querySelector(`${tabId} .canvas-tooltip`);
+
+            if (!zoomTooltip) {
+                applyZoomAndPan(tabId, false);
+                // resetZoom()
+            }
+        }
+    };
+
+    // Wrapping your function through debounce to reduce the number of calls
+    const debouncedCheckForTooltip = debounce(checkForTooltip, 20);
+
+    // Assigning an event handler
+    img2imgArea.addEventListener("mousemove", debouncedCheckForTooltip);
+
    /*
        The function `applyZoomAndPanIntegration` takes two arguments:

@@ -11,7 +11,6 @@ shared.options_templates.update(shared.options_section(('canvas_hotkey', "Canvas
    "canvas_hotkey_reset": shared.OptionInfo("R", "Reset zoom and canvas position"),
    "canvas_hotkey_overlap": shared.OptionInfo("O", "Toggle overlap").info("Technical button, needed for testing"),
    "canvas_show_tooltip": shared.OptionInfo(True, "Enable tooltip on the canvas"),
-    "canvas_auto_expand": shared.OptionInfo(True, "Automatically expands an image that does not fit completely in the canvas area, similar to manually pressing the S and R buttons"),
    "canvas_blur_prompt": shared.OptionInfo(False, "Take the focus off the prompt when working with a canvas"),
    "canvas_disabled_functions": shared.OptionInfo(["Overlap"], "Disable function that you don't use", gr.CheckboxGroup, {"choices": ["Zoom","Adjust brush size","Hotkey enlarge brush","Hotkey shrink brush","Moving canvas","Fullscreen","Reset Zoom","Overlap"]}),
 }))
@@ -1,10 +1,8 @@
-
-let currentWidth = null;
-let currentHeight = null;
-let arFrameTimeout = setTimeout(function() {}, 0);
+let currentWidth;
+let currentHeight;
+let arFrameTimeout;

 function dimensionChange(e, is_width, is_height) {
-
    if (is_width) {
        currentWidth = e.target.value * 1.0;
    }
@@ -22,18 +20,18 @@ function dimensionChange(e, is_width, is_height) {

    var tabIndex = get_tab_index('mode_img2img');
    if (tabIndex == 0) { // img2img
-        targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');
+        targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] canvas');
    } else if (tabIndex == 1) { //Sketch
-        targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
+        targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] canvas');
    } else if (tabIndex == 2) { // Inpaint
-        targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
+        targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] canvas');
    } else if (tabIndex == 3) { // Inpaint sketch
-        targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
+        targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] canvas');
+    } else if (tabIndex == 4) { // Inpaint upload
+        targetElement = gradioApp().querySelector('#img_inpaint_base div[data-testid=image] img');
    }

-
    if (targetElement) {
-
        var arPreviewRect = gradioApp().querySelector('#imageARPreview');
        if (!arPreviewRect) {
            arPreviewRect = document.createElement('div');
@@ -41,14 +39,11 @@ function dimensionChange(e, is_width, is_height) {
            gradioApp().appendChild(arPreviewRect);
        }

-
-
        var viewportOffset = targetElement.getBoundingClientRect();
+        var viewportscale = Math.min(targetElement.clientWidth / targetElement.width, targetElement.clientHeight / targetElement.height);

-        var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);
-
-        var scaledx = targetElement.naturalWidth * viewportscale;
-        var scaledy = targetElement.naturalHeight * viewportscale;
+        var scaledx = targetElement.width * viewportscale;
+        var scaledy = targetElement.height * viewportscale;

        var clientRectTop = (viewportOffset.top + window.scrollY);
        var clientRectLeft = (viewportOffset.left + window.scrollX);
@@ -75,21 +70,18 @@ function dimensionChange(e, is_width, is_height) {
        }, 2000);

        arPreviewRect.style.display = 'block';
-
    }
-
 }

-
 onAfterUiUpdate(function() {
    var arPreviewRect = gradioApp().querySelector('#imageARPreview');
    if (arPreviewRect) {
        arPreviewRect.style.display = 'none';
    }
+
    var tabImg2img = gradioApp().querySelector("#tab_img2img");
    if (tabImg2img) {
-        var inImg2img = tabImg2img.style.display == "block";
-        if (inImg2img) {
+        if (tabImg2img.style.display == "block") {
            let inputs = gradioApp().querySelectorAll('input');
            inputs.forEach(function(e) {
                var is_width = e.parentElement.id == "img2img_width";
@@ -0,0 +1,7 @@
+
+// added to fix a weird error in gradio 4.19 at page load
+Object.defineProperty(Array.prototype, 'toLowerCase', {
+    value: function() {
+        return this;
+    }
+});
@@ -177,7 +177,7 @@ function modalTileImageToggle(event) {
 }

 onAfterUiUpdate(function() {
-    var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img');
+    var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > button > button > img');
    if (fullImg_preview != null) {
        fullImg_preview.forEach(setupImageForLightbox);
    }
@@ -38,9 +38,6 @@ function extract_image_from_gallery(gallery) {
    if (gallery.length == 0) {
        return [null];
    }
-    if (gallery.length == 1) {
-        return [gallery[0]];
-    }

    var index = selected_gallery_index();

@@ -49,7 +46,7 @@ function extract_image_from_gallery(gallery) {
        index = 0;
    }

-    return [gallery[index]];
+    return [[gallery[index]]];
 }

 window.args_to_array = Array.from; // Compatibility with e.g. extensions that may expect this to be around
@@ -116,14 +113,6 @@ function get_img2img_tab_index() {
 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;
 }

@@ -189,7 +178,6 @@ function submit_img2img() {
    var res = create_submit_args(arguments);

    res[0] = id;
-    res[1] = get_tab_index('mode_img2img');

    return res;
 }
@@ -207,7 +195,6 @@ function submit_extras() {

    res[0] = id;

-    console.log(res);
    return res;
 }

@@ -376,9 +363,9 @@ function selectCheckpoint(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 currentImg2imgSourceResolution(w, h, r) {
+    var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] :is(img, canvas)');
+    return img ? [img.naturalWidth || img.width, img.naturalHeight || img.height, r] : [0, 0, r];
 }

 function updateImg2imgResizeToTextAfterChangingImage() {
@@ -14,10 +14,16 @@ onOptionsChanged(function() {
        if (!commentBefore && !commentAfter) return;

        var span = null;
-        if (div.classList.contains('gradio-checkbox')) span = div.querySelector('label span');
-        else if (div.classList.contains('gradio-checkboxgroup')) span = div.querySelector('span').firstChild;
-        else if (div.classList.contains('gradio-radio')) span = div.querySelector('span').firstChild;
-        else span = div.querySelector('label span').firstChild;
+        if (div.classList.contains('gradio-checkbox')) {
+            span = div.querySelector('label span');
+        } else if (div.classList.contains('gradio-checkboxgroup')) {
+            span = div.querySelector('span').firstChild;
+        } else if (div.classList.contains('gradio-radio')) {
+            span = div.querySelector('span').firstChild;
+        } else {
+            var elem = div.querySelector('label span');
+            if (elem) span = elem.firstChild;
+        }

        if (!span) return;

@@ -207,7 +207,7 @@ class Api:
        self.router = APIRouter()
        self.app = app
        self.queue_lock = queue_lock
-        api_middleware(self.app)
+        #api_middleware(self.app)  # XXX this will have to be fixed
        self.add_api_route("/sdapi/v1/txt2img", self.text2imgapi, methods=["POST"], response_model=models.TextToImageResponse)
        self.add_api_route("/sdapi/v1/img2img", self.img2imgapi, methods=["POST"], response_model=models.ImageToImageResponse)
        self.add_api_route("/sdapi/v1/extra-single-image", self.extras_single_image_api, methods=["POST"], response_model=models.ExtrasSingleImageResponse)
@@ -1,6 +1,6 @@
 import inspect

-from pydantic import BaseModel, Field, create_model
+from pydantic import BaseModel, Field, create_model, ConfigDict
 from typing import Any, Optional, Literal
 from inflection import underscore
 from modules.processing import StableDiffusionProcessingTxt2Img, StableDiffusionProcessingImg2Img
@@ -92,9 +92,7 @@ class PydanticModelGenerator:
        fields = {
            d.field: (d.field_type, Field(default=d.field_value, alias=d.field_alias, exclude=d.field_exclude)) for d in self._model_def
        }
-        DynamicModel = create_model(self._model_name, **fields)
-        DynamicModel.__config__.allow_population_by_field_name = True
-        DynamicModel.__config__.allow_mutation = True
+        DynamicModel = create_model(self._model_name, __config__=ConfigDict(populate_by_name=True, frozen=False), **fields)
        return DynamicModel

 StableDiffusionTxt2ImgProcessingAPI = PydanticModelGenerator(
@@ -102,13 +100,13 @@ StableDiffusionTxt2ImgProcessingAPI = PydanticModelGenerator(
    StableDiffusionProcessingTxt2Img,
    [
        {"key": "sampler_index", "type": str, "default": "Euler"},
-        {"key": "script_name", "type": str, "default": None},
+        {"key": "script_name", "type": str | None, "default": None},
        {"key": "script_args", "type": list, "default": []},
        {"key": "send_images", "type": bool, "default": True},
        {"key": "save_images", "type": bool, "default": False},
        {"key": "alwayson_scripts", "type": dict, "default": {}},
-        {"key": "force_task_id", "type": str, "default": None},
-        {"key": "infotext", "type": str, "default": None},
+        {"key": "force_task_id", "type": str | None, "default": None},
+        {"key": "infotext", "type": str | None, "default": None},
    ]
 ).generate_model()

@@ -117,27 +115,27 @@ StableDiffusionImg2ImgProcessingAPI = PydanticModelGenerator(
    StableDiffusionProcessingImg2Img,
    [
        {"key": "sampler_index", "type": str, "default": "Euler"},
-        {"key": "init_images", "type": list, "default": None},
+        {"key": "init_images", "type": list | None, "default": None},
        {"key": "denoising_strength", "type": float, "default": 0.75},
-        {"key": "mask", "type": str, "default": None},
+        {"key": "mask", "type": str | None, "default": None},
        {"key": "include_init_images", "type": bool, "default": False, "exclude" : True},
-        {"key": "script_name", "type": str, "default": None},
+        {"key": "script_name", "type": str | None, "default": None},
        {"key": "script_args", "type": list, "default": []},
        {"key": "send_images", "type": bool, "default": True},
        {"key": "save_images", "type": bool, "default": False},
        {"key": "alwayson_scripts", "type": dict, "default": {}},
-        {"key": "force_task_id", "type": str, "default": None},
-        {"key": "infotext", "type": str, "default": None},
+        {"key": "force_task_id", "type": str | None, "default": None},
+        {"key": "infotext", "type": str | None, "default": None},
    ]
 ).generate_model()

 class TextToImageResponse(BaseModel):
-    images: list[str] = Field(default=None, title="Image", description="The generated image in base64 format.")
+    images: list[str] | None = Field(default=None, title="Image", description="The generated image in base64 format.")
    parameters: dict
    info: str

 class ImageToImageResponse(BaseModel):
-    images: list[str] = Field(default=None, title="Image", description="The generated image in base64 format.")
+    images: list[str] | None = Field(default=None, title="Image", description="The generated image in base64 format.")
    parameters: dict
    info: str

@@ -163,7 +161,7 @@ class ExtrasSingleImageRequest(ExtrasBaseRequest):
    image: str = Field(default="", title="Image", description="Image to work on, must be a Base64 string containing the image's data.")

 class ExtrasSingleImageResponse(ExtraBaseResponse):
-    image: str = Field(default=None, title="Image", description="The generated image in base64 format.")
+    image: str | None = Field(default=None, title="Image", description="The generated image in base64 format.")

 class FileData(BaseModel):
    data: str = Field(title="File data", description="Base64 representation of the file")
@@ -190,15 +188,15 @@ class ProgressResponse(BaseModel):
    progress: float = Field(title="Progress", description="The progress with a range of 0 to 1")
    eta_relative: float = Field(title="ETA in secs")
    state: dict = Field(title="State", description="The current state snapshot")
-    current_image: str = Field(default=None, title="Current image", description="The current image in base64 format. opts.show_progress_every_n_steps is required for this to work.")
-    textinfo: str = Field(default=None, title="Info text", description="Info text used by WebUI.")
+    current_image: str | None = Field(default=None, title="Current image", description="The current image in base64 format. opts.show_progress_every_n_steps is required for this to work.")
+    textinfo: str | None = Field(default=None, title="Info text", description="Info text used by WebUI.")

 class InterrogateRequest(BaseModel):
    image: str = Field(default="", title="Image", description="Image to work on, must be a Base64 string containing the image's data.")
    model: str = Field(default="clip", title="Model", description="The interrogate model used.")

 class InterrogateResponse(BaseModel):
-    caption: str = Field(default=None, title="Caption", description="The generated caption for the image.")
+    caption: str | None = Field(default=None, title="Caption", description="The generated caption for the image.")

 class TrainResponse(BaseModel):
    info: str = Field(title="Train info", description="Response string from train embedding or hypernetwork task.")
@@ -223,7 +221,7 @@ _options = vars(parser)['_option_string_actions']
 for key in _options:
    if(_options[key].dest != 'help'):
        flag = _options[key]
-        _type = str
+        _type = str | None
        if _options[key].default is not None:
            _type = type(_options[key].default)
        flags.update({flag.dest: (_type, Field(default=flag.default, description=flag.help))})
@@ -233,7 +231,7 @@ FlagsModel = create_model("Flags", **flags)
 class SamplerItem(BaseModel):
    name: str = Field(title="Name")
    aliases: list[str] = Field(title="Aliases")
-    options: dict[str, str] = Field(title="Options")
+    options: dict[str, Any] = Field(title="Options")

 class SchedulerItem(BaseModel):
    name: str = Field(title="Name")
@@ -243,6 +241,9 @@ class SchedulerItem(BaseModel):
    need_inner_model: Optional[bool] = Field(title="Needs Inner Model")

 class UpscalerItem(BaseModel):
+    class Config:
+        protected_namespaces = ()
+
    name: str = Field(title="Name")
    model_name: Optional[str] = Field(title="Model Name")
    model_path: Optional[str] = Field(title="Path")
@@ -253,6 +254,9 @@ class LatentUpscalerModeItem(BaseModel):
    name: str = Field(title="Name")

 class SDModelItem(BaseModel):
+    class Config:
+        protected_namespaces = ()
+
    title: str = Field(title="Title")
    model_name: str = Field(title="Model Name")
    hash: Optional[str] = Field(title="Short hash")
@@ -261,6 +265,9 @@ class SDModelItem(BaseModel):
    config: Optional[str] = Field(title="Config file")

 class SDVaeItem(BaseModel):
+    class Config:
+        protected_namespaces = ()
+
    model_name: str = Field(title="Model Name")
    filename: str = Field(title="Filename")

@@ -300,12 +307,12 @@ class MemoryResponse(BaseModel):


 class ScriptsList(BaseModel):
-    txt2img: list = Field(default=None, title="Txt2img", description="Titles of scripts (txt2img)")
-    img2img: list = Field(default=None, title="Img2img", description="Titles of scripts (img2img)")
+    txt2img: list | None = Field(default=None, title="Txt2img", description="Titles of scripts (txt2img)")
+    img2img: list | None = Field(default=None, title="Img2img", description="Titles of scripts (img2img)")


 class ScriptArg(BaseModel):
-    label: str = Field(default=None, title="Label", description="Name of the argument in UI")
+    label: str | None = Field(default=None, title="Label", description="Name of the argument in UI")
    value: Optional[Any] = Field(default=None, title="Value", description="Default value of the argument")
    minimum: Optional[Any] = Field(default=None, title="Minimum", description="Minimum allowed value for the argumentin UI")
    maximum: Optional[Any] = Field(default=None, title="Minimum", description="Maximum allowed value for the argumentin UI")
@@ -314,9 +321,9 @@ class ScriptArg(BaseModel):


 class ScriptInfo(BaseModel):
-    name: str = Field(default=None, title="Name", description="Script name")
-    is_alwayson: bool = Field(default=None, title="IsAlwayson", description="Flag specifying whether this script is an alwayson script")
-    is_img2img: bool = Field(default=None, title="IsImg2img", description="Flag specifying whether this script is an img2img script")
+    name: str | None = Field(default=None, title="Name", description="Script name")
+    is_alwayson: bool | None = Field(default=None, title="IsAlwayson", description="Flag specifying whether this script is an alwayson script")
+    is_img2img: bool | None = Field(default=None, title="IsImg2img", description="Flag specifying whether this script is an img2img script")
    args: list[ScriptArg] = Field(title="Arguments", description="List of script's arguments")

 class ExtensionItem(BaseModel):
@@ -109,7 +109,7 @@ def check_versions():

    expected_torch_version = "2.1.2"
    expected_xformers_version = "0.0.23.post1"
-    expected_gradio_version = "3.41.2"
+    expected_gradio_version = "4.38.1"

    if version.parse(torch.__version__) < version.parse(expected_torch_version):
        print_error_explanation(f"""
@@ -0,0 +1,166 @@
+import inspect
+import warnings
+from functools import wraps
+
+import gradio as gr
+import gradio.component_meta
+
+
+from modules import scripts, ui_tempdir, patches
+
+
+class GradioDeprecationWarning(DeprecationWarning):
+    pass
+
+
+def add_classes_to_gradio_component(comp):
+    """
+    this adds gradio-* to the component for css styling (ie gradio-button to gr.Button), as well as some others
+    """
+
+    comp.elem_classes = [f"gradio-{comp.get_block_name()}", *(getattr(comp, 'elem_classes', None) or [])]
+
+    if getattr(comp, 'multiselect', False):
+        comp.elem_classes.append('multiselect')
+
+
+def IOComponent_init(self, *args, **kwargs):
+    self.webui_tooltip = kwargs.pop('tooltip', None)
+
+    if scripts.scripts_current is not None:
+        scripts.scripts_current.before_component(self, **kwargs)
+
+    scripts.script_callbacks.before_component_callback(self, **kwargs)
+
+    res = original_IOComponent_init(self, *args, **kwargs)
+
+    add_classes_to_gradio_component(self)
+
+    scripts.script_callbacks.after_component_callback(self, **kwargs)
+
+    if scripts.scripts_current is not None:
+        scripts.scripts_current.after_component(self, **kwargs)
+
+    return res
+
+
+def Block_get_config(self):
+    config = original_Block_get_config(self)
+
+    webui_tooltip = getattr(self, 'webui_tooltip', None)
+    if webui_tooltip:
+        config["webui_tooltip"] = webui_tooltip
+
+    config.pop('example_inputs', None)
+
+    return config
+
+
+def BlockContext_init(self, *args, **kwargs):
+    if scripts.scripts_current is not None:
+        scripts.scripts_current.before_component(self, **kwargs)
+
+    scripts.script_callbacks.before_component_callback(self, **kwargs)
+
+    res = original_BlockContext_init(self, *args, **kwargs)
+
+    add_classes_to_gradio_component(self)
+
+    scripts.script_callbacks.after_component_callback(self, **kwargs)
+
+    if scripts.scripts_current is not None:
+        scripts.scripts_current.after_component(self, **kwargs)
+
+    return res
+
+
+def Blocks_get_config_file(self, *args, **kwargs):
+    config = original_Blocks_get_config_file(self, *args, **kwargs)
+
+    for comp_config in config["components"]:
+        if "example_inputs" in comp_config:
+            comp_config["example_inputs"] = {"serialized": []}
+
+    return config
+
+
+original_IOComponent_init = patches.patch(__name__, obj=gr.components.Component, field="__init__", replacement=IOComponent_init)
+original_Block_get_config = patches.patch(__name__, obj=gr.blocks.Block, field="get_config", replacement=Block_get_config)
+original_BlockContext_init = patches.patch(__name__, obj=gr.blocks.BlockContext, field="__init__", replacement=BlockContext_init)
+original_Blocks_get_config_file = patches.patch(__name__, obj=gr.blocks.Blocks, field="get_config_file", replacement=Blocks_get_config_file)
+
+
+ui_tempdir.install_ui_tempdir_override()
+
+
+def gradio_component_meta_create_or_modify_pyi(component_class, class_name, events):
+    if hasattr(component_class, 'webui_do_not_create_gradio_pyi_thank_you'):
+        return
+
+    gradio_component_meta_create_or_modify_pyi_original(component_class, class_name, events)
+
+
+# this prevents creation of .pyi files in webui dir
+gradio_component_meta_create_or_modify_pyi_original = patches.patch(__file__, gradio.component_meta, 'create_or_modify_pyi', gradio_component_meta_create_or_modify_pyi)
+
+# this function is broken and does not seem to do anything useful
+gradio.component_meta.updateable = lambda x: x
+
+def repair(grclass):
+    if not getattr(grclass, 'EVENTS', None):
+        return
+
+    @wraps(grclass.__init__)
+    def __repaired_init__(self, *args, tooltip=None, source=None, original=grclass.__init__, **kwargs):
+        if source:
+            kwargs["sources"] = [source]
+
+        allowed_kwargs = inspect.signature(original).parameters
+        fixed_kwargs = {}
+        for k, v in kwargs.items():
+            if k in allowed_kwargs:
+                fixed_kwargs[k] = v
+            else:
+                warnings.warn(f"unexpected argument for {grclass.__name__}: {k}", GradioDeprecationWarning, stacklevel=2)
+
+        original(self, *args, **fixed_kwargs)
+
+        self.webui_tooltip = tooltip
+
+        for event in self.EVENTS:
+            replaced_event = getattr(self, str(event))
+
+            def fun(*xargs, _js=None, replaced_event=replaced_event, **xkwargs):
+                if _js:
+                    xkwargs['js'] = _js
+
+                return replaced_event(*xargs, **xkwargs)
+
+            setattr(self, str(event), fun)
+
+    grclass.__init__ = __repaired_init__
+    grclass.update = gr.update
+
+
+for component in set(gr.components.__all__ + gr.layouts.__all__):
+    repair(getattr(gr, component, None))
+
+
+class Dependency(gr.events.Dependency):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+        def then(*xargs, _js=None, **xkwargs):
+            if _js:
+                xkwargs['js'] = _js
+
+            return original_then(*xargs, **xkwargs)
+
+        original_then = self.then
+        self.then = then
+
+
+gr.events.Dependency = Dependency
+
+gr.Box = gr.Group
+
@@ -1,83 +0,0 @@
-import gradio as gr
-
-from modules import scripts, ui_tempdir, patches
-
-
-def add_classes_to_gradio_component(comp):
-    """
-    this adds gradio-* to the component for css styling (ie gradio-button to gr.Button), as well as some others
-    """
-
-    comp.elem_classes = [f"gradio-{comp.get_block_name()}", *(comp.elem_classes or [])]
-
-    if getattr(comp, 'multiselect', False):
-        comp.elem_classes.append('multiselect')
-
-
-def IOComponent_init(self, *args, **kwargs):
-    self.webui_tooltip = kwargs.pop('tooltip', None)
-
-    if scripts.scripts_current is not None:
-        scripts.scripts_current.before_component(self, **kwargs)
-
-    scripts.script_callbacks.before_component_callback(self, **kwargs)
-
-    res = original_IOComponent_init(self, *args, **kwargs)
-
-    add_classes_to_gradio_component(self)
-
-    scripts.script_callbacks.after_component_callback(self, **kwargs)
-
-    if scripts.scripts_current is not None:
-        scripts.scripts_current.after_component(self, **kwargs)
-
-    return res
-
-
-def Block_get_config(self):
-    config = original_Block_get_config(self)
-
-    webui_tooltip = getattr(self, 'webui_tooltip', None)
-    if webui_tooltip:
-        config["webui_tooltip"] = webui_tooltip
-
-    config.pop('example_inputs', None)
-
-    return config
-
-
-def BlockContext_init(self, *args, **kwargs):
-    if scripts.scripts_current is not None:
-        scripts.scripts_current.before_component(self, **kwargs)
-
-    scripts.script_callbacks.before_component_callback(self, **kwargs)
-
-    res = original_BlockContext_init(self, *args, **kwargs)
-
-    add_classes_to_gradio_component(self)
-
-    scripts.script_callbacks.after_component_callback(self, **kwargs)
-
-    if scripts.scripts_current is not None:
-        scripts.scripts_current.after_component(self, **kwargs)
-
-    return res
-
-
-def Blocks_get_config_file(self, *args, **kwargs):
-    config = original_Blocks_get_config_file(self, *args, **kwargs)
-
-    for comp_config in config["components"]:
-        if "example_inputs" in comp_config:
-            comp_config["example_inputs"] = {"serialized": []}
-
-    return config
-
-
-original_IOComponent_init = patches.patch(__name__, obj=gr.components.IOComponent, field="__init__", replacement=IOComponent_init)
-original_Block_get_config = patches.patch(__name__, obj=gr.blocks.Block, field="get_config", replacement=Block_get_config)
-original_BlockContext_init = patches.patch(__name__, obj=gr.blocks.BlockContext, field="__init__", replacement=BlockContext_init)
-original_Blocks_get_config_file = patches.patch(__name__, obj=gr.blocks.Blocks, field="get_config_file", replacement=Blocks_get_config_file)
-
-
-ui_tempdir.install_ui_tempdir_override()
@@ -2,7 +2,6 @@ import os
 from contextlib import closing
 from pathlib import Path

-import numpy as np
 from PIL import Image, ImageOps, ImageFilter, ImageEnhance, UnidentifiedImageError
 import gradio as gr

@@ -149,25 +148,24 @@ def process_batch(p, input, output_dir, inpaint_mask_dir, args, to_scale=False,
    return batch_results


-def img2img(id_task: str, request: gr.Request, mode: int, prompt: str, negative_prompt: str, prompt_styles, init_img, sketch, init_img_with_mask, inpaint_color_sketch, inpaint_color_sketch_orig, init_img_inpaint, init_mask_inpaint, mask_blur: int, mask_alpha: float, inpainting_fill: int, n_iter: int, batch_size: int, cfg_scale: float, image_cfg_scale: float, denoising_strength: float, selected_scale_tab: int, height: int, width: int, scale_by: float, resize_mode: int, inpaint_full_res: bool, inpaint_full_res_padding: int, inpainting_mask_invert: int, img2img_batch_input_dir: str, img2img_batch_output_dir: str, img2img_batch_inpaint_mask_dir: str, override_settings_texts, img2img_batch_use_png_info: bool, img2img_batch_png_info_props: list, img2img_batch_png_info_dir: str, img2img_batch_source_type: str, img2img_batch_upload: list, *args):
+def img2img(id_task: str, request: gr.Request, mode: int, prompt: str, negative_prompt: str, prompt_styles, init_img, sketch, init_img_with_mask, inpaint_color_sketch, init_img_inpaint, init_mask_inpaint, mask_blur: int, mask_alpha: float, inpainting_fill: int, n_iter: int, batch_size: int, cfg_scale: float, image_cfg_scale: float, denoising_strength: float, selected_scale_tab: int, height: int, width: int, scale_by: float, resize_mode: int, inpaint_full_res: bool, inpaint_full_res_padding: int, inpainting_mask_invert: int, img2img_batch_input_dir: str, img2img_batch_output_dir: str, img2img_batch_inpaint_mask_dir: str, override_settings_texts, img2img_batch_use_png_info: bool, img2img_batch_png_info_props: list, img2img_batch_png_info_dir: str, img2img_batch_source_type: str, img2img_batch_upload: list, *args):
    override_settings = create_override_settings_dict(override_settings_texts)

    is_batch = mode == 5

    if mode == 0:  # img2img
-        image = init_img
+        image = init_img["composite"]
        mask = None
    elif mode == 1:  # img2img sketch
-        image = sketch
+        image = sketch["composite"]
        mask = None
    elif mode == 2:  # inpaint
-        image, mask = init_img_with_mask["image"], init_img_with_mask["mask"]
+        image, mask = init_img_with_mask["background"], init_img_with_mask["layers"][0]
        mask = processing.create_binary_mask(mask)
    elif mode == 3:  # inpaint sketch
-        image = inpaint_color_sketch
-        orig = inpaint_color_sketch_orig or inpaint_color_sketch
-        pred = np.any(np.array(image) != np.array(orig), axis=-1)
-        mask = Image.fromarray(pred.astype(np.uint8) * 255, "L")
+        image = inpaint_color_sketch["composite"]
+        orig = inpaint_color_sketch["background"]
+        mask = inpaint_color_sketch["layers"][0].getchannel("A")
        mask = ImageEnhance.Brightness(mask).enhance(1 - mask_alpha / 100)
        blur = ImageFilter.GaussianBlur(mask_blur)
        image = Image.composite(image.filter(blur), orig, mask.filter(blur))
@@ -74,29 +74,38 @@ def image_from_url_text(filedata):
    if filedata is None:
        return None

-    if type(filedata) == list and filedata and type(filedata[0]) == dict and filedata[0].get("is_file", False):
+    if isinstance(filedata, list):
+        if len(filedata) == 0:
+            return None
+
        filedata = filedata[0]

+    if isinstance(filedata, dict) and filedata.get("is_file", False):
+        filedata = filedata
+
+    filename = None
    if type(filedata) == dict and filedata.get("is_file", False):
        filename = filedata["name"]
+
+    elif isinstance(filedata, tuple) and len(filedata) == 2:  # gradio 4.16 sends images from gallery as a list of tuples
+        return filedata[0]
+
+    if filename:
        is_in_right_dir = ui_tempdir.check_tmp_file(shared.demo, filename)
        assert is_in_right_dir, 'trying to open image file outside of allowed directories'

        filename = filename.rsplit('?', 1)[0]
        return images.read(filename)

-    if type(filedata) == list:
-        if len(filedata) == 0:
-            return None
+    if isinstance(filedata, str):
+        if filedata.startswith("data:image/png;base64,"):
+            filedata = filedata[len("data:image/png;base64,"):]

-        filedata = filedata[0]
+        filedata = base64.decodebytes(filedata.encode('utf-8'))
+        image = images.read(io.BytesIO(filedata))
+        return image

-    if filedata.startswith("data:image/png;base64,"):
-        filedata = filedata[len("data:image/png;base64,"):]
-
-    filedata = base64.decodebytes(filedata.encode('utf-8'))
-    image = images.read(io.BytesIO(filedata))
-    return image
+    return None


 def add_paste_fields(tabname, init_img, fields, override_settings_component=None):
@@ -186,6 +195,8 @@ def connect_paste_params_buttons():
 def send_image_and_dimensions(x):
    if isinstance(x, Image.Image):
        img = x
+    elif isinstance(x, list) and isinstance(x[0], tuple):
+        img = x[0][0]
    else:
        img = image_from_url_text(x)

@@ -413,6 +424,9 @@ def create_override_settings_dict(text_pairs):

    res = {}

+    if not text_pairs:
+        return res
+
    params = {}
    for pair in text_pairs:
        k, v = pair.split(":", maxsplit=1)
@@ -36,7 +36,7 @@ def imports():
    shared_init.initialize()
    startup_timer.record("initialize shared")

-    from modules import processing, gradio_extensons, ui  # noqa: F401
+    from modules import processing, gradio_extensions, ui  # noqa: F401
    startup_timer.record("other imports")


@@ -4,6 +4,8 @@ import signal
 import sys
 import re

+import starlette
+
 from modules.timer import startup_timer


@@ -192,8 +194,7 @@ def configure_opts_onchange():
 def setup_middleware(app):
    from starlette.middleware.gzip import GZipMiddleware

-    app.middleware_stack = None  # reset current middleware to allow modifying user provided list
-    app.add_middleware(GZipMiddleware, minimum_size=1000)
+    app.user_middleware.insert(0, starlette.middleware.Middleware(GZipMiddleware, minimum_size=1000))
    configure_cors_middleware(app)
    app.build_middleware_stack()  # rebuild middleware stack on-the-fly

@@ -211,5 +212,6 @@ def configure_cors_middleware(app):
        cors_options["allow_origins"] = cmd_opts.cors_allow_origins.split(',')
    if cmd_opts.cors_allow_origins_regex:
        cors_options["allow_origin_regex"] = cmd_opts.cors_allow_origins_regex
-    app.add_middleware(CORSMiddleware, **cors_options)
+
+    app.user_middleware.insert(0, starlette.middleware.Middleware(CORSMiddleware, **cors_options))

@@ -13,6 +13,9 @@ def run_postprocessing(extras_mode, image, image_folder, input_dir, output_dir,

    outputs = []

+    if isinstance(image, dict):
+        image = image["composite"]
+
    def get_images(extras_mode, image, image_folder, input_dir):
        if extras_mode == 1:
            for img in image_folder:
@@ -22,7 +22,7 @@ class ScriptRefiner(scripts.ScriptBuiltinUI):
    def ui(self, is_img2img):
        with InputAccordion(False, label="Refiner", elem_id=self.elem_id("enable")) as enable_refiner:
            with gr.Row():
-                refiner_checkpoint = gr.Dropdown(label='Checkpoint', elem_id=self.elem_id("checkpoint"), choices=sd_models.checkpoint_tiles(), value='', tooltip="switch to another model in the middle of generation")
+                refiner_checkpoint = gr.Dropdown(label='Checkpoint', elem_id=self.elem_id("checkpoint"), choices=["", *sd_models.checkpoint_tiles()], value='', tooltip="switch to another model in the middle of generation")
                create_refresh_button(refiner_checkpoint, sd_models.list_models, lambda: {"choices": sd_models.checkpoint_tiles()}, self.elem_id("checkpoint_refresh"))

                refiner_switch_at = gr.Slider(value=0.8, label="Switch at", minimum=0.01, maximum=1.0, step=0.01, elem_id=self.elem_id("switch_at"), tooltip="fraction of sampling steps when the switch to refiner model should happen; 1=never, 0.5=switch in the middle of generation")
@@ -34,7 +34,7 @@ class ScriptSeed(scripts.ScriptBuiltinUI):
            random_seed = ToolButton(ui.random_symbol, elem_id=self.elem_id("random_seed"), tooltip="Set seed to -1, which will cause a new random number to be used every time")
            reuse_seed = ToolButton(ui.reuse_symbol, elem_id=self.elem_id("reuse_seed"), tooltip="Reuse seed from last generation, mostly useful if it was randomized")

-            seed_checkbox = gr.Checkbox(label='Extra', elem_id=self.elem_id("subseed_show"), value=False)
+            seed_checkbox = gr.Checkbox(label='Extra', elem_id=self.elem_id("subseed_show"), value=False, scale=0, min_width=60)

        with gr.Group(visible=False, elem_id=self.elem_id("seed_extras")) as seed_extras:
            with gr.Row(elem_id=self.elem_id("subseed_row")):
@@ -1,3 +1,4 @@
+from __future__ import annotations
 import base64
 import io
 import time
@@ -66,11 +67,11 @@ class ProgressResponse(BaseModel):
    active: bool = Field(title="Whether the task is being worked on right now")
    queued: bool = Field(title="Whether the task is in queue")
    completed: bool = Field(title="Whether the task has already finished")
-    progress: float = Field(default=None, title="Progress", description="The progress with a range of 0 to 1")
-    eta: float = Field(default=None, title="ETA in secs")
-    live_preview: str = Field(default=None, title="Live preview image", description="Current live preview; a data: uri")
-    id_live_preview: int = Field(default=None, title="Live preview image ID", description="Send this together with next request to prevent receiving same image")
-    textinfo: str = Field(default=None, title="Info text", description="Info text used by WebUI.")
+    progress: float | None = Field(default=None, title="Progress", description="The progress with a range of 0 to 1")
+    eta: float | None = Field(default=None, title="ETA in secs")
+    live_preview: str | None = Field(default=None, title="Live preview image", description="Current live preview; a data: uri")
+    id_live_preview: int | None = Field(default=None, title="Live preview image ID", description="Send this together with next request to prevent receiving same image")
+    textinfo: str | None = Field(default=None, title="Info text", description="Info text used by WebUI.")


 def setup_progress_api(app):
@@ -219,7 +219,6 @@ options_templates.update(options_section(('img2img', "img2img", "sd"), {
    "img2img_color_correction": OptionInfo(False, "Apply color correction to img2img results to match original colors."),
    "img2img_fix_steps": OptionInfo(False, "With img2img, do exactly the amount of steps the slider specifies.").info("normally you'd do less with less denoising"),
    "img2img_background_color": OptionInfo("#ffffff", "With img2img, fill transparent parts of the input image with this color.", ui_components.FormColorPicker, {}),
-    "img2img_editor_height": OptionInfo(720, "Height of the image editor", gr.Slider, {"minimum": 80, "maximum": 1600, "step": 1}).info("in pixels").needs_reload_ui(),
    "img2img_sketch_default_brush_color": OptionInfo("#ffffff", "Sketch initial brush color", ui_components.FormColorPicker, {}).info("default brush color of img2img sketch").needs_reload_ui(),
    "img2img_inpaint_mask_brush_color": OptionInfo("#ffffff", "Inpaint mask brush color", ui_components.FormColorPicker,  {}).info("brush color of inpaint mask").needs_reload_ui(),
    "img2img_inpaint_sketch_default_brush_color": OptionInfo("#ffffff", "Inpaint sketch initial brush color", ui_components.FormColorPicker, {}).info("default brush color of img2img inpaint sketch").needs_reload_ui(),
@@ -8,11 +8,10 @@ from contextlib import ExitStack

 import gradio as gr
 import gradio.utils
-import numpy as np
 from PIL import Image, PngImagePlugin  # noqa: F401
 from modules.call_queue import wrap_gradio_gpu_call, wrap_queued_call, wrap_gradio_call, wrap_gradio_call_no_job # noqa: F401

-from modules import gradio_extensons, sd_schedulers  # noqa: F401
+from modules import gradio_extensions, sd_schedulers  # noqa: F401
 from modules import sd_hijack, sd_models, script_callbacks, ui_extensions, deepbooru, extra_networks, ui_common, ui_postprocessing, progress, ui_loadsave, shared_items, ui_settings, timer, sysinfo, ui_checkpoint_merger, scripts, sd_samplers, processing, ui_extra_networks, ui_toprow, launch_utils
 from modules.ui_components import FormRow, FormGroup, ToolButton, FormHTML, InputAccordion, ResizeHandleRow
 from modules.paths import script_path
@@ -33,7 +32,7 @@ from modules.infotext_utils import image_from_url_text, PasteField
 create_setting_component = ui_settings.create_setting_component

 warnings.filterwarnings("default" if opts.show_warnings else "ignore", category=UserWarning)
-warnings.filterwarnings("default" if opts.show_gradio_deprecation_warnings else "ignore", category=gr.deprecation.GradioDeprecationWarning)
+warnings.filterwarnings("default" if opts.show_gradio_deprecation_warnings else "ignore", category=gradio_extensions.GradioDeprecationWarning)

 # this is a fix for Windows users. Without it, javascript files will be served with text/html content-type and the browser will not show any UI
 mimetypes.init()
@@ -101,8 +100,8 @@ def calc_resolution_hires(enable, width, height, hr_scale, hr_resize_x, hr_resiz


 def resize_from_to_html(width, height, scale_by):
-    target_width = int(width * scale_by)
-    target_height = int(height * scale_by)
+    target_width = int(float(width) * scale_by)
+    target_height = int(float(height) * scale_by)

    if not target_width or not target_height:
        return "no image selected"
@@ -111,10 +110,11 @@ def resize_from_to_html(width, height, scale_by):


 def process_interrogate(interrogation_function, mode, ii_input_dir, ii_output_dir, *ii_singles):
-    if mode in {0, 1, 3, 4}:
-        return [interrogation_function(ii_singles[mode]), None]
+    mode = int(mode)
+    if mode in (0, 1, 3, 4):
+        return [interrogation_function(ii_singles[mode]["composite"]), None]
    elif mode == 2:
-        return [interrogation_function(ii_singles[mode]["image"]), None]
+        return [interrogation_function(ii_singles[mode]["composite"]), None]
    elif mode == 5:
        assert not shared.cmd_opts.hide_ui_dir_config, "Launched with --hide-ui-dir-config, batch img2img disabled"
        images = shared.listfiles(ii_input_dir)
@@ -267,7 +267,8 @@ def create_ui():
    with gr.Blocks(analytics_enabled=False) as txt2img_interface:
        toprow = ui_toprow.Toprow(is_img2img=False, is_compact=shared.opts.compact_prompt_box)

-        dummy_component = gr.Label(visible=False)
+        dummy_component = gr.Textbox(visible=False)
+        dummy_component_number = gr.Number(visible=False)

        extra_tabs = gr.Tabs(elem_id="txt2img_extra_tabs", elem_classes=["extra-networks"])
        extra_tabs.__enter__()
@@ -310,7 +311,7 @@ def create_ui():
                        with gr.Row(elem_id="txt2img_accordions", elem_classes="accordions"):
                            with InputAccordion(False, label="Hires. fix", elem_id="txt2img_hr") as enable_hr:
                                with enable_hr.extra():
-                                    hr_final_resolution = FormHTML(value="", elem_id="txtimg_hr_finalres", label="Upscaled resolution", interactive=False, min_width=0)
+                                    hr_final_resolution = FormHTML(value="", elem_id="txtimg_hr_finalres", label="Upscaled resolution")

                                with FormRow(elem_id="txt2img_hires_fix_row1", variant="compact"):
                                    hr_upscaler = gr.Dropdown(label="Upscaler", elem_id="txt2img_hr_upscaler", choices=[*shared.latent_upscale_modes, *[x.name for x in shared.sd_upscalers]], value=shared.latent_upscale_default_mode)
@@ -424,7 +425,7 @@ def create_ui():
            output_panel.button_upscale.click(
                fn=wrap_gradio_gpu_call(modules.txt2img.txt2img_upscale, extra_outputs=[None, '', '']),
                _js="submit_txt2img_upscale",
-                inputs=txt2img_inputs[0:1] + [output_panel.gallery, dummy_component, output_panel.generation_info] + txt2img_inputs[1:],
+                inputs=txt2img_inputs[0:1] + [output_panel.gallery, dummy_component_number, output_panel.generation_info] + txt2img_inputs[1:],
                outputs=txt2img_outputs,
                show_progress=False,
            )
@@ -538,31 +539,21 @@ def create_ui():
                            img2img_selected_tab = gr.Number(value=0, visible=False)

                            with gr.TabItem('img2img', id='img2img', elem_id="img2img_img2img_tab") as tab_img2img:
-                                init_img = gr.Image(label="Image for img2img", elem_id="img2img_image", show_label=False, source="upload", interactive=True, type="pil", tool="editor", image_mode="RGBA", height=opts.img2img_editor_height)
+                                init_img = gr.ImageEditor(label="Image for img2img", elem_id="img2img_image", show_label=False, interactive=True, type="pil", image_mode="RGBA")
                                add_copy_image_controls('img2img', init_img)

                            with gr.TabItem('Sketch', id='img2img_sketch', elem_id="img2img_img2img_sketch_tab") as tab_sketch:
-                                sketch = gr.Image(label="Image for img2img", elem_id="img2img_sketch", show_label=False, source="upload", interactive=True, type="pil", tool="color-sketch", image_mode="RGB", height=opts.img2img_editor_height, brush_color=opts.img2img_sketch_default_brush_color)
+                                sketch = gr.ImageEditor(label="Image for img2img", elem_id="img2img_sketch", show_label=False, interactive=True, type="pil", image_mode="RGBA", brush=gr.Brush(default_color=opts.img2img_sketch_default_brush_color))
                                add_copy_image_controls('sketch', sketch)

                            with gr.TabItem('Inpaint', id='inpaint', elem_id="img2img_inpaint_tab") as tab_inpaint:
-                                init_img_with_mask = gr.Image(label="Image for inpainting with mask", show_label=False, elem_id="img2maskimg", source="upload", interactive=True, type="pil", tool="sketch", image_mode="RGBA", height=opts.img2img_editor_height, brush_color=opts.img2img_inpaint_mask_brush_color)
+                                init_img_with_mask = gr.ImageEditor(label="Image for inpainting with mask", show_label=False, elem_id="img2maskimg", brush=gr.Brush(colors=[opts.img2img_inpaint_mask_brush_color], color_mode="fixed"), interactive=True, type="pil", image_mode="RGBA", layers=False)
                                add_copy_image_controls('inpaint', init_img_with_mask)

                            with gr.TabItem('Inpaint sketch', id='inpaint_sketch', elem_id="img2img_inpaint_sketch_tab") as tab_inpaint_color:
-                                inpaint_color_sketch = gr.Image(label="Color sketch inpainting", show_label=False, elem_id="inpaint_sketch", source="upload", interactive=True, type="pil", tool="color-sketch", image_mode="RGB", height=opts.img2img_editor_height, brush_color=opts.img2img_inpaint_sketch_default_brush_color)
-                                inpaint_color_sketch_orig = gr.State(None)
+                                inpaint_color_sketch = gr.ImageEditor(label="Color sketch inpainting", show_label=False, elem_id="inpaint_sketch", brush=gr.Brush(default_color=opts.img2img_inpaint_sketch_default_brush_color), interactive=True, type="pil", image_mode="RGBA", layers=False)
                                add_copy_image_controls('inpaint_sketch', inpaint_color_sketch)

-                                def update_orig(image, state):
-                                    if image is not None:
-                                        same_size = state is not None and state.size == image.size
-                                        has_exact_match = np.any(np.all(np.array(image) == np.array(state), axis=-1))
-                                        edited = same_size and has_exact_match
-                                        return image if not edited or state is None else state
-
-                                inpaint_color_sketch.change(update_orig, [inpaint_color_sketch, inpaint_color_sketch_orig], inpaint_color_sketch_orig)
-
                            with gr.TabItem('Inpaint upload', id='inpaint_upload', elem_id="img2img_inpaint_upload_tab") as tab_inpaint_upload:
                                init_img_inpaint = gr.Image(label="Image for img2img", show_label=False, source="upload", interactive=True, type="pil", elem_id="img_inpaint_base")
                                init_mask_inpaint = gr.Image(label="Mask", source="upload", interactive=True, type="pil", image_mode="RGBA", elem_id="img_inpaint_mask")
@@ -595,20 +586,14 @@ def create_ui():
                            for i, tab in enumerate(img2img_tabs):
                                tab.select(fn=lambda tabnum=i: tabnum, inputs=[], outputs=[img2img_selected_tab])

-                        def copy_image(img):
-                            if isinstance(img, dict) and 'image' in img:
-                                return img['image']
-
-                            return img
-
                        for button, name, elem in copy_image_buttons:
                            button.click(
-                                fn=copy_image,
+                                fn=lambda img: img,
                                inputs=[elem],
                                outputs=[copy_image_destinations[name]],
                            )
                            button.click(
-                                fn=lambda: None,
+                                fn=None,
                                _js=f"switch_to_{name.replace(' ', '_')}",
                                inputs=[],
                                outputs=[],
@@ -711,12 +696,6 @@ def create_ui():
                    if category not in {"accordions"}:
                        scripts.scripts_img2img.setup_ui_for_section(category)

-            # the code below is meant to update the resolution label after the image in the image selection UI has changed.
-            # as it is now the event keeps firing continuously for inpaint edits, which ruins the page with constant requests.
-            # I assume this must be a gradio bug and for now we'll just do it for non-inpaint inputs.
-            for component in [init_img, sketch]:
-                component.change(fn=lambda: None, _js="updateImg2imgResizeToTextAfterChangingImage", inputs=[], outputs=[], show_progress=False)
-
            def select_img2img_tab(tab):
                return gr.update(visible=tab in [2, 3, 4]), gr.update(visible=tab == 3),

@@ -734,7 +713,7 @@ def create_ui():
                _js="submit_img2img",
                inputs=[
                    dummy_component,
-                    dummy_component,
+                    img2img_selected_tab,
                    toprow.prompt,
                    toprow.negative_prompt,
                    toprow.ui_styles.dropdown,
@@ -742,7 +721,6 @@ def create_ui():
                    sketch,
                    init_img_with_mask,
                    inpaint_color_sketch,
-                    inpaint_color_sketch_orig,
                    init_img_inpaint,
                    init_mask_inpaint,
                    mask_blur,
@@ -801,9 +779,9 @@ def create_ui():
            res_switch_btn.click(fn=None, _js="function(){switchWidthHeight('img2img')}", inputs=None, outputs=None, show_progress=False)

            detect_image_size_btn.click(
-                fn=lambda w, h, _: (w or gr.update(), h or gr.update()),
+                fn=lambda w, h: (w or gr.update(), h or gr.update()),
                _js="currentImg2imgSourceResolution",
-                inputs=[dummy_component, dummy_component, dummy_component],
+                inputs=[dummy_component, dummy_component],
                outputs=[width, height],
                show_progress=False,
            )
@@ -8,7 +8,6 @@ from contextlib import nullcontext
 import gradio as gr

 from modules import call_queue, shared, ui_tempdir, util
-from modules.infotext_utils import image_from_url_text
 import modules.images
 from modules.ui_components import ToolButton
 import modules.infotext_utils as parameters_copypaste
@@ -115,10 +114,8 @@ def save_files(js_data, images, do_make_zip, index):
                writer.writerow(fields)

        for image_index, filedata in enumerate(images, start_index):
-            image = image_from_url_text(filedata)
-
+            image = filedata[0]
            is_grid = image_index < p.index_of_first_image
-
            p.batch_index = image_index-1

            parameters = parameters_copypaste.parse_generation_parameters(data["infotexts"][image_index], [])
@@ -184,7 +181,7 @@ def create_output_panel(tabname, outdir, toprow=None):

        with gr.Column(variant='panel', elem_id=f"{tabname}_results_panel"):
            with gr.Group(elem_id=f"{tabname}_gallery_container"):
-                res.gallery = gr.Gallery(label='Output', show_label=False, elem_id=f"{tabname}_gallery", columns=4, preview=True, height=shared.opts.gallery_height or None)
+                res.gallery = gr.Gallery(label='Output', show_label=False, elem_id=f"{tabname}_gallery", columns=4, preview=True, height=shared.opts.gallery_height or None, interactive=False, type="pil")

            with gr.Row(elem_id=f"image_buttons_{tabname}", elem_classes="image-buttons"):
                open_folder_button = ToolButton(folder_symbol, elem_id=f'{tabname}_open_folder', visible=not shared.cmd_opts.hide_ui_dir_config, tooltip="Open images output directory.")
@@ -1,7 +1,12 @@
+from functools import wraps
+
 import gradio as gr
+from modules import gradio_extensions  # noqa: F401


 class FormComponent:
+    webui_do_not_create_gradio_pyi_thank_you = True
+
    def get_expected_parent(self):
        return gr.components.Form

@@ -9,12 +14,13 @@ class FormComponent:
 gr.Dropdown.get_expected_parent = FormComponent.get_expected_parent


-class ToolButton(FormComponent, gr.Button):
+class ToolButton(gr.Button, FormComponent):
    """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)
+    @wraps(gr.Button.__init__)
+    def __init__(self, value="", *args, elem_classes=None, **kwargs):
+        elem_classes = elem_classes or []
+        super().__init__(*args, elem_classes=["tool", *elem_classes], value=value, **kwargs)

    def get_block_name(self):
        return "button"
@@ -22,7 +28,9 @@ class ToolButton(FormComponent, gr.Button):

 class ResizeHandleRow(gr.Row):
    """Same as gr.Row but fits inside gradio forms"""
+    webui_do_not_create_gradio_pyi_thank_you = True

+    @wraps(gr.Row.__init__)
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

@@ -32,79 +40,92 @@ class ResizeHandleRow(gr.Row):
        return "row"


-class FormRow(FormComponent, gr.Row):
+class FormRow(gr.Row, FormComponent):
    """Same as gr.Row but fits inside gradio forms"""

    def get_block_name(self):
        return "row"


-class FormColumn(FormComponent, gr.Column):
+class FormColumn(gr.Column, FormComponent):
    """Same as gr.Column but fits inside gradio forms"""

    def get_block_name(self):
        return "column"


-class FormGroup(FormComponent, gr.Group):
+class FormGroup(gr.Group, FormComponent):
    """Same as gr.Group but fits inside gradio forms"""

    def get_block_name(self):
        return "group"


-class FormHTML(FormComponent, gr.HTML):
+class FormHTML(gr.HTML, FormComponent):
    """Same as gr.HTML but fits inside gradio forms"""

    def get_block_name(self):
        return "html"


-class FormColorPicker(FormComponent, gr.ColorPicker):
+class FormColorPicker(gr.ColorPicker, FormComponent):
    """Same as gr.ColorPicker but fits inside gradio forms"""

    def get_block_name(self):
        return "colorpicker"


-class DropdownMulti(FormComponent, gr.Dropdown):
+class DropdownMulti(gr.Dropdown, FormComponent):
    """Same as gr.Dropdown but always multiselect"""
+
+    @wraps(gr.Dropdown.__init__)
    def __init__(self, **kwargs):
-        super().__init__(multiselect=True, **kwargs)
+        kwargs['multiselect'] = True
+        super().__init__(**kwargs)

    def get_block_name(self):
        return "dropdown"


-class DropdownEditable(FormComponent, gr.Dropdown):
+class DropdownEditable(gr.Dropdown, FormComponent):
    """Same as gr.Dropdown but allows editing value"""
+
+    @wraps(gr.Dropdown.__init__)
    def __init__(self, **kwargs):
-        super().__init__(allow_custom_value=True, **kwargs)
+        kwargs['allow_custom_value'] = True
+        super().__init__(**kwargs)

    def get_block_name(self):
        return "dropdown"


-class InputAccordion(gr.Checkbox):
+class InputAccordionImpl(gr.Checkbox):
    """A gr.Accordion that can be used as an input - returns True if open, False if closed.

    Actually just a hidden checkbox, but creates an accordion that follows and is followed by the state of the checkbox.
    """

+    webui_do_not_create_gradio_pyi_thank_you = True
+
    global_index = 0

-    def __init__(self, value, **kwargs):
+    @wraps(gr.Checkbox.__init__)
+    def __init__(self, value=None, setup=False, **kwargs):
+        if not setup:
+            super().__init__(value=value, **kwargs)
+            return
+
        self.accordion_id = kwargs.get('elem_id')
        if self.accordion_id is None:
-            self.accordion_id = f"input-accordion-{InputAccordion.global_index}"
-            InputAccordion.global_index += 1
+            self.accordion_id = f"input-accordion-{InputAccordionImpl.global_index}"
+            InputAccordionImpl.global_index += 1

        kwargs_checkbox = {
            **kwargs,
            "elem_id": f"{self.accordion_id}-checkbox",
            "visible": False,
        }
-        super().__init__(value, **kwargs_checkbox)
+        super().__init__(value=value, **kwargs_checkbox)

        self.change(fn=None, _js='function(checked){ inputAccordionChecked("' + self.accordion_id + '", checked); }', inputs=[self])

@@ -115,6 +136,7 @@ class InputAccordion(gr.Checkbox):
            "elem_classes": ['input-accordion'],
            "open": value,
        }
+
        self.accordion = gr.Accordion(**kwargs_accordion)

    def extra(self):
@@ -143,3 +165,6 @@ class InputAccordion(gr.Checkbox):
    def get_block_name(self):
        return "checkbox"

+
+def InputAccordion(value=None, **kwargs):
+    return InputAccordionImpl(value=value, setup=True, **kwargs)
@@ -688,7 +688,7 @@ def create_ui():

                config_save_button.click(fn=save_config_state, inputs=[config_save_name], outputs=[config_states_list, config_states_info])

-                dummy_component = gr.Label(visible=False)
+                dummy_component = gr.State()
                config_restore_button.click(fn=restore_config_state, _js="config_state_confirm_restore", inputs=[dummy_component, config_states_list, config_restore_type], outputs=[config_states_info])

                config_states_list.change(
@@ -750,9 +750,11 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
            elem_id = f"{tabname}_{page.extra_networks_tabname}_cards_html"
            page_elem = gr.HTML(page.create_html(tabname, empty=True), elem_id=elem_id)
            ui.pages.append(page_elem)
+
            editor = page.create_user_metadata_editor(ui, tabname)
            editor.create_ui()
            ui.user_metadata_editors.append(editor)
+
            related_tabs.append(tab)

    ui.button_save_preview = gr.Button('Save preview', elem_id=f"{tabname}_save_preview", visible=False)
@@ -5,14 +5,14 @@ from modules.ui_components import ResizeHandleRow


 def create_ui():
-    dummy_component = gr.Label(visible=False)
-    tab_index = gr.Number(value=0, visible=False)
+    dummy_component = gr.Textbox(visible=False)
+    tab_index = gr.State(0)

    with ResizeHandleRow(equal_height=False, variant='compact'):
        with gr.Column(variant='compact'):
            with gr.Tabs(elem_id="mode_extras"):
                with gr.TabItem('Single Image', id="single_image", elem_id="extras_single_tab") as tab_single:
-                    extras_image = gr.Image(label="Source", source="upload", interactive=True, type="pil", elem_id="extras_image", image_mode="RGBA")
+                    extras_image = gr.ImageEditor(label="Source", interactive=True, type="pil", elem_id="extras_image", image_mode="RGBA")

                with gr.TabItem('Batch Process', id="batch_process", elem_id="extras_batch_process_tab") as tab_batch:
                    image_batch = gr.Files(label="Batch Process", interactive=True, elem_id="extras_image_batch")
@@ -4,6 +4,7 @@ from collections import namedtuple
 from pathlib import Path

 import gradio.components
+import gradio as gr

 from PIL import PngImagePlugin

@@ -13,25 +14,35 @@ from modules import shared
 Savedfile = namedtuple("Savedfile", ["name"])


-def register_tmp_file(gradio, filename):
-    if hasattr(gradio, 'temp_file_sets'):  # gradio 3.15
-        gradio.temp_file_sets[0] = gradio.temp_file_sets[0] | {os.path.abspath(filename)}
+def register_tmp_file(gradio_app, filename):
+    if hasattr(gradio_app, 'temp_file_sets'):  # gradio 3.15
+        if hasattr(gr.utils, 'abspath'):  # gradio 4.19
+            filename = gr.utils.abspath(filename)
+        else:
+            filename = os.path.abspath(filename)

-    if hasattr(gradio, 'temp_dirs'):  # gradio 3.9
-        gradio.temp_dirs = gradio.temp_dirs | {os.path.abspath(os.path.dirname(filename))}
+        gradio_app.temp_file_sets[0] = gradio_app.temp_file_sets[0] | {filename}
+
+    if hasattr(gradio_app, 'temp_dirs'):  # gradio 3.9
+        gradio_app.temp_dirs = gradio_app.temp_dirs | {os.path.abspath(os.path.dirname(filename))}


-def check_tmp_file(gradio, filename):
-    if hasattr(gradio, 'temp_file_sets'):
-        return any(filename in fileset for fileset in gradio.temp_file_sets)
+def check_tmp_file(gradio_app, filename):
+    if hasattr(gradio_app, 'temp_file_sets'):
+        if hasattr(gr.utils, 'abspath'):  # gradio 4.19
+            filename = gr.utils.abspath(filename)
+        else:
+            filename = os.path.abspath(filename)

-    if hasattr(gradio, 'temp_dirs'):
-        return any(Path(temp_dir).resolve() in Path(filename).resolve().parents for temp_dir in gradio.temp_dirs)
+        return any(filename in fileset for fileset in gradio_app.temp_file_sets)
+
+    if hasattr(gradio_app, 'temp_dirs'):
+        return any(Path(temp_dir).resolve() in Path(filename).resolve().parents for temp_dir in gradio_app.temp_dirs)

    return False


-def save_pil_to_file(self, pil_image, dir=None, format="png"):
+def save_pil_to_file(pil_image, cache_dir=None, format="png"):
    already_saved_as = getattr(pil_image, 'already_saved_as', None)
    if already_saved_as and os.path.isfile(already_saved_as):
        register_tmp_file(shared.demo, already_saved_as)
@@ -39,9 +50,10 @@ def save_pil_to_file(self, pil_image, dir=None, format="png"):
        register_tmp_file(shared.demo, filename_with_mtime)
        return filename_with_mtime

-    if shared.opts.temp_dir != "":
+    if shared.opts.temp_dir:
        dir = shared.opts.temp_dir
    else:
+        dir = cache_dir
        os.makedirs(dir, exist_ok=True)

    use_metadata = False
@@ -56,9 +68,96 @@ def save_pil_to_file(self, pil_image, dir=None, format="png"):
    return file_obj.name


+async def async_move_files_to_cache(data, block, postprocess=False, check_in_upload_folder=False, keep_in_cache=False):
+    """Move any files in `data` to cache and (optionally), adds URL prefixes (/file=...) needed to access the cached file.
+    Also handles the case where the file is on an external Gradio app (/proxy=...).
+
+    Runs after .postprocess() and before .preprocess().
+
+    Copied from gradio's processing_utils.py
+
+    Args:
+        data: The input or output data for a component. Can be a dictionary or a dataclass
+        block: The component whose data is being processed
+        postprocess: Whether its running from postprocessing
+        check_in_upload_folder: If True, instead of moving the file to cache, checks if the file is in already in cache (exception if not).
+        keep_in_cache: If True, the file will not be deleted from cache when the server is shut down.
+    """
+
+    from gradio import FileData
+    from gradio.data_classes import GradioRootModel
+    from gradio.data_classes import GradioModel
+    from gradio_client import utils as client_utils
+    from gradio.utils import get_upload_folder, is_in_or_equal, is_static_file
+
+    async def _move_to_cache(d: dict):
+        payload = FileData(**d)
+
+        # EDITED
+        payload.path = payload.path.rsplit('?', 1)[0]
+
+        # If the gradio app developer is returning a URL from
+        # postprocess, it means the component can display a URL
+        # without it being served from the gradio server
+        # This makes it so that the URL is not downloaded and speeds up event processing
+        if payload.url and postprocess and client_utils.is_http_url_like(payload.url):
+            payload.path = payload.url
+        elif is_static_file(payload):
+            pass
+        elif not block.proxy_url:
+            # EDITED
+            if check_tmp_file(shared.demo, payload.path):
+                temp_file_path = payload.path
+            else:
+                # If the file is on a remote server, do not move it to cache.
+                if check_in_upload_folder and not client_utils.is_http_url_like(
+                    payload.path
+                ):
+                    path = os.path.abspath(payload.path)
+                    if not is_in_or_equal(path, get_upload_folder()):
+                        raise ValueError(
+                            f"File {path} is not in the upload folder and cannot be accessed."
+                        )
+                if not payload.is_stream:
+                    temp_file_path = await block.async_move_resource_to_block_cache(
+                        payload.path
+                    )
+                    if temp_file_path is None:
+                        raise ValueError("Did not determine a file path for the resource.")
+                    payload.path = temp_file_path
+                    if keep_in_cache:
+                        block.keep_in_cache.add(payload.path)
+
+        url_prefix = "/stream/" if payload.is_stream else "/file="
+        if block.proxy_url:
+            proxy_url = block.proxy_url.rstrip("/")
+            url = f"/proxy={proxy_url}{url_prefix}{payload.path}"
+        elif client_utils.is_http_url_like(payload.path) or payload.path.startswith(
+            f"{url_prefix}"
+        ):
+            url = payload.path
+        else:
+            url = f"{url_prefix}{payload.path}"
+        payload.url = url
+
+        return payload.model_dump()
+
+    if isinstance(data, (GradioRootModel, GradioModel)):
+        data = data.model_dump()
+
+    return await client_utils.async_traverse(
+        data, _move_to_cache, client_utils.is_file_obj
+    )
+
+
 def install_ui_tempdir_override():
-    """override save to file function so that it also writes PNG info"""
-    gradio.components.IOComponent.pil_to_temp_file = save_pil_to_file
+    """
+    override save to file function so that it also writes PNG info.
+    override gradio4's move_files_to_cache function to prevent it from writing a copy into a temporary directory.
+    """
+
+    gradio.processing_utils.save_pil_to_cache = save_pil_to_file
+    gradio.processing_utils.async_move_files_to_cache = async_move_files_to_cache


 def on_tmpdir_changed():
@@ -8,7 +8,7 @@ diskcache
 einops
 facexlib
 fastapi>=0.90.1
-gradio==3.41.2
+gradio==4.38.1
 inflection
 jsonmerge
 kornia
@@ -7,8 +7,8 @@ clean-fid==0.1.35
 diskcache==5.6.3
 einops==0.4.1
 facexlib==0.3.0
-fastapi==0.94.0
-gradio==3.41.2
+fastapi==0.104.1
+gradio==4.38.1
 httpcore==0.15
 inflection==0.5.1
 jsonmerge==1.8.0
@@ -2,14 +2,6 @@

@import url('webui-assets/css/sourcesanspro.css');

-
-/* temporary fix to hide gradio crop tool until it's fixed https://github.com/gradio-app/gradio/issues/3810 */
-
-div.gradio-image button[aria-label="Edit"] {
-    display: none;
-}
-
-
 /* general gradio fixes */

 :root, .dark{
@@ -137,6 +129,10 @@ div.gradio-html.min{
    background: var(--input-background-fill);
 }

+.gradio-gallery > button.preview{
+    width: 100%;
+}
+
 .gradio-container .prose a, .gradio-container .prose a:visited{
    color: unset;
    text-decoration: none;
@@ -147,6 +143,15 @@ a{
    cursor: pointer;
 }

+.upload-container {
+    width: 100%;
+    max-width: 100%;
+}
+
+.layer-wrap > ul {
+    background: var(--background-fill-primary) !important;
+}
+
 /* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reason. */
 div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown{
    overflow: visible !important;
@@ -398,7 +403,7 @@ div#extras_scale_to_tab div.form{
    z-index: 5;
 }

-.image-buttons > .form{
+.image-buttons{
    justify-content: center;
 }

@@ -1098,9 +1103,9 @@ footer {
    height:100%;
 }

-div.block.gradio-box.edit-user-metadata {
+.edit-user-metadata {
    width: 56em;
-    background: var(--body-background-fill);
+    background: var(--body-background-fill) !important;
    padding: 2em !important;
 }

@@ -1134,16 +1139,12 @@ div.block.gradio-box.edit-user-metadata {
    margin-top: 1.5em;
 }

-div.block.gradio-box.popup-dialog, .popup-dialog {
+.popup-dialog {
    width: 56em;
-    background: var(--body-background-fill);
+    background: var(--body-background-fill) !important;
    padding: 2em !important;
 }

-div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-child{
-    margin-top: 1em;
-}
-
 div.block.input-accordion{

 }
Author	SHA1	Message	Date
missionfloyd	623ce9ef50	Downgrade Gradio to 4.38.1 ImageEditor color switching is broken on newer versions.	2024-09-08 22:52:10 -06:00
missionfloyd	3e94d2216c	Bump Gradio to 4.42.0 Fixes the API docs	2024-09-04 19:46:13 -06:00
missionfloyd	5ad03e6586	Merge branch 'dev' into gradio4	2024-09-04 15:21:47 -06:00
missionfloyd	077d55545e	Hide layers menu for inpaint	2024-09-04 15:14:44 -06:00
missionfloyd	c6cc80eed7	Don't import Brush separately	2024-09-01 21:38:43 -06:00
AUTOMATIC1111	48239090f1	Merge branch 'master' into dev	2024-07-27 15:50:26 +03:00
AUTOMATIC1111	850e14923e	Merge pull request #16275 from AUTOMATIC1111/fix-image-upscale-on-cpu fix image upscale on cpu	2024-07-27 15:47:49 +03:00
w-e-w	8e0881d9ab	fix image upscale on cpu for some reason upscale using cpu will fail with RuntimeError: Inplace update to inference tensor outside InferenceMode switch from no_grad to inference_mode seems to have fixed it	2024-07-27 21:28:10 +09:00
AUTOMATIC1111	834297b13d	Merge branch 'master' into dev	2024-07-27 07:09:08 +03:00
missionfloyd	d5de55f26c	Fix image editor layer menu appearance	2024-04-27 20:58:40 -06:00
missionfloyd	953e12095c	Fix extras task id Fix restore extension config	2024-04-25 22:50:14 -06:00
missionfloyd	26e78a7ee2	Fix img2img parameters	2024-04-25 21:13:54 -06:00
missionfloyd	5e4cfb8bb1	Fix sending images from gallery	2024-04-25 19:39:53 -06:00
missionfloyd	e6f46a94ad	Merge branch 'gradio4' of https://github.com/AUTOMATIC1111/stable-diffusion-webui into gradio4	2024-04-25 18:36:32 -06:00
missionfloyd	ca59516fa1	Copy img2img layers	2024-04-25 18:36:29 -06:00
missionfloyd	2f75ae9f2c	Change init_images default back to None	2024-04-25 00:15:13 -06:00
missionfloyd	43e893ce2a	Get API working Docs still doesn't work.	2024-04-24 23:53:01 -06:00
missionfloyd	4e8dfa3af5	Make gallery return images	2024-04-22 00:54:16 -06:00
missionfloyd	dcb73d4373	Fix save button	2024-04-21 18:29:33 -06:00
missionfloyd	e643abda93	Remove unused import	2024-04-21 18:21:11 -06:00
missionfloyd	8356e6beae	Lint	2024-04-21 18:18:47 -06:00
missionfloyd	32281b272e	Merge branch 'dev' into gradio4	2024-04-21 18:15:55 -06:00
missionfloyd	cd9f740668	Update move_files_to_cache	2024-04-21 17:59:29 -06:00
missionfloyd	f805f7384b	Lint	2024-04-21 16:58:20 -06:00
missionfloyd	2d8d54def5	Fix empty override settings Apparently empty dropdowns now return None	2024-04-21 16:55:27 -06:00
missionfloyd	77f9222599	Bump gradio to 4.27.0	2024-04-21 14:50:13 -06:00
catboxanon	492f902454	Fix merge errors	2024-03-24 16:38:02 -04:00
catboxanon	25f636cb3a	Merge branch 'dev' into gradio4	2024-03-24 16:26:38 -04:00
AUTOMATIC1111	40e4ca99c5	Merge branch 'dev' into gradio4	2024-03-02 11:32:08 +03:00
AUTOMATIC1111	c167861d91	fix line endings for gradio.js	2024-03-02 08:48:34 +03:00
AUTOMATIC1111	b63dda3f45	linter	2024-03-02 08:43:46 +03:00
AUTOMATIC1111	50699ce112	more fixes for latest gradio	2024-03-02 08:40:06 +03:00
AUTOMATIC1111	f7a3067d2a	Merge branch 'dev' into gradio4	2024-03-02 08:27:22 +03:00
AUTOMATIC1111	3ee79332b1	update to latest gradio	2024-03-02 08:25:10 +03:00
w-e-w	43850655d9	remove timestamp from path	2024-02-05 17:57:06 +09:00
AUTOMATIC1111	28899117da	Merge pull request #14818 from daswer123/zoom-fix Zoom & Pan: More fixes for gradio 4	2024-02-02 12:30:44 +03:00
Danil Boldyrev	7af009deb5	moved the part of code to a more suitable place, lint	2024-02-02 02:14:54 +03:00
Danil Boldyrev	9ccdbe2f84	fix caused unnecessary borders when the cursor leaves the drawing area	2024-02-02 01:40:25 +03:00
Danil Boldyrev	02e9c79ec5	Fixed a bug with the cursor size when scrolling When scrolling there is a bug, a gradio bug, because of which a parameter breaks the cursor size and it becomes bigger, so I made a solution that gets rid of this problem	2024-02-02 01:32:13 +03:00
AUTOMATIC1111	8d2053a2e6	Merge pull request #14816 from daswer123/zoom-fix Zoom & Pan: fix for gradio 4	2024-02-01 22:01:59 +03:00
Danil Boldyrev	b389727e31	place the cursor next to the original	2024-02-01 16:00:23 +03:00
Danil Boldyrev	7eda3319de	Remove unused code and lint	2024-02-01 15:43:01 +03:00
Danil Boldyrev	c2ab058897	Made the zoom functionality work, both for drawing and erasing	2024-02-01 15:20:21 +03:00
Danil Boldyrev	a08eff391e	Temporary fix that returns functionality when sending via buttons	2024-02-01 12:13:25 +03:00
Danil Boldyrev	733f8c7c51	fix fitToScreen and adjustBrushSize funcs in zoom.js	2024-02-01 11:46:20 +03:00
Danil Boldyrev	ca7ba7d394	Fix the startup zoom error	2024-02-01 11:29:06 +03:00
AUTOMATIC1111	5e37bf66c1	lint	2024-01-27 12:10:37 +03:00
AUTOMATIC1111	cee0bf8464	fix send to tab and hires upscale button	2024-01-27 12:05:26 +03:00
AUTOMATIC1111	91d1034d8d	mark output gallery as non-editable	2024-01-27 11:36:00 +03:00
AUTOMATIC1111	816390938f	fix js error at startup	2024-01-27 11:35:39 +03:00
AUTOMATIC1111	cf08f5b4d2	linter	2024-01-27 11:17:47 +03:00
AUTOMATIC1111	9dd3b2a10b	solve some of issues with img2img copy to tab functionality	2024-01-27 11:12:59 +03:00
AUTOMATIC1111	67285e3478	remove gradio warning for refiner checkpoint	2024-01-27 10:37:17 +03:00
AUTOMATIC1111	983b58b897	Merge branch 'dev' into gradio4	2024-01-27 10:19:27 +03:00
AUTOMATIC1111	08f1926f30	repair resolution calculation for img2img	2024-01-07 20:45:24 +03:00
AUTOMATIC1111	174b71994f	remove img2img editor height option, because it breaks gradio 4 image editors	2024-01-07 20:45:12 +03:00
AUTOMATIC1111	c43f7a874f	align the image in the gallery	2024-01-07 20:24:28 +03:00
AUTOMATIC1111	cc6f27614b	make it possible again to serve saved pictures without writing them to a temporary directory	2024-01-07 20:20:24 +03:00
AUTOMATIC1111	d51619e53b	bump gradio version	2024-01-07 20:19:24 +03:00
missionfloyd	83e0eb094f	Fix displaying images that haven't already been saved Still copies already_saved_as images to temp.	2023-12-28 18:10:58 -07:00
missionfloyd	945cb97996	Merge branch 'gradio4' of https://github.com/automatic1111/stable-diffusion-webui into gradio4	2023-12-21 21:34:54 -07:00
missionfloyd	745efef08d	Expand gr.Image() dropzone to fill component	2023-12-21 21:34:02 -07:00
w-e-w	f604c29191	fix extras caption BLIP	2023-12-22 13:22:29 +09:00
missionfloyd	654ca97fe3	Fix extras BLIP caption	2023-12-21 21:06:30 -07:00
missionfloyd	6b4f147a07	Fix img2img interrogate	2023-12-21 19:03:25 -07:00
missionfloyd	92b33344bf	Remove unused import	2023-12-17 22:09:19 -07:00
missionfloyd	af71f64ad8	Fix saving images from gallery	2023-12-17 22:07:12 -07:00
missionfloyd	eb41c73b96	Lint	2023-12-17 00:58:25 -07:00
missionfloyd	5b636b3105	Make extras work again Not all postprocessing scripts work	2023-12-17 00:43:18 -07:00
missionfloyd	a8e41f585e	Fix "detect image size" button	2023-12-09 20:02:03 -07:00
missionfloyd	2daf98a5b6	Fix aspect ratio overlay Make it work on inpaint upload tab	2023-12-08 23:06:59 -07:00
missionfloyd	5742836180	Simplify inpaint sketch mask	2023-12-06 22:01:11 -07:00
missionfloyd	b5e7135ad8	Remove unused import	2023-12-05 20:47:01 -07:00
missionfloyd	9d1385de50	Fix sketch, inpaint sketch Seems to work right, anyway. Added webcam source. Some img2img modes may now be redundant.	2023-12-05 20:45:19 -07:00
missionfloyd	df14dc215c	Change img2img_selected_tab back to gr.State	2023-12-05 06:56:40 -07:00
missionfloyd	10791e7d35	Fix inpaint	2023-12-04 22:40:40 -07:00
missionfloyd	0d9b431571	Fix img2img	2023-12-04 21:48:24 -07:00
missionfloyd	d6271939d0	Fix popup CSS (mostly) Center image buttons	2023-12-03 22:51:09 -07:00
missionfloyd	64fb3d16a9	Fix fullscreen image viewer	2023-12-03 21:48:11 -07:00
AUTOMATIC1111	b8040e4ab9	linter	2023-12-03 17:10:13 +03:00
AUTOMATIC1111	656c6a5f4d	make extra networks work again	2023-12-03 16:56:47 +03:00
AUTOMATIC1111	8b2c562fb1	remove the code that breaks extra networks	2023-12-03 16:49:33 +03:00
AUTOMATIC1111	051375258c	gradio4	2023-12-03 16:44:03 +03:00