New UI Layout sketch

[KirillRepinArt]

OpenAI like WEB UI

I'm not sure if this would be of interest to anybody else but me, but I've made some sketches of a new UI design. As a template I've used Chat GPT, but adapted their layout for this project and slightly changed the color scheme not to look exactly the same.

By studying OpenAI's design it was obvious that they've used Golden Ratio proportions, so I did just that.

I've attached a couple of examples how it could look.

Additional Context Just to clarify, these are just sketches, but I think it's possible to transfer all of the current features into this format.

[bmoconno]

Just to clarify, these are just sketches, but I think it's possible to transfer all of the current features into this format.

I'm still new to all of this python/Gradio stuff, but I'm not entirely sure that is true. I know some css can be applied to Gradio, but I don't know if what has been outlined here is possible.

That being said, I do like the look of this. I think you'd maybe need to add an accordion or something to bring back the rest of the buttons (and extensions) that seem to have been removed from this layout to make things look cleaner.

[KirillRepinArt]

Just to clarify, these are just sketches, but I think it's possible to transfer all of the current features into this format.

I'm still new to all of this python/Gradio stuff, but I'm not entirely sure that is true. I know some css can be applied to Gradio, but I don't know if what has been outlined here is possible.

That being said, I do like the look of this. I think you'd maybe need to add an accordion or something to bring back the rest of the buttons (and extensions) that seem to have been removed from this layout to make things look cleaner.

Unfortunately my experience with coding is very limited, but I have a degree in graphic design, so I thought I could be helpful in that way. These are just relatively quick sketches of how it could look like. Of course if this design was to be implemented, it should be significantly expanded. And since I love using this text gen, I selfishly want it to be as comfortable and enjoyable as possible.

Also, you are right, I don’t really know if this would be possible to implement here, I just assumed it lol

[ghost]

I'm still new to all of this python/Gradio stuff, but I'm not entirely sure that is true. I know some css can be applied to Gradio, but I don't know if what has been outlined here is possible.

i don't see why not, with enough effort. not to say it'd be super easy. we do have this and a few other ways to do css and js. anything non gradio can be handled with gr.html components and a bit of js.

i did some experimenting with theming for my sd extension in some branches i never pushed. i haven't touched it in a while due to a strong aversion to web dev, but i do remember being able to make some major layout changes.

[ChobPT]

I'd suggest, if the dev is ok with having this maybe be implemented (even if as a secondary skin) to add it somewhere that would allow us to see the spacings, colors, etc. Somewhere like Zeplin , Adobe XD (or figma?) with a public link for whomever gets to work on this.

Cheers and props for the idea, maybe also it'd be interesting to have a visual of how the parameters or other tabs would display (maybe as a popup alla ChatGPT manage account?)

[oobabooga]

This looks nice, but I think that it would be too much work to depart from gradio and its base widgets, since the styles change completely from one version to the next.

There is a "themeing" option in the latest gradio, but I don't think it's general enough to get this kind of look: https://gradio.app/theming-guide/

I would like to make notebook mode to look more like the OpenAI playground and have made some progress in this direction. There is still more to do though: https://github.com/oobabooga/text-generation-webui/issues/560

[flflow]

I think, first step must be is add unique css id for each important element, something like: shared.gradio['Generate'] = gr.Button('Generate', elem_id='generate') This will open up more options for enthusiasts and require fewer fixes in case of changes in UI or Gradio.

[ghost]

that'd be nice. then it'd be easier to mess around and lay the groundwork for a theme with something like stylus. loading custom style sheets or something could be added later on.

[oobabooga]

That's a good idea, @flflow.

[KirillRepinArt]

Here are some updates for this idea:

I feel that character editor and Training would require new pages on top of the Chat, also I didn't have enough time today to figure out Extensions. I think adding another category in the Main menu named "Extensions" after "Options" and before "Training" would be the best way to do it.

Some of the feature like "Copy", "Delete" could be present permanent on the screen, or appear only when you hover on the message. The same goes for the bot's name in the character gallery, if you hover on a square portrait it shows a gradient with the name, otherwise they just stay clean. I think it would look better if the same rule applied to the "Edit Character" icon.

In the "Options" section there are slider, buttons and drop down menus, there should be "refresh" buttons near the menus eventually. Also Categories close automatically when user clicks on a different category and the chosen category name becomes 14 pt instead of 12 pt.

I think it should be possible to define rules for elements' spacing? Different values for spacing between slider/slider, slider/button, button/button etc.? Then adding new element should be easier? UI design isn't my specialty, so I don't know for sure, unfortunately.

[ghost]

i like that options menu a lot. great work.

I think it should be possible to define rules for elements' spacing? Different values for spacing between slider/slider, slider/button, button/button etc.? Then adding new element should be easier? UI design isn't my specialty, so I don't know for sure, unfortunately.

if i'm understanding you correctly, it sounds like a job for css' margin and maybe padding (where appropriate). if so, it's very easy to do.

[KirillRepinArt]

i like that options menu a lot. great work.

I think it should be possible to define rules for elements' spacing? Different values for spacing between slider/slider, slider/button, button/button etc.? Then adding new element should be easier? UI design isn't my specialty, so I don't know for sure, unfortunately.

if i'm understanding you correctly, it sounds like a job for css' margin and maybe padding (where appropriate). if so, it's very easy to do.

Thank you! I wish I could take credit for this, but I've basically copied a ZBrush menu:

if i'm understanding you correctly, it sounds like a job for css' margin and maybe padding (where appropriate). if so, it's very easy to do.

I think I need to go and watch at least one tutorial on CSS, I have no idea what's going on lol.

[github-actions[bot]]

This issue has been closed due to inactivity for 30 days. If you believe it is still relevant, please leave a comment below.

[KirillRepinArt]

I've made a CSS style for text-generation-webui, but it doesn't work correctly with the newer versions, unfortunately. I've created a repository, if someone wants to try it.

[oobabooga]

This is very very cool @KirillRepinArt. Would you mind adding a license to the repository so that I can later try to adapt it here? With due credits, obviously.

[KirillRepinArt]

This is very very cool @KirillRepinArt. Would you mind adding a license to the repository so that I can later try to adapt it here? With due credits, obviously.

Thank you! I've added GNU GENERAL PUBLIC LICENSE, hope that works.

Also, I would love to continue with this in future. At this point I'm reasonably confident that the things from my sketches are quite possible to achieve, but I think it would require a new mode for the UI. There needs to be a different base arrangement of gradio elements that would be styled.

I think it would look very nice in the end though.

[jamesbraza]

For those reading @KirillRepinArt's post above, the repo: https://github.com/KirillRepinArt/ChatGPT-UI

[KirillRepinArt]

I've updated the style to work with the latest version of UI.

[KirillRepinArt]

If anybody is still interested, I've updated the style, it works with the latest version of UI again.

https://github.com/KirillRepinArt/ChatGPT-UI

[KirillRepinArt]

I've updated the style for the current version of UI:

[flflow]

What you think about this? Maybe you can add to your layout some elements of this layout?

[KirillRepinArt]

What you think about this? Maybe you can add to your layout some elements of this layout?

Looks very nice! I would like to restyle 'Parameters' and other tabs, but my CSS isn't too good, so we'll see how it goes.