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

CanisMinor
827 阅读6分钟

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

Lobe Theme

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


文档目录

TOC


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
Chrome		Edge
Edge		Safari
Safari
last 2 versionslast 2 versionslast 2 versions

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

📦 生态系统

NPM代码库描述版本
@lobehub/uilobehub/lobe-uiLobe UI 是一个专为构建 AIGC 网页应用程序而设计的开源 UI 组件库。
@lobehub/lintlobehub/lobe-lintLobeLint 为 LobeHub 提供 ESlint，Stylelint，Commitlint，Prettier，Remark 和 Semantic Release 的配置。
@lobehub/assetslobehub/assetsLobeHub 的 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 的提交消息。

参考

📝 License

Copyright © 2023 CanisMinor.
This project is AGPL3 licensed.

avatar
文章
阅读
粉丝