Lobe 主题

一个为 Stable Diffusion WebUI 设计的现代界面框架，具有精美的界面设计、高度自定义的用户界面和提升效率的功能。

English · 简体中文 · 更新日志 · 报告问题 · 请求功能

[!警告]

Lobe Theme v3 兼容 SD WebUI v1.6，但不向下兼容。版本低于 < 1.6 的请移动到分支 legacy-sd-webui-1.5

目录

内容

👋🏻 快速开始 & 加入我们的社区
📦 扩展安装
✨ 功能概述
🖥 环境支持
📦 生态系统
⌨️ 本地开发
🤝 贡献
🩷 赞助
🔗 链接
- 更多产品
- 鸣谢

👋🏻 快速开始 & 加入我们的社区

请注意，LobeTheme 目前正在积极开发中，欢迎反馈遇到的任何问题。

	加入我们的 Discord 社区！这是您与开发人员和其他 LobeHub 热心用户联系的地方。

[!重要]

关注我们，您将第一时间收到 GitHub 的所有更新通知 ~ ⭐️

关注历史

📦 扩展安装

[!注意]

在安装扩展之前，请检查 Stable Diffusion WebUI 的环境版本，最低要求为 gradio-3.41.2 和 sd-webui 1.6

`A` 通过 SD WebUI 扩展市场安装

在 Stable Diffusion WebUI 中，您可以通过内置的扩展市场安装 Lobe 主题扩展。

首先，打开 Stable Diffusion WebUI 并进入扩展市场。在搜索框中输入“Lobe Theme”，然后点击搜索按钮。您将看到相关扩展的列表。
找到 Lobe 主题扩展后，点击安装按钮。系统将开始下载并安装扩展。安装完成后，您可以在扩展列表中找到 Lobe 主题，并在重新加载用户界面后生效。

`B` 通过 Git 克隆此仓库（推荐）

如果您喜欢使用 Git 管理扩展，可以将此仓库克隆到您的扩展文件夹。以下是详细步骤：

打开命令行界面并导航到 Stable Diffusion WebUI 的根目录。
在命令行中运行以下命令以克隆仓库：

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

完成这些步骤后，Lobe 主题扩展将成功安装在 Stable Diffusion WebUI 中。

✨ 功能概述

`1` 明亮 & 暗黑主题

当前的主题设计提供了两种视觉效果：明亮主题和暗黑主题，以满足用户在不同照明环境下的视觉舒适需求，可以在导航栏右上角快速切换。

如果您更喜欢默认的暗黑主题，可以通过启动参数 --theme=dark 实现。

[!提示]

要在启动文件中强制使用某个颜色主题，例如，如果您想要在 Windows 系统中默认使用暗黑模式，可以在 webui-user.bat 文件中添加以下内容：

set COMMANDLINE_ARGS= --theme=dark

此外，您还可以通过 URL 参数直接切换主题：

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

通过这些简单直观的操作，用户可以根据个人喜好或当前环境快速切换界面主题，以达到最佳用户体验。

`2` 个性化主题定制

作为一名设计工程师，LobeChat 在界面设计中考虑了用户的个性化体验，引入了灵活多变的主题模式，提供了一系列颜色定制选项，允许用户根据自己的喜好调整应用的主题颜色。

无论是稳重的深蓝色、活泼的桃粉色，还是专业的灰白色，用户都可以在 LobeTheme 中找到匹配自己风格的颜色选项。

[!提示]

通过点击页面右上角的齿轮图标，可以进入设置面板进行个性化定制。

主色调：我们提供了 13 款精心挑选的主题配色方案，以满足您的个性化配色需求。

中性色调：为了更详细地调整视觉体验，您还可以从 6 种不同的中性灰级别中进行选择。

Logo 类型：您可以选择默认的 Lobe 和 Kitchen 标志，也可以自定义。

Logo 定制：支持输入 img url 、 base64 编码图像或 emoji 表情进行标志定制。当输入单个 emoji 时，系统会自动将其转换为 3D Fluent Emoji，丰富视觉效果。

网站标题定制：允许您根据需要自定义网站标题。

`3` 提示词语法高亮

在使用 Stable Diffusion 模型进行提示词编写时，一个有效的功能是提示词语法高亮。

该功能根据预设的语法规则，自动为输入的提示词文本添加颜色编码，增强用户体验和操作直观性。提示词语法高亮不仅可以帮助用户更清晰地识别和构建语法结构，还能提高文本编辑和调试的效率。

`4` 可定制的侧边栏

LobeTheme 的一个关键亮点是其高度自定义的侧边栏功能，旨在使图像生成工作流程更加顺畅，确保每个用户都能根据自己的喜好调整和优化他们的工作空间。

[!提示]

通过点击界面右上角的齿轮图标，您可以轻松访问和调整以下设置：

输入区域

显示模式：固定高度滚动 | 根据文本行数调整大小

侧边栏配置

默认展开：true

显示模式：固定 | 浮动

默认宽度：280 像素

额外网络侧边栏

启用：true

默认展开：true

显示模式：固定 | 浮动

默认宽度：340 像素

模型卡默认大小：86 像素

推荐系统设置

额外网络扩展模型窗口

缩略图视图
卡片宽度：86
卡片高度：128

快捷设置

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` 改进的图像信息显示

生成信息的显示得到了改进，对数据呈现机制进行了深度优化，并引入了“一键复制”功能，提高了信息检索效率。

现在，您可以快速获取所需的 Seeds，而无需在长字符串中进行繁琐的搜索。

`6` 图像配方共享

全新推出了图像共享功能。通过简单的一键操作，您可以轻松共享当前图像配方，创建精美的共享图像，并探索更多自定义设置，使共享图像更具个性化。

`7` 提示词编辑器

在快速设置菜单的第二个选项卡中添加了一个用户友好的提示词编辑器。它包括一系列覆盖后处理、样式描述和其他关键词的预设标签，简化了您的操作过程，帮助您更高效地编辑和管理提示词。

`8` 移动端适配

为了提升移动用户的交互体验，LobeTheme 实现了智能折叠机制以改进面包屑导航，并对侧边栏进行了精细调整。这些调整旨在在任何设备上提供方便直观的导航体验。然而，要在移动端实现与桌面相同的复杂功能和详细定制存在一定的挑战。特别是在与Stable Diffusion WebUI界面集成时，需要高复杂性和精确的参数设置，这可能会导致移动端和桌面端用户体验的差异。

如果您有任何建议或想法，请随时通过GitHub Issues或Pull Requests提供反馈。

`9` PWA渐进式Web应用程序

在当今的多设备环境中，为用户提供无缝体验至关重要。因此，我们采用了渐进式Web应用程序PWA技术，这是一种现代Web技术，可以将Web应用提升到近乎原生应用的体验。

通过PWA，LobeTheme可以在桌面和移动设备上提供高度优化的用户体验，同时保持轻量和高性能的特点。在视觉和感知上，它经过精心设计，以确保其界面与原生应用无异，提供平滑的动画、响应迅速的布局以及适应不同设备的不同屏幕分辨率。

[!NOTE]

如果您不熟悉PWA的安装过程，可以按照以下步骤将LobeChat添加为您的桌面应用程序（也适用于移动设备）：

在电脑上运行Chrome或Edge浏览器。

访问LobeChat网站。

点击地址栏右上角的安装图标。

按照屏幕提示完成PWA的安装。

`10` 提示词格式化

点击提示下方的🪄按钮，即可一键格式化提示词。

[!TIP]

将全角标点转换为半角，删除多余空格，添加缺失的逗号，并将Extra-Networks模型移到末尾。

格式化前

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),

格式化后

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>

🖥 环境支持

Chrome	Edge	Safari
最新的两个版本	最新的两个版本	最新的两个版本

[!CAUTION]

目前在Firefox浏览器上存在已知的样式兼容性问题。

📦 生态系统

NPM	Repository	Description
@lobehub/ui	lobehub/lobe-ui	Lobe UI是一个开源的UI组件库，专注于构建AIGC Web应用。
@lobehub/lint	lobehub/lobe-lint	LobeLint为LobeHub提供了ESLint、Stylelint、Commitlint、Prettier、Remark和Semantic Release的配置。
@lobehub/assets	lobehub/assets	LobeHub的标志资产、图标、网络字体。

⌨️ 本地开发

您可以使用Github Codespaces进行在线开发：

或者，您可以克隆它进行本地开发。要启用热重新加载模式，您需要事先在端口7860上启动stable diffusion。

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

🤝 贡献

欢迎任何类型的贡献，如果您有兴趣贡献代码，请随时查看我们的GitHub Issues，向我们展示您的实力。

🩷 赞助

每一点都是支持我们的光辉！您的每次捐赠都是我们前进的闪光点，感谢您的信任和慷慨！

🔗 友情链接

鸣谢

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
在 1.0.0 版本之前
- 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

sd-webui-lobe-theme

Lobe 主题

内容

👋🏻 快速开始 & 加入我们的社区

📦 扩展安装

`A` 通过 SD WebUI 扩展市场安装

`B` 通过 Git 克隆此仓库（推荐）

✨ 功能概述

`1` 明亮 & 暗黑主题

`2` 个性化主题定制

`3` 提示词语法高亮

`4` 可定制的侧边栏

`5` 改进的图像信息显示

`6` 图像配方共享

`7` 提示词编辑器

`8` 移动端适配

`9` PWA渐进式Web应用程序

`10` 提示词格式化

更多功能

🖥 环境支持

📦 生态系统

⌨️ 本地开发

🤝 贡献

🩷 赞助

🔗 友情链接

更多产品

鸣谢

📝 许可证

sd-webui-lobe-theme

Lobe 主题

内容

👋🏻 快速开始 & 加入我们的社区

📦 扩展安装

A 通过 SD WebUI 扩展市场安装

B 通过 Git 克隆此仓库（推荐）

✨ 功能概述

1 明亮 & 暗黑主题

2 个性化主题定制

3 提示词语法高亮

4 可定制的侧边栏

5 改进的图像信息显示

6 图像配方共享

7 提示词编辑器

8 移动端适配

9 PWA渐进式Web应用程序

10 提示词格式化

更多功能

🖥 环境支持

📦 生态系统

⌨️ 本地开发

🤝 贡献

🩷 赞助

🔗 友情链接

更多产品

鸣谢

📝 许可证

`A` 通过 SD WebUI 扩展市场安装

`B` 通过 Git 克隆此仓库（推荐）

`1` 明亮 & 暗黑主题

`2` 个性化主题定制

`3` 提示词语法高亮

`4` 可定制的侧边栏

`5` 改进的图像信息显示

`6` 图像配方共享

`7` 提示词编辑器

`8` 移动端适配

`9` PWA渐进式Web应用程序

`10` 提示词格式化