Lobe Theme
高定 Stable Diffusion 现代主题, 诸多体验优化
历史版本为 Kitchen Theme
[English](./README.md) · 简体中文 · [变更日志](./CHANGELOG.md) · [反馈问题][github-issues-link] · [功能建议][github-issues-link]
[![][github-release-shield]][github-release-link]
[![][discord-shield]][discord-link]
[![][github-releasedate-shield]][github-releasedate-link]
[![][github-action-test-shield]][github-action-test-link]
[![][github-action-release-shield]][github-action-release-link]
[![][github-contributors-shield]][github-contributors-link]
[![][github-forks-shield]][github-forks-link]
[![][github-stars-shield]][github-stars-link]
[![][github-issues-shield]][github-issues-link]
[![][github-license-shield]][github-license-link]
![][cover]
文档目录
[![][back-to-top]](#readme-top)
## 📦 插件安装
#### 方法一
通过 stable diffusion webui 插件市场搜索 `Lobe Theme` 或 `Kitchen Theme` 进行安装
> **Note**\
> **Version 2.0.0** 后更名为 **Lobe Theme**
#### 方法二
作为扩展（推荐） 将存储库克隆到您的扩展文件夹中：
```shell
git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme
```
> **Important**\
> 最低要求 `gradio-3.41.2` & `sd-webui 1.6`
#### 保持更新
收藏项目，你将从 GitHub 上无延迟地接收所有发布通知 \~ ⭐️
Star History
[![][back-to-top]](#readme-top)
## 🤯 使用说明
![][feat-thememode]
#### 亮暗色主题
> **Note**\
> 可在右上角导航栏快速切换
当前主题支持亮暗色双主题，如果你想强制使用暗色模式，使用参数 `--theme=dark` 启动您的 WebUI。例如，在 Windows 上，您的 `webui-user.bat` 应包括：
```shell
set COMMANDLINE_ARGS= --theme=dark
```
或通过 URL Props 直接切换
```shell
http://localhost:7860/?__theme=light
http://localhost:7860/?__theme=dark
```
[![][back-to-top]](#readme-top)
![][feat-theme-modify]
#### 主体定制
> **Note**\
> 右上角 `⚙` 图标打开设置面板，当前可用设置如下
- **Theme**
- Primary color 主题色：目前提供 `13` 种主题颜色搭配
- Neutral color 中性色：目前提供 `6` 种不同色彩倾向灰阶搭配
- Logo type 徽标种类：`Lobe` `Kitchen` `自定义`
- Logo 自定义：支持 `img url` `base64` `emoji`，当填入单个 emoji 时会自动替换为 3D Fluent Emoji
- Title 标题自定义：自定义站点名称
[![][back-to-top]](#readme-top)
![][feat-highlight]
#### Prompt 语法高亮
按 Stable Diffusion 语法规则，自动染色 prompt 显示
[![][back-to-top]](#readme-top)
![][feat-sidebar]
#### 侧边栏定制
> **Note**\
> 右上角 `⚙` 图标打开设置面板，当前可用设置如下
- **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`
推荐系统设置
[![][back-to-top]](#readme-top)
![][feat-mobile-friendly]
#### 移动端适配
针对移动端完成部分便捷性适配设计，面包屑折叠导航栏，侧边栏适配等，但有余 stable diffusion 界面复杂度和定值难度较高无法保证和桌面端相同的使用体验，有更多想法欢迎反馈。
[![][back-to-top]](#readme-top)
![][feat-pwa]
#### PWA 渐进式 Web 应用
可以使用渐进式 Web 应用 [PWA](https://support.google.com/chrome/answer/9658361?hl=zh-Hans) 在计算机或移动设备上享受快速 Stable Diffusion 体验
- 在计算机上打开 Chrome
- 打开 Stable Diffusion 网页
- 在地址栏的右上角，点击 `安装` 图标
- 按照屏幕上的说明安装该 PWA
[![][back-to-top]](#readme-top)
#### 提示词格式化
点击 Prompt 下方 🪄 按钮即可将提示词一键格式化
> **Note**\
> 全角标点转半角，去除多余空格，补充缺失逗号，把 Extra-Networks 模型移动到末尾
格式化前
```text
photorealistic photo of a handsome male (wizard :1.2）， short beard, white wizard shirt, (with golden trim:0.8),
```
格式化后
```text
photorealistic photo of a handsome male, (wizard:1.2), short beard, white wizard shirt, (with golden trim:0.8), ,
```
[![][back-to-top]](#readme-top)
## 🖥 兼容环境
| [
[![][back-to-top]](#readme-top)
## 📦 生态系统
| NPM | 代码库 | 描述 | 版本 |
| ------------------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------- |
| [@lobehub/ui][lobe-ui-link] | [lobehub/lobe-ui][lobe-ui-github] | Lobe UI 是一个专为构建 AIGC 网页应用程序而设计的开源 UI 组件库。 | [![][lobe-ui-shield]][lobe-ui-link] |
| [@lobehub/lint][lobe-lint-link] | [lobehub/lobe-lint][lobe-lint-github] | LobeLint 为 LobeHub 提供 ESlint，Stylelint，Commitlint，Prettier，Remark 和 Semantic Release 的配置。 | [![][lobe-lint-shield]][lobe-lint-link] |
| @lobehub/assets | [lobehub/assets][lobe-assets-github] | LobeHub 的 Logo 资源、favicon、网页字体。 | |
[![][back-to-top]](#readme-top)
## ⌨️ 本地开发
你可以使用 Github Codespaces 进行在线开发：
[![][codespaces-shield]][codespaces-link]
或者克隆到本地开发, 热更新开发模式需要将 stable diffuison 提前启动到 `7860` 端口:
[![][bun-shield]][bun-link]
```bash
$ git clone https://github.com/lobehub/sd-webui-lobe-theme.git
$ cd sd-webui-lobe-theme
$ bun install
$ bun dev
```
[![][back-to-top]](#readme-top)
## 🤝 参与贡献
我们非常欢迎各种形式的贡献。如果你对贡献代码感兴趣，可以查看我们的 GitHub [Issues][github-issues-link]，大展身手，向我们展示你的奇思妙想。
[![][pr-welcome-shield]][pr-welcome-link]
[![][contributors-contrib]][contributors-link]
[![][back-to-top]](#readme-top)
## 🔗 链接
### 更多工具
- [🤖 Lobe Chat][lobe-chat] : LobeChat 是一个开源的、可扩展的（Function Calling）高性能聊天机器人框架, 支持一键免费部署私人 ChatGPT/LLM 网页应用程序。。
- [🌏 Lobe i18n][lobe-i18n] : Lobe i18n 是一个由 ChatGPT 驱动的 i18n（国际化）翻译过程的自动化工具。它支持自动分割大文件、增量更新，以及为 OpenAI 模型、API 代理和温度提供定制选项的功能。
- [💌 Lobe Commit][lobe-commit] : Lobe Commit 是一个 CLI 工具，它利用 Langchain/ChatGPT 生成基于 Gitmoji 的提交消息。
### 参考
- stable-diffusion-webui：
- gradio-theme-gallery:
- cozy-nest:
- _before `1.0.0` version_
- sd-web-ui-quickcs:
[![][back-to-top]](#readme-top)
---
📝 License 
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)