Styles are an unintuitive hot mess

[afbagwell]

The original styles.csv approach was simple but got the job done. Definitely room for improvement.

When I saw we were going to individual JSON files for each style, I was thrilled as this would be a chance to greatly improve on this feature.

Unfortunately as styles currently stand, I wish we had the old CSV file back. Whatever the intent was behind the current change, UI functionality, ease-of-use and utility has become utterly lost.

Problems I've Had with the Styles Feature

Let's start with the actual access to the feature.

• We have the drop-down for selecting a style, but the controls are hidden under the "Network" button on the Styles tab. Why there and why have two different means of access?
• If you pick a style from the drop-down you can hit "Generate" and get an image made with that style without ever seeing the style text applied to the prompt box. Confusing.
• If you already have a prompt but forgot you have a style selected in the drop-down, you get it stealth-appended to your prompt which can make for some great "WTF happened?" moments.

Now let's shift to the Networks/Styles tab.

• "Apply" is an icon buried in the line of UI widgets. Most of these icons are not easy to understn
• The "Save" button functionality has been changed from saving the contents of your prompt/neg-prompt fields to saving the parameters of your last generated image. Which means you can no longer save a prompt with wildcards in it, only the result of such.
  • Even worse, it really means your "last" saved image. So if you were using a wildcard prompt, no matter which image you select from your run it always saves the text of the very last image generated.
• Saving a prompt offers no ability to edit it beforehand.
  • The title field is frozen and made up of the first part of your prompt.
  • But that's not really the name. It gets assigned a random eight-char hexadecimal name for its title. (e.g. "795dddc9.json"). No, you can't change it.
  • There's both a Save and Replace button whose text hint says they are for saving an image.
  • Why are the other tabs in the dialog even there? They only repeat information from the first tab or have nothing in them.
• Despite refresh buttons being present on the drop-down and the Style tab you won't see the new style until you restart.
• The sort button? It tries to tell you how its sorting your styles -- in the same way a drunk guy would claim to have sorted your sock drawer. Why does Z-A title sort start with "fortnite" followed by "zig-zag lines drawing" and any style that starts with a capital letter in random order? And since the tile blocks don't display length (of what? prompt words? file size?) and datetime, why are those even sorting options?
• Not that it matters because the whole tile block presentation is an unnecessary waste of space based on the presumption you'll use a picture to identify your style -- like the built-ins do.
• The built-in styles put the exact words from their title into your prompt. You chose "3D render". Hit the paste button and it puts "3D render" in the prompt box. That's it? I can type faster than the time it takes to open the Network-Styles tab and search for thing. And there's a hundred of these text snippet styles getting in the way of using my own styles.
  • There are two filter buttons, though: "All" and "Built-Ins". So I can see all the styles or only the built-ins? How about a way to NOT see the built-ins since I'd never use them?
• There is no in-app editing capability of a style JSON file. This is a huge loss since prompts are notorious for having typos and other syntax issues that you want to correct when you find them. Instead you have to re-save the entire prompt as a new one or hand-edit the JSON file in a text editor. (And be sure you don't mess up the JSON formatting.)
• Hitting the info button on a built-in style gets you this with the default teal gradio layout:

A Proposed Remedy

• KEEP the JSON files. They will offer great utility when used correctly.
• Scrap the current UI implementation of styles and put it all under one panel access widget different from Networks.
• At the top of this panel, have a save button that allows capturing the contents of the current prompt/neg-prompt text areas. Have another one that allows you to capture the current chosen image from the latest run. It should open the same editor window I mention below.
• Below the save buttons, use a table widget to make each style a row that includes title, date modified, prompt word count?, maybe a hover for a longer description, and with two buttons: one to directly apply it to the prompt/neg-prompt text areas and the other to edit the style. Make the table sortable by clicking on the relevant column headers.
• The edit button opens a full floating window editor for the chosen style. Allow being able to update any part of the style, including metadata where appropriate (like display name, file name, description, example image(s), etc.).
  • This could set the stage for capturing "advanced" style metadata that would also do things like set the generation parameters. For example, a style could also assign a sampler, height, width and denoising strength.
• Allow any style you've created or saved in this session to be immediately used without needing to re-start the web app or server.
• Ditch the built-ins. Or at minimum be able to filter them out.

[Tillerz]

I like how the Wildcards Manager for the "Dynamic Prompts" extension works, could be similar to that. :) The current Styles dialog to save styles with the default CSS doesn't even properly show where input fields are, it's just all black or almost-black.

Wildcard Manager:

[vladmandic]

first, thanks for exensive write-up. but i have to say that a lot comes from misunderstanding how/what styles work:

• there are two ways to access them (via en and via pulldown) because clicking on style in en ADDS it to list in pulldown.
• having pulldown makes it visible which styles are applied. i don't want style to immediately change prompt. i want it to apply with the prompt as it is. if you want to apply to current prompt, there is a button for that.
• there is also a quick access to some items via context menu (right click on any main buttons like generate)
• save style in extra networks does allow changing of anything before you actually click save. just edit anything you want.
• style can be edited anytime. just open its details, edit and press save

so, in general, for most items it seems we need better documentation - which is absolutely true for pretty much any area of the product. we need better docs in general. but they are not going to write themselves - so jump into discord, collaborate and contribute.

and although i appreciate detailed writeup, comment such as "Scrap the current UI implementation of styles" is not going to happen nor its motivating for me to actually do much of else. this is open source and saying to devs to scrap something without contributing code is not almost never functional way to go.

[afbagwell]

having pulldown makes it visible which styles are applied. i don't want style to immediately change prompt. i want it to apply with the prompt as it is. if you want to apply to current prompt, there is a button for that.

I get the intent here, but having the selected drop-down values be stealth-applied to an existing prompt is a terrible thing. Given how cluttered the UI already is, it's easy to completely miss that you have a style selected. And if its being applied invisibly to an already selected prompt ... as I mentioned I had some pretty good WTF? moments trying to figure out what went wrong.

save style in extra networks does allow changing of anything before you actually click save. just edit anything you want. style can be edited anytime. just open its details, edit and press save

You can't change the important metadata above. And as for the edit box, it's completely free-form rather than broken out into fields. If you delete a tag or edit outside each param's line boundaries, you get weird cross-contamination between fields.
Also when you hit the "Save" button (which the tooltip says "Save Image") it appears to save, but if you re-load it you can often find your changes didn't take.

Better documentation is always a good thing.

comment such as "Scrap the current UI implementation of styles" is not going to happen nor its motivating for me to actually do much of else. this is open source and saying to devs to scrap something without contributing code is not almost never functional way to go.

You've done a fantastic job with this app. My assessment may be blunt, but it's not unfair. I'd give the same kind of feedback to devs at my job. Please take the criticism in the spirit its meant. The whole UI workflow of styles right now is very clunky and needs a lot of love above and beyond documentation.

And sorry, I don't have spare time to contribute code.

[vladmandic]

I get the intent here, but having the selected drop-down values be stealth-applied to an existing prompt is a terrible thing.

we can agree to disagree. i for sure don't want style to auto-populate prompt.
for me, that would be totally opposite of what styles are trying to achieve. there is a button to apply immediately and its inside extra networks and as well as available in context menu.

And as for the edit box, it's completely free-form rather than broken out into fields.

that will be addressed eventually. but details view is shared between all extra networks and i don't have cycles do design separate one for each network type. is it ideal? no. is it unusable? far from it. and yes, contributions are welcome.

Also when you hit the "Save" button (which the tooltip says "Save Image") it appears to save, but if you re-load it you can often find your changes didn't take.

after save, you need to refresh. that will be addressed.

[thestorytree]

i still cant understand how to save prompts as quick as you were able to.

Previous workflow was:

1. edit positive and negative prompts.
2. click save style button on right.
3. type name of style on pop up, (would overwrite previous style if same name).

Now it's:

1. edit positive and negative prompts.
2. click networks button
3. click styles tab
4. search or scroll and reorder to find style name and click "i" button / click book button to create new style name
5. copy and paste positive prompt in correct area
6. copy and paste negative prompt in correct area
7. click save

Am i missing something? is there an easier way comparable to previous version? Also right clicking on networks and clicking on quick save style doesn't work and saves blank prompts.

[vladmandic]

Also right clicking on networks and clicking on quick save style doesn't work and saves blank prompts.

that IS the easy way.
if it doesn't work, then create issue for it and document it - otherwise its not going to get fixed.