diff --git a/README.md b/README.md index 3225dec..f5182aa 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@

Lobe Theme

-The modern theme for stable diffusion webui
Legacy verison a.k.a kitchen theme +A modern interface framework designed for Stable Diffusion WebUI
with an exquisite interface design, a highly customizable UI, and efficiency-boosting features. English · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link] @@ -36,9 +36,8 @@ English · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) · [ #### TOC -- [✨ Features](#-features) -- [📦 Installation](#-installation) -- [🤯 Usage](#-usage) +- [📦 Plugin Installation](#-plugin-installation) +- [✨ Feature Overview](#-feature-overview) - [🖥 Environment Support](#-environment-support) - [📦 Ecosystem](#-ecosystem) - [⌨️ Local Development](#️-local-development) @@ -51,49 +50,41 @@ English · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) · [ -## ✨ Features +## 📦 Plugin Installation -- [x] 🌗 Supports light and dark themes, with the ability to quickly switch in the navigation bar -- [x] 🌈 Supports custom theme colors and neutral colors, with the option to customize the logo -- [x] 🪄 Supports one-click formatting of the prompt, with a simple tag editor provided -- [x] 🎛️ Highly customizable sidebar, with a quick settings sidebar on the left and a model sidebar on the right -- [x] 🖼️ Adjustable canvas ratio, ensuring that generated images are always displayed at the top -- [x] 📱 Mobile-friendly, with partial optimization for mobile screens -- [x] 🌍Support i18n and welcome [PR](https://github.com/lobehub/sd-webui-lobe-theme/tree/main/locales) contributions -- [x] 📝 Syntax highlighting in the prompt input box -- [x] 📦 Support [PWA](https://support.google.com/chrome/answer/9658361) progressive web app - -
- -[![][back-to-top]](#readme-top) - -
- -## 📦 Installation - -#### Method 1 - -Search for `Lobe Theme` or `Kitchen Theme` in the stable diffusion webui plugin market and install it. - -> \[!NOTE] +> \[!IMPORTANT] > -> **Version 2.0.0** was renamed to **Lobe Theme** +> Before installing the plugin, please check the environment version of Stable Diffusion WebUI, with a minimum requirement of `gradio-3.41.2` & `sd-webui 1.6` -#### Method 2 +#### `A` Installation via SD WebUI Plugin Market -As an extension (recommended), clone the repository to your extension folder: +In Stable Diffusion WebUI, you can install the Lobe Theme plugin through the built-in plugin market. + +- First, open Stable Diffusion WebUI and go to the plugin market. Enter "Lobe Theme" in the search box and click the search button. You will see a list of related plugins. +- After finding the Lobe Theme plugin, click the install button. The system will start downloading and installing the plugin. After installation, you can find the Lobe Theme in the plugin list, and it will take effect after reloading the UI. + +
+ +#### `B` Clone this Repository via Git (Recommended) + +If you prefer to manage plugins using Git, you can clone the repository to your extensions folder. Here are the detailed steps: + +- Open the command line interface and navigate to the root directory of Stable Diffusion WebUI. +- Run the following command in the command line to clone the repository: ```shell git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme ``` -> \[!IMPORTANT] +- Once you have completed these steps, the Lobe Theme plugin will be successfully installed in Stable Diffusion WebUI. + +
+ +#### Keeping Up-to-Date + +> \[!TIP] > -> minimum requirements `gradio-3.41.2` & `sd-webui 1.6` - -#### Upstream Sync - -Star Us,You will receive all releases notifications from GitHub without any delay \~ ⭐️ +> By bookmarking the project, you will receive all release notifications from GitHub without delay\~⭐️
Star History @@ -108,29 +99,31 @@ Star Us,You will receive all releases notifications from GitHub without any de -## 🤯 Usage +## ✨ Feature Overview ![][feat-thememode] -#### Light and Dark Themes +#### `1` Light & Dark Theme + +The current theme design provides two visual effects: light theme and dark theme, to meet the visual comfort needs of users in different lighting environments, which can be quickly switched in the upper right corner of the navigation bar. If you prefer to default to the dark theme, you can achieve this by using the startup parameter `--theme=dark`. > \[!TIP] > -> You can quickly switch between light and dark themes in the upper-right corner of the navigation bar. - -The current theme supports both light and dark themes. If you want to force dark mode, use the `--theme=dark` argument to launch your WebUI. For example, on Windows, your `webui-user.bat` should include: +> To force a certain color theme in the startup file, for example, if you want to default to the dark mode in the Windows system, you can add the following content to the `webui-user.bat` file: ```shell set COMMANDLINE_ARGS= --theme=dark ``` -Alternatively, you can switch directly through URL Props: +In addition, you can also directly switch the theme through URL parameters: ```shell http://localhost:7860/?__theme=light http://localhost:7860/?__theme=dark ``` +Through these simple and intuitive operations, users can quickly switch the interface theme according to their personal preferences or current environment, in order to achieve the best user experience. +
[![][back-to-top]](#readme-top) @@ -139,18 +132,19 @@ http://localhost:7860/?__theme=dark ![][feat-theme-modify] -#### Theme Customization +#### `2` Personalized Theme Customization + +As a design engineer, LobeChat considers the personalized experience of users in interface design, and has introduced a flexible and changeable theme mode, providing a series of color customization options, allowing users to adjust the theme color of the application according to their preferences. Whether you want a stable deep blue, a lively peach pink, or a professional gray and white, users can find color options that match their style in LobeTheme. > \[!TIP] > -> Click the `⚙` icon in the upper-right corner to open the settings panel. The current available settings are as follows: - -- **Theme** - - Primary color: Currently offers `13` theme color combinations - - Neutral color: Currently offers `6` different grayscale color combinations - - Logo type: `Lobe`, `Kitchen`, `Custom` - - Custom logo: Supports `img url`, `base64`, and `emoji`. When a single emoji is entered, it will be automatically replaced with 3D Fluent Emoji. - - Custom title: Customize the site name. +> By clicking the gear icon in the upper right corner of the page, you can enter the settings panel for personalized customization. +> +> - **Primary Color**: We provide `13` carefully selected theme color schemes to meet your personalized color needs. +> - **Neutral Color**: For a more detailed adjustment of the visual experience, you can also choose from `6` different neutral gray levels. +> - **Logo Type**: You can choose the default `Lobe` and `Kitchen` logos, or customize them. +> - **Logo Customization**: Support inputting `img url`, `base64` encoded images, or `emoji` emoticons for logo customization. When entering a single `emoji`, the system will automatically convert it into a 3D Fluent Emoji, enriching the visual effect. +> - **Site Title Customization**: Allows you to customize the title of the website according to your needs.
@@ -160,9 +154,9 @@ http://localhost:7860/?__theme=dark ![][feat-highlight] -#### Prompt Syntax Highlighting +#### `3` Prompt Syntax Highlighting -Automatically colorize prompt display according to the Stable Diffusion syntax rules +When using the Stable Diffusion model for Prompt writing, an effective feature is the Prompt syntax highlighting. This feature automatically adds color coding to the input Prompt text according to preset syntax rules, enhancing the user experience and the intuitiveness of operations. Prompt syntax highlighting can not only help users identify and construct syntax structures more clearly, but also improve the efficiency of text editing and debugging.
@@ -172,37 +166,37 @@ Automatically colorize prompt display according to the Stable Diffusion syntax r ![][feat-sidebar] -#### Sidebar Customization +#### `4` Customizable Sidebar + +One of the key highlights of LobeTheme is its highly customizable sidebar feature, designed to make the image generation workflow smoother, ensuring that every user can adjust and optimize their workspace according to their preferences. > \[!TIP] > -> Click the `⚙` icon in the upper-right corner to open the settings panel. The current available settings are as follows: - -- **Prompt Textarea** - - Display mode: `scroll fixed height` | `resizable by text lines` -- **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` +> By clicking the gear icon in the upper right corner of the interface, you can easily access and adjust the following settings: +> +> - **Input Area** +> - Display Mode: `Scroll Fixed Height` | `Adjust Size According to Text Lines` +> - **Sidebar Configuration** +> - Default Expansion: `true` +> - Display Mode: `Fixed` | `Floating` +> - Default Width: `280 pixels` +> - **Extra Network Sidebar** +> - Enable: `true` +> - Default Expansion: `true` +> - Display Mode: `Fixed` | `Floating` +> - Default Width: `340 pixels` +> - Model Card Default Size: `86 pixels`
Recommended System Settings -#### Extra-Networks +**Extra-Networks Extension Model Window** -- thumbs -- width: 86 -- height: 128 +- Thumbnail View +- Card Width: 86 +- Card Height: 128 -
- -#### Quick-Setting +**Quick-Setting** ```txt 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 @@ -216,11 +210,47 @@ sd_model_checkpoint, sd_vae, CLIP_stop_at_last_layers, img2img_background_color,
+![][feat-generation-info] + +#### `5` Improved Image Information Display + +The display of generation information has been improved, with a deep optimization of the data presentation mechanism, and the introduction of a "one-click copy" function to improve information retrieval efficiency. Now, you can quickly obtain the required Seeds without tedious searching in long strings. + +
+ +[![][back-to-top]](#readme-top) + +
+ +![][feat-share] + +#### `6` Image Recipe Sharing + +A brand-new image sharing feature has been launched. With a simple one-click operation, you can easily share the current image recipe, create exquisite shared images, and explore more customizable settings to make the shared images more personalized. + +
+ +[![][back-to-top]](#readme-top) + +
+ +![][feat-prompt-editor] + +#### `7` Prompt Editor + +A user-friendly prompt word editor has been added to the second tab of the quick setting menu. It includes a series of preset tags covering post-processing, style description, and other key words, simplifying your operation process and helping you edit and manage prompts more efficiently. + +
+ +[![][back-to-top]](#readme-top) + +
+ ![][feat-mobile-friendly] -#### Mobile Adaptation +#### `8` Mobile-Friendly Adaptation -Partial convenience adaptation design has been completed for mobile devices, including breadcrumb foldable navigation bar, sidebar adaptation, etc. However, due to the high complexity and fixed values of the stable diffusion interface, it is difficult to ensure the same user experience as the desktop version. Feedback is welcome for more ideas. +In order to improve the interactive experience of mobile users, LobeTheme has implemented an intelligent folding mechanism for breadcrumb navigation and finely adapted the sidebar. These adjustments are aimed at providing convenient and intuitive navigation experience on any device. However, achieving the same complex functions and detailed customization as the desktop on the mobile end poses certain challenges. Especially when integrating with the Stable Diffusion WebUI interface, high complexity and precise parameter settings are required, which may result in differences in user experience between mobile and desktop. If you have any suggestions or ideas, please feel free to provide feedback through GitHub Issues or Pull Requests.
@@ -230,14 +260,18 @@ Partial convenience adaptation design has been completed for mobile devices, inc ![][feat-pwa] -#### Progress Web App +#### `9` PWA Progressive Web Application -You can use Progressive Web Apps [PWA](https://support.google.com/chrome/answer/9658361) for a fast stable diffusion experience on your computer or mobile device. +In today's multi-device environment, providing a seamless experience for users is crucial. Therefore, we have adopted the Progressive Web Application [PWA](https://support.google.com/chrome/answer/9658361) technology, which is a modern web technology that can elevate web applications to a near-native application experience. Through PWA, LobeTheme can provide a highly optimized user experience on desktop and mobile devices, while maintaining lightweight and high performance characteristics. Visually and perceptually, it has been carefully designed to ensure that its interface is indistinguishable from native applications, providing smooth animations, responsive layout, and adaptation to different screen resolutions of different devices. -- On your computer, open Chrome. -- Go to stable diffusion website you want to install -- At the top right of the address bar, click `Install` -- Follow the onscreen instructions to install the PWA +> \[!NOTE] +> +> If you are not familiar with the installation process of PWA, you can follow these steps to add LobeChat as your desktop application (also applicable to mobile devices): +> +> - Run the Chrome or Edge browser on your computer. +> - Visit the LobeChat website. +> - Click the Install icon in the upper right corner of the address bar. +> - Follow the on-screen instructions to complete the installation of PWA.
@@ -245,21 +279,21 @@ You can use Progressive Web Apps [PWA](https://support.google.com/chrome/answer/
-#### Prompt formatting +#### `10` Prompt Word Formatting -Click the 🪄 button below Prompt to format the prompt words with one click. +Click the 🪄 button below the Prompt to format the prompt words with one click. > \[!TIP] > > Convert full-width punctuation to half-width, remove extra spaces, add missing commas, and move the Extra-Networks model to the end. -Before formatting: +Before formatting ```text photorealistic photo of a handsome male (wizard :1.2), short beard, white wizard shirt, (with golden trim:0.8), ``` -After formatting: +After formatting ```text photorealistic photo of a handsome male, (wizard:1.2), short beard, white wizard shirt, (with golden trim:0.8), , @@ -271,6 +305,20 @@ photorealistic photo of a handsome male, (wizard:1.2), short beard, white wizard
+#### More Features + +- [x] 💎 **Exquisite UI Design**: Carefully designed interface with elegant appearance and smooth interactive effects. +- [x] 🖼️ **Multiple Layout Modes**: In the dual-column mode, it achieves adjustable canvas proportions, ensuring that the generated images are always on top. +- [x] 🌍 **Internationalization Support**: Fully supports major i18n languages and welcomes contributions on [PR](https://github.com/lobehub/sd-webui-lobe-theme/tree/main/locales). + +> ✨ With continuous updates in product iterations, we hope to bring more exciting features! + +
+ +[![][back-to-top]](#readme-top) + +
+ ## 🖥 Environment Support | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | @@ -384,9 +432,12 @@ This project is [AGPL3](./LICENSE) licensed. [cover]: https://gw.alipayobjects.com/zos/kitchen/8Ab%24hLJ5ur/cover.webp [discord-link]: https://discord.gg/AYFPHvv2jT [discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square +[feat-generation-info]: https://gw.alipayobjects.com/zos/kitchen/rIv%24%24AAE6A/feat_generation_info.webp [feat-highlight]: https://gw.alipayobjects.com/zos/kitchen/iD%24W4U2y3Y/feat_highlight.webp [feat-mobile-friendly]: https://gw.alipayobjects.com/zos/kitchen/WpWe6Hw8UT/feat_mobile_friendly.webp +[feat-prompt-editor]: https://gw.alipayobjects.com/zos/kitchen/FrA0mjmNv7/feat_prompt_editor.webp [feat-pwa]: https://gw.alipayobjects.com/zos/kitchen/az49akOKJT/feat_pwa.webp +[feat-share]: https://gw.alipayobjects.com/zos/kitchen/h4QrGbJ9dF/feat_share.webp [feat-sidebar]: https://gw.alipayobjects.com/zos/kitchen/Olum2IjxCW/feat_sidebar.webp [feat-theme-modify]: https://gw.alipayobjects.com/zos/kitchen/CbhlynwJYg/feat_theme_modify.webp [feat-thememode]: https://gw.alipayobjects.com/zos/kitchen/nSFtJidWUR/feat_thememode.webp diff --git a/README.zh-CN.md b/README.zh-CN.md index e17629d..b7f0ce6 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -6,7 +6,7 @@

Lobe Theme

-高定 Stable Diffusion 现代主题,诸多体验优化
历史版本为 Kitchen Theme +Stable Diffusion WebUI 现代化界面框架
具有精致的界面设计,高度可定制的用户界面和提高效率的功能 [English](./README.md)・简体中文・[变更日志](./CHANGELOG.md) · [反馈问题][github-issues-link] · [功能建议][github-issues-link] @@ -32,9 +32,8 @@ #### TOC -- [✨ 主题特性](#-主题特性) - [📦 插件安装](#-插件安装) -- [🤯 使用说明](#-使用说明) +- [✨ 特性一览](#-特性一览) - [🖥 兼容环境](#-兼容环境) - [📦 生态系统](#-生态系统) - [⌨️ 本地开发](#️-本地开发) @@ -53,18 +52,6 @@ > > `Lobe Theme v3` 适配 `SD WebUI v1.6`, 并不向下兼容,`< 1.6` 以下版本移动到分支 [legacy-sd-webui-1.5](https://github.com/lobehub/sd-webui-lobe-theme/tree/legacy-sd-webui-1.5) -## ✨ 主题特性 - -- [x] 🌗 支持亮暗色主题,可以导航栏快速切换 -- [x] 🌈 支持主题颜色和中性色自定义,支持 Logo 自定义 -- [x] 🪄 支持 Prompt 一键格式化,并提供简易的标签编辑器 -- [x] 🎛️ 高定制侧边栏,左侧为快捷设置侧边栏,右侧为模型侧边栏 -- [x] 🖼️ 可调节画板比例,使生成图像始终置顶 -- [x] 📱 移动端友好,针对手机屏幕完成部分优化 -- [x] 🌍 支持 i18n 并欢迎提交 [PR](https://github.com/lobehub/sd-webui-lobe-theme/tree/main/locales) 贡献 -- [x] 📝 语法高亮的 Prompt 输入框 -- [x] 📦 支持 [PWA](https://support.google.com/chrome/answer/9658361?hl=zh-Hans) 渐进式 Web 应用 -
[![][back-to-top]](#readme-top) @@ -73,29 +60,39 @@ ## 📦 插件安装 -#### 方法一 - -通过 stable diffusion webui 插件市场搜索 `Lobe Theme` 或 `Kitchen Theme` 进行安装 - -> \[!NOTE] +> \[!IMPORTANT] > -> **Version 2.0.0** 后更名为 **Lobe Theme** +> 安装插件前,请检查 Stable Diffusion WebUI 版本环境,最低要求 `gradio-3.41.2` & `sd-webui 1.6` -#### 方法二 +#### `A` 通过 SD WebUI 插件市场安装 -作为扩展(推荐) 将存储库克隆到您的扩展文件夹中: +在 Stable Diffusion WebUI 中,您可以通过内置的插件市场来安装 Lobe Theme 插件。 + +- 首先,打开 Stable Diffusion WebUI,并进入插件市场。在搜索框中输入 "Lobe Theme",然后点击搜索按钮。您将看到相关的插件列表。 +- 找到 Lobe Theme 插件后,点击安装按钮。系统将开始下载并安装插件。安装完成后,您可以在插件列表中找到 Lobe Theme,重载 UI 后即可生效。 + +
+ +#### `B` 通过 Git 克隆本仓库(推荐) + +如果您更喜欢使用 Git 来管理插件,您可以将存储库克隆到您的扩展文件夹中。以下是详细的步骤: + +- 打开命令行界面,并导航到 Stable Diffusion WebUI 根目录。 +- 在命令行中运行以下命令来克隆存储库: ```shell git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme ``` -> \[!IMPORTANT] -> -> 最低要求 `gradio-3.41.2` & `sd-webui 1.6` +- 一旦您完成了这些步骤,Lobe Theme 插件就会被成功安装到 Stable Diffusion WebUI 中 + +
#### 保持更新 -收藏项目,你将从 GitHub 上无延迟地接收所有发布通知~⭐️ +> \[!TIP] +> +> 收藏项目,你将从 GitHub 上无延迟地接收所有发布通知~⭐️
Star History @@ -110,29 +107,31 @@ git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme
-## 🤯 使用说明 +## ✨ 特性一览 ![][feat-thememode] -#### 亮暗色主题 +#### `1` 亮暗色主题 + +当前主题设计提供了两种视觉效果:亮色主题与暗色主题,满足用户在不同光线环境下的视觉舒适度需求,可在右上角导航栏快速切换。若您倾向于默认启用暗色主题,可通过启动参数 `--theme=dark` 来实现。 > \[!TIP] > -> 可在右上角导航栏快速切换 - -当前主题支持亮暗色双主题,如果你想强制使用暗色模式,使用参数 `--theme=dark` 启动您的 WebUI。例如,在 Windows 上,您的 `webui-user.bat` 应包括: +> 在启动文件中强制启用某颜色主题,例如在 Windows 系统中想要默认启用暗色模式,可在 `webui-user.bat` 文件添加以下内容: ```shell set COMMANDLINE_ARGS= --theme=dark ``` -或通过 URL Props 直接切换 +此外,亦可通过 URL 参数的方式直接进行主题切换: ```shell http://localhost:7860/?__theme=light http://localhost:7860/?__theme=dark ``` +通过这些简洁直观的操作,用户能够根据个人偏好或当前环境,快速切换界面主题,以获得最佳的使用体验。 +
[![][back-to-top]](#readme-top) @@ -141,18 +140,21 @@ http://localhost:7860/?__theme=dark ![][feat-theme-modify] -#### 主体定制 +#### `2` 个性化主题定制 + +作为设计工程师出身 LobeChat 在界面设计上十分考虑用户的个性化体验,因此引入了灵活多变的主题模式, +提供了一系列的颜色定制选项,允许用户根据自己的喜好来调整应用的主题色彩。无论是想要沉稳的深蓝, +还是希望活泼的桃粉,或者是专业的灰白,用户都能够在 LobeTheme 中找到匹配自己风格的颜色选择。 > \[!TIP] > -> 右上角 `⚙` 图标打开设置面板,当前可用设置如下 - -- **Theme** - - Primary color 主题色:目前提供 `13` 种主题颜色搭配 - - Neutral color 中性色:目前提供 `6` 种不同色彩倾向灰阶搭配 - - Logo type 徽标种类:`Lobe` `Kitchen` `自定义` - - Logo 自定义:支持 `img url` `base64` `emoji`,当填入单个 emoji 时会自动替换为 3D Fluent Emoji - - Title 标题自定义:自定义站点名称 +> 通过点击页面右上角的 `⚙` 设置图标,您可以进入设置面板进行个性化定制。 +> +> - **主题色 (Primary color)**:我们提供了 `13` 种精选的主题配色方案,以满足您的个性化色彩需求。 +> - **中性色 (Neutral color)**:为了更细致地调整视觉体验,您还可以选择 `6` 种不同的中性色灰阶搭配。 +> - **徽标样式 (Logo type)**:您可以选择默认的 `Lobe` 和 `Kitchen` 徽标,或者进行自定义。 +> - **徽标定制 (Logo customization)**:支持输入 `img url`、`base64` 编码图像或 `emoji` 表情符号来自定义徽标。填入单个 `emoji` 时,系统将自动转换为 3D Fluent Emoji,丰富视觉效果。 +> - **站点标题 (Title customization)**:允许您根据需求自定义网站的标题名称。
@@ -162,9 +164,11 @@ http://localhost:7860/?__theme=dark ![][feat-highlight] -#### Prompt 语法高亮 +#### `3` Prompt 语法高亮 -按 Stable Diffusion 语法规则,自动染色 prompt 显示 +在使用 Stable Diffusion 模型进行 Promot 编写时,一个有效的功能是 Prompt 语法高亮。 +这一功能通过按照预设的语法规则自动为输入的 Prompt 文本添加颜色编码,从而增强用户体验和操作的直观性。 +Prompt 语法高亮不仅可以帮助用户更清晰地识别和构造语法结构,而且还能提升文本编辑和调试的效率。
@@ -174,37 +178,38 @@ http://localhost:7860/?__theme=dark ![][feat-sidebar] -#### 侧边栏定制 +#### `4` 侧边栏定制 + +LobeTheme 的核心亮点之一莫过于其提供的高度定制化侧边栏功能,旨在让生成图片工作流程更加顺畅, +从而确保每位用户都能根据自己的偏好来调整和优化其工作空间。 > \[!TIP] > -> 右上角 `⚙` 图标打开设置面板,当前可用设置如下 - -- **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` +> 通过点击界面右上角的 `⚙` 设置图标,您可以轻松访问和调整以下设置项: +> +> - **输入区域** +> - 显示模式:`滚动固定高度` | `根据文本行数调整大小` +> - **侧边栏配置** +> - 默认是否展开:`true(是)` +> - 显示模式:`固定` | `悬浮` +> - 默认宽度:`280像素` +> - **额外网络侧边栏** +> - 是否启用:`true(是)` +> - 默认是否展开:`true(是)` +> - 显示模式:`固定` | `悬浮` +> - 默认宽度:`340像素` +> - 模型卡片默认尺寸:`86像素`
推荐系统设置 -#### Extra-Networks 扩展模型视窗 +**Extra-Networks 扩展模型视窗** - 拇指视图 - 卡牌宽度: 86 - 卡牌高度: 128 -
- -#### Quick-Setting 快捷设置 +**Quick-Setting 快捷设置** ```txt 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 @@ -218,11 +223,53 @@ sd_model_checkpoint, sd_vae, CLIP_stop_at_last_layers, img2img_background_color,
+![][feat-generation-info] + +#### `5` 更好的图片信息展示 + +改进了生成信息的显示,对数据展现机制进行了深度优化,引入了 “一键复制” 功能,提高了信息索引效率。 +比如现在你无需在冗长的字符串中进行繁琐搜索,即可迅速获取所需的 Seeds。 + +
+ +[![][back-to-top]](#readme-top) + +
+ +![][feat-share] + +#### `6` 图片配方分享 + +推出了全新的图片分享功能。通过简单的一键操作,可以轻松分享当前图像配方,制作精美的分享图, +并且还增添了更多可定制的设置选项以供探索,从而让分享图更加个性化。 + +
+ +[![][back-to-top]](#readme-top) + +
+ +![][feat-prompt-editor] + +#### `7` Prompt 提词器 + +在快速设置菜单的第二个选项卡中,新增了一个直观易用的提示词编辑器。 +它包括了一系列预设的标签,涵盖后期处理、风格描述等关键词,以简化您的操作流程,并帮助更高效地编辑和管理提示词。 + +
+ +[![][back-to-top]](#readme-top) + +
+ ![][feat-mobile-friendly] -#### 移动端适配 +#### `8` 移动端适配 -针对移动端完成部分便捷性适配设计,面包屑折叠导航栏,侧边栏适配等,但有余 stable diffusion 界面复杂度和定值难度较高无法保证和桌面端相同的使用体验,有更多想法欢迎反馈。 +为了提升移动端用户的交互体验,LobeTheme 实现了面包屑导航的智能折叠机制以及对侧边栏的精细适配。 +这些调整旨在为提供便捷而直观的导航体验,无论在何种设备上。然而,在移动端实现与桌面端相同的复杂功能和细节定制存在一定的挑战。 +尤其是在对接 Stable Diffusion WebUI 界面时,复杂度和参数设定的精确性要求较高,这可能会导致移动端用户的使用体验与桌面端存在一定的差异。 +如果有任何建议或想法,非常欢迎通过 GitHub Issues 或者 Pull Requests 提供反馈。
@@ -232,14 +279,20 @@ sd_model_checkpoint, sd_vae, CLIP_stop_at_last_layers, img2img_background_color, ![][feat-pwa] -#### PWA 渐进式 Web 应用 +#### `9` PWA 渐进式 Web 应用 -可以使用渐进式 Web 应用 [PWA](https://support.google.com/chrome/answer/9658361?hl=zh-Hans) 在计算机或移动设备上享受快速 Stable Diffusion 体验 +在当今多设备环境下为用户提供无缝体验的重要性。为此,我们采用了渐进式 Web 应用 [PWA](https://support.google.com/chrome/answer/9658361) 技术, +这是一种能够将网页应用提升至接近原生应用体验的现代 Web 技术。通过 PWA,LobeTheme 能够在桌面和移动设备上提供高度优化的用户体验,同时保持轻量级和高性能的特点。 +在视觉和感觉上,也经过精心设计,以确保它的界面与原生应用无差别,提供流畅的动画、响应式布局和适配不同设备的屏幕分辨率。 -- 在计算机上打开 Chrome -- 打开 Stable Diffusion 网页 -- 在地址栏的右上角,点击 `安装` 图标 -- 按照屏幕上的说明安装该 PWA +> \[!NOTE] +> +> 若您未熟悉 PWA 的安装过程,您可以按照以下步骤将 LobeChat 添加为您的桌面应用(也适用于移动设备): +> +> - 在电脑上运行 Chrome 或 Edge 浏览器 . +> - 访问 LobeChat 网页 . +> - 在地址栏的右上角,单击 安装 图标 . +> - 根据屏幕上的指示完成 PWA 的安装 .
@@ -247,7 +300,7 @@ sd_model_checkpoint, sd_vae, CLIP_stop_at_last_layers, img2img_background_color,
-#### 提示词格式化 +#### `10` 提示词格式化 点击 Prompt 下方 🪄 按钮即可将提示词一键格式化 @@ -273,6 +326,20 @@ photorealistic photo of a handsome male, (wizard:1.2), short beard, white wizard
+#### 更多特性 + +- [x] 💎 **精致 UI 设计**:经过精心设计的界面,具有优雅的外观和流畅的交互效果。 +- [x] 🖼️ **多种布局模式**:在双列模式中,实现可调节画板比例,使生成图像始终置顶。 +- [x] 🌍 **国际化支持**: 完整支持主要 i18n 语种,并欢迎提交 [PR](https://github.com/lobehub/sd-webui-lobe-theme/tree/main/locales) 贡献。 + +> ✨ 随着产品迭代持续更新,希望带来更多更多令人激动的功能! + +
+ +[![][back-to-top]](#readme-top) + +
+ ## 🖥 兼容环境 | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | @@ -386,9 +453,12 @@ This project is [AGPL3](./LICENSE) licensed. [cover]: https://gw.alipayobjects.com/zos/kitchen/8Ab%24hLJ5ur/cover.webp [discord-link]: https://discord.gg/AYFPHvv2jT [discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square +[feat-generation-info]: https://gw.alipayobjects.com/zos/kitchen/rIv%24%24AAE6A/feat_generation_info.webp [feat-highlight]: https://gw.alipayobjects.com/zos/kitchen/iD%24W4U2y3Y/feat_highlight.webp [feat-mobile-friendly]: https://gw.alipayobjects.com/zos/kitchen/WpWe6Hw8UT/feat_mobile_friendly.webp +[feat-prompt-editor]: https://gw.alipayobjects.com/zos/kitchen/FrA0mjmNv7/feat_prompt_editor.webp [feat-pwa]: https://gw.alipayobjects.com/zos/kitchen/az49akOKJT/feat_pwa.webp +[feat-share]: https://gw.alipayobjects.com/zos/kitchen/h4QrGbJ9dF/feat_share.webp [feat-sidebar]: https://gw.alipayobjects.com/zos/kitchen/Olum2IjxCW/feat_sidebar.webp [feat-theme-modify]: https://gw.alipayobjects.com/zos/kitchen/CbhlynwJYg/feat_theme_modify.webp [feat-thememode]: https://gw.alipayobjects.com/zos/kitchen/nSFtJidWUR/feat_thememode.webp