Nothing shows up when click on "edit"

[kendrick0210]

After installing the extension, there is nothing shows up for edit. The button seems to do nothing. And the buttons layout is also different from yours. The buttons appear below the preview box instead of the right side next to it. No new lines are shown on the cmd when I click on the "edit" button. Please help, thank you.

PS: I am able to use it with "http://localhost:7860/openpose_editor_index" and manually upload and download json.

[huchenlei]

Can you attach console output? Output from both Browser devtools console and WebUI commandline.

[kendrick0210]

[huchenlei]

Can you reveal the DOM structure in devtools? Something like this:

The highlighted element is reported not found in your case according to console output.

[kendrick0210]

Sorry, I am not sure how to get to the line you are in.

[huchenlei]

Right click on the edit button and select inspect. From there you might want to expand some element to get the state in my screenshot.

[kendrick0210]

Look like around here

[huchenlei]

Hmmm, it seems more complicated.

Can you put some breakpoints like in this screenshot?

I am interested in whether we get the modal in line15. If that is the case, it means the button is present in the DOM, but the modal is not.

Try replace the modal.js with following content to see it solves your issue:

const cnetModalRegisteredElements = new Set();
onUiUpdate(() => {
    // Get all the buttons that open a modal
    const btns = gradioApp().querySelectorAll(".cnet-modal-open");

    // Get all the <span> elements that close a modal
    const spans = document.querySelectorAll(".cnet-modal-close");

    // For each button, add a click event listener that opens the corresponding modal
    btns.forEach((btn) => {
        if (cnetModalRegisteredElements.has(btn)) return;
        const modalId = btn.id.replace('cnet-modal-open-', '');
        const modal = document.getElementById("cnet-modal-" + modalId);
        if (!modal) return;
        btn.addEventListener('click', () => {
            modal.style.display = "block";
        });
        cnetModalRegisteredElements.add(btn);
    });

    // For each <span> element, add a click event listener that closes the corresponding modal
    spans.forEach((span) => {
        if (cnetModalRegisteredElements.has(span)) return;
        cnetModalRegisteredElements.add(span);

        const modal = span.parentNode;
        span.addEventListener('click', () => {
            modal.style.display = "none";
        });
    });
});

[kendrick0210]

Tried replace the code. doesn't solve the problem. This is the screenshot.

[huchenlei]

So after the code change, it stops complaining that the element is not found? What is the modalId at the breakpoint?

[kendrick0210]

The red highlighted error no longer appear in the browser devtools console. I dont know how to get the modalID....

[huchenlei]

Refresh the page with the devtools open. When the execution is paused at line 13, you should see modalId in the Scope panel on the right.

[kendrick0210]

[huchenlei]

Strange. As you just checked, modal0 exists, and here the modalId is 0. Does the function returns at line 14?

[kendrick0210]

sorry, how do I check it?

[huchenlei]

You put a breakpoint at line 14, and see whether modal object is null in the scope panel.

[kendrick0210]

[huchenlei]

I have no clue why it does not work. In theory if at the time modal is null, next time on UI update, when the modal is present, it will register that callback on the edit button.

It is also very wield why your buttons are not controlled by the CSS. Do you have other extensions/customizations changing the CSS?

I saw in eariler screenshots the style.css is properly loaded, so it should not be CSS not loading.

[kendrick0210]

I tried to disable all other extensions with only the editor and controlnet active but its still not working. It is also weird that the "close" button (I suppose it is a button), i can't even click on it. It is like it is a text string. The cursor doesn't change when it hover over the text "close". The only button seems to be working is just the JSON button.

[huchenlei]

So close button also not working under all conditions? That can be really wield as close button's js has been there for a long while. It is bound using gradio _js.

When does this issue start to happen. Is it after a certain ControlNet version? Was the close button working before?

[kendrick0210]

This appears when I try to click the "close" button. Not sure since when it happen. Didn't use much before. But I did try reinstall the both controlnet and editor. But I am not 100% sure how to I uninstall it. Do I just delete the folder in the extension folder? I did that and reinstall from URL. Maybe I try to reinstall everything first.

[kendrick0210]

Hi, after reinstalling everything, including python, stable diffusion and extensions. Now it works perfectly. Thank you for your patience trying to help me out. Thanks.