LobeTheme - Stable Diffusion 现代主题, 诸多体验优化

项目地址：github.com/lobehub/sd-...

Lobe Theme

Stable Diffusion 现代主题, 诸多体验优化

文档目录

TOC

• [✨ 主题特性](#✨ 主题特性 "#-%E4%B8%BB%E9%A2%98%E7%89%B9%E6%80%A7")

• [📦 插件安装](#📦 插件安装 "#-%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85")

• [🤯 使用说明](#🤯 使用说明 "#-%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E")

• [🖥 兼容环境](#🖥 兼容环境 "#-%E5%85%BC%E5%AE%B9%E7%8E%AF%E5%A2%83")

• [📦 生态系统](#📦 生态系统 "#-%E7%94%9F%E6%80%81%E7%B3%BB%E7%BB%9F")

• [⌨️ 本地开发](#⌨️ 本地开发 "#%EF%B8%8F-%E6%9C%AC%E5%9C%B0%E5%BC%80%E5%8F%91")

• [🤝 参与贡献](#🤝 参与贡献 "#-%E5%8F%82%E4%B8%8E%E8%B4%A1%E7%8C%AE")

• [🔗 链接](#🔗 链接 "#-%E9%93%BE%E6%8E%A5")

  • 更多工具
  • 参考

Warning
Lobe Theme v3 适配 SD WebUI v1.6, 并不向下兼容，< 1.6 以下版本移动到分支 legacy-sd-webui-1.5

✨ 主题特性

• 🌗 支持亮暗色主题，可以导航栏快速切换
• 🌈 支持主题颜色和中性色自定义，支持 Logo 自定义
• 🪄 支持 Prompt 一键格式化，并提供简易的标签编辑器
• 🎛️ 高定制侧边栏，左侧为快捷设置侧边栏，右侧为模型侧边栏
• 🖼️ 可调节画板比例，使生成图像始终置顶
• 📱 移动端友好，针对手机屏幕完成部分优化
• 🌍 支持 i18n 并欢迎提交 PR 贡献
• 📝 语法高亮的 Prompt 输入框
• 📦 支持 PWA 渐进式 Web 应用

📦 插件安装

方法一

通过 stable diffusion webui 插件市场搜索 Lobe Theme 或 Kitchen Theme 进行安装

Note
Version 2.0.0 后更名为 Lobe Theme

方法二

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

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

🤯 使用说明

亮暗色主题

Note

可在右上角导航栏快速切换

当前主题支持亮暗色双主题，如果你想强制使用暗色模式，使用参数 --theme=dark 启动您的 WebUI。例如，在 Windows 上，您的 webui-user.bat 应包括：

set COMMANDLINE_ARGS= --theme=dark

或通过 URL Props 直接切换

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

主体定制

Note

右上角 ⚙ 图标打开设置面板，当前可用设置如下

• Theme
  • Primary color 主题色：目前提供 13 种主题颜色搭配
  • Neutral color 中性色：目前提供 6 种不同色彩倾向灰阶搭配
  • Logo type 徽标种类：Lobe Kitchen 自定义
    • Logo 自定义：支持 img url base64 emoji，当填入单个 emoji 时会自动替换为 3D Fluent Emoji
    • Title 标题自定义：自定义站点名称

Prompt 语法高亮

按 Stable Diffusion 语法规则，自动染色 prompt 显示

侧边栏定制

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

推荐系统设置

Extra-Networks 扩展模型视窗

• 拇指视图
• 卡牌宽度: 86
• 卡牌高度: 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

移动端适配

针对移动端完成部分便捷性适配设计，面包屑折叠导航栏，侧边栏适配等，但有余 stable diffusion 界面复杂度和定值难度较高无法保证和桌面端相同的使用体验，有更多想法欢迎反馈。

PWA 渐进式 Web 应用

可以使用渐进式 Web 应用 PWA 在计算机或移动设备上享受快速 Stable Diffusion 体验

• 在计算机上打开 Chrome
• 打开 Stable Diffusion 网页
• 在地址栏的右上角，点击 安装 图标
• 按照屏幕上的说明安装该 PWA

提示词格式化

点击 Prompt 下方 🪄 按钮即可将提示词一键格式化

Note

全角标点转半角，去除多余空格，补充缺失逗号，把 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
last 2 versions	last 2 versions	last 2 versions

Warning

目前已知道在 Firefox 火狐浏览器上存在样式兼容问题

📦 生态系统

NPM	代码库	描述	版本
@lobehub/ui	lobehub/lobe-ui	Lobe UI 是一个专为构建 AIGC 网页应用程序而设计的开源 UI 组件库。
@lobehub/lint	lobehub/lobe-lint	LobeLint 为 LobeHub 提供 ESlint，Stylelint，Commitlint，Prettier，Remark 和 Semantic Release 的配置。
@lobehub/assets	lobehub/assets	LobeHub 的 Logo 资源、favicon、网页字体。

⌨️ 本地开发

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

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

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

🤝 参与贡献

我们非常欢迎各种形式的贡献。如果你对贡献代码感兴趣，可以查看我们的 GitHub Issues，大展身手，向我们展示你的奇思妙想。

🔗 链接

更多工具

• 🤖 Lobe Chat : LobeChat 是一个开源的、可扩展的（Function Calling）高性能聊天机器人框架, 支持一键免费部署私人 ChatGPT/LLM 网页应用程序。。
• 🌏 Lobe i18n : Lobe i18n 是一个由 ChatGPT 驱动的 i18n（国际化）翻译过程的自动化工具。它支持自动分割大文件、增量更新，以及为 OpenAI 模型、API 代理和温度提供定制选项的功能。
• 💌 Lobe Commit : Lobe Commit 是一个 CLI 工具，它利用 Langchain/ChatGPT 生成基于 Gitmoji 的提交消息。

参考

• stable-diffusion-webui：github.com/AUTOMATIC11...
• gradio-theme-gallery: huggingface.co/spaces/grad...
• cozy-nest: github.com/Nevysha/Coz...
• before 1.0.0 version
  • sd-web-ui-quickcs: github.com/Gerschel/sd...
  • Dark-Themes-SD-WebUI-Automatic1111: github.com/Nacurutu/Da...

---

📝 License

Copyright © 2023 CanisMinor.

This project is AGPL3 licensed.