Correct embedded UTF-8 in tab name

[clayne]

• This is showing up as "Model Pre Views" as the tab when it should be "Model Previews".

[clayne]

Note, it might not be visible on GH, but via git diff it appears like so:

-      if(tab.innerText == "Model Pre<E2><80><8B>views") {
+      if(tab.innerText == "Model Previews") {

and

-       return (modelpreview_interface, "Model Pre<E2><80><8B>views", "modelpreview_xd_interface"),
+       return (modelpreview_interface, "Model Previews", "modelpreview_xd_interface"),

[CurtisDS]

Its suppose to be a zero width space. A bit of a hack to be able to find the correct tab. I wonder if the new update to a1111 sanitized the whitespace character. What version of a1111 are you on? What Browser do you use? And do you use any odd custom fonts or different language settings other than English?

[clayne]

I'm on 1.8.0RC right now but why do we need this hack when the tab order can be set explicitly in config.json? Even without that functionality, "Model Pre Views" doesn't exactly look right.

[CurtisDS]

It's not suppose to display as "Model Pre Views". That's a bug. Its suppose to be (and has been up until now) displayed as "Model Previews". Again the space is supposed to be a "zero width space", one that browsers aren't suppose to actually give any width to. Its odd that they are also capitalizing Views, so that makes me think 1.8 added some string sanitization / formatting that is messing with the zero width space and converting it into a standard space character. I haven't updated yet to check myself.

The hack isn't to set the order of the tab, the hack is to find the index of the tab in the DOM. A number of things can change the DOM. Even if there is a setting somewhere in config and I could access it in the extension, there could be JavaScript loaded or custom css that could mess with me being able to find the tab. I could just as easily search for a button with the text "Model Previews" instead of "Model Previews". But I thought there could be a chance that someone has two extensions that both make a tab named "Model Previews". So adding the zero width space was a way to pretty much guarantee it was the tab for my extension and not some other extension's tab. In a newer version of gradio they added ID attributes to the buttons for tabs so once a1111 updates to that version of gradio I wont have to care about searching by string, but I don't think 1.8 has updated yet.

[CurtisDS]

So, I updated to 1.8-RC and am not having the same experience you are. This is what my tabs look like:

Can you confirm your a1111 version and the version of gradio (it says at the bottom of the a1111 web interface). I am running version: v1.8.0-RC with it showing gradio: 3.41.2.

Also can you confirm your browser, operating system and if you are using any different language settings or extensions that would translate or otherwise mess with the UI?

[clayne]

It's 1.8.0RC w/ the Lobe theme extension (https://github.com/lobehub/sd-webui-lobe-theme) which would definitely affect the UI. Browser is Edge, Windows 10.

[CurtisDS]

Instead of removing the zero width space I moved it (60795b67ad8e064f74bdd78ef629d4d616a44e15). So instead of "Model Pre[]views" it is now "Model[] Previews". Based on what it was doing to the string (changing the zero width space to a normal space and capitalizing view) I assume this should appear as "Model Previews" for you now. This way I can keep the zero width space until they update to the newer gradio.

[CurtisDS]

Since you closed this I assume moving the zero width space doesnt cause any issues now for you in terms of how the tab looks. Can you confirm the link from the Extra Networks tab still works?

[clayne]

Can confirm this "fixes" the issue, atleast on the display side:

I didn't see the preview link from the EN tab as my thumbnail size was too small. They still work. The only issue I had was fixing my config.json tab order since the tab name changed.