canisminor1990 / sd-webui-kitchen-theme

🅰️ Lobe theme - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.

Lobe Theme

A modern interface framework designed for Stable Diffusion WebUI
with an exquisite interface design, a highly customizable UI, and efficiency-boosting features.

English · 简体中文 · Changelog · Report Bug · Request Feature

Warning

Lobe Theme v3 is compatible with SD WebUI v1.6 and is not backwards compatible. Versions below < 1.6 should be moved to the branch legacy-sd-webui-1.5

Table of contents

TOC

• 👋🏻 Getting Started & Join Our Community
• 📦 Extension Installation
• ✨ Feature Overview
• 🖥 Environment Support
• 📦 Ecosystem
• ⌨️ Local Development
• 🤝 Contributing
• 🩷 Sponsor
• 🔗 Links
  • More Products
  • Credits

👋🏻 Getting Started & Join Our Community

Please be aware that LobeTheme is currently under active development, and feedback is welcome for any issues encountered.

	Join our Discord community! This is where you can connect with developers and other enthusiastic users of LobeHub.

Important

Star Us, You will receive all release notifications from GitHub without any delay ~ ⭐️

Star History

📦 Extension Installation

Note

Before installing the extension, please check the environment version of Stable Diffusion WebUI, with a minimum requirement of gradio-3.41.2 & sd-webui 1.6

A Installation via SD WebUI Extension Market

In Stable Diffusion WebUI, you can install the Lobe Theme extension through the built-in extension market.

• First, open Stable Diffusion WebUI and go to the extension market. Enter "Lobe Theme" in the search box and click the search button. You will see a list of related extensions.
• After finding the Lobe Theme extension, click the install button. The system will start downloading and installing the extension. After installation, you can find the Lobe Theme in the extension list, and it will take effect after reloading the UI.

B Clone this Repository via Git (Recommended)

If you prefer to manage extensions using Git, you can clone the repository to your extensions folder. Here are the detailed steps:

• Open the command line interface and navigate to the root directory of Stable Diffusion WebUI.
• Run the following command in the command line to clone the repository:

git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme

Once you have completed these steps, the Lobe Theme extension will be successfully installed in Stable Diffusion WebUI.

✨ Feature Overview

1 Light & Dark Theme

The current theme design provides two visual effects: light theme and dark theme, to meet the visual comfort needs of users in different lighting environments, which can be quickly switched in the upper right corner of the navigation bar.

If you prefer to default to the dark theme, you can achieve this by using the startup parameter --theme=dark.

Tip

To force a certain color theme in the startup file, for example, if you want to default to the dark mode in the Windows system, you can add the following content to the webui-user.bat file:

set COMMANDLINE_ARGS= --theme=dark

In addition, you can also directly switch the theme through URL parameters:

http://localhost:7860/?__theme=light
http://localhost:7860/?__theme=dark

Through these simple and intuitive operations, users can quickly switch the interface theme according to their personal preferences or current environment, in order to achieve the best user experience.

2 Personalized Theme Customization

As a design engineer, LobeChat considers the personalized experience of users in interface design, and has introduced a flexible and changeable theme mode, providing a series of color customization options, allowing users to adjust the theme color of the application according to their preferences.

Whether you want a stable deep blue, a lively peach pink, or a professional gray and white, users can find color options that match their style in LobeTheme.

Tip

By clicking the gear icon in the upper right corner of the page, you can enter the settings panel for personalized customization.

• Primary Color: We provide 13 carefully selected theme color schemes to meet your personalized color needs.
• Neutral Color: For a more detailed adjustment of the visual experience, you can also choose from 6 different neutral gray levels.
• Logo Type: You can choose the default Lobe and Kitchen logos, or customize them.
• Logo Customization: Support inputting img url, base64 encoded images, or emoji emoticons for logo customization. When entering a single emoji, the system will automatically convert it into a 3D Fluent Emoji, enriching the visual effect.
• Site Title Customization: Allows you to customize the title of the website according to your needs.

3 Prompt Syntax Highlighting

When using the Stable Diffusion model for Prompt writing, an effective feature is the Prompt syntax highlighting.

This feature automatically adds color coding to the input Prompt text according to preset syntax rules, enhancing the user experience and the intuitiveness of operations. Prompt syntax highlighting can not only help users identify and construct syntax structures more clearly, but also improve the efficiency of text editing and debugging.

4 Customizable Sidebar

One of the key highlights of LobeTheme is its highly customizable sidebar feature, designed to make the image generation workflow smoother, ensuring that every user can adjust and optimize their workspace according to their preferences.

Tip

By clicking the gear icon in the upper right corner of the interface, you can easily access and adjust the following settings:

• Input Area
  • Display Mode: Scroll Fixed Height | Adjust Size According to Text Lines
• Sidebar Configuration
  • Default Expansion: true
  • Display Mode: Fixed | Floating
  • Default Width: 280 pixels
• Extra Network Sidebar
  • Enable: true
  • Default Expansion: true
  • Display Mode: Fixed | Floating
  • Default Width: 340 pixels
  • Model Card Default Size: 86 pixels

Recommended System Settings

Extra-Networks Extension Model Window

• Thumbnail View
• Card Width: 86
• Card Height: 128

Quick-Setting

sd_model_checkpoint, sd_vae, CLIP_stop_at_last_layers, img2img_background_color, img2img_color_correction, samples_save, samples_format, grid_save, return_grid,  n_rows, live_previews_enable, show_progress_every_n_steps, live_preview_refresh_period

5 Improved Image Information Display

The display of generation information has been improved, with a deep optimization of the data presentation mechanism, and the introduction of a "one-click copy" function to improve information retrieval efficiency.

Now, you can quickly obtain the required Seeds without tedious searching in long strings.

6 Image Recipe Sharing

A brand-new image sharing feature has been launched. With a simple one-click operation, you can easily share the current image recipe, create exquisite shared images, and explore more customizable settings to make the shared images more personalized.

7 Prompt Editor

A user-friendly prompt word editor has been added to the second tab of the quick setting menu. It includes a series of preset tags covering post-processing, style description, and other key words, simplifying your operation process and helping you edit and manage prompts more efficiently.

8 Mobile-Friendly Adaptation

In order to improve the interactive experience of mobile users, LobeTheme has implemented an intelligent folding mechanism for breadcrumb navigation and finely adapted the sidebar. These adjustments are aimed at providing convenient and intuitive navigation experience on any device.

However, achieving the same complex functions and detailed customization as the desktop on the mobile end poses certain challenges. Especially when integrating with the Stable Diffusion WebUI interface, high complexity and precise parameter settings are required, which may result in differences in user experience between mobile and desktop.

If you have any suggestions or ideas, please feel free to provide feedback through GitHub Issues or Pull Requests.

9 PWA Progressive Web Application

In today's multi-device environment, providing a seamless experience for users is crucial. Therefore, we have adopted the Progressive Web Application PWA technology, which is a modern web technology that can elevate web applications to a near-native application experience.

Through PWA, LobeTheme can provide a highly optimized user experience on desktop and mobile devices, while maintaining lightweight and high performance characteristics. Visually and perceptually, it has been carefully designed to ensure that its interface is indistinguishable from native applications, providing smooth animations, responsive layout, and adaptation to different screen resolutions of different devices.

Note

If you are not familiar with the installation process of PWA, you can follow these steps to add LobeChat as your desktop application (also applicable to mobile devices):

• Run the Chrome or Edge browser on your computer.
• Visit the LobeChat website.
• Click the Install icon in the upper right corner of the address bar.
• Follow the on-screen instructions to complete the installation of PWA.

10 Prompt Word Formatting

Click the 🪄 button below the Prompt to format the prompt words with one click.

Tip

Convert full-width punctuation to half-width, remove extra spaces, add missing commas, and move the Extra-Networks model to the end.

Before formatting

photorealistic   photo of a handsome male (wizard  :1.2）， <lora:LuisapHotlineStyle:0.5> <lora:ElegantHanfuRuqunStyle:0.2>    short beard, white wizard  shirt, (with golden    trim:0.8),

After formatting

photorealistic photo of a handsome male, (wizard:1.2), short beard, white wizard shirt, (with golden trim:0.8), <lora:LuisapHotlineStyle:0.5>, <lora:ElegantHanfuRuqunStyle:0.2>

More Features

• 💎 Exquisite UI Design: Carefully designed interface with elegant appearance and smooth interactive effects.
• 🖼️ Multiple Layout Modes: In the dual-column mode, it achieves adjustable canvas proportions, ensuring that the generated images are always on top.
• 🌍 Internationalization Support: Fully supports major i18n languages and welcomes contributions on PR.

✨ With continuous updates in product iterations, we hope to bring more exciting features!

🖥 Environment Support

Chrome	Edge	Safari
last 2 versions	last 2 versions	last 2 versions

Caution

There is currently a known compatibility issue with styles on Firefox browser.

📦 Ecosystem

NPM	Repository	Description	Version
@lobehub/ui	lobehub/lobe-ui	Lobe UI is an open-source UI component library dedicated to building AIGC web applications.
@lobehub/lint	lobehub/lobe-lint	LobeLint provides configurations for ESlint, Stylelint, Commitlint, Prettier, Remark, and Semantic Release for LobeHub.
@lobehub/assets	lobehub/assets	Logo assets, favicons, webfonts for LobeHub.

⌨️ Local Development

You can use Github Codespaces for online development:

Alternatively, you can clone it for local development. To enable hot-reloading mode, you need to start stable diffuison on port 7860 in advance.

$ git clone https://github.com/lobehub/sd-webui-lobe-theme.git
$ cd sd-webui-lobe-theme
$ bun install
$ bun dev

🤝 Contributing

Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub Issues to get stuck in to show us what you’re made of.

🩷 Sponsor

Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.

🔗 Links

More Products

• 🤖 Lobe Chat : An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.
• 🌏 Lobe i18n : Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature.
• 💌 Lobe Commit : Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.

Credits

• stable-diffusion-webui：https://github.com/AUTOMATIC1111/stable-diffusion-webui
• gradio-theme-gallery: https://huggingface.co/spaces/gradio/theme-gallery
• cozy-nest: https://github.com/Nevysha/Cozy-Nest
• before 1.0.0 version
  • sd-web-ui-quickcs: https://github.com/Gerschel/sd-web-ui-quickcss/
  • Dark-Themes-SD-WebUI-Automatic1111: https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111

---

📝 License

Copyright © 2023 LobeHub.
This project is AGPL3 licensed.

sd-webui-kitchen-theme's Issues

Needs optimization for mobile devices

I love this theme, I appreciate the work you've put into it. With that being said, I am slightly disappointed that I have to stick to the Cappuchin theme instead of using yours! I prefer to use my mobile device and the tabs run off the screen! That's the only real downside I've noticed so far, but I'm unable to access certain tabs so I need to rely on an extension that merges the remaining tabs over. Thank you for the awesome theme! By the way - I would love to update the logo image to one that I've generated!

Possibility of removing or resizing the logo.

Hi there, loving this theme and it's right up my alley, the only problem is that I have a few quicksettings pinned to the top, so what happens is that one of the options in this case the change lora gets cut by the resolution of the monitor (1080p) and the theme doesn't adjust and keep things within the page limits.

Not sure if by the screenshot it's clear. Is there any way to fix this? I noticed it happens mostly because of the logo placement, but it also seems that the default UI adjusts things to the page rather than keep it in the same line.

Extensions / Settings are not visible / not wrapped.

Without Kitchen:

With:

Add custom logo?

Is there a way that we could add our custom logo to the theme or no?

Tabs buttons block dropdown option

With Kitchen installed, dropdown options are blocked by tabs underneath. Happens on all quicksettings dropdowns.

On the included screenshot you can see me hovering over "None" option but "HakuImg" is activated instead.

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

默认不显示侧边栏时无法在启动后展开到预定宽度 | When the sidebar is not displayed by default, it cannot expand to the predetermined width after startup

选择默认显示侧边栏的时候，可以在一启动就展开到预定宽度，但关闭后刷新或选择默认不展开时，侧边栏只能展开到一个“默认”的宽度，无法按预定宽度进行展开（我知道相关的修复工作可能已经在进行了，但看到没有人提出这个问题，最终还是选择发出来）

When you choose to display the sidebar by default, it can expand to the predetermined width at startup, but when you refresh after closing or choose not to expand by default, the sidebar can only be expanded to a "default" width, and cannot be expanded according to the predetermined width (I know a related fix may already be in the works, but seeing no one has submited this issue, I finally chose to post it)

A proposal for adding default interface state settings | 一个关于添加默认界面状态设置的建议

Compared with the original full-width additional network panel, the new additional network sidebar saves page space to a certain extent, but it still takes a while to get used to
Compared with adapting to the difficulty of searching when there are too many additional networks caused by the narrowing of the width, the sidebar of the additional network displayed on the web page by default is actually the biggest trouble, and the explicit content that catches the eye is really troublesome

Figure 1. Explicit content displayed directly on the page

Therefore, I suggest adding a temporary tab to the settings page, or restoring the previous independent settings tab demo, to set whether the left and right sidebars are folded or displayed by default at startup, and you can even add information about the left and right sidebars The default width setting. This can at least improve the current user experience and prevent social death in public

新的附加网络侧边栏相比起原先全屏宽度的附加网络面板一定程度上节约了页面空间，但仍需要一段时间来适应
比起适应因宽度变窄引起附加网络数量过多时检索的困难，默认展示在网页上的附加网络侧边栏本身其实才是最大的麻烦，映入眼帘的露骨内容属实有些困扰

因此，我建议还是在设置页面添加一个临时选项卡，或者恢复之前的独立设置选项卡demo，用来设置左右从侧边栏在启动时是默认折叠还是默认展示，甚至可以添加关于左右侧边栏默认宽度的设置。这样至少可以改善当前的使用体验，不至于在公共场合社会性死亡

The prompt input box is not resizable.

It's literally impossible to adjust.
The only downside to an otherwise beautiful theme

[Bug] only the header is visible in Safari

💻 系统环境 | Operating System

macOS 13.3.1 (22E261) on Apple M1 Max

🌐 浏览器 | Browser

Safari 16.4 (18615.1.26.11.23)

🐛 问题描述 | Bug Description

With Safari Version 16.4 (18615.1.26.11.23) on MacOS Ventura 13.3.1 (22E261) only the header is visible. When I open the page in Chrome (Version 112.0.5615.137 (Official Build) (arm64)) it works.

I disabled all my adblockers.

🚦 期望结果 | Expected Behavior

Should be the same as in Chrome

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

No response

Prompt Boxes Fixed Height

In the standard UI theme, the boxes for prompt and negative prompt will scale taller and taller based on the number of lines of prompt there are.

In the Kitchen Theme, it is a fixed height and requires scrolling up and down within the box to see it all.

Request...

Hi, as you are using code from: https://github.com/Gerschel/sd-web-ui-quickcss/

I recommend you, at least, mention @Gerschel in your repo.

Also, you are using code from my CSS files:

https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111

When you switch to other tabs, all tags are lost

msedge_IQuQ5SjbRR.mp4

Civitai overlay Icons not working

Don't shoot the messenger. You closed the issue, but it still persists. Only working for "textual_inversion"

No Display on "CKP"

Can we add custom fonts ?

I used tons of google extensions to change the font style but they are not working with webui. Is it possible to add custom fonts ? It would be great if we can select from google's fonts

显示的字体不清晰

您好，今天看完你的语雀直播，安装之后，发现字体显示的不太清晰，请问该如何改正

The top bar is always white顶部栏总是白色的

新版本出现了别的bug：顶上部分一直是白色的，导致我不得不使用白色界面
The new version has another bug: the top section is always white, causing me to use a white screen

Mobile support

There are several issues using this theme on mobile.

The biggest being unable to scroll over and select a different tab
And being unable to select a style from the dropdown.
Many UI elements overlapping

I actually like how the top tabs area stays small and compact, but its important to be able to at least scroll sideways to select a different tab.

Love what you’re going for! But mobile…

Great implementations! Although this is what it’s looking like on mobile at the moment, almost unable to use the UI at all anymore!
EDIT: I found the sidebar slider and once it's closed I'm able to use the UI like normal.

ExtraNetwork default card size调整了无效果

ExtraNetwork default card size改变数值大小保存后，文字大小有应用，但是图片大小还是原来的，无法应用

ERROR: Exception in ASGI application

`ERROR: Exception in ASGI application
Traceback (most recent call last):
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\responses.py", line 331, in call
stat_result = await anyio.to_thread.run_sync(os.stat, self.path)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\anyio\to_thread.py", line 31, in run_sync
return await get_asynclib().run_sync_in_worker_thread(
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\anyio_backends_asyncio.py", line 937, in run_sync_in_worker_thread
return await future
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\anyio_backends_asyncio.py", line 867, in run
result = context.run(func, *args)
FileNotFoundError: [WinError 3] 系统找不到指定的路径。: 'D:\AI\stable-diffusion-webui\static\background.png'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\uvicorn\protocols\http\h11_impl.py", line 407, in run_asgi
result = await app( # type: ignore[func-returns-value]
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\uvicorn\middleware\proxy_headers.py", line 78, in call
return await self.app(scope, receive, send)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\fastapi\applications.py", line 271, in call
await super().call(scope, receive, send)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\applications.py", line 125, in call
await self.middleware_stack(scope, receive, send)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\errors.py", line 184, in call
raise exc
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\errors.py", line 162, in call
await self.app(scope, receive, _send)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\gzip.py", line 24, in call
await responder(scope, receive, send)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\gzip.py", line 44, in call
await self.app(scope, receive, self.send_with_gzip)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\exceptions.py", line 79, in call
raise exc
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\middleware\exceptions.py", line 68, in call
await self.app(scope, receive, sender)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\fastapi\middleware\asyncexitstack.py", line 21, in call
raise e
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\fastapi\middleware\asyncexitstack.py", line 18, in call
await self.app(scope, receive, send)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 706, in call
await route.handle(scope, receive, send)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 276, in handle
await self.app(scope, receive, send)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\routing.py", line 69, in app
await response(scope, receive, send)
File "D:\AI\stable-diffusion-webui\venv\lib\site-packages\starlette\responses.py", line 334, in call
raise RuntimeError(f"File at path {self.path} does not exist.")
RuntimeError: File at path D:\AI\stable-diffusion-webui\static\background.png does not exist.`

Suddenly stopped working on A1111

Not sure what happened, didn't change any settings or anything. It just reverted back to the default theme.

I reinstalled it twice and added the arguments to the user.bat file.

any ideas?

[Bug] Firefox environment support.

Some of the UI elements do not behave properly in Firefox, it would be great if support could be added for this browser.

[Bug] rending same seed (x) and you don't reload the new generated image from prompt but keep the original first generated prompt (x) and Seed image.

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

Rending same seed (x) and you don't reload the new generated image from prompt but keep the original first generated prompt (x) and Seed image., it looks like doesn't work but image is generated.

So if you have seed 44 and put seed 44 in text box rather than -1 the image gets generated in folder but your image in UI is not updating.

But UI looking good.

🚦 期望结果 | Expected Behavior

when leaving seed 44 in open field, text box, the generate image should create a new image in the right window replacing original however it doesn't do it if seed is not -1.

📷 复现步骤 | Recurrence Steps

Type in Positive prompt
"red cat"
Hit Generate ... Find Seed of output ... for "red cat"
Put that seed in open text box ...
Change Positive prompt
"blue cat"
Hit Generate ...
....
It will show "red cat" not the "blue cat"

📝 补充信息 | Additional Information

Opera browser uses Chrome like extensions if browser style needed.

Please note works perfectly. if "-1" so whatever your doing differently for same seed is causing issue.

No response

Feature request. Mobile interface for iOS and Android clients

It’s awesome UI that looks great on desktop, but layout is suboptimal for mobile devices.

Would be great to have a different simplified version of interface for mobile UI or small sized browser window.

Typical use cases for this feature would be:

1. Generating pictures on mobile devices
2. having a small browser window opened alongside other apps on desktop.

Simplified UI would allow users to focus more on prompting and ideation rather than tinkering with settings, which can be moved to lower part of the page.

Feauture Request. type="number"

Is it possible to implement buttons in the number fields as here? Current "mini button" which is very, very difficult to get into, extremely inconvenient

HTML:

<div class="number">
	<button class="number-minus" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();">-</button>
	<input type="number" min="0" value="1" readonly>
	<button class="number-plus" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button>
</div>

CSS:

.number {
	display: inline-block;
	position: relative;
	width: 100px;
}
.number input[type="number"] {
	display: block;
	height: 32px;
	line-height: 32px;
	width: 100%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-align: center;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}
.number input[type="number"]::-webkit-outer-spin-button,
.number input[type="number"]::-webkit-inner-spin-button {
	display: none;
}
.number-minus {
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	width: 20px;
	padding: 0;
	display: block;
	text-align: center;
	border: none;
	border-right: 1px solid #ddd;
	font-size: 16px;
	font-weight: 600;
}
.number-plus {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 20px;
	padding: 0;
	display: block;
	text-align: center;
	border: none;
	border-left: 1px solid #ddd;
	font-size: 16px;
	font-weight: 600;
}

咨询

大佬，想咨询下您这边用的SD RPA工具是什么，是用的UiBot Creator还是什么？谢谢

Bug on CiviAI extension

Because of the bug is overlapping the header on top of the header with the buttons, because of which it becomes impossible to switch between tabs

https://github.com/civitai/sd_civitai_extension

[Request] would be cool if added scrollaware viewport

Basically if you are for example in img2img section you have to columns, parameters and the output, it would be nice as you scroll down for other parameters the viewport (on the right handside column) would move along the scroll

thumb mode for "show extra network" CSS doesn't work

Thanks for this layout, awesome and hard ! A small problem with the style of thumb mode for "show extra network" CSS, the previews are large and the title is offseted. Thanks again !

Bug Croped outpaint extention

When I try to use OpemOutpaint extemtion it does not show correctly with your theme activated.

Link: https://github.com/zero01101/openOutpaint-webUI-extension

The workarea looks croped as you see below:

about overlay setting

Send a PNG from the image information to text2image. Now I can't turn off the original model hash of the image. I can't switch to another model while keeping the tag. You should keep the module that turns off the overlay setting.

Conflict with Stable-Diffusion-Webui-Civitai-Helper extension

In Stable-Diffusion-Webui-Civitai-Helper extension, click the Refresh button will make the additional network show 4 icon bottom(each have different function)

But after the update the kitchen theme yesterday, when I click the Refresh button, it only works for the additional network in T.I. tab, not work in Hypernetwork tab, ckpt tab and Lora tab.

Copy Ctrl C not working

I just realized only when the theme is activated I cant use ctrl c to copy text from inside the ui. however I can use the right click to copy.
when remove the theme I can use both ctrl c and right click.

Is it a bug?

I am using chrome browser. I have tested it on edge and I can confirm it is the same.

Errors out and cannot make changes to themes

Errors out and cannot save changes made to Themes

’Send to’ button is invalid & conflicts with Tag Autocomplete extension | send to按钮失效，并且和Tag Autocomplete插件发生冲突

1. In the latest version of the Kitchen theme, when using the ‘send to’ button to send the generated information of the image to the txt2img or img2img page, the effect of jumping to the page is lost, and the generated information is not filled in the corresponding position

2. Tag Autocomplete extension (https://github.com/DominikDoom/a1111-sd-webui-tagcomplete) can freely set the color of different categories of tags in the options, but in the latest version of Kitchen theme, all Tag Autocomplete Options are all white(as shown in Figure 1 and Figure 2)

3. The built-in screenshot function of the browser is interfered. When using the function of capturing the entire webpage, only the currently displayed area can be captured(as shown in Figure 3 and Figure 4)

Suggestion: Disable the function of writing tags in the sidebar, consider moving the sidebar to the top area again, and make it collapsible, or automatically display when the mouse is close (preferably with the function of freezing the panel)

ps: Thank you for your outstanding contribution to the interface beautification, I like the changes in the last few versions very much, but I also can't ignore the impact it has on the actual function, so I put forward some ideas to help this extension Become more practical, and hope that subsequent versions can pay more attention to extension compatibility issues

1. 在最新版的Kitchen theme中，使用send to按钮将图片的生成信息发送到txt2img或者img2img页面的时候，失去了跳转页面的效果，并且生成信息也没有填入对应的位置

2. Tag Autocomplete插件可以自由设置不同类别的tag在选项中的颜色，但是在最新版的Kitchen theme中，所有Tag Autocomplete的选项都变成了白色

3. 浏览器自带的截图功能受到干扰，使用截取整个网页功能时仅能截取到当前已显示的区域

建议：停用侧边栏写入tag的功能，考虑把侧边栏重新移动到顶部区域，并改为可折叠的，或鼠标靠近时自动显示（最好配合可冻结面板的功能）

ps：真的很感谢你为界面美化所作出的杰出贡献，我非常喜欢最近几个版本的改动，但我同样无法忽略它对实际功能带来的影响，因此我提出一些看法希望能帮助这个扩展变得更实用，希望后续的版本可以更多关注扩展兼容性问题

————————————————————Figure 1————————————————————
·
·

————————————————————Figure 2————————————————————
·
·

————————————————————Figure 3————————————————————
·
·

————————————————————Figure 4————————————————————

Quicksetting dropdowns changes to right aligned/快捷设置菜单变为右对齐

The quicksetting dropdowns menu has been changed to right aligned in the latest version that supports gradio 3.23, which greatly affects the user experience. As the space on the right side is occupied by hashes, the suffix name of the file also seriously affects the alignment effect. The subdirectory information on the left side makes the interface more chaotic.
快捷设置下拉菜单在最新支持gradio3.23的版本中变为了右对齐，这极大影响了使用体验。因为右侧的空间会被哈希值占据，文件的后缀名也严重影响了对齐效果，处于左侧的子目录信息更是让界面变得更加混乱。

it is not working because of your new update

Please Fix This broo!!

windows下，顶部控件显示有问题

sanity check on gradio version - pip install --upgrade gradio

I'm seeing white background on stuff.
I upgraded gradio -
any other ideas?

Attempting uninstall: gradio
Found existing installation: gradio 3.15.0
Uninstalling gradio-3.15.0:
Successfully uninstalled gradio-3.15.0
Successfully installed aiofiles-23.1.0 gradio-3.20.1

API  •  Github  •  Gradio  •  Reload UI
python: 3.9.15  •  torch: 1.13.1+cu117  •  xformers: 0.0.17.dev461  •  gradio: 3.20.1  •  commit: 0cc0ee1b  •  checkpoint: d7fb6396ab

I did a git pull on webui

Deforum Model acces is missing

Deforum is missing the interface to change model file?

Should have this:

[Request] Normal editor canvas

Is it possible to implement a normal inpaint reactor as in https://github.com/anapnoe/stable-diffusion-webui-ux. The current version from gradio is totally crap. In principle, it is possible to fix all such windows, for editing and viewing. Also a question, is it possible to make a full-screen picture viewer?

How do we customize?

I want to change a few colors, buttons/highlights, font colors? Where can we do this? Thanks!

Tab Image Browser extension does not display correctly

When I click on the tab with the extension, the whole page starts lagging as shown in the screenshot. If you switch the tab, everything starts working steadily.

[Feature] Options to remove blur and other effects to increase performace

It's a little laggy, but removing the blur of the top bar will make it just fine.

无法更改图标和背景

更改图标会报以下错误

NULL

Not sure what happened, didn't change any settings or anything. It just reverted back to the default theme.

I reinstalled it twice and added the arguments to the user.bat file.

any ideas?

使用了Civitai-Helper插件,关闭右侧面栏后无法正常打开拓展模型的卡片面板

生成下面的拓展面板按键无法使用,我这里和那个面板相关的主要插件就是Civitai-Helper,老版本的时候是可以正常使用的

WTH have you done??

[Bug] Metadata button is too small

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

The metadata button is too small in lora styles:

🚦 期望结果 | Expected Behavior

It should be slightly larger depending on the size of the card, and it should also appear when you hover over the style card itself.

📷 复现步骤 | Recurrence Steps

I use the following settings for the panel:

📝 补充信息 | Additional Information

No response