Display improvements to PNG Info tab

[MarcusNyne]

Description

PNG Info tab text display currently looks like a big block of text, which makes it hard to find specific settings, and is a pain when you are trying to copy a setting. This improvement parses PNG Info settings and displays them in a format that makes it easier to read, and also allows a setting to be copied to the clipboard with a simple click.

Features

• If there is a failure parsing, displays falls back to the old style (i.e. comfyui json)
• High performance regex is used for parsing .. comparable performance to preexisting behavior
• Values wrapped in quotes appear as orange, other values appear in blue
• Colors tweaked for dark mode, so looks good in both modes
• Click to copy .. displays CSS animation so the user knows something is happening
• When (orange) text is copied, escaped newlines converted to newlines (i.e. adetailer prompt)
• When an extension adds settings that are not in the expected format, non-standard settings displayed in plain text (i.e. dynamic prompt templates)

Code changes

• Added a new module png_parser.py that contains the parsing logic, and regex expressions ** Non-standard settings identified by a newline outside of quotes, using dynamic prompts as a reference
• Modified modules\extras.py run_pnginfo() to use parsing module, and convert plain text to HTML ** Utilized existing formatting methods when possible ** Introduced for formatting, copy to clipboard, and copy animations ** Preserved existing formatting when there is a parsing error ** No changes to plain text format returned by method
• Formatting styles were added to end of style.css ** Uses existing CSS variables whenever possible ** Support for dark mode ** Uses @keyframes animation
• Added uiCopyElementText() to script.js ** Copies element text to clipboard ** Starts copy animation

Passed python and javascript linting. Passed test process.

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

[w-e-w]

issue 1: unable to copy the raw unaltered infotext

with this PR if someone were to try and copy the entire infotext from HTML, it would introduce extra new lines that weren't therethere sometimes the new lines are harmless but it can also cause certain syntax to break

you could try to make it so the HTML stylization does not alter the copy text or it would be simpler to just add a button or something to copy the raw infotext

Issue 2: parsing breaks when no Negative prompt

with Negative prompt no Negative prompt:

yes both screenshot is of this PR

[MarcusNyne]

@w-e-w , thank you for taking the time to review my PR. I fixed the problem with no negative prompt. I like the idea of adding a way to copy text, but want to make sure I understand the problem you are describing. I copied the entire text manually and I think the newlines make the info text more readable, and so are beneficial. What do you mean by "it can also cause certain syntax to break"?

Thanks!

[w-e-w]

I copied the entire text manually and I think the newlines make the info text more readable, and so are beneficial. What do you mean by "it can also cause certain syntax to break"?

readable does not mean that it's "the same"

if someone has an extension that adds extra scripting functionality to prompts input, then for there syntex newline could have special meanings, so adding a extra newline could potentially break ther syntax or change the output

there are other use cases that are very sensitive to minor changes

[MarcusNyne]

@w-e-w , I followed your suggestion and added some links to copy text. The "All" button copies text that should be identical to the previous manual copy. Please let me know if this works?

Thanks again!

[w-e-w]

found a rather hilarious issue

https://github.com/user-attachments/assets/1120e957-2385-4640-a96f-9f4daf04a96a

once the copy button is clicked, it flashes every time you switch to the tab

[MarcusNyne]

@w-e-w thank you, that's a good catch. I'll see if I can fix it.

[MarcusNyne]

@w-e-w fixed it! Thanks again. Really appreciate that you are finding these issues.

[MarcusNyne]

@w-e-w , renamed some of the quick links to make it more obvious what is going on. Finished with all changes, now.

[w-e-w]

seems to be working correctly now the white spaces were removed by the browser, fix by adding css rule

while personally like the changes in general but as this maybe controversial so like more feedback before merging

one thing I don't like is the italic fonts for geninfo-setting-string (parameters that starts with ") https://github.com/AUTOMATIC1111/stable-diffusion-webui/blob/56dc761ad32c26d9619dff083b6a8036bc673f74/style.css#L1712-L1716

italic (current) normal

[MarcusNyne]

@w-e-w , thank you for following up. Yes, I understand that the appeal of visual and GUI changes can be subjective and people can have strong opinions about it. I tried to make the text formatting as nice as possible for light and dark modes. I wouldn't expect them to appeal with everyone, but I think even if someone doesn't like all my aesthetic choices, hopefully they feel that it is better than the wall of text we have now. I have been using the changes for about 2 months now with no issues for my prompts. Thanks again.

[w-e-w]

@MarcusNyne I fix the issues that I mentioned and added an an option for one to switch back to the old stye, can you have a test

Settings > Infotext > PNG Info Sytle