Advanced View for Extra Networks Tab

[zhouyi311]

Describe what this pull request is trying to achieve.

An Advanced View for Extra Networks

Main features of the Advanced View:

• New Advanced Card Layout
• Make/edit notes directly in the UI
• A in UI Control (dropdown) for view change
• Improved Description Readability
• Flexible Card/Image size
• Light and Dark theme optimized

My primary motivation stems from my UX research, which highlighted the need for a more integrated way for users to save and access personal notes about individual models.

Users often rely on separate Google Docs to keep track of crucial model information such as trigger words, suggested VAEs, clip skip, etc... This workaround, while functional, creates an inconvenient experience for users, particularly for those who are more advanced or heavily rely on the platform for generating images.

By incorporating the Advanced View, we address this inconvenience by providing a seamless interface for users to create and access their notes directly within the WebUI. This enhancement will not only streamline users’ workflow but also help tailor the user interface to better accommodate their needs.

1. Better experience for browsing text notes and in-page description editing

• Write notes for each model, capturing all the crucial details without missing a beat.
• An optimized layout ensures you can quickly access and understand your notes with ease.

2. Change view any time

• Allows you to change view anytime directly in the extra network tab

3. Resizable Card and Preview

• The Advanced View offers customizable card sizing, enabling users to adjust the dimensions and image/text ratio to best suit their needs.
• This ensures a personalized and comfortable experience, accommodating various content preferences and display requirements.

4. Compatible with Light and Dark Modes

• The Advanced View is designed to seamlessly integrate with both Light and Dark modes, maintaining the minimalistic touch of the default theme.
• This approach ensures compatibility with future developments and maximizes adaptability

---

Additional notes and description of your changes

• This is a continued work (and an upgrade version) for my friend's existing PR #9249 which had been made for a little while. The advanced view has integrated everything in #9249 and is ahead of it.
• Added an extra HTML (extra-networks-card-advanced.html) file in /html dedicated to this layout because the original structure of extra-networks-card.html isn't capable of handling the goal I was trying to achieve. (technically sure we can tweak the original card's structure and make it work for both, but I do not want to make huge changes to the original card's HTML since I know some extensions such as civitai helper and many others are relying on that structure.)
• Tons of CSS styles added - mostly for layout & interaction rather than visual styling, and dedicated to the advanced view. （also did some minor fixes for existing layout bugs, such as fixing the overflowing description in thumb view. I assume that will be ok for you?)

PS. I know this is a relatively large PR, and you are expecting rather small ones.

• The reason I was still doing a large PR is that the whole Advanced View isn't achievable by assembling several small PRs, because most features and code changes in advanced view only make sense when they work together.
• The large part is the new HTML file and CSS, which is inevitable for a new view. Other than those, the feature added and code changes in Python are actually in a relatively reasonable scope. Hope you are ok with it.

---

Environment this was tested in

• Dev/test: Windows 10 and 11.
• Browsers: Chrome, Edge, Opera
• Graphic Card: GTX 1080 8GB and RTX 3080TI 12GB

---

Screenshots or videos of your changes

• gif:

• screen capture:

[Nacurutu]

@vladmandic @anapnoe

Check this..!

[vladmandic]

@one111eric would you be interested in submitting the PR to https://github.com/vladmandic/automatic? its pretty large and i'd rather have you as author than mess with merges :)

[one111eric]

@one111eric would you be interested in submitting the PR to https://github.com/vladmandic/automatic? its pretty large and i'd rather have you as author than mess with merges :)

Yes, the advanced view main author @zhouyi311 is my real life friend, I tried my best to fix conflicts but because your code really diverged from the original repo quite a lot already so there might be some small issue you can fix later maybe. I ran it locally and it worked mostly tho. PR created to your repo: https://github.com/vladmandic/automatic/pull/635

[vladmandic]

Thanks!

[davehornik]

Any shot it will be somehow compatible with CivitAI Helper? I was working with my friend on some kind of Notes for webui thats not colliding with that CivitAI Helper. Your solution looks great tho

[zhouyi311]

Any shot it will be somehow compatible with CivitAI Helper? I was working with my friend on some kind of Notes for webui thats not colliding with that CivitAI Helper. Your solution looks great tho

@davehornik I would love to make it work for them, as I'm a CivitAI helper user too.

My approach is actually compatible with "the way how CivitAI Helper works". But no way I can make this compatible with CivitAI-helper today's version.

The way that CivitAI Helper works is to scan the current front-end element by JS and append extra elements to the action list. But to achieve the advanced view, HTML structure change is inevitable. Therefore, in the advanced view, CivitAI Helper's current version would not find the correct element to work with.

In order to make it work, they have to tweak a bit, not something I can do on the advanced view end today. But I assume that will not be very hard. If this PR is approved someday, I would love to look at their repo to see if I can make a PR for them too.

[Sakura-Luna]

I'm interested in this pr, is it compatible with Gradio 3.16? I want to add it on my fork.

[zhouyi311]

I didn't test it with the gradio 3.16 but since the original extra networks tab itself was mainly a hacky way to embed HTML into the Gradio framework and my pr was exactly following what A111 did in the same way. So it's not actually depending on Gradio too much. Therefore I think it supposes to work with any Gradio version.

You can try to test merge my branch https://github.com/zhouyi311/stable-diffusion-webui-yi to see if it works.

[Sakura-Luna]

I found that pr has merged the main repository many times during development, which makes it difficult for me to exclude irrelevant commits, would you mind submitting a pr, which allows me to make adjustments conveniently.

[AUTOMATIC1111]

I guess I have to write a comment on this at some point.

My desire is to have one less view for extra networks rather than one more. This PR combines restyling together with adding functionality. I'd prefer if functionality (editing descriptions) was added to the repo, and would work in the default mode - cards. I'd prefer if restyling was not added to the repo and instead was made available through extensions.

[zhouyi311]

Thank you for your response. I understand your concerns and agree with the points you've raised. There are a few challenges when it comes to restyling the extra network part through an extension. Any styling applied through the extension might be overridden by default interactions, making it difficult to maintain a consistent appearance.

Directly editing descriptions on the current "card view" can also present usability issues. The description section of the card tends to move or change when hovering over it, making it challenging for users to select text or edit it comfortably. Additionally, clicking on the card applies the model, and the long model names occupy space, pushing the descriptions further away.

Given these constraints, achieving the "description editing" feature directly on the card becomes a challenge within the current card view layout. Implementing it would require significant style changes, and it may further magnify the existing minor usability issues.

Considering the complexities involved, I'm a bit uncertain about the best approach to take. I could attempt to add the feature to the card view, but it would be challenging to ensure a good user experience given the current layout's minor issues. This may also introduce additional complications.

[AUTOMATIC1111]

dev now has extended UI for editing things related to editing extra network metadata, including description, notes, and for lora default weight and activation text - in a popup dialog - so I'm closing this PR. If you want to add a view that displays description the the right of the card, an extension would be a good option.