CurtisDS / sd-model-preview-xd

Displays preview files for models.
MIT License
74 stars 8 forks source link

Some improvements I would like to see #14

Closed thecoolwolf closed 1 year ago

thecoolwolf commented 1 year ago

I would like a option to let images and notes be in the same folder as the models to avoid having the preview folder count as a category for the models. CategoryIssue

Also I think the notes section should be visible even if you don't have a note file for that model and have that field be editable in the UI to create or edit the text files for you instead of having to make text files manually.

And lastly the note field often show up really small and require you to scroll even if there is plenty of room to have it show everything. Notes Issue

Ty for making this btw!

CurtisDS commented 1 year ago

I would like a option to let images and notes be in the same folder as the models to avoid having the preview folder count as a category for the models.

They can be already. The preview files can be anywhere that the corresponding models can be. The only exception is if you have folder matching mode on and then the preview files need to be in a folder that is named the same as the model.

Also I think the notes section should be visible even if you don't have a note file for that model

The reason it doesnt show up is because not everyone uses it so I hide it if it doesnt exist.

and have that field be editable in the UI to create or edit the text files for you instead of having to make text files manually.

I'll consider it but thats a big change to do correctly because I wouldnt want it to interfere with people who want to use the tab as just a gallery.

And lastly the note field often show up really small and require you to scroll even if there is plenty of room to have it show everything.

What browser are you using? It works for me. Also I see you are using some sort of dark mode... that might be what is causing your issue.

thecoolwolf commented 1 year ago

For me it doesn't work with the notes placed in the same folder. I had to place them in a preview folder for them to be detected. (Edit) It gets detected now. I updated automatic1111 and restarted my browser. not sure what fixed it

Having a little button that adds a note file for it would work too and have the note field be hidden until then. Having it be editable in the UI would be huge tho if you can add that.

And I am just using normal chrome but have "--theme dark" in my startup file of automatic1111. Sometimes it shows it correctly and sometimes doesn't I am not really sure why.

CurtisDS commented 1 year ago

And I am just using normal chrome but have "--theme dark" in my startup file of automatic1111. Sometimes it shows it correctly and sometimes doesn't I am not really sure why.

if the same model has the same preview files and you dont change anything but one time you look at it, it looks right and another time it looks wrong.... that sounds like possibly another extension is changing general styles that are effecting all text boxes.

If it was repeatable it might be easier to narrow down.

Also I recently added a setting to control whether or not the height of the previews is limited or not. Do you have that setting checked or not? If you are just using images and text files I recommend the setting to be turned off.

Also also, I tried adding --theme dark to the bat file but my UI looks different than yours.

image

So Im not sure what is causing yours to be darker? Whatever it is might be causing the issue.

In general try turning off other extensions and fully restart and also Shift+F5 your browser window to clear any cashed files and then see if you see the issue pop up.

thecoolwolf commented 1 year ago

The limit height setting didn't do anything but I noticed that just some notes had that issue. This is one of the notes that always look wrong.

Note with issue Trigger Words = gawr gura, ninomae ina'nis, watson amelia, mori calliope, takanashi kiara Lora strength = 1? Extra Info = "It is recommended to add more weight in the character name in prompt and add other characters name in negative prompt."

Also I think it is simply a issue with my screen capture because my UI look much more like in your screenshot than in mine.

CurtisDS commented 1 year ago

The limit height setting didn't do anything

You would only notice the difference when you start to have long text files or a lot of images. See Tip #5 for the difference.

This is one of the notes that always look wrong.

Again, working for me. image

Also I think it is simply a issue with my screen capture because my UI look much more like in your screenshot than in mine.

I have never heard of a screen capture tool that would alter how the image looks so idk... either way i would still try turning off other extensions.

I cant do much if I cant reproduce the issue. Sorry.

Woisek commented 1 year ago

May I add something about the notes and the previews? After useing it a lot more lately, I feel like it would be way better, if all inputs (dropdown, filter and notes) wold be in a left column and the previews in a right column. Right now, you have constantly decide to make either the infos bigger or the previews and need to scroll. It would be much more conveniant to have it as 2 columns on a horizontal display as all would be in view without unnecessary resizing and scrolling.

Thanks for your great work. The new index is great. :)

CurtisDS commented 1 year ago

It's difficult to make everyone happy when it comes to layout.

For people who use large notes, yes they would need to scroll past the notes. If you want to have a different layout you can write custom CSS and add it to your user.css file to alter how it looks.

or you can switch to .md or .html preview files instead and have more control over the layout of your preview pane.

Woisek commented 1 year ago

I'm OK with writing my custom CSS, but you have to put some IDs or classes into the layout for that. Right now, it's too generic and not really addressable. :/ I.e.: .dropdown-filter (for the component where those both are), .text-notes (where the text is displayed), .image-gallery (where the previews are displayed), etc. You know better where classes or IDs should be placed for customization. :) When they are implemented, we can customize it.

CurtisDS commented 1 year ago

When they are implemented, we can customize it.

as of 6ba2fea3db319ab2f4614f3820d41394add2caf9 I have added an ID to every gradio element I am able to.

Woisek commented 1 year ago

Many thanks. I still see an issue here and I don't know how to explain it properly so that you understand what I mean ... &)

To be able to make text area and previews side by side, they have to be in the same div row. But right now, you've ID'ed a div (#cp_modelpreview_xd_update_sd_model_text_area) that is inside another div, which itself is in a component row. The preview image div (#cp_modelpreview_xd_html_row) lies outside that and is itself like a component row. So, there is no way to get them side by side like this.

cp_modelpreview_xd_html_row should be in the same div row like #cp_modelpreview_xd_update_sd_model_text_area.

Do you get it? :D

CurtisDS commented 1 year ago

unfortunately i cant change that. Youll have to get creative with the CSS. I might consider adding a 2 column view option in the future, but its going to be super low on my to do list.

Woisek commented 1 year ago

Unfortunately, that's nothing that can be fixed with "creativity". It's a structural problem :) It's like you have box A with box A1 and A2 inside it and beneath a box B with a box B1 inside it and you want to have B1 besides A1 and A2. But you can't, because it's another box (A). Again, I don't know how this is all build up, but maybe you can just push this div into the above row. But anyway, thanks for dealing with this.

CurtisDS commented 1 year ago

@Woisek creative CSS:

#model_preview_xd_checkpoints_tab > div,
#model_preview_xd_embeddings_tab > div,
#model_preview_xd_hypernetwork_tab > div,
#model_preview_xd_lora_tab > div {
    display: grid;
    grid-template-rows: 60px auto min-content;
    grid-template-columns: 600px auto;
}

#model_preview_xd_checkpoints_tab > div > div:first-of-type,
#model_preview_xd_embeddings_tab > div > div:first-of-type,
#model_preview_xd_hypernetwork_tab > div > div:first-of-type,
#model_preview_xd_lora_tab > div > div:first-of-type {
    grid-area: 1/1/span 1/span 1;
}

#model_preview_xd_checkpoints_tab > div > div:nth-of-type(3),
#model_preview_xd_embeddings_tab > div > div:nth-of-type(3),
#model_preview_xd_hypernetwork_tab > div > div:nth-of-type(3),
#model_preview_xd_lora_tab > div > div:nth-of-type(3) {
    grid-area: 2/1/span 1/span 1;
}

#cp_modelpreview_xd_html_row,
#em_modelpreview_xd_html_row,
#hn_modelpreview_xd_html_row,
#lo_modelpreview_xd_html_row {
    grid-area: 1/2/span 2/span 1;
}

#cp_modelpreview_xd_tags_row,
#em_modelpreview_xd_tags_row,
#hn_modelpreview_xd_tags_row,
#lo_modelpreview_xd_tags_row {
    grid-area: 3/1/span 1/span 2;
}

image

Woisek commented 1 year ago

This really works .. ? When I edited the css for a workaround, the extension stopped loading and didn't showing any content ... head-scratch

CurtisDS commented 1 year ago

yes it really works

Woisek commented 1 year ago

OK, I try it and get back ...

Woisek commented 1 year ago

Hmm ... it works ... but sometimes, it just stays blank, like I encountered at the beginning when I changed it myself ... :/

CurtisDS commented 1 year ago

are you on the latest a1111 build?

Woisek commented 1 year ago

Yes ... hmm ... strange ... have to observe this and get back to you if I can see a pattern.