📦 build: bump v2.0.0 [force major]

2023-06-28 01:03:08 +08:00 · 2023-06-28 01:03:08 +08:00 · dfb0f63390
parent 48321e52fc
commit dfb0f63390
18 changed files with 644 additions and 405 deletions
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -6,9 +6,11 @@

 <h1 align="center">Lobe Theme</h1>

-Lobe Theme for Stable Diffusion WebUI
+高定 Stable Diffusion 现代主题, 诸多体验优化

-[English](./README.md) · 简体中文 · [Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]
+历史版本为 Kitchen Theme
+
+[English](./README.md) · 简体中文 · [变更日志](./CHANGELOG.md) · [反馈问题][issues-url] · [功能建议][issues-url]

 <!-- SHIELD GROUP -->

@ -23,18 +25,17 @@ Lobe Theme for Stable Diffusion WebUI

 </div>

-![](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/blob/main/assets/screenshot.webp?raw=true)
+![cover.webp](https://github.com/canisminor1990/sd-webui-lobe-theme/blob/main/docs/cover.webp)

 <details>
 <summary><kbd>文档目录</kbd></summary>

 #### TOC

- [✨ 特性](#-特性)
+- [✨ 主题特性](#-主题特性)
+- [📦 插件安装](#-插件安装)
+- [🤯 使用说明](#-使用说明)
 - [🖥 兼容环境](#-兼容环境)
- [📦 安装](#-安装)
- [⚒️ 推荐设置](#️-推荐设置)
- [🪄 提示词格式化](#-提示词格式化)
 - [⌨️ 本地开发](#️-本地开发)
 - [🤝 参与贡献](#-参与贡献)
 - [🔗 链接](#-链接)
@ -45,12 +46,18 @@ Lobe Theme for Stable Diffusion WebUI

 <br/>

-## ✨ 特性
+> 📦 **Version 2.0.0** 后更名为 **Lobe Theme**, 遗产版本可以可访问 [sd-webui-kitchen-theme-legacy](https://github.com/canisminor1990/sd-webui-kitchen-theme-legacy)

- 🌈 支持亮暗色主题，并一键切换。
- 🪄 支持 Prompt 格式化。
- 🎛️ 快捷设置伸缩侧边栏.
- 🎨 基于 Antd CSS Token。
+## ✨ 主题特性
+
+- [x] 🌗 支持亮暗色主题，可以导航栏快速切换
+- [x] 🌈 支持主题颜色和中性色自定义，支持 Logo 自定义
+- [x] 🪄 支持 Prompt 一键格式化，并提供简易的标签编辑器
+- [x] 🎛️ 高定制侧边栏，左侧为快捷设置侧边栏，右侧为模型侧边栏
+- [x] 🖼️ 可调节画板比例，使生成图像始终置顶
+- [x] 📱 移动端友好，针对手机屏幕完成部分优化
+- [ ] 📝 语法高亮的 Prompt 输入框
+- [ ] 🆗 i18n 多语言支持

 <div align="right">

@ -58,28 +65,38 @@ Lobe Theme for Stable Diffusion WebUI

 </div>

-## 🖥 兼容环境
+## 📦 插件安装

-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| last 2 versions                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                      | last 2 versions                                                                                                                                                                                              |
+#### 方法一

-> ⚠️ 目前已知道在 Firefox 火狐浏览器上存在样式兼容问题
+通过 stable diffusion webui 插件市场搜索 `Lobe Theme` 或 `Kitchen Theme` 进行安装

-<div align="right">
+> 👉 提示：**Version 2.0.0** 后更名为 **Lobe Theme**

-[![][back-to-top]](#readme-top)
-
-</div>
-
-## 📦 安装
+#### 方法二

 作为扩展（推荐） 将存储库克隆到您的扩展文件夹中：

 ```shell
-git clone "https://github.com/canisminor1990/sd-web-ui-kitchen-theme" extensions/kitchen-theme
+git clone "https://github.com/canisminor1990/sd-webui-lobe-theme" extensions/lobe-theme
 ```

+> 👉 提示：最低要求 gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🤯 使用说明
+
+![feat_thememode.webp](https://github.com/canisminor1990/sd-webui-lobe-theme/blob/main/docs/feat_thememode.webp)
+
+#### 亮暗色主题
+
+> 👉 Tip: 可在右上角导航栏快速切换
+
 当前主题支持亮暗色双主题，如果你想强制使用暗色模式，使用参数 `--theme=dark` 启动您的 WebUI。例如，在 Windows 上，您的 `webui-user.bat` 应包括：

 ```shell
@ -93,7 +110,24 @@ http://localhost:7860/?__theme=light
 http://localhost:7860/?__theme=dark
 ```

-> ⚠️ 警告：最低要求 gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+![feat_theme_modify.webp](https://github.com/canisminor1990/sd-webui-lobe-theme/blob/main/docs/feat_theme_modify.webp)
+
+#### 主体定制
+
+> 👉 Tip: 右上角 `⚙` 图标打开设置面板，当前可用设置如下
+
+- **Theme**
+  - Primary color 主题色：目前提供 `13` 种主题颜色搭配
+  - Neutral color 中性色：目前提供 `6` 种不同色彩倾向灰阶搭配
+  - Logo type 徽标种类：`Lobe` `Kitchen` `自定义`
+    - Logo 自定义：支持 `img url` `base64` `emoji`，当填入单个 emoji 时会自动替换为 3D Fluent Emoji
+    - Title 标题自定义：自定义站点名称

 <div align="right">

@ -101,9 +135,9 @@ http://localhost:7860/?__theme=dark

 </div>

-## ⚒️ 推荐设置
+![feat_sidebar.webp](https://github.com/canisminor1990/sd-webui-lobe-theme/blob/main/docs/feat_sidebar.webp)

-#### Kitchen WebUI Setting 主题设置
+#### 侧边栏定制

 > 👉 Tip: 右上角 `⚙` 图标打开设置面板，当前可用设置如下

@ -120,7 +154,8 @@ http://localhost:7860/?__theme=dark
  - Default Width 默认宽度: `340`
  - Default card size 模型卡片默认尺寸: `86`

-<br/>
+<details>
+<summary><kbd>推荐系统设置</kbd></summary>

 #### Extra-Networks 扩展模型视窗

@ -128,8 +163,6 @@ http://localhost:7860/?__theme=dark
 - 卡牌宽度: 86
 - 卡牌高度: 128

-![](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/blob/main/assets/extra-networks.webp?raw=true)
-
 <br/>

 #### Quick-Setting 快捷设置
@ -138,15 +171,29 @@ http://localhost:7860/?__theme=dark
 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
 ```

+</details>
+
 <div align="right">

 [![][back-to-top]](#readme-top)

 </div>

-## 🪄 提示词格式化
+![feat_mobile_friendly.webp](https://github.com/canisminor1990/sd-webui-lobe-theme/blob/main/docs/feat_mobile_friendly.webp)

-![](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/blob/main/assets/prompt-formatting.webp?raw=true)
+#### 移动端适配
+
+针对移动端完成部分便捷性适配设计，面包屑折叠导航栏，侧边栏适配等，但有余 stable diffusion 界面复杂度和定值难度较高无法保证和桌面端相同的使用体验，有更多想法欢迎反馈。
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+#### 提示词格式化
+
+点击 Prompt 下方 <kbd>🪄</kbd> 按钮即可将提示词一键格式化

 > 👉 Tip: 全角标点转半角，去除多余空格，补充缺失逗号，把 Extra-Networks 模型移动到末尾

@ -168,19 +215,33 @@ photorealistic photo of a handsome male, (wizard:1.2), short beard, white wizard

 </div>

+## 🖥 兼容环境
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| last 2 versions                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                      | last 2 versions                                                                                                                                                                                              |
+
+> ⚠️ 目前已知道在 Firefox 火狐浏览器上存在样式兼容问题
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
 ## ⌨️ 本地开发

 你可以使用 Gitpod 进行在线开发：

 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][gitpod-url]

-或者克隆到本地开发:
+或者克隆到本地开发, 热更新开发模式需要将 stable diffuison 提前启动到 `7860` 端口:

 ```bash
-$ git clone https://github.com/canisminor1990/sd-web-ui-kitchen-theme.git
-$ cd sd-web-ui-kitchen-theme
-$ npm install
-$ npm start
+$ git clone https://github.com/canisminor1990/sd-webui-lobe-theme.git
+$ cd sd-webui-lobe-theme
+$ pnpm install
+$ pnpm start
 ```

 <div align="right">
@ -193,7 +254,7 @@ $ npm start

 <!-- CONTRIBUTION GROUP -->

-> 📊 Total: <kbd>**6**</kbd>
+> 📊 Total: <kbd>**7**</kbd>

 <a href="https://github.com/canisminor1990" title="canisminor1990">
  <img src="https://avatars.githubusercontent.com/u/17870709?v=4" width="50" />
@ -207,6 +268,9 @@ $ npm start
 <a href="https://github.com/web-97" title="web-97">
  <img src="https://avatars.githubusercontent.com/u/46352788?v=4" width="50" />
 </a>
+<a href="https://github.com/antfu" title="antfu">
+  <img src="https://avatars.githubusercontent.com/u/11247099?v=4" width="50" />
+</a>
 <a href="https://github.com/StimeKe" title="StimeKe">
  <img src="https://avatars.githubusercontent.com/u/25315788?v=4" width="50" />
 </a>
@ -247,7 +311,7 @@ This project is [MIT](./LICENSE) licensed.
 <!-- LINK GROUP -->

 [profile-url]: https://github.com/canisminor1990
-[gitpod-url]: https://gitpod.io/#https://github.com/canisminor1990/sd-webui-kitchen-theme
+[gitpod-url]: https://gitpod.io/#https://github.com/canisminor1990/sd-webui-lobe-theme

 <!-- SHIELD LINK GROUP -->

@ -255,40 +319,40 @@ This project is [MIT](./LICENSE) licensed.

 <!-- release -->

-[release-shield]: https://img.shields.io/github/v/release/canisminor1990/sd-web-ui-kitchen-theme?style=flat&sort=semver&logo=github
-[release-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/releases
+[release-shield]: https://img.shields.io/github/v/release/canisminor1990/sd-webui-lobe-theme?style=flat&sort=semver&logo=github
+[release-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/releases

 <!-- releaseDate -->

-[release-date-shield]: https://img.shields.io/github/release-date/canisminor1990/sd-web-ui-kitchen-theme?style=flat
-[release-date-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/releases
+[release-date-shield]: https://img.shields.io/github/release-date/canisminor1990/sd-webui-lobe-theme?style=flat
+[release-date-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/releases

 <!-- ciTest -->

-[ci-test-shield]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/workflows/Test%20CI/badge.svg
-[ci-test-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/actions/workflows/test.yml
+[ci-test-shield]: https://github.com/canisminor1990/sd-webui-lobe-theme/workflows/Test%20CI/badge.svg
+[ci-test-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/actions/workflows/test.yml

 <!-- ciRelease -->

-[ci-release-shield]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/workflows/Build%20and%20Release/badge.svg
-[ci-release-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/actions/workflows/release.yml
+[ci-release-shield]: https://github.com/canisminor1990/sd-webui-lobe-theme/workflows/Build%20and%20Release/badge.svg
+[ci-release-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/actions/workflows/release.yml

 <!-- contributors -->

-[contributors-shield]: https://img.shields.io/github/contributors/canisminor1990/sd-web-ui-kitchen-theme.svg?style=flat
-[contributors-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/graphs/contributors
+[contributors-shield]: https://img.shields.io/github/contributors/canisminor1990/sd-webui-lobe-theme.svg?style=flat
+[contributors-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/graphs/contributors

 <!-- forks -->

-[forks-shield]: https://img.shields.io/github/forks/canisminor1990/sd-web-ui-kitchen-theme.svg?style=flat
-[forks-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/network/members
+[forks-shield]: https://img.shields.io/github/forks/canisminor1990/sd-webui-lobe-theme.svg?style=flat
+[forks-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/network/members

 <!-- stargazers -->

-[stargazers-shield]: https://img.shields.io/github/stars/canisminor1990/sd-web-ui-kitchen-theme.svg?style=flat
-[stargazers-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/stargazers
+[stargazers-shield]: https://img.shields.io/github/stars/canisminor1990/sd-webui-lobe-theme.svg?style=flat
+[stargazers-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/stargazers

 <!-- issues -->

-[issues-shield]: https://img.shields.io/github/issues/canisminor1990/sd-web-ui-kitchen-theme.svg?style=flat
-[issues-url]: https://github.com/canisminor1990/sd-webui-kitchen-theme/issues/new/choose
+[issues-shield]: https://img.shields.io/github/issues/canisminor1990/sd-webui-lobe-theme.svg?style=flat
+[issues-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/issues/new/choose
--- a/README.md
+++ b/README.md
@ -6,7 +6,9 @@

 <h1 align="center">Lobe Theme</h1>

-Lobe Theme for Stable Diffusion WebUI
+The modern theme for stable diffusion webui
+
+Legacy verison a.k.a kitchen theme

 English · [简体中文](./README-zh_CN.md) · [Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]

@ -23,18 +25,19 @@ English · [简体中文](./README-zh_CN.md) · [Changelog](./CHANGELOG.md) · [

 </div>

-![](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/blob/main/assets/screenshot.webp?raw=true)
+![cover.webp](https://github.com/canisminor1990/sd-webui-lobe-theme/blob/main/docs/cover.webp)

 <details>
 <summary><kbd>Table of contents</kbd></summary>

+> 📦 After **Version 2.0.0** Kitchen theme was renamed to **Lobe Theme**. The legacy version can be accessed at [sd-webui-kitchen-theme-legacy](https://github.com/canisminor1990/sd-webui-kitchen-theme-legacy)
+
 #### TOC

 - [✨ Features](#-features)
- [🖥 Environment Support](#-environment-support)
 - [📦 Installation](#-installation)
- [⚒️ Recommended Settings](#️-recommended-settings)
- [🪄 Prompt formatting](#-prompt-formatting)
+- [🤯 Usage](#-usage)
+- [🖥 Environment Support](#-environment-support)
 - [⌨️ Local Development](#️-local-development)
 - [🤝 Contributing](#-contributing)
 - [🔗 Credits](#-credits)
@ -47,10 +50,164 @@ English · [简体中文](./README-zh_CN.md) · [Changelog](./CHANGELOG.md) · [

 ## ✨ Features

- 🌈 Supports light and dark themes with switch button.
- 🪄 Supports Prompt formatting.
- 🎛️ Quick Setting in draggable sidebar.
- 🎨 Based on Antd CSS Token.
+- [x] 🌗 Supports light and dark themes, with the ability to quickly switch in the navigation bar
+- [x] 🌈 Supports custom theme colors and neutral colors, with the option to customize the logo
+- [x] 🪄 Supports one-click formatting of the prompt, with a simple tag editor provided
+- [x] 🎛️ Highly customizable sidebar, with a quick settings sidebar on the left and a model sidebar on the right
+- [x] 🖼️ Adjustable canvas ratio, ensuring that generated images are always displayed at the top
+- [x] 📱 Mobile-friendly, with partial optimization for mobile screens
+- [ ] 📝 Syntax highlighting in the prompt input box
+- [ ] 🆗 Multilingual support with i18n
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 📦 Installation
+
+#### Method 1
+
+Search for `Lobe Theme` or `Kitchen Theme` in the stable diffusion webui plugin market and install it.
+
+> 👉 Note: **Version 2.0.0** was renamed to **Lobe Theme**
+
+#### Method 2
+
+As an extension (recommended), clone the repository to your extension folder:
+
+```shell
+git clone "https://github.com/canisminor1990/sd-webui-lobe-theme" extensions/lobe-theme
+```
+
+> 👉 Note: minimum requirements gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🤯 Usage
+
+![feat_thememode.webp](https://github.com/canisminor1990/sd-webui-lobe-theme/blob/main/docs/feat_thememode.webp)
+
+#### Light and Dark Themes
+
+> 👉 Tip: You can quickly switch between light and dark themes in the upper-right corner of the navigation bar.
+
+The current theme supports both light and dark themes. If you want to force dark mode, use the `--theme=dark` argument to launch your WebUI. For example, on Windows, your `webui-user.bat` should include:
+
+```shell
+set COMMANDLINE_ARGS= --theme=dark
+```
+
+Alternatively, you can switch directly through URL Props:
+
+```shell
+http://localhost:7860/?__theme=light
+http://localhost:7860/?__theme=dark
+```
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+![feat_theme_modify.webp](https://github.com/canisminor1990/sd-webui-lobe-theme/blob/main/docs/feat_theme_modify.webp)
+
+#### Theme Customization
+
+> 👉 Tip: Click the `⚙` icon in the upper-right corner to open the settings panel. The current available settings are as follows:
+
+- **Theme**
+  - Primary color: Currently offers `13` theme color combinations
+  - Neutral color: Currently offers `6` different grayscale color combinations
+  - Logo type: `Lobe`, `Kitchen`, `Custom`
+    - Custom logo: Supports `img url`, `base64`, and `emoji`. When a single emoji is entered, it will be automatically replaced with 3D Fluent Emoji.
+    - Custom title: Customize the site name.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+![feat_sidebar.webp](https://github.com/canisminor1990/sd-webui-lobe-theme/blob/main/docs/feat_sidebar.webp)
+
+#### 侧边栏定制
+
+> 👉 Tip: Click the `⚙` icon in the upper-right corner to open the settings panel. The current available settings are as follows:
+
+- **Prompt Textarea**
+  - Display mode: `scroll fixed height` | `resizable by text lines`
+- **Sidebar**
+  - Default expand: `true`
+  - Display mode: `fixed` | `float`
+  - Default width: `280`
+- **ExtraNetwork Sidebar**
+  - Enable: `true`
+  - Default expand: `true`
+  - Display mode: `fixed` | `float`
+  - Default width: `340`
+  - Default card size: `86`
+
+<details>
+<summary><kbd>Recommended System Settings</kbd></summary>
+
+#### Extra-Networks
+
+- thumbs
+- width: 86
+- height: 128
+
+<br/>
+
+#### Quick-Setting
+
+```txt
+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
+```
+
+</details>
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+![feat_mobile_friendly.webp](https://github.com/canisminor1990/sd-webui-lobe-theme/blob/main/docs/feat_mobile_friendly.webp)
+
+#### Mobile Adaptation
+
+Partial convenience adaptation design has been completed for mobile devices, including breadcrumb foldable navigation bar, sidebar adaptation, etc. However, due to the high complexity and fixed values of the stable diffusion interface, it is difficult to ensure the same user experience as the desktop version. Feedback is welcome for more ideas.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+#### 🪄 Prompt formatting
+
+Click the <kbd>🪄</kbd> button below 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:
+
+```text
+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:
+
+```text
+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>
+```

 <div align="right">

@ -72,114 +229,17 @@ English · [简体中文](./README-zh_CN.md) · [Changelog](./CHANGELOG.md) · [

 </div>

-## 📦 Installation
-
-As an extension (recommended)
-Either clone the repo into your extensions folder:
-
-```shell
-git clone "https://github.com/canisminor1990/sd-web-ui-kitchen-theme" extensions/kitchen-theme
-```
-
-The current theme supports both light and dark themes. If you want to force dark mode, use the `--theme=dark` argument to launch your WebUI. For example, on Windows, your `webui-user.bat` should include:
-
-```shell
-set COMMANDLINE_ARGS= --theme=dark
-```
-
-Alternatively, you can switch directly through URL Props:
-
-```shell
-http://localhost:7860/?__theme=light
-http://localhost:7860/?__theme=dark
-```
-
-> ⚠️ Warning: minimum requirements gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
-
-<div align="right">
-
-[![][back-to-top]](#readme-top)
-
-</div>
-
-## ⚒️ Recommended Settings
-
-#### Kitchen WebUI Setting
-
-> 👉 Tip: top right `⚙` icon in header
-
- **Prompt Textarea**
-  - Display mode: `scroll` | `resizable`
- **Sidebar**
-  - Default expand: `true`
-  - Display mode: `fixed` | `float`
-  - Default width: `280`
- **ExtraNetwork Sidebar**
-  - Enable: `true`
-  - Default expand: `true`
-  - Display mode: `fixed` | `float`
-  - Default Width: `340`
-  - Default card size: `86`
-
-<br/>
-
-#### Extra-Networks
-
- thumbs
- width: 86
- height: 128
-
-![](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/blob/main/assets/extra-networks.webp?raw=true)
-
-<br/>
-
-#### Quick-Setting
-
-```txt
-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
-```
-
-<div align="right">
-
-[![][back-to-top]](#readme-top)
-
-</div>
-
-## 🪄 Prompt formatting
-
-![](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/blob/main/assets/prompt-formatting.webp?raw=true)
-
-> 👉 Tip: Convert full-width punctuation to half-width, remove extra spaces, add missing commas, and move the Extra-Networks model to the end.
-
-Before
-
-```text
-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
-
-```text
-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>
-```
-
-<div align="right">
-
-[![][back-to-top]](#readme-top)
-
-</div>
-
 ## ⌨️ Local Development

 You can use Gitpod for online development:

 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][gitpod-url]

-Or clone it for local 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.

 ```bash
-$ git clone https://github.com/canisminor1990/sd-web-ui-kitchen-theme.git
-$ cd sd-web-ui-kitchen-theme
+$ git clone https://github.com/canisminor1990/sd-webui-lobe-theme.git
+$ cd sd-webui-lobe-theme
 $ npm install
 $ npm start
 ```
@ -194,7 +254,7 @@ $ npm start

 <!-- CONTRIBUTION GROUP -->

-> 📊 Total: <kbd>**6**</kbd>
+> 📊 Total: <kbd>**7**</kbd>

 <a href="https://github.com/canisminor1990" title="canisminor1990">
  <img src="https://avatars.githubusercontent.com/u/17870709?v=4" width="50" />
@ -208,6 +268,9 @@ $ npm start
 <a href="https://github.com/web-97" title="web-97">
  <img src="https://avatars.githubusercontent.com/u/46352788?v=4" width="50" />
 </a>
+<a href="https://github.com/antfu" title="antfu">
+  <img src="https://avatars.githubusercontent.com/u/11247099?v=4" width="50" />
+</a>
 <a href="https://github.com/StimeKe" title="StimeKe">
  <img src="https://avatars.githubusercontent.com/u/25315788?v=4" width="50" />
 </a>
@ -248,7 +311,7 @@ This project is [MIT](./LICENSE) licensed.
 <!-- LINK GROUP -->

 [profile-url]: https://github.com/canisminor1990
-[gitpod-url]: https://gitpod.io/#https://github.com/canisminor1990/sd-webui-kitchen-theme
+[gitpod-url]: https://gitpod.io/#https://github.com/canisminor1990/sd-webui-lobe-theme

 <!-- SHIELD LINK GROUP -->

@ -256,40 +319,40 @@ This project is [MIT](./LICENSE) licensed.

 <!-- release -->

-[release-shield]: https://img.shields.io/github/v/release/canisminor1990/sd-web-ui-kitchen-theme?style=flat&sort=semver&logo=github
-[release-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/releases
+[release-shield]: https://img.shields.io/github/v/release/canisminor1990/sd-webui-lobe-theme?style=flat&sort=semver&logo=github
+[release-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/releases

 <!-- releaseDate -->

-[release-date-shield]: https://img.shields.io/github/release-date/canisminor1990/sd-web-ui-kitchen-theme?style=flat
-[release-date-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/releases
+[release-date-shield]: https://img.shields.io/github/release-date/canisminor1990/sd-webui-lobe-theme?style=flat
+[release-date-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/releases

 <!-- ciTest -->

-[ci-test-shield]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/workflows/Test%20CI/badge.svg
-[ci-test-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/actions/workflows/test.yml
+[ci-test-shield]: https://github.com/canisminor1990/sd-webui-lobe-theme/workflows/Test%20CI/badge.svg
+[ci-test-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/actions/workflows/test.yml

 <!-- ciRelease -->

-[ci-release-shield]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/workflows/Build%20and%20Release/badge.svg
-[ci-release-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/actions/workflows/release.yml
+[ci-release-shield]: https://github.com/canisminor1990/sd-webui-lobe-theme/workflows/Build%20and%20Release/badge.svg
+[ci-release-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/actions/workflows/release.yml

 <!-- contributors -->

-[contributors-shield]: https://img.shields.io/github/contributors/canisminor1990/sd-web-ui-kitchen-theme.svg?style=flat
-[contributors-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/graphs/contributors
+[contributors-shield]: https://img.shields.io/github/contributors/canisminor1990/sd-webui-lobe-theme.svg?style=flat
+[contributors-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/graphs/contributors

 <!-- forks -->

-[forks-shield]: https://img.shields.io/github/forks/canisminor1990/sd-web-ui-kitchen-theme.svg?style=flat
-[forks-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/network/members
+[forks-shield]: https://img.shields.io/github/forks/canisminor1990/sd-webui-lobe-theme.svg?style=flat
+[forks-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/network/members

 <!-- stargazers -->

-[stargazers-shield]: https://img.shields.io/github/stars/canisminor1990/sd-web-ui-kitchen-theme.svg?style=flat
-[stargazers-url]: https://github.com/canisminor1990/sd-web-ui-kitchen-theme/stargazers
+[stargazers-shield]: https://img.shields.io/github/stars/canisminor1990/sd-webui-lobe-theme.svg?style=flat
+[stargazers-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/stargazers

 <!-- issues -->

-[issues-shield]: https://img.shields.io/github/issues/canisminor1990/sd-web-ui-kitchen-theme.svg?style=flat
-[issues-url]: https://github.com/canisminor1990/sd-webui-kitchen-theme/issues/new/choose
+[issues-shield]: https://img.shields.io/github/issues/canisminor1990/sd-webui-lobe-theme.svg?style=flat
+[issues-url]: https://github.com/canisminor1990/sd-webui-lobe-theme/issues/new/choose
--- a/assets/extra-networks.webp
+++ b/assets/extra-networks.webp
--- a/assets/prompt-formatting.webp
+++ b/assets/prompt-formatting.webp
--- a/assets/screenshot.webp
+++ b/assets/screenshot.webp
--- a/docs/cover.webp
+++ b/docs/cover.webp
--- a/docs/feat_mobile_friendly.webp
+++ b/docs/feat_mobile_friendly.webp
--- a/docs/feat_sidebar.webp
+++ b/docs/feat_sidebar.webp
--- a/docs/feat_theme_modify.webp
+++ b/docs/feat_theme_modify.webp
--- a/docs/feat_thememode.webp
+++ b/docs/feat_thememode.webp
--- a/javascript/main.js
+++ b/javascript/main.js
--- a/package.json
+++ b/package.json
@ -1,17 +1,21 @@
 {
-  "name": "sd-webui-kitchen-theme",
+  "name": "sd-webui-lobe-theme",
  "version": "1.8.3",
  "private": true,
+  "description": "The modern theme for stable diffusion webui, legacy verison a.k.a kitchen theme",
  "keywords": [
-    "stable-diffusion-webui"
+    "stable-diffusion-webui",
+    "sd-webui-kitchen-theme",
+    "kitchen-theme",
+    "extensions"
  ],
-  "homepage": "https://github.com/canisminor1990/sd-webui-kitchen-theme",
+  "homepage": "https://github.com/canisminor1990/sd-webui-lobe-theme",
  "bugs": {
-    "url": "https://github.com/canisminor1990/sd-webui-kitchen-theme/issues/new"
+    "url": "https://github.com/canisminor1990/sd-webui-lobe-theme/issues/new"
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/canisminor1990/sd-webui-kitchen-theme.git"
+    "url": "https://github.com/canisminor1990/sd-webui-lobe-theme.git"
  },
  "license": "MIT",
  "author": "canisminor1990 <i@canisminor.cc>",
--- a/src/components/Logo/CustomLogo.tsx
+++ b/src/components/Logo/CustomLogo.tsx
@ -0,0 +1,35 @@
+import { FluentEmoji, Logo as LobeLogo } from '@lobehub/ui';
+import { getEmoji } from '@lobehub/ui/es/utils/getEmojiByCharacter';
+import { Space } from 'antd';
+import { type CSSProperties, memo } from 'react';
+
+export interface CustomLogoProps {
+  logoCustomTitle?: string;
+  logoCustomUrl?: string;
+  size?: number;
+  style?: CSSProperties;
+}
+
+const CustomLogo = memo<CustomLogoProps>(({ size = 32, style, logoCustomUrl, logoCustomTitle }) => {
+  let customLogo = <LobeLogo size={size} style={style} />;
+
+  if (logoCustomUrl) {
+    if (logoCustomUrl.includes('http') || logoCustomUrl.includes('data')) {
+      customLogo = <img alt="logo" src={logoCustomUrl} style={{ height: size, ...style }} />;
+    } else {
+      const pureEmoji = getEmoji(logoCustomUrl);
+      if (pureEmoji) {
+        customLogo = <FluentEmoji emoji={pureEmoji} size={size} style={style} />;
+      }
+    }
+  }
+
+  return (
+    <Space align="center" size={size * 0.3}>
+      {customLogo}
+      <b style={{ fontSize: size * 0.6 }}>{logoCustomTitle}</b>
+    </Space>
+  );
+});
+
+export default CustomLogo;
--- a/src/components/Logo/KitchenLogo.tsx
+++ b/src/components/Logo/KitchenLogo.tsx
@ -2,13 +2,13 @@ import { type CSSProperties, memo } from 'react';

 import { darkLogo, lightLogo } from './style';

-interface LogoProps {
+export interface KitchenLogoProps {
  size?: number;
  style?: CSSProperties;
  themeMode: 'dark' | 'light';
 }

-const KitchenLogo = memo<LogoProps>(({ size, style, themeMode }) => {
+const KitchenLogo = memo<KitchenLogoProps>(({ size = 32, style, themeMode }) => {
  return (
    <img
      alt="logo"
--- a/src/components/Logo/index.tsx
+++ b/src/components/Logo/index.tsx
@ -1,4 +1,5 @@
-import { Logo as LobeLogo } from '@lobehub/ui';
+import { FluentEmoji, Logo as LobeLogo } from '@lobehub/ui';
+import { getEmoji } from '@lobehub/ui/es/utils/getEmojiByCharacter';
 import { Space } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { type CSSProperties, memo } from 'react';
@ -22,13 +23,24 @@ const Logo = memo<LogoProps>(({ size = 32, style }) => {
  }

  if (setting.logoType === 'custom') {
+    let customLogo = <LobeLogo size={size} style={style} />;
+
+    if (setting.logoCustomUrl) {
+      if (setting.logoCustomUrl.includes('http') || setting.logoCustomUrl.includes('data')) {
+        customLogo = (
+          <img alt="logo" src={setting.logoCustomUrl} style={{ height: size, ...style }} />
+        );
+      } else {
+        const pureEmoji = getEmoji(setting.logoCustomUrl);
+        if (pureEmoji) {
+          customLogo = <FluentEmoji emoji={pureEmoji} size={size} style={style} />;
+        }
+      }
+    }
+
    return (
      <Space align="center" size={size * 0.3}>
-        {setting.logoCustomUrl ? (
-          <img alt="logo" src={setting.logoCustomUrl} style={{ height: size, ...style }} />
-        ) : (
-          <LobeLogo size={size} style={style} />
-        )}
+        {customLogo}
        <b style={{ fontSize: size * 0.6 }}>{setting.logoCustomTitle}</b>
      </Space>
    );
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -1,4 +1,5 @@
 export { default as Logo, type LogoProps } from './Logo';
+export { default as CustomLogo, type CustomLogoProps } from './Logo/CustomLogo';
 export { default as Modal, type ModalProps } from './Modal';
 export { default as SidebarBody } from './Sidebar/SidebarBody';
 export { default as SidebarContainer } from './Sidebar/SidebarContainer';
--- a/src/pages/ExtraNetworkSidebar/style.ts
+++ b/src/pages/ExtraNetworkSidebar/style.ts
@ -3,6 +3,20 @@ import { createStyles } from 'antd-style';
 export const useStyles = createStyles(
  ({ css, token }, { headerHeight = 64, size = 86 }: { headerHeight?: number; size?: number }) => ({
    body: css`
+      .hide {
+        display: none;
+      }
+
+      #txt2img-extra-netwrok-sidebar,
+      #img2img-extra-netwrok-sidebar {
+        button.lg.secondary.gradio-button,
+        #txt2img_extra_sort,
+        #img2img_extra_sort {
+          height: 34px !important;
+          min-height: 34px !important;
+        }
+      }
+
      .extra-network-cards .name {
        background: unset !important;
      }
--- a/src/slots/Setting/SettingForm.tsx
+++ b/src/slots/Setting/SettingForm.tsx
@ -5,6 +5,7 @@ import { Palette, PanelLeftClose, PanelRightClose, TextCursorInput } from 'lucid
 import { memo, useCallback, useMemo, useState } from 'react';
 import { shallow } from 'zustand/shallow';

+import { CustomLogo } from '@/components';
 import { NeutralColor, PrimaryColor, WebuiSetting, defaultSetting, useAppStore } from '@/store';
 import { neutralColorScales } from '@/styles/neutralColors';

@ -24,7 +25,7 @@ const findKey = (object: { [key in string]: string }, value: string): any => {
 const SettingForm = memo(() => {
  const setting = useAppStore((st) => st.setting, isEqual);
  const onSetSetting = useAppStore((st) => st.onSetSetting, shallow);
-  const [showCustom, setShowCustom] = useState<boolean>(setting.logoType === 'custom');
+  const [rawSetting, setRawSetting] = useState<WebuiSetting>(setting);
  const [primaryColor, setPrimaryColor] = useState<PrimaryColor | undefined>(
    setting.primaryColor || undefined,
  );
@ -77,7 +78,13 @@ const SettingForm = memo(() => {
  );

  return (
-    <Form className={styles.form} initialValues={setting} layout="horizontal" onFinish={onFinish}>
+    <Form
+      className={styles.form}
+      initialValues={setting}
+      layout="horizontal"
+      onFinish={onFinish}
+      onValuesChange={(_, v) => setRawSetting(v)}
+    >
      <div className={styles.group}>
        <div className={styles.title}>
          <Icon icon={TextCursorInput} />
@ -188,19 +195,26 @@ const SettingForm = memo(() => {
        </Item>
        <Divider style={{ margin: 0 }} />
        <Item className={styles.item} label="Logo type" name="logoType">
-          <Segmented
-            onChange={(v) => setShowCustom(v === 'custom')}
-            options={['lobe', 'kitchen', 'custom']}
-          />
+          <Segmented options={['lobe', 'kitchen', 'custom']} />
        </Item>
-        {showCustom && (
+        {rawSetting.logoType === 'custom' && (
          <>
-            <Item className={styles.item} label="Logo url" name="logoCustomUrl">
+            <Item
+              className={styles.item}
+              label="Logo ( Url / Base64 / Emoji )"
+              name="logoCustomUrl"
+            >
              <Input />
            </Item>
-            <Item className={styles.item} label="Logo title" name="logoCustomTitle">
+            <Item className={styles.item} label="Title" name="logoCustomTitle">
              <Input />
            </Item>
+            <Item className={styles.item} label="Preview">
+              <CustomLogo
+                logoCustomTitle={rawSetting.logoCustomTitle}
+                logoCustomUrl={rawSetting.logoCustomUrl}
+              />
+            </Item>
          </>
        )}
        <Divider style={{ margin: 0 }} />