[Issue]: Cozy Nest won´t load on Automatic1111 v 1.7.0 - There was an error while loading Cozy Nest. Ui will fallback to default.

[Medard22]

What happened?

Cozy Nest won´t start on Automatic1111 v 1.7.0. It displays the message: There was an error while loading Cozy Nest. Ui will fallback to default.

Webui

Automatic1111's webui

What browsers are you seeing the problem on?

Something else (please specify)

Additional info

Brave Browser, but it happens in Opera and Firefox as well.

Relevant browser log output

Failed to init Cozy Nest TypeError: Cannot read properties of undefined (reading 'querySelectorAll')
    at iq (index.js?t=1702812966161:530:42140)
    at c (index.js?t=1702812966161:586:8225)
    at Eq (index.js?t=1702812966161:586:8250)
    at rb (index.js?t=1702812966161:586:5159)
    at index.js?t=1702812966161:586:9912
    at new Promise (<anonymous>)
    at Tq (index.js?t=1702812966161:586:9896)
    at async nne (index.js?t=1702812966161:1936:31126)
rb @ index.js?t=1702812966161:586
(anonymous) @ index.js?t=1702812966161:586
Tq @ index.js?t=1702812966161:586
index.js?t=1702812966161:143 CozyNest: ERROR loading CozyNest.
error @ index.js?t=1702812966161:143
(anonymous) @ index.js?t=1702812966161:586
rb @ index.js?t=1702812966161:586
(anonymous) @ index.js?t=1702812966161:586
Tq @ index.js?t=1702812966161:586

Relevant log output from the webui

There is no relevant error in the webui console window. Only :

[CozyNest:INFO] version: 2.4.4 on auto1111
[CozyNest:INFO] CozyNest: Image browser is disabled. To enable it, go to the CozyNest settings.

Checklist

• I have searched the issues to make sure this is not a duplicate
• Webui is up to date
• Cozy-Nest is up to date
• All my extensions are up to date

[Blendz101]

If you downloaded it from the extensions port on SD it probably won't work. I re downloaded it as a zip file from github into my extensions folder extracted it and it works now.

[Medard22]

I tried to update the files manually, but it didn´t work. I eventually found out that deleting nevyui_settings.json will make the UI load, but it´s still pretty broken.

[sucr4m]

Not OP and im no webdev but it seemed to have some probs with other extensions so i temporarily removed them aaaaand, its still not working. got the same error messege and my browser console looks almost the same as OPs:

index.js?t=1706153464406:586 Failed to init Cozy Nest TypeError: Cannot read properties of undefined (reading 'querySelectorAll')
at iq (index.js?t=1706153464406:530:42140)
at c (index.js?t=1706153464406:586:8225)
at Eq (index.js?t=1706153464406:586:8250)
at rb (index.js?t=1706153464406:586:5159)
at index.js?t=1706153464406:586:6788
rb @ index.js?t=1706153464406:586
index.js?t=1706153464406:143 CozyNest: ERROR loading CozyNest.
error @ index.js?t=1706153464406:143

tried it in chrome and firefox. adblock origin is disabled for my local ip.
too bad i would have really loved to try this.

edit: screenshot from FF console. appearently it thinks im running sd next? obviously i tried to restart the server several times. :\

https://i.imgur.com/cy3YC6R.png

another edit: tried older versions, no dice. i give up for now.

[TGrade]

I debugged it and looks like this change is able to make it at least load #197
Not in the mood to study what ui was prior to 1.6.x and what we have now to be able to tell if this is indeed a fix.
But generation seem to work, but unfortunatly there is some issue with networks loading...

EDIT: Ok. I think it works. Networks error was actually due to one of the metadata files in my models folder. removed the file for an easy win

[DesBlock]

Created a temporary fix. I just started using stable diffusion so I'm unsure of the ui structure pre-1.7.0 so this might miss an entire part of the ui, but the end results seems to match the screenshots and everything looks good on my end.

The issue appears to be a missing entry in the array when doing querySelectorAll so you just reference the first value (seems that whatever selection created 2 entries before now only creates 1)

If you build index.js from scratch simply change previewBlocks[1] to previewBlocks[0] within /cozy-nest-client/main/tweaks/various-tweaks.js

export const wrapDataGenerationInfo = ({prefix}) => {
  // Get the generation info container
  const previewBlocks = document.querySelectorAll(`#tab_${prefix} div#${prefix}_results > *:not(#${prefix}_results)`);
  const generationInfoContainer = previewBlocks[0].querySelectorAll(`#html_info_${prefix}, #html_log_${prefix}`);

  // Create the new container element and add a class for styling
  const wrapper = document.createElement('div');
  wrapper.classList.add('preview-block-wrapper');

  // Create the show/hide button element and add a click event listener
  const toggleButton = document.createElement('button');
  toggleButton.id = 'toggleGenInfoButton';
  toggleButton.classList.add('nevysha', 'lg', 'primary', 'gradio-button', 'btn');
  toggleButton.textContent = 'Show/Hide Generation Info';
  toggleButton.addEventListener('click', () => {
    generationInfoContainer.forEach((el) => el.style.display = el.style.display === 'none' ? '' : 'none');
  });

  // Add the toggle button and generation info container to the wrapper
  wrapper.appendChild(toggleButton);
  generationInfoContainer.forEach((el) => wrapper.appendChild(el));

  // Add the wrapper container at the end of the previewBlocks[0] container
  previewBlocks[0].appendChild(wrapper);

  // Hide the generation info container by default
  generationInfoContainer.forEach((el) => el.style.display = 'none');

  // Remove the inline style from the previewBlocks[0] container
  previewBlocks[0].style = "";
}

If you don't want to build from source you can be a rebel and edit the compile js directly and it will still work. Find the section below within /client/assets/index.js

{ const t = document.querySelectorAll(`#tab_${e} div#${e}_results > *:not(#${e}_results)`), n = t[1].querySelectorAll(`#html_info_${e}, #html_log_${e}`), r = document.createElement("div"); r.classList.add("preview-block-wrapper"); const i = document.createElement("button"); i.id = "toggleGenInfoButton", i.classList.add("nevysha", "lg", "primary", "gradio-button", "btn"), i.textContent = "Show/Hide Generation Info", i.addEventListener("click", () => { n.forEach(o => o.style.display = o.style.display === "none" ? "" : "none") }), r.appendChild(i), n.forEach(o => r.appendChild(o)), t[1].appendChild(r), n.forEach(o => o.style.display = "none"), t[1].style = "" };

and change the 3 instances of t[1] to t[0] like so.

{ const t = document.querySelectorAll(`#tab_${e} div#${e}_results > *:not(#${e}_results)`), n = t[0].querySelectorAll(`#html_info_${e}, #html_log_${e}`), r = document.createElement("div"); r.classList.add("preview-block-wrapper"); const i = document.createElement("button"); i.id = "toggleGenInfoButton", i.classList.add("nevysha", "lg", "primary", "gradio-button", "btn"), i.textContent = "Show/Hide Generation Info", i.addEventListener("click", () => { n.forEach(o => o.style.display = o.style.display === "none" ? "" : "none") }), r.appendChild(i), n.forEach(o => r.appendChild(o)), t[0].appendChild(r), n.forEach(o => o.style.display = "none"), t[0].style = "" };

@Nevysha if you want me to submit a pull request just let me know.