Lobe Theme: 为 Stable Diffusion WebUI 打造的现代化主题

sd-webui-lobe-theme

Lobe Theme: 为 Stable Diffusion WebUI 打造的现代化主题

Stable Diffusion WebUI 是一款强大的 AI 图像生成工具,但其默认界面却略显简陋。为了改善用户体验,Lobe Theme 应运而生。这款由 LobeHub 开发的主题为 Stable Diffusion WebUI 带来了全新的现代化外观和丰富的功能,让 AI 图像创作变得更加便捷和愉悦。

🌟 主题特色

Lobe Theme 的核心理念是通过精心设计的界面和智能的功能来提升用户的创作效率。以下是该主题的一些主要特色:

1. 明暗双主题 - 适应不同使用环境

Lobe Theme 提供了明亮和黑暗两种视觉主题,可以根据不同的光线环境和个人喜好进行切换。用户可以在导航栏右上角快速切换主题,也可以通过启动参数设置默认主题。

例如,如果希望默认使用深色主题,可以在 Windows 系统的 webui-user.bat 文件中添加以下内容:

set COMMANDLINE_ARGS= --theme=dark

此外,还可以通过 URL 参数直接切换主题:

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

2. 个性化主题定制 - 打造专属界面

Lobe Theme 提供了丰富的个性化定制选项,让用户可以根据自己的喜好调整界面风格。通过点击页面右上角的齿轮图标,用户可以进入设置面板进行以下自定义:

主色调: 提供 13 种精心挑选的主题配色方案
中性色: 6 种不同的中性灰度级别可选
Logo 类型: 可选择默认的 Lobe 和 Kitchen 标志,也支持自定义
Logo 自定义: 支持输入图片 URL、Base64 编码图片或 emoji 表情
网站标题自定义: 可根据需要自定义网站的标题

这些灵活的定制选项让每个用户都能打造出独具特色的界面风格。

3. Prompt 语法高亮 - 提升编写效率

在使用 Stable Diffusion 模型进行 Prompt 编写时,语法高亮功能可以大大提升效率。Lobe Theme 会根据预设的语法规则,自动为输入的 Prompt 文本添加颜色编码,增强了文本编辑的直观性。

这一功能不仅有助于用户更清晰地识别和构建语法结构,还能提高文本编辑和调试的效率。对于经常需要编写复杂 Prompt 的用户来说,这无疑是一个强大的生产力工具。

4. 可定制侧边栏 - 优化工作流程

Lobe Theme 的一大亮点是其高度可定制的侧边栏功能。用户可以根据自己的工作习惯调整侧边栏的布局和内容,从而优化图像生成的工作流程。主要的定制选项包括:

输入区域
- 显示模式: 滚动固定高度 / 根据文本行数调整大小
侧边栏配置
- 默认展开状态
- 显示模式: 固定 / 浮动
- 默认宽度
额外网络侧边栏
- 启用状态
- 默认展开状态
- 显示模式: 固定 / 浮动
- 默认宽度
- 模型卡片默认大小

通过这些灵活的设置,用户可以将工作区域调整到最适合自己的状态,提高创作效率。

5. 优化的图像信息展示 - 一键复制所需信息

Lobe Theme 对生成信息的展示进行了深度优化,引入了"一键复制"功能来提高信息检索效率。现在,用户可以快速获取所需的 Seeds 等信息,无需在冗长的字符串中tedious搜索。

这一改进大大简化了工作流程,特别是在需要频繁查看和复制图像参数的场景下,可以节省大量时间。

6. 图像配方分享 - 轻松交流创作灵感

Lobe Theme 推出了全新的图像分享功能。用户只需一键操作,就能轻松分享当前的图像配方,生成精美的分享图。这个功能不仅方便了创作者之间的交流,还为社区内容分享提供了便利。

分享功能支持多种自定义设置,使分享出的图像更具个性化。无论是向朋友展示自己的作品,还是在社区中分享创作技巧,这个功能都能派上用场。

7. Prompt 编辑器 - 简化提示词编辑流程

在快速设置菜单的第二个标签页中,Lobe Theme 添加了一个用户友好的提示词编辑器。它包含了一系列预设标签,涵盖了后期处理、风格描述等关键词,大大简化了操作流程,帮助用户更高效地编辑和管理提示词。

这个功能特别适合新手用户,可以帮助他们快速掌握 Prompt 编写的技巧。对于有经验的用户来说,也可以通过这个编辑器更快速地组合和调整复杂的提示词。

8. 移动端适配 - 随时随地进行创作

为了提升移动端用户的交互体验,Lobe Theme 实现了面包屑导航的智能折叠机制,并对侧边栏进行了精细适配。这些调整旨在为用户提供便捷直观的导航体验,无论在何种设备上使用。

虽然在移动端实现与桌面端相同的复杂功能和精细自定义存在一定挑战,但 Lobe Theme 团队正在不断努力改进移动端体验。如果您有任何建议或想法,欢迎通过 GitHub Issues 或 Pull Requests 提供反馈。

9. PWA 渐进式 Web 应用 - 接近原生应用体验

Lobe Theme 采用了渐进式 Web 应用(PWA)技术,这是一种可以将网络应用提升至接近原生应用体验的现代网络技术。通过 PWA,Lobe Theme 可以在桌面和移动设备上提供高度优化的用户体验,同时保持轻量化和高性能的特点。

在视觉和感知上,Lobe Theme 经过精心设计,确保其界面与原生应用无异,提供流畅的动画、响应式布局,并适应不同设备的各种屏幕分辨率。

要将 Lobe Theme 安装为桌面应用,只需按照以下步骤操作:

在电脑上运行 Chrome 或 Edge 浏览器
访问 Lobe Theme 网站
点击地址栏右上角的安装图标
按照屏幕上的说明完成 PWA 安装

10. Prompt 词格式化 - 一键优化提示词

Lobe Theme 在 Prompt 输入框下方添加了一个魔术棒按钮,点击即可一键格式化提示词。这个功能可以:

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

这个小功能大大提高了 Prompt 编写的规范性和可读性,尤其是在处理复杂长文本时非常有用。

🛠️ 安装方法

Lobe Theme 提供了两种安装方式:

通过 SD WebUI 扩展市场安装
- 打开 Stable Diffusion WebUI,进入扩展市场
- 搜索 "Lobe Theme" 并点击安装
- 重新加载 UI 即可生效
通过 Git 克隆仓库 (推荐)

在命令行中执行以下命令:
```
git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme
```
这种方法便于后续更新和管理。

🖥️ 环境支持

Lobe Theme 支持主流的现代浏览器,包括:

Chrome (最新的 2 个版本)
Edge (最新的 2 个版本)
Safari (最新的 2 个版本)

注意: 目前在 Firefox 浏览器上存在已知的样式兼容性问题,开发团队正在努力解决。

🤝 参与贡献

Lobe Theme 是一个开源项目,欢迎各种形式的贡献。如果您对参与代码贡献感兴趣,可以查看 GitHub 上的 Issues 列表,选择感兴趣的任务开始工作。

无论是功能建议、bug 报告还是文档改进,您的每一份贡献都将帮助 Lobe Theme 变得更好。

📦 生态系统

Lobe Theme 是 LobeHub 生态系统的一部分。其他相关项目包括:

@lobehub/ui: 一个专门用于构建 AIGC 网络应用的开源 UI 组件库
@lobehub/lint: 为 LobeHub 提供 ESLint、Stylelint、Commitlint、Prettier、Remark 和 Semantic Release 的配置
lobehub/assets: LobeHub 的 Logo 资产、favicons 和 web 字体