Add custom UI

This commit is contained in:
Ben Chanapai 2025-05-01 15:57:12 +07:00
parent 82a973c043
commit 72417c7a2e
2 changed files with 46 additions and 3 deletions

View File

@ -5,6 +5,7 @@ import sys
from functools import reduce
import warnings
from contextlib import ExitStack
from typing import Iterable
import gradio as gr
import gradio.utils
@ -1131,7 +1132,15 @@ def create_ui():
for _interface, label, _ifid in interfaces:
shared.tab_names.append(label)
with gr.Blocks(theme=shared.gradio_theme, analytics_enabled=False, title="Stable Diffusion") as demo:
custom_theme = gr.themes.Base().set(
body_background_fill_dark="#000000",
input_background_fill_dark="#FCCB27",
input_placeholder_color_dark="#F703CE",
loader_color_dark="#F703CE",
slider_color_dark="#F703CE",
)
with gr.Blocks(theme=custom_theme, analytics_enabled=False, title="Stable Diffusion") as demo:
settings.add_quicksettings()
parameters_copypaste.connect_paste_params_buttons()
@ -1141,7 +1150,7 @@ def create_ui():
sorted_interfaces = sorted(interfaces, key=lambda x: tab_order.get(x[1], 9999))
for interface, label, ifid in sorted_interfaces:
if label in shared.opts.hidden_tabs:
if label in shared.opts.hidden_tabs or label not in ['txt2img', 'Settings', 'img2img', 'Extras']:
continue
with gr.TabItem(label, id=ifid, elem_id=f"tab_{ifid}"):
interface.render()

View File

@ -227,7 +227,7 @@ input[type="checkbox"].input-accordion-checkbox{
}
.block.token-counter span{
background: var(--input-background-fill) !important;
background: #000000 !important;
box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075);
border: 2px solid rgba(192,192,192,0.4) !important;
border-radius: 0.4em;
@ -1665,3 +1665,37 @@ body.resizing .resize-handle {
visibility: visible;
width: auto;
}
/* pink: #F703CE */
/* yellow: #FBCB26 */
/* black: #000000 */
.dark #txt2img_gallery, #img2img_gallery, #extras_gallery {
background-color: #F703CE;
}
.dark #tabs > .tab-nav > button.selected {
color: #F703CE;
}
.dark #tabs > .tab-nav > button {
color: #FBCB26;
}
.dark #txt2img_extra_tabs > .tab-nav > button.selected {
background-color: #F703CE;
}
.dark .wrap-inner {
border: 1px solid var(--block-border-color) !important;
border-radius: 8px !important;
background-color: #000000;
}
.dark input[type="number"] {
color: #000000 !important;
}
.dark textarea {
color: #000000 !important;
}