Nice Job.

[MrKuenning]

Just wanted to thank you for this extension it's very useful!

Fantastic Friends/Family/Kids Mode!

I have an extension that lets me collapse setting sliders into an accordion. It works well with your all settings go away button.

Settings expanded

Settings Collapsed

Settings GONE

[VekkaAi]

haha that`s cool

I wanted to make it an accordion too, but I just bypassed it like that. I'm not very good at it since I just started developing. As a result, I think it's more accessible on mobile. So I'm happy with it.

cheers!

[MrKuenning]

I did not write most of it, I had a lot of help. Here is the JS for the settings accordian.

// Create a variable to track if the code has been run yet
var init = false;

// This function is automatically called by automatic1111 when the UI is updated
onUiUpdate(function() {
  // This code should only be run once, so if init is true dont do anything. Init is set after we complete this the first time.
  if(!init) {
    // Get all the elements you are interested in and put them into an object to make the later code a bit cleaner
    let settingsObjects = [
      { // Text2Image elements
        settingsElement: document.getElementById('txt2img_settings'),
        scriptContainer:  document.getElementById('txt2img_script_container'),
        excludeElements: [
            'txt2img_script_container' // The sliders and other settings
        ]
      },
      { // Image2Image elements
        settingsElement: document.getElementById('img2img_settings'),
        scriptContainer:  document.getElementById('img2img_script_container'),
        excludeElements: [
            'mode_img2img', // The source image of img2img
          'img2img_script_container' // The sliders and other settings
        ]
      }
    ];
    // If both settings elements exist that means the page is done loading and we can now wrap them in an accordion style element
    if(typeof settingsObjects[0].settingsElement != "undefined" && typeof settingsObjects[1].settingsElement != "undefined") {
      // Loop through each object in the array we created earlier
      settingsObjects.forEach(obj => {

        // Create the inner accordion

        // Create another details element. This will be the inner accordion element
        const innerDetails = document.createElement("details");

        // Create a summary element. This will contain the label text of the inner accordion
        const innerSummary = document.createElement("summary");
        innerSummary.textContent = "Settings";

        // Add the summary element to the inner details element (aka the inner accordion)
        innerDetails.appendChild(innerSummary);

        // Set the inner accordion panel to open by default
        innerDetails.open = true;

        // Add a class to the accordion so it is easier to write styles that target this element
        innerDetails.classList = "custom-accordion";

        // Loop through each child of the main accordion and add the appropriate elements to the inner accordion
        Array.from(obj.settingsElement.children).forEach(childEl => {
          // If this is a valid child and not one of the excluded elements add it to the inner accordion
          if(childEl != null && typeof childEl != 'undefined' && !obj.excludeElements.includes(childEl.getAttribute('id')) && childEl.getAttribute('id') != obj.scriptContainer) {
            innerDetails.appendChild(childEl);
          }
        });

        // Add the created inner accordion element into settings element above the scripts container element.
        obj.settingsElement.insertBefore(innerDetails, obj.scriptContainer);
      });

      // Now that we are done, set init to true so that it doesn't run more than once
      init = true;
    }
  }
});

User.css

.custom-accordion {
    position: relative;
    margin: 0;
    box-shadow: var(--block-shadow);
    border-width: var(--block-border-width);
    border-color: var(--block-border-color);
    border-radius: 8px !important;
    background: var(--background-fill-secondary);
    width: 100%;
    line-height: var(--line-sm);
    padding: var(--block-padding);
    cursor: pointer;
    user-select: text;
}

.custom-accordion > summary {
    font-weight: var(--section-header-text-weight);
    font-size: var(--section-header-text-size);
}

[MrKuenning]

Another thing I have in my user.css is moving the additional networks below everything.

/* Move Networks below everything */
#tab_txt2img #txt2img_toprow ~ .form,
#tab_img2img #img2img_extra_networks {
  order: 1 !important;
}

I have over 1200 LoRAs and I found moving them to to bottom of the screen makes my workflow much easier. It also works well with your lock icon.