ExtraNetworks: Performance Updates and Improvements

[Sj-Si]

⚠️ THE FOLLOWING COMMENT IS THE MOST UP-TO-DATE STATUS OF THIS PR. START THERE: ⚠️

https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/15530#issuecomment-2143495801

⚠️ DESCRIPTION BELOW THIS POINT IS OUT OF DATE ⚠️

Description

This PR is a complete overhaul of the code that I previously wrote for the ExtraNetworksTreeView PR (https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/14588) in response to the negative feedback such as in https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/15164 and various issues that have been posted.

The goal of this PR is to improve performance and reduce resource use across ExtraNetworks tabs.

I have tested these changes with up to 100,000 models at a time. With this many models, the initial load is slow but as soon as the server fully generates the dataset it performs very well. Before, my browser would just crash if I even tried to load the page with more than 50k models. The real limiting factor here is the server (though it takes quite a bit to reach the limit). Right now, ui_extra_networks.py is generating the HTML for all of the files it discovers in any of the models directories. It then waits for requests from the client and sends only the requested items HTML back to the client. This way the client doesn't have massive amounts of DOM elements constantly loaded. So as long as the device running the server can load the generated HTML for every single item in the models folders then it should be fine. I don't see this being an issue until some psycho comes along with 10 million models but I don't really think we should be pandering to such a niche audience. Even then, I think other things will crash before this new code does.

Sorry ahead of time... this is a big one.

The following has changed:

• Implemented a modified version of Clusterize.js to allow for an asynchronous data loader.
  • This allows us to offload generating and storing HTML strings to the server instead of the client.
  • HTML strings for tree/card elements are generated in the python server and only fetched by the client via JavaScript when they are needed. Fetching is done in smaller chunks to reduce overhead.
  • Set up a pseudo paging system to use as a cache for fetched HTML elements. This way we can reduce the number of times we fetch data from the server.
• Reduced DOM complexity by minimizing the amount of nested elements in the tree/cards views.
• Created all new SVG icons for the ExtraNetworks tab controls.
  • Accidentally went on a tangent and ended up learning how SVGs work.
  • I designed all of these SVGs so we don't have to worry about licensing crap.
    • I'm not a graphics artist in any way so feel free to change these designs as needed or draw up a sample and I'll try to update it.
• Created a utils.js file and added a lot of helpful utility functions that could probably be used elsewhere if needed.
• Tab now allows use of both the tree and directory views at same time.
  • Selecting a filter button in one view selects the corresponding button in the other view.
• Fixed various bugs that went undiscovered in my previous implementation.
• Added a custom event that fires whenever a resizeHandle.js handle is double clicked.
  • This allowed me to implement an auto-resize function on the tree view whenever the resize handle is double clicked. This automatically sets the width of the tree view to the width of the widest row in the list.
• Added an option to only show directories in the tree view per some user's request.
• Updated CSS to use variables instead of hardcoded values.
  • This way these changes should be way more compatible with custom themes.

UI Changes

Below is an example of what the new format looks like:

Controls

The controls have been grouped with a header to hopefully make their intent more obvious.

Directory View

Directory view buttons have been styled a bit better and now the selected directory will be highlighted.

Tree View

Slightly modified the appearance of the tree view and simplified the code that generates it. Also directories in the tree view are no longer expanded when the item itself is clicked. Now the user must click the chevron on a directory in order to expand it.

Checklist:

• [x] I have read contributing wiki page
• [x] I have performed a self-review of my own code
• [x] My code follows the style guidelines
• [x] My code passes tests

  :warning: Can't run tests with my environment however the tests in CI did pass.

Additional Notes

Someone suggested that we use emojis for the controls in the extra networks tabs. Personally I hate emojis and they look disgusting. On top of that, I couldn't find any that really fit the purpose of each of the controls. If someone has a theme (like lobo or whatever) then they can handle replacing these SVGs if they want. The SVGs are all easy to query so they can handle a find/replace if they want.

One thing that I couldn't figure out is how to manually trigger the gradio loading icon within the extra networks pane (see below):

This loading page appears whenever the page is reloaded or refreshed but I would have liked to have been able to manually trigger it to show up and stay there until the data is fully loaded but I couldn't figure out where this loading pane was even coming from. I'd really like to be able to put one in the Tree View and one in the Cards View. Then I would trigger each manually whenever I need to load more data.

Also at some point someone requested that clicking one of the directory view buttons to filter cards should only show direct children of that directory and not any of the nested directory content. What was the consensus on this? Should that be the behavior or do we prefer to show all nested items? The current behavior is the same as it always has been and it is a pretty simple implementation where clicking a button simply adds that path to the search box and updates the filter based on the search box text. Changing the behavior of clicking directory buttons would definitely require a bit of redesign and I think this change has already had enough scope creep as is.

Needs Testing

I would like to have this feature undergo a bit more testing than the last time in order to avoid having so many people get upset at the same time. I'd really appreciate feedback for this PR so that we can catch as many problems as possible before merging.

I have really only tested in the following environment:

• Server running on WSL Ubuntu
• Client connecting via Chrome on Windows 10 (localhost:7860)

[Sj-Si]

~~tree view items are sorted fully by name at the moment... working on fix so subdirectories are ordered with directories first and files second and each of these groups sorted with natural sort.~~

FIXED

[Sj-Si]

@MrKuenning @MNeMoNiCuZ @Vesperindustrial @kaalibro @Dasor92 @tsjslgy @remixer-dec

I'm tagging you all because you expressed frustration or found problems with the previous implementation of the tree view and the changes to the extra networks tab in general.

I'd appreciate it if you could do just a quick test of these changes on your end and see if things are working better or if there is anything that you would like to see done differently.

Also I don't know if tagging people like this will even give them a notification on GitHub so we'll see, I guess...

[Dasor92]

I’ll test it as soon as I have some time to spare

[MNeMoNiCuZ]

Got an email notification at least. I was hoping to get this merged into Forge, but I'll give it a spin on A1111 :)

[freecoderwaifu]

Just tested it, works fine for all Extra Networks, except Loras show Directory is empty, No files matching filter, they show ok without the PR. The change overall is good though, both design and responsiveness, being able to change between dir tabs and tree view or have both is good.

I was going to suggest a way to resize the left dir view and the right thumbnail side but it is there, it just doesn't show on first load, only after pressing Refresh once does the resizing slider appear, and auto resizing also does work when double clicking it once it shows.

Also currently pressing refresh in an empty tab, either truly empty or the Lora tab, makes that Directory is empty, No files matching filter message appear on all other Extra Network tabs that already had thumbnails loaded, and then refreshing again on a known not empty tab makes only that tab refresh. Something like this:

Have Textual Inversions, Checkpoints and Loras, don't have Hypernetworks and folder is empty (Lora not empty but currently also showing as empty) Checkpoints and TI results already populated from first load Press refresh in empty Hypernetworks tab Checkpoints and TI results now show as empty Press refresh in Checkpoints tab Checkpoints show results but TI still show empty

[Dasor92]

Tested it, it is very slow in opening the single folders, it doesn't have the same feature of hiding folders of A1111 and there is no need to name all the folders with "lora", still prefering the old UI, which is much faster with 3k loras

[Sj-Si]

By the way... try reloading your stable diffusion page with Ctrl+F5 to ensure that your browser isn't caching some of the old crap. It was really frustrating trying to debug things and having my code do absolutely nothing on a page refresh (even in an incognito window) before I learned about Ctrl+F5. I thought incognito wasn't supposed to cache things but I guess that only applies to fresh incognito window instances.

@freecoderwaifu

Just tested it, works fine for all Extra Networks, except Loras show Directory is empty, No files matching filter, they show ok without the PR.

Are all your Loras in the models/Lora folder or do you have them in a user specified directory? Can you check the developer tools console and let me know if you have any errors when the loras arent loading?

I was going to suggest a way to resize the left dir view and the right thumbnail side but it is there, it just doesn't show on first load, only after pressing Refresh once does the resizing slider appear, and auto resizing also does work when double clicking it once it shows.

That's odd. I haven't run into this issue.

1. What browser are you using?
2. Also are you always clicking the same tab on initial load or does this happen on every tab (textual inversion, hypernetworks, checkpoints, and lora)?
3. Could you open your browser's developer tools and tell me if there are any errors showing up in the console on this initial load?

Also currently pressing refresh in an empty tab, either truly empty or the Lora tab, makes that Directory is empty, No files matching filter message appear on all other Extra Network tabs that already had thumbnails loaded, and then refreshing again on a known not empty tab makes only that tab refresh. Something like this:

Have Textual Inversions, Checkpoints and Loras, don't have Hypernetworks and folder is empty (Lora not empty but currently also showing as empty) Checkpoints and TI results already populated from first load Press refresh in empty Hypernetworks tab Checkpoints and TI results now show as empty Press refresh in Checkpoints tab Checkpoints show results but TI still show empty

I'm looking into this. I was able to reproduce it on my end. The refresh function has been spawning all sorts of edge cases that I keep having to debug. >:L

@Dasor92

Tested it, it is very slow in opening the single folders,

When you say that it is slow opening the single folders, what do you mean exactly? Do you mean when you click the Lora tab it takes a long time to populate the cards list? Or do you mean in the tree view when you expand a directory it takes a long time to show the children of that directory?

it doesn't have the same feature of hiding folders of A1111

What do you mean by this exactly? Are you referring to the show dirs button that existed before the initial tree view changes? Or was this a setting that allowed you to specify directories to just completely ignore in the directory buttons?

there is no need to name all the folders with "lora"

I can't seem to find the setting but I have been told that users can add custom directories from which Loras (or other models) can be loaded. In this case, having the Lora at the beginning of the buttons would help differentiate between those. There is also the LyCORIS directory that everyone has by default so if someone has files in there they would also run into the same issue of not knowing which of these root directories the buttons corresponds to.

still prefering the old UI, which is much faster with 3k loras

Which part is faster? Is it the initial load time when you first load the page? Or is it the time it takes after clicking an extra networks tab (i.e. Textual Inversion, Lora, etc.) before cards appear? Or is it the responsiveness when doing things like filtering the cards, scrolling, clicking buttons (if so, which ones), etc?

If you're noticing issues with responsiveness, some of those may be due to me adding delays to certain operations to prevent unexpected behavior. So things like updating the filter I have added a short delay so that the filter only applies after like 250ms of the user finishing typing. This way we aren't attempting to filter and sort on every single key press. So it's possible that some of these delays I added are too long and could be reduced to make the user experience a bit better.

[freecoderwaifu]

@Sj-Si

Using Librewolf, but also tested on Edge with same results. All my Loras are in models/Lora, but I have them organized in a bunch of subfolders. My Checkpoints are also in subfolders and they load fine, though not as many subfolders. If I click on the Embeddings or Checkpoints tab first I can see them greyed out while they're loading, then when I click on the Lora tab it's empty. If I click on the Lora tab first it's also empty, then when I click in Embeddings or Checkpoints they still load correctly.

That made me think it was related to Tag Autocomplete, but disabled it and still got the same issues.

Edge console:

No visible errors in the Terminal/CMD.

[MrKuenning]

I am excited about the idea of this PR. Unfortunately, none of my models load when I use it.

I use the arguments : --ckpt-dir "E:\AI\MODELS\Stable-diffusion" --lora-dir "E:\AI\MODELS\LoRA" --embeddings-dir "E:\AI\MODELS\Embeddings"

to point to shared model folders. The folder names show up in the tabs list but not in the tree view, and no models show up.

For testing purposes, I copied some loras into the standard folder and removed my arguments and I was able to load the models.

Here are my initial thoughts.

Good

• It seems to load very quickly. Granted I am testing with a fraction of my total 4k+ models

• I am very glad we can turn off the models from the tree. :-)

• TinyCards extension is supported - It allows you to dynamically resize the cards. I strongly recommend giving it a try - https://github.com/SenshiSentou/sd-webui-tinycards.git

Bad

• It needs to support redirected folders, I am pretty sure that is fairly common practice with how large models.

• The tree view doesn't seem to support folders with spaces. I have a folder called Materials Figures, when I click on it in the tabs, it enters "Lora\Materials Figures" in the filter/search box when I click on it on the tree view it enters "Lora\Materials" in the filter/search box

• CivitaiHelper overlay button is no longer visible

• UPDATE This is not an issue: I have always hated the sort order of the tabs view. Putting all the root folders together and then listing the subfolder at the end. If possible, I would love the ability to sort them with the subfolders next to their root folder. I have a few dozen folders and it is annoying to find folders when /New/ and /New/SDXL are 20 tabs apart.

Keep up the great work, this is getting good.

[Sj-Si]

@freecoderwaifu Interesting... not sure why the page-is-ready request is timing out. I'll do some tests to see if I can reproduce this problem. I'm also stuck in this situation where I don't know if I should just keep trying to wait for the page to be ready or if I should give up after some number of attempts.

That debounce error is something I'm aware of as well. I might just rename that function or change its scope but it feels odd to cater to an add-on. Thankfully this function is only used by these changes for now so nothing will break if I refactor it.

@MrKuenning NOTE: I noticed you edited your comment so these responses are to your original comment, not the edited version.

I am excited about the idea of this PR. Unfortunately, none of my models load when I use it.

I use the arguments : --ckpt-dir "E:\AI\MODELS\Stable-diffusion" --lora-dir "E:\AI\MODELS\LoRA" --embeddings-dir "E:\AI\MODELS\Embeddings"

to point to shared model folders. The folder names show up in the tabs list but not in the tree view, and no models show up.

Thank you, this is one of the things I was hoping someone would test. I'll take a look into this.

• It seems to load very quickly. Granted I am testing with a fraction of my total 4k+ models

I tested with 100k models and while that initial load was like a minute long, it was very snappy after that.

• TinyCards extension is supported - It allows you to dynamically resize the cards. I strongly recommend giving it a try - https://github.com/SenshiSentou/sd-webui-tinycards.git

I'll check it out. I love me some minimal.

• It needs to support redirected folders, I am pretty sure that is fairly common practice with how large models.

On it.

• The tree view doesn't seem to support folders with spaces. I have a folder called Materials Figures, when I click on it in the tabs, it enters "Lora\Materials Figures" in the filter/search box when I click on it on the tree view it enters "Lora\Materials" in the filter/search box

Good catch. I don't put spaces in folder names anymore (got burned by it one too many times) so I didn't notice this. I'll work on a fix for this.

• CivitaiHelper overlay button is no longer visible

I'll look into this too.

• I have always hated the sort order of the tabs view. Putting all the root folders together and then listing the subfolder at the end. If possible, I would love the ability to sort them with the subfolders next to their root folder. I have a few dozen folders and it is annoying to find folders when /New/ and /New/SDXL are 20 tabs apart.

Are your directories not already like that? This is my directory view for the following tree:

models/Lora/
├── 1/
│   ├── 1-1/
│   │   ├── 1-1-1/
│   │   └── 1-1-2/
│   └── 1-2/
│       └── 1-2-1/
├── 2/
│   ├── 2-1/
│   └── 2-2/
│       └── 2-2-1/
└── my_lora/
    └── v2/

So it is pretty much sorted in the way you're describing unless I'm misunderstanding what you're asking for.

[MrKuenning]

Are your directories not already like that? This is my directory view for the following tree:

models/Lora/
├── 1/
│   ├── 1-1/
│   │   ├── 1-1-1/
│   │   └── 1-1-2/
│   └── 1-2/
│       └── 1-2-1/
├── 2/
│   ├── 2-1/
│   └── 2-2/
│       └── 2-2-1/
└── my_lora/
    └── v2/

So it is pretty much sorted in the way you're describing unless I'm misunderstanding what you're asking for.

I stand corrected. You are correct it is loading the way I described. In the past, it has always put all sub-directories at the end. And my cursory glance while the models weren't loading looked like it was still that way. But I just validated and it is loading the way I described now. Thank you.

[Sj-Si]

@freecoderwaifu Could you try pulling the most recent changes on this branch and testing to see if your LoRA models still don't load? If it still doesn't work, try reloading the page using CTRL+F5 to make sure it is clearing the cached scripts. I found that my retry loop for checking page readiness was treating timeouts as errors instead of attempting the connection again. So if everything loaded too quick then that very first check would immediately fail instead of retrying the connection for up to a few seconds.

Also you can enable the autocomplete addon again. I fixed the name conflict.

If you still have the resize bar bug, could you take a screenshot of it? I have yet to encounter any bugs like that so I don't really know where to start on it.

[freecoderwaifu]

@Sj-Si

It does seem to be related to the number of attempts, Loras still aren't loading but now I get this:

Here's my Lora folder, it only has safetensors and their corresponding thumbnails.

And my Checkpoints folder, this has safetensors, thumbnails and also Civitai .info files

For the slider, now it shows up fine in embeddings but not in the other tabs, it just shows the grey divider bar.

Tested in an incognito profile that clears all cache on exit, manually cleared the cache and also tested with CTRL F5, also deleted the gradio folder in Temp.

[Sj-Si]

@Sj-Si

It does seem to be related to the number of attempts, Loras still aren't loading but now I get this:

Here's my Lora folder, it only has safetensors and their corresponding thumbnails.

And my Checkpoints folder, this has safetensors, thumbnails and also Civitai .info files

For the slider, now it shows up fine in embeddings but not in the other tabs, it just shows the grey divider bar.

Tested in an incognito profile that clears all cache on exit, manually cleared the cache and also tested with CTRL F5, also deleted the gradio folder in Temp.

Very weird... also what is that Generate button doing in the cards list? Is that a plugin you're using that causes that? Or is that another weird bug?

[freecoderwaifu]

That's this: https://github.com/Haoming02/sd-webui-moar-generate

I also just tested with all extensions turned off but same results.

This is how all those subfolders look in dir view (blurred most because pls understand). No weird characters or anything in their names I could think of that could be causing some issue.

[MNeMoNiCuZ]

Sorry, this is way too technical for me. I don't know how to move on to branches like this to test stuff.

Is there a guide somewhere that explains it that someone could point me to? I understand the concepts of it, I just don't know how to do it with Github.

[MrKuenning]

Sorry, this is way too technical for me. I don't know how to move on to branches like this to test stuff.

Is there a guide somewhere that explains it that someone could point me to? I understand the concepts of it, I just don't know how to do it with Github.

1. Not sure if I did it correctly, but I copied my A1111 to a separate folder

2. Installed GIT CLI for windows - https://cli.github.com/

3. Then went into the A1111 install and ran "gh pr checkout 15530"

This merged this PR 15530 into the A1111 copy and I was able to test all of the changes without risk of messing up my normal install.

You can then repeat running that command to pull new updates from the PR.

[Sj-Si]

Sorry, this is way too technical for me. I don't know how to move on to branches like this to test stuff.

Is there a guide somewhere that explains it that someone could point me to? I understand the concepts of it, I just don't know how to do it with Github.

I think all you need to do is this:

At the top of this PR page, open this branch in a new tab

Then at the top of that new tab, you should be able to click the Code dropdown and download the zip of that repo at that branch. The tab at the top left is the branch name and should say extra-networks-performance-updates.

I dont like this method however because it is too time consuming. I prefer to just use git from the command line.

Otherwise if you have git bash then you should be able to do"

cd stable-diffusion-webui
git fetch --all
git checkout extra-networks-performance-updates

As for the GitHub app, I have no clue.

[tsjslgy]

First of all, I'm very touched by your enthusiasm and effort. Thank you for @ me. Although I received the email as soon as possible, I don't have much time, but I still want to thank you very much! (The following is my personal view. I did not participate in the test, because I have a negative view of the tree view catalog. If you mind, please ignore all the following contents.)

1. It is not recommended to show files in the tree view catalog. Just show folders. Because I believe that many people have many classification folders, and each folder also has many model files, too many files are displayed in the tree view catalog. It will take a long time to switch to other catalogs, which will only add to the trouble. (For example, the tree view catalog on the left side of Windows operating system only shows folders.)

2. If you need a tree view catalog, you can add a UI switch to show or not show the tree view catalog on the UI. (Looking at the screenshot, it seems that there is already one, but I'm not sure.)

3. If feasible, could a new div block be added to the right side to display detailed information about the model, primarily the model's trigger words? (Consider reading the trigger words within the model, retrieving them via network connection, or editing the CSS. I'm not sure which method is best.) This feature is primarily intended to address the issue of lengthy or difficult-to-remember trigger words for many models .(personally, I have implemented this by modifying the file name, but it's quite annoying). It would allow users to easily copy the trigger words. (Of course, it could also include images and author information, etc.) Similar to the detailed pane on the right side of the Windows operating system. (If this feature can be implemented, a UI toggle should also be added to allow users who don't need it to disable it.)

4. The search bar might be better placed on the right-hand side. To my knowledge, many systems and interfaces have their search bars on the right. The above suggestions are based on the goal of providing a faster and more convenient experience for the majority of users, while minimizing any disruption to their established habits.

---

(My apologies for the many negative remarks, or if you feel like I am simply voicing the interface of the Windows system, yes, that's correct. So, please pay it no heed.)

[Sj-Si]

1. It is not recommended to show files in the tree view catalog. Just show folders. Because I believe that many people have many classification folders, and each folder also has many model files, too many files are displayed in the tree view catalog. It will take a long time to switch to other catalogs, which will only add to the trouble. (For example, the tree view catalog on the left side of Windows operating system only shows folders.)

I do have an option that enables/disables the files in the tree view, but I get what you're saying with the windows explorer view. I was more modeling this after something like GitHub's diff viewer (like if you go to the top of this PR page and click Files changed). I personally prefer having all the models in a single minimal scrollable list but you're right, when I was testing with huge amounts of models it was practically impossible to quickly navigate between two folders without an ungodly amount of scrolling.

I think to get the behavior you're looking for, a user could just disable the files in the tree view options. However this leads us to the other issue of clicking a directory simply updating the filter with /the/folder/name which will show all cards in that directory and all directories below it (since /the/folder/name is a prefix in both /the/folder/name/file.safetensors and /the/folder/name/subfolder/another.safetensors). I'm considering changing this behavior however my priority at the moment is fixing the current bugs.

For now I think I might change this to have the files in the tree view disabled by default.

2. If you need a tree view catalog, you can add a UI switch to show or not show the tree view catalog on the UI. (Looking at the screenshot, it seems that there is already one, but I'm not sure.)

Yep this icon here simply hides that left panel

3. If feasible, could a new div block be added to the right side to display detailed information about the model, primarily the model's trigger words? (Consider reading the trigger words within the model, retrieving them via network connection, or editing the CSS. I'm not sure which method is best.) This feature is primarily intended to address the issue of lengthy or difficult-to-remember trigger words for many models .(personally, I have implemented this by modifying the file name, but it's quite annoying). It would allow users to easily copy the trigger words. (Of course, it could also include images and author information, etc.) Similar to the detailed pane on the right side of the Windows operating system. (If this feature can be implemented, a UI toggle should also be added to allow users who don't need it to disable it.)

I hadn't thought of this but it's a good idea. I may try to add that in but I already foresee issues with the way the resize bar is currently implemented. Again, though, This will be something that I consider after fixing the major bugs.

4. The search bar might be better placed on the right-hand side. To my knowledge, many systems and interfaces have their search bars on the right. The above suggestions are based on the goal of providing a faster and more convenient experience for the majority of users, while minimizing any disruption to their established habits.

ehhh... At least with the way the controls are currently set up, I prefer the search bar on the left. I actually prefer GitHub's placement of these things but it wouldn't really work if the tree view were removed.

(My apologies for the many negative remarks, or if you feel like I am simply voicing the interface of the Windows system, yes, that's correct. So, please pay it no heed.)

Everything you said was very constructive and I appreciate the feedback even if it is negative since that gives me a better look into what people are expecting out of this feature.

[Sj-Si]

@freecoderwaifu I just pushed some changes to hopefully fix your issue with the models not loading. Still not sure on the resize bar missing. Please pull the latest changes and see if that does the trick or if you're still getting errors in the console.

[MrKuenning]

First off, I tried the current build, and redirected folders are still not supported. :-)

I did have another thought for you though. I love the setting to hide files in the tree. (I think it should be on by default) But another setting that would be nice is, Choosing whether clicking on a folder name expands out subfolders.

In the old design, when all the files were always visible, it expanded the folders when you clicked on them, this was annoying as each folder would have dozens of files in it, and the tree would get super long. However, now that I can turn off the files and only show folders. I want to be able to click on a folder name and see the subfolders, without having to find the tiny arrow.

In a similar vein, it would be nice to have expand all / contract all buttons at the top of the tree.

[freecoderwaifu]

@Sj-Si

Can confirm resize sliders work now, thanks.

However Loras are still acting weird. Leaving my Lora folder as is, they show this error now:

Moving around some folders to reduce the amount of Loras got the page to load properly, then I tried moving back a couple of folders until it broke again.

I also got an issue where the page Lora loaded properly, but scrolling down through the page caused it to error out again and even throw a disconnect error.

It might be something on my side, though I don't know what it could be aside from having too many Loras and subfolders, and I already renamed some of them and removed filename characters that could possibly cause some issue (I also already cleaned up a bunch of them too since my Lora hoarding used to be worse...)

[Sj-Si]

@Sj-Si

Can confirm resize sliders work now, thanks.

However Loras are still acting weird. Leaving my Lora folder as is, they show this error now:

Moving around some folders to reduce the amount of Loras got the page to load properly, then I tried moving back a couple of folders until it broke again.

I also got an issue where the page Lora loaded properly, but scrolling down through the page caused it to error out again and even throw a disconnect error.

It might be something on my side, though I don't know what it could be aside from having too many Loras and subfolders (and I already cleaned up a bunch of them too since my Lora hoarding used to be worse...)

Man what the heck I didn't even touch the resize slider. Also the fact that you're getting an error now that you didn't get before is still a problem that I need to resolve. I can't just put in a PR that breaks functionality for people (...again).

I really don't think it is a problem with your folder structure or the number of files that you have.

Do you run the webui with any specific flags? Also how are you running it? From which type of terminal? Or are you just double clicking the webui-user.bat file? Anything else you can think of that may help me reproduce this issue?

I appreciate how much you're working with me on this but please don't feel obligated to spend time debugging if you don't want to.

[freecoderwaifu]

Oh the resize fix is definitely this https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/15530/commits/157073b5b28fca82a96f19585b3d20fb2b04ea42, I just hadn't tested it yet, but it does fix the resize issue.

I use Windows Terminal as my CMD handler. My .bat only has git pull and set COMMANDLINE_ARGS= --xformers --update-all-extensions --no-download-sd-model, the rest is stock.

Using Windows 11, tested on Librewolf and Edge with no other extensions aside from Ublock Origin (tested with it on vs off).

Tested on an existing install and then with a clean web UI reinstall, using both Github CLI and regular git commands in case it was git shenanigans. Even temp turned off my firewall in case that was preventing too many connections.

No other files aside from .safetensors and .pngs, thought it could be some animated PNGs as thumbnails, but they load fine before this PR and they also display fine when the page does load with less Loras.

Don't worry about it, I don't mind helping test this out.

[kaalibro]

Previous bugs

At the end of #15164, I described some bugs that remained after the AUTO's fixes. Some of them still present:

Sorting "By path" remains alphabetical for "Textual Inversion" and "Hypernetworks" tabs.

New sorting problem now (read ahead).

In "Tree" display mode, folders in the Checkpoints tab aren't displayed on the pane if the checkpoints are located in an external folder and loaded with the --ckpt-dir arg. The cards themselves are visible.

Fixed.

In "Tree" display mode, hidden directories are shown on the pane regardless of the "Show hidden directories" option state.

Now dir names starting with a dot for hiding doesn't make sense apparently due to the added root directory name.

"Copy path to clipboard" copies the path without backslashes.

Still here.

How I tested

Setup 1: Your repo with extra-networks-performance-updates branch at Sj-Si/stable-diffusion-webui@57d05543dff06775957ad8c07dd7f8a52467cb98 Setup 2: This repo with dev branch at ff6f4680 Setup 3: My fork of SD Forge with rolled back Tree view commits.

Windows 11 23H2 Edge Browser 123.0.2420.81 CMD args: --xformers --ckpt-dir D:\AI\SD\DATA\models\checkpoints --embeddings-dir D:\AI\SD\DATA\embeddings --lora-dir D:\AI\SD\DATA\models\lora --hypernetwork-dir D:\AI\SD\DATA\models\hypernetworks Pressed Ctrl+F5 after each WebUI launch.

And now to the new bugs and UX issues

• ~~(reported above) Occasionally, when switching tabs, cards fail to display: Directory is empty. No files matching filter. They reappear after clicking "Refresh." In the tab where "Refresh" was last clicked, the cards persist, but disappear in other tabs.~~ UPD: It seems to be fine now. Apparently, you've already fixed it.
• "Sorting by path" is quite messy. Setup 3: no complaints. Setup 2: mostly correct, except the issue I mentioned in the beginning. Setup 1 (this PR): Let's consider we have /A.file, /Z.file, /dir1/A.file, /dir2/A.file. I expect the cards to appear as I listed: files in the root first, then in /dir1/..., /dir2/..., and so on. However, they actually appear in the following order: /A.file, /dir1/A.file, /dir2/A.file, /Z.file. This means that the full paths are sorted alphabetically without considering the directory nesting. Sorting by path doesn't make sense in this case.

Setup 1: /3dzujian /anamorphic_lens_flare /Architecture/house_architecture ← should be files not dirs /Architecture/xsarchitectural-7 /Architecture/XSarchitectural-38 /Art Style/0mib3 /Art Style/animetarot /Art Style/arcane_offset /BlessedTech ← wrong /Character/ciri /Character/cuteRichstyle /Character/EnvyBeautyMix01

Setup 2: /3dzujian /anamorphic_lens_flare /BlessedTech ← correct ... /Architecture/house_architecture /Architecture/xsarchitectural-7 /Architecture/XSarchitectural-38 /Art Style/0mib3 /Art Style/animetarot /Art Style/arcane_offset /Character/ciri /Character/cuteRichstyle /Character/EnvyBeautyMix01

• The "Checkpoints" tab contains an extra root directory button for checkpoints — both in the tree panel and in the dirs bar. It's consistently labeled "Stable-diffusion", regardless of the checkpoints folder actual name.

• In "Hypernetworks", data-attributes are added to the cards' divs as plain text.

• Hypernetworks are inserted into prompts without an attention factor and greater-than sign: <hypernet:filename instead of <hypernet:filename:1.0>

• Activation text is not inserted with Loras: <lora:filename:1.0> instead of <lora:filename:1.0> trigger, words

• (not a new one, but newly discovered) When the beginning of directory names is the same (for instance, "SDXL" and "SDXL_lightning"), the search filter behaves differently. Setup 1 (this PR): selecting the "SDXL" directory displays cards from both "SDXL" and "SDXL_lightning". Setup 2 (this current repo with switching Tree and Dirs mode in Settings page): with Tree view selecting the "SDXL" displays both dirs' content, with Dirs mode behaves correctly (not displaying "SDXL_lightning" files in "SDXL" folder). Setup 3: just works fine.

• The current directory name preceding other directories in the dirs bar consumes extra space and making it harder to read directory names.

• Tree view in both Setups 1/2 prevents creating custom search filters by making empty directories with desired names. For instance, creating an empty "-inpainting" directory in the models' root (used to) allow using its button to filter out all inpainting models from all subdirs in one click.

Setup 1:

Setup 2:

---

Similar to tsjslgy, I really appreciate your effort. But I'll probably stick to using WebUI without the Tree view at all, even if most of the bugs get fixed. I don't have a ton of checkpoints, and I'm perfectly fine with how the cards are filtered originally, how it looks, and how it works. For sure, many other users will find this feature useful, but not only a number of bugs need to be fixed but also some UX flaws. However, I'll be glad to provide feedback whenever I can.

[Sj-Si]

@kaalibro

Below is a list of items that I believe I have resolved.

• [x] Sorting by Path
• [x] Checkpoints directories not showing in tree view when using --ckpt-dir argument.
  • I didn't have to fix this. Was already fixed. Just putting this here for completeness.
• [x] Hidden directories not hidden.
  • Unsure of how hidden directories should be handled. My assumption is that these should be hidden unless explicitly searched. However if someone types in only part of the hidden directory or models at any level within that hidden directory they will be displayed. Previously these directories would be displayed even if you search a parent directory of the hidden directory. To fix this I modified it so the search for hidden items only starts at that hidden directory. My real question is what kind of behavior are we trying to get out of hidden directories? Personally I feel like the user should have to type out either the entire hidden directory name (including the ".") or the entire model name (excluding the file extension) in order to reveal hidden items.
  • UPDATE: I just realized that searching for any substring of .safetensors reveals hidden items.
• [x] Copy to clipboard not handling backslashes properly.
  • Tried to also fix this anywhere else that I could find that hadn't yet cropped up.
• [ ] Checkpoints tab shows the Stable-diffusion directory in tree view even when --ckpt-dir is specified.
  • I think this is an issue that just went unnoticed because it wasn't implemented correctly before. Right now, in modules/ui_extra_networks_checkpoints.py::allowed_directories_for_preview(), both the optional --ckpt-dir arguments and the default models/Stable-diffusion directories are being selected every time. I think this is because if there are no models in the specified --ckpt-dir, then SD Webui will try to download the base model to stable-diffusion-webui/models/Stable-diffusion and not to any external directories. I guess this one just needs someone to decide what the intended behavior is supposed to be and we can update it if necessary.
• [x] Hypernetworks data attributes added as plain text.
• [x] Hypernetworks added to prompt without attention factor.
  • Was caused by the plain text data attributes.
• [x] LoRA activation text not inserted when adding to prompt.
  • This revealed an underlying issue with the way that model metadata was updated.
    • [x] Updating model metadata requires refresh/reload when it should just immediately update the dataset/html to reflect the new metadata.
• [x] Directory name substrings filtering incorrectly.
  • Fixed this by changing the behavior of the tree/dirs view buttons. Now, when you click on a directory the filter will be applied to the cards view but the directory is not added to the search box. Then anything added to the search box is applied only to those items in the selected directory.
• [x] Current directory name preceding other directories in dirs bar taking up too much space.
  • Not sure if there is a good solution for this one. If someone has duplicate directory names in different directories then there won't be any way to differentiate between the buttons in the dirs bar. For now I've removed the top-level directory from the buttons but if there are multiple top-level directories then I can see people getting a bit lost.
• [ ] Tree view does not allow creating search filters by making empty directories.
  • I don't actually know how this was working before... I checked out 1.7.0 and when I used a filter directory it didn't filter properly. Actually I can't even figure out what the heck it did... the filter was all sorts of weird. I'm sure there is a better way that this kind of filtering could be handled though; creating empty directories for this purpose really feels dirty.

[kaalibro]

@Sj-Si

Great job! I quickly checked all the listed bugs, but unfortunately at the moment I don't have enough time for a more detailed check of other possible issues.

Sorting "By path" remains alphabetical for "Textual Inversion" and "Hypernetworks" tabs.

Fixed for Loras and Checkpoints, but for Textual Inversions and Hypernetworks, it still sorts alphabetically.

Hidden directories not hidden. See notes below.

Didn't find any notes, but whatever, it works now.

Tree view does not allow creating search filters by making empty directories.

I came up with this filtering trick accidentally and haven't seen anyone else using it. I think it's a narrow case, and if it requires significant effort, you shouldn't bother too much for it :) In principle, using the search field is quite sufficient.

Not sure if there is a good solution for this one. If someone has duplicate directory names in different directories then there won't be any way to differentiate between the buttons in the dirs bar.

There's no need to search for a solution. If a directory is nested, its relative path is added to the dirs button panel. This ensures that there are no duplicate directory names on the buttons panel.

[Sj-Si]

@kaalibro

Great job! I quickly checked all the listed bugs, but unfortunately at the moment I don't have enough time for a more detailed check of other possible issues.

No worries. I have other bugs I'm working on resolving anyway so there isn't any rush.

Fixed for Loras and Checkpoints, but for Textual Inversions and Hypernetworks, it still sorts alphabetically.

Sorry I'll take a deeper look; I forgot to check those tabs.

Hidden directories not hidden. See notes below.

Didn't find any notes, but whatever, it works now.

Oops sorry I forgot to go back and add the details there. Updated the comment.

There's no need to search for a solution. If a directory is nested, its relative path is added to the dirs button panel. This ensures that there are no duplicate directory names on the buttons panel.

My concern is if you have the following directory structure

/models/
├── Lora
│   └── A
└── LyCORIS
     └── A

This would result in the following directory buttons:

At that point it is up to the user to intuit that the first A is associated with Lora and the second is associated with LyCORIS. This problem only arises whenever there are multiple root directories. Outside of those instances, this isn't a problem as you pointed out.

[Vesperindustrial]

Replying with some of my observations from testing so far:

• Don't show files in tree view (https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/15368) - i like this new behaviour, its much easier to navigate through the tree
• Show cards only at the given tree view directory level (https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/15368) - Seems to work nicely for the most part. I'm not sure if it is intended behaviour, but more than one click on the directory will seemingly occasionally drop any filter pretense and I believe it ends up showing all cards regardless of level. Clicking once more and it behaves again as normal though.
• Another minor observation i noticed is the tree view width often gets reset, I cannot get it to repeat consistently but will update if i can get it to trigger reliably. In any case it does not seem like it saves whatever view modes/widths you have set when you reload the ui.

Now for something that doesn't seem to work. It seems to choke when the lora folder has a lot of items? The entire tab even with hitting refresh, using either tree or list view mode to navigate will say "No files matching filter" and no items are shown at all.

• It will show the folders in the list view mode but still no cards will be displayed no matter what i click on. The tree view is still entirely empty.
• Happens on firefox or chrome
• Have tried restarting the whole a1111 process a few times
• It seems to be finding things in the background, as when i hit refresh with a lot of files in there it takes a bit longer to finish refreshing than when there are less files, but just not displaying them? Also if I try to generate something in txt2img with a lora it works properly regardless of whether its being shown or not.
• It does work as expected if I just put a couple of bare lora files in there
• It does work as expected if I put a couple of bare lora files in a folder
• At first I thought this might be a symbolic link issue, but even moving my entire lora folder into where it should be has the same problem. Putting a few symlinked bare loras in the folder works, putting a symlinked folder with loras in works, and putting a real subfolder in with symlinked bare loras works. So thats why I think it might be a quantity issue?
• All of this also appears to occur in the checkpoints folder too despite there being a lot less checkpoints.

Edit: Ok now I think this might be related to freecoderwaifu's issue? It took me multiple readthroughs of this thread to realize that.

• The only flag i use is xformers
• I only start it up running with the webui-user.bat which opens regular command prompt.
• The F12 browser console returns extraNetworks.js?1713930873.7097168:382 "error waiting for server page (txt2img_lora): max attempts exceeded" This appears twice on lines 402 then 382.
• Unlike freecoderwaifu's example however I get no other errors in the browser console, only those two. I also see nothing being written to the command prompt log for errors or warnings.
• No extensions that arent the built-in ones are active

Thanks so much for the updates to this, the usability of this has gone way up! I will reply with any further observations if I come across anything else.