WebUI LiuMo Batch 是一款基于纯前端技术栈构建的 Stable Diffusion 批量生成工具。它通过配置即代码的理念，利用 JSON 配置文件管理提示词和参数，解决了传统单张生成效率低、参数管理混乱的问题。核心功能包括多标签页并行管理、智能队列调度、浮动控制面板及图片参数逆向提取。项目采用单例模式管理状态，支持本地存储持久化，并具备插件扩展架构。适用于角色设计批量产出、参数对比研究及电商内容创作等场景，显著提升了 AIGC 工作流的生产效率。
在当今人工智能生成内容（AIGC）快速发展的时代，Stable Diffusion 等文生图模型已成为创意工作者和研究人员的重要工具。然而，随着应用场景的不断扩展，传统 WebUI 的单张图像生成模式已难以满足批量生产、参数对比和工作流管理的复杂需求。正是在这样的背景下，WebUI LiuMo Batch 应运而生，它将工作流思维与批量处理能力深度融合，为 AIGC 创作提供了全新的解决方案。
WebUI LiuMo Batch 是一款基于现代 Web 技术栈构建的创新型批量生成平台，充分利用了 Stable Diffusion WebUI 的 API 接口，通过多标签页管理、JSON 配置驱动和智能队列系统三大核心机制，彻底改变了用户与 AI 图像生成模型的交互方式。本文将从项目架构、核心代码、功能特性、应用场景等多个维度对这一开源项目进行剖析。
WebUI LiuMo Batch 并非简单的界面封装，而是一个完整的AIGC 工作流管理系统。它解决了传统使用方式中的多个痛点：
该项目以 '配置即代码' 为核心理念，将复杂的生成参数封装为结构化的 JSON 配置文件，通过可视化界面进行管理，同时保留了代码级配置的灵活性和可复用性。
WebUI LiuMo Batch 采用纯前端技术栈实现，主要包含以下层次：
下表展示了项目的核心功能模块及其相互关系：
| 模块名称 | 主要功能 | 技术实现 | 依赖关系 |
|---|---|---|---|
| 侧边栏管理 | 文件浏览、队列管理、API 配置 | CSS 变量主题、折叠动画 | 独立模块 |
| 标签页系统 | 多配置并行编辑、快速切换 | 动态 DOM 操作、事件委托 | 状态管理 |
| 队列引擎 | 任务调度、进度监控、错误处理 | Promise 链、异步控制 | API 通信 |
| 浮动控制面板 | 实时控制、进度显示、拖拽交互 | 绝对定位、拖拽事件 | 队列引擎 |
| 配置管理器 | JSON 导入导出、参数解析 | JSON 序列化、文件 API | 标签页系统 |
| 图片画廊 | 生成结果预览、元数据显示 | 栅格布局、模态框 | 状态管理 |
项目的核心是精心设计的全局状态管理对象 AppState，它采用单例模式管理整个应用的状态：
const AppState = {
// 侧边栏状态
sidebarCollapsed: false,
// JSON 文件管理
jsonFiles: [],
selectedJsonPath: null,
// 执行队列
executionQueue: [],
isQueueRunning: false,
// 标签页管理
tabs: [],
activeTabId: null,
nextTabId: 1,
// 公共图片画廊（所有任务生成的图片）
commonGallery: [],
// 全局配置
apiUrl: 'http://127.0.0.1:7860',
currentFolderPath: null,
// 模型和 VAE 列表
sdModels: [],
vaeModels: [],
// 模型加载状态
modelsLoaded: false,
// 全局任务 ID 计数器
nextTaskId: 1,
// 进度查询定时器
progressTimer: null,
originalTitle: null,
// 执行状态
isExecutionRunning: false,
isContinuousMode: false,
currentExecutionStartTime: null,
currentExecutionType: null,
// 'queue' 或 'current'
currentProgress: {
: ,
: ,
: ,
:
},
: ,
: ,
: {
: ,
: {: , : },
: ,
: {: , : }
}
};
这种设计有几个关键优势：
项目采用手动 DOM 更新而非虚拟 DOM 方案，通过精心设计的更新函数实现高效 UI 同步：
function updateJsonList() {
dom.jsonList.innerHTML = '';
dom.jsonCount.textContent = AppState.jsonFiles.length;
AppState.jsonFiles.forEach((jsonFile, index) => {
const li = document.createElement('li');
li.className = `json-item ${AppState.sidebarCollapsed ? 'collapsed' : ''}`;
if (jsonFile.path === AppState.selectedJsonPath) {
li.classList.add('active');
}
// 条件渲染：侧边栏折叠时显示图标，展开时显示完整信息
li.innerHTML = AppState.sidebarCollapsed ?
`<svg>...</svg>` :
`<div title="${jsonFile.name}">${jsonFile.name}</div> <div> <button title="添加到队列"> <svg>...</svg> </button> <div>${jsonFile.content.version || 'v1.0'}</div> </div>`;
// 事件绑定
li.addEventListener('click', () => openJsonInTab(jsonFile));
// 添加队列按钮事件
if (!AppState.) {
addQueueBtn = li.();
addQueueBtn.(, {
e.();
(jsonFile);
});
}
dom..(li);
});
}
这种更新模式的优点包括：
与 Stable Diffusion WebUI 的通信通过统一的 API 层实现：
async function generateImageWithConfig(config, prompt, taskName) {
// 获取 API URL
const apiUrl = config.apiUrl || AppState.apiUrl;
// 准备请求参数
const params = {
prompt: prompt,
negative_prompt: config.globalParams.negativePrompt || '',
seed: config.globalParams.seed === -1 ? -1 : parseInt(config.globalParams.seed),
steps: parseInt(config.globalParams.steps),
width: parseInt(config.globalParams.width),
height: parseInt(config.globalParams.height),
cfg_scale: parseFloat(config.globalParams.cfgScale),
sampler_name: config.globalParams.sampler || 'DPM++ 2M Karras',
batch_size: 1,
n_iter: 1,
save_images: config.globalParams.autoSave !==
};
(config..) {
params. = {: config..};
}
controller = ();
timeoutId = ( controller.(), );
{
response = (, {
: ,
: {: },
: .(params),
: controller.
});
(timeoutId);
(!response.) {
();
}
result = response.();
(!result. || result.. === ) {
();
}
imageData = result.[];
(!imageData.()) {
imageData = ;
}
{
: imageData,
: result. || config..,
: result. || {}
};
} (error) {
(timeoutId);
();
}
}
API 层的设计特色：
标签页系统是 WebUI LiuMo Batch 的核心创新之一，它允许用户同时管理多个生成配置：
function createNewTab(name, jsonFile = null) {
const tabId = `tab-${AppState.nextTabId++}`;
const tab = {
id: tabId,
name: name,
jsonPath: jsonFile?.path || null,
jsonName: jsonFile?.name || null,
state: createTabState()
};
AppState.tabs.push(tab);
AppState.activeTabId = tabId;
// 创建 Tab 页头
createTabHeader(tab);
// 创建 Tab 内容
createTabContent(tab);
// 更新 Tab 显示
updateTabDisplay();
return tabId;
}
function createTabState() {
return {
prompts: [{id: 1, label: '示例提示词', text: 'masterpiece, best quality, 1girl, beautiful detailed eyes, in a garden, sunlight'}],
nextId: 2,
isGenerating: false,
currentQueue: [],
results: [],
autoSaveEnabled: true,
maxHistoryImages: 10,
:
};
}
标签页系统的技术特点：
tab-{id} 格式确保 DOM 元素 ID 唯一性队列引擎负责管理批量生成任务的执行顺序、状态跟踪和错误处理：
async function startQueueExecution() {
if (AppState.executionQueue.length === 0) {
showNotification('队列为空', 'warning');
return;
}
if (AppState.isQueueRunning) {
showNotification('队列正在执行中', 'info');
return;
}
AppState.isQueueRunning = true;
AppState.currentExecutionType = 'queue';
AppState.currentExecutionStartTime = new Date();
// 计算总任务数（所有 JSON 文件的提示词总数）
let totalPrompts = 0;
AppState.executionQueue.forEach(queueItem => {
if (queueItem.config && queueItem.config.prompts) {
totalPrompts += queueItem.config.prompts.length;
}
});
// 进度管理初始化
AppState.currentProgress = {
current: 0,
total: totalPrompts,
: ,
:
};
{
( i = ; i < ..; i++) {
(!.) ;
queueItem = .[i];
queueItem. = ;
();
.. = queueItem.;
.. = i + ;
();
{
(queueItem, .);
queueItem. = ;
(, );
} (error) {
queueItem. = ;
(, );
}
();
}
(. && .) {
(, );
..( {
item. = ;
});
.. = ;
}
} (. && .);
. = ;
. = ;
();
();
(, );
}
队列引擎的核心特性：
| 特性 | 实现机制 | 优势 |
|---|---|---|
| 任务状态跟踪 | pending/running/completed/failed 四状态模型 | 清晰的执行进度可视化 |
| 错误隔离 | 单任务错误不影响队列继续执行 | 提高批量任务成功率 |
| 连续执行模式 | 循环执行队列直到手动停止 | 适合长期稳定运行场景 |
| 进度实时更新 | 浏览器标题 + 浮动面板双重显示 | 多任务监控便捷 |
| 资源释放 | 执行完成自动清理定时器和状态 | 避免内存泄漏 |
浮动控制面板是项目的 UI 设计亮点，实现了可拖拽、可最小化的控制中心：
function setupDragAndDrop() {
const panel = dom.floatingControlPanel;
const header = panel.querySelector('.floating-control-panel-header');
let isDragging = false;
let startX, startY;
let initialLeft, initialTop;
// 鼠标拖拽实现
header.addEventListener('mousedown', startDrag);
function startDrag(e) {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
const rect = panel.getBoundingClientRect();
initialLeft = rect.left;
initialTop = rect.top;
panel.classList.add('dragging');
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
}
function drag(e) {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
let newLeft = initialLeft + dx;
let newTop = initialTop + dy;
// 边界检查：确保面板在视窗内
const maxX = . - panel.;
maxY = . - panel.;
newLeft = .(, .(newLeft, maxX));
newTop = .(, .(newTop, maxY));
panel.. = ;
panel.. = ;
panel.. = ;
... = newLeft;
... = newTop;
}
() {
(!isDragging) ;
isDragging = ;
panel..();
();
.(, drag);
.(, stopDrag);
}
}
浮动面板的设计哲学：
项目实现了从已有图片中提取生成参数的创新功能：
async function extractImageInfo(file) {
try {
// 将图片转换为 base64
const imageBase64 = await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result.split(',')[1]);
reader.onerror = reject;
reader.readAsDataURL(file);
});
// 调用 WebUI 的 png-info API
const response = await fetch(`${AppState.apiUrl}/sdapi/v1/png-info`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({image: `data:image/png;base64,${imageBase64}`})
});
if (!response.ok) throw new Error(`API 请求失败：${response.status}`);
const data = await response.json();
(!data.) ();
(data.);
} (error) {
(file);
}
}
() {
result = {
: ,
: ,
: ,
: ,
: ,
: -,
: ,
: ,
: ,
: {: , : , : , : }
};
(infoString.().()) {
{
jsonInfo = .(infoString);
} (e) {
}
}
lines = infoString.();
result;
}
此功能的技术价值：
WebUI LiuMo Batch 定义了一套完整的 JSON 配置规范：
{
"version": "2.0",
"exportDate": "2025-01-04T10:30:00.000Z",
"globalParams": {
"sdModel": "dreamshaper_8.safetensors",
"vaeModel": "Automatic",
"negativePrompt": "lowres, bad anatomy, worst quality, low quality",
"sampler": "DPM++ 2M Karras",
"steps": 25,
"width": 512,
"height": 768,
"cfgScale": 7,
"seed": -1,
"batchCount": 1,
"clipSkip": 1,
"enableHr"
配置文件的设计原则：
项目的完整数据流涉及多个组件间的协作：
用户操作 → 事件处理器 → 状态更新 → UI 渲染 → API 调用 → 结果处理 → 状态更新 → UI 反馈
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
点击按钮 → 解析参数 → 更新 AppState → 重绘 DOM → 调用 SD API → 保存图片 → 更新画廊 → 显示通知
关键数据转换节点：
项目大量使用 CSS 自定义属性和现代布局技术：
:root {
/* CSS 变量定义 - 主题系统 */
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--border-color: #30363d;
--text-primary: #f0f6fc;
--text-secondary: #8b949e;
--accent-color: #238636;
--accent-hover: #2ea043;
--sidebar-width: 300px;
--sidebar-collapsed-width: 60px;
}
/* CSS Grid 布局 - 图片画廊 */
.common-gallery-content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.5rem;
}
/* Flexbox 布局 - 自适应界面 */
.app-container {
display: flex;
min-height: 100vh;
}
/* 现代选择器和伪类 */
.image-thumb:hover .image-info {
opacity: 1;
transition: opacity 0.2s;
}
/* 响应式设计 */
@media(max-width: 768px) {
.floating-control-panel {
min-width: ;
: ;
: none;
}
}
CSS 设计的亮点：
项目中应用了多种经典设计模式：
| 设计模式 | 应用场景 | 代码示例 |
|---|---|---|
| 单例模式 | 全局状态管理 | AppState 全局对象 |
| 观察者模式 | 事件通知系统 | showNotification 函数 |
| 工厂模式 | 标签页创建 | createNewTab 函数 |
| 策略模式 | 图片解析器 | parseGenerationInfo 支持多种格式 |
| 命令模式 | 队列任务 | executionQueue 中的任务对象 |
| 备忘录模式 | 状态持久化 | saveToLocalStorage 函数 |
这些模式的应用使代码：
项目实现了对 Stable Diffusion WebUI API 的完整封装：
// API 端点映射表
const API_ENDPOINTS = {
SD_MODELS: '/sdapi/v1/sd-models',
SD_VAE: '/sdapi/v1/sd-vae',
TXT2IMG: '/sdapi/v1/txt2img',
PNG_INFO: '/sdapi/v1/png-info',
PROGRESS: '/sdapi/v1/progress',
OPTIONS: '/sdapi/v1/options'
};
// 统一的 API 请求函数
async function callWebUIApi(endpoint, method = 'GET', data = null) {
const url = `${AppState.apiUrl}${endpoint}`;
const options = { method, headers: {'Content-Type': 'application/json'}};
if (data && (method === 'POST' || method === 'PUT')) {
options.body = JSON.stringify(data);
}
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`API 请求失败 (${response.status}): ${await response.text()}`);
}
return await response.();
} (error) {
.(, error);
error;
}
}
项目实现了细粒度的进度监控系统：
function startProgressPolling() {
// 清除现有定时器
if (AppState.progressTimer) {
clearInterval(AppState.progressTimer);
}
// 启动新定时器
AppState.progressTimer = setInterval(async () => {
try {
const progressData = await callWebUIApi(API_ENDPOINTS.PROGRESS);
// 更新单张图片进度
if (progressData.progress !== undefined) {
AppState.currentImageProgress = progressData.progress;
updateSingleImageProgress();
}
// 更新标题栏进度显示
updateTitleProgress();
// 更新浮动控制面板
updateProgressDisplay();
} catch (error) {
console.warn('进度查询失败:', error);
}
}, 500); // 500ms 轮询间隔
}
进度监控的特点：
批量生成可能产生大量图片数据，项目实现了有效的内存管理：
// 图片数据生命周期管理
function addToGallery(imageData) {
// 添加到公共画廊
AppState.commonGallery.unshift(imageData);
// 限制画廊大小，防止内存溢出
const MAX_GALLERY_SIZE = 50;
if (AppState.commonGallery.length > MAX_GALLERY_SIZE) {
// 移除最旧的图片，释放内存
const removed = AppState.commonGallery.splice(MAX_GALLERY_SIZE);
// 可选：通知用户
if (removed.length > 0) {
console.log(`清理了 ${removed.length} 张旧图片以释放内存`);
}
}
// 触发 UI 更新
updateCommonGallery();
}
// Base64 图片数据的优化处理
function optimizeImageStorage(imageBase64) {
// 对于缩略图，可以使用降低质量的方法
if (imageBase64.length > 1024 * 1024) {
// 大于 1MB
console.warn('大图片数据，考虑优化存储策略');
// 实际应用中可实现压缩或外部存储
}
return imageBase64;
}
针对频繁的 UI 更新，项目实施了多项优化：
// 批量 DOM 操作优化
function batchUpdatePrompts(tabId) {
// 使用文档片段减少重排
const fragment = document.createDocumentFragment();
const tab = AppState.tabs.find(t => t.id === tabId);
tab.state.prompts.forEach(prompt => {
const item = createPromptElement(prompt);
fragment.appendChild(item);
});
// 一次性更新 DOM
const container = document.querySelector(`#prompts-container-${tabId}`);
container.innerHTML = '';
container.appendChild(fragment);
}
// 事件委托优化
function setupGlobalEventDelegation() {
// 使用事件委托减少事件监听器数量
document.addEventListener('click', (e) => {
// 提示词删除按钮
if (e.target.classList.contains('delete-prompt-btn')) {
const id = e.target.closest('.prompt-item')..;
((), (id));
}
(e..()) {
index = e..()..;
(e., (index));
}
});
}
所有用户输入都经过严格验证：
function validateAndSanitizeInput(input, type) {
switch (type) {
case 'prompt':
// 移除潜在的危险脚本
return input.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
case 'apiUrl':
// 验证 URL 格式
const urlPattern = /^(http|https):\/\/[^ "]+$/;
if (!urlPattern.test(input)) {
throw new Error('无效的 API URL 格式');
}
return input;
case 'jsonContent':
// 验证 JSON 结构
try {
const parsed = JSON.parse(input);
// 验证必需字段
if (!parsed.version || !parsed.globalParams) {
throw new Error('无效的 JSON 配置格式');
}
return parsed;
} catch (e) {
throw new Error(`JSON 解析失败：${e.message}`);
}
default:
return input;
}
}
项目实现了分层的错误处理机制：
async function executeWithErrorHandling(operation, context = {}) {
try {
showNotification(`开始：${context.name || '操作'}`, 'info');
const result = await operation();
showNotification(`完成：${context.name || '操作'}`, 'success');
return result;
} catch (error) {
console.error(`操作失败 [${context.name || '未知'}]:`, error);
// 分类错误处理
if (error.message.includes('网络') || error.message.includes('Network')) {
showNotification('网络错误，请检查连接', 'danger');
} else if (error.message.includes('API') || error.message.includes('请求')) {
showNotification('API 服务异常，请检查 WebUI 状态', 'danger');
} else if (error.message.includes('JSON') || error..()) {
(, );
} {
(, );
}
(context.) {
(context);
}
error;
}
}
项目设计了可扩展的架构：
// 扩展点定义
const EXTENSION_POINTS = {
BEFORE_GENERATION: 'beforeGeneration',
AFTER_GENERATION: 'afterGeneration',
CONFIG_LOAD: 'configLoad',
CONFIG_SAVE: 'configSave',
UI_RENDER: 'uiRender'
};
// 插件管理器
class PluginManager {
constructor() {
this.plugins = new Map();
this.hooks = new Map();
// 初始化所有扩展点
Object.values(EXTENSION_POINTS).forEach(point => {
this.hooks.set(point, []);
});
}
registerPlugin(plugin) {
this.plugins.set(plugin.name, plugin);
// 注册插件钩子
if (plugin.hooks) {
Object.entries(plugin.hooks).forEach(([point, callback]) => {
if (this..(point)) {
..(point).(callback);
}
});
}
}
() {
hooks = ..(point) || [];
( hook hooks) {
{
data = (data) || data;
} (error) {
.(, error);
}
}
data;
}
}
() {
pluginManager = .;
processedConfig = pluginManager.(., { config, prompt });
result = (processedConfig., processedConfig.);
finalResult = pluginManager.(., result);
finalResult;
}
假设游戏角色设计师需要生成同一角色在不同场景中的表现：
{
"commonPrompt": "masterpiece, best quality, 1girl, silver hair, blue eyes, fantasy armor",
"prompts": [
{"label": "战斗姿态", "text": "in battle stance, holding sword, dramatic lighting"},
{"label": "休闲场景", "text": "resting at campfire, night sky, stars"},
{"label": "城镇中", "text": "in medieval town, marketplace, daylight"},
{"label": "魔法释放", "text": "casting spell, magical energy, glowing runes"}
]
}
设计师可以：
AI 研究者需要对比不同参数对生成结果的影响：
// 创建参数对比矩阵
const paramMatrix = {
samplers: ['Euler a', 'DPM++ 2M Karras', 'DDIM'],
cfgScales: [5, 7, 9, 11],
steps: [20, 30, 40, 50]
};
// 自动生成所有组合
const allCombinations = generateParamCombinations(paramMatrix);
// 批量执行并记录结果
allCombinations.forEach((params, index) => {
addToQueue({
name: `实验_${index + 1}`,
config: {
globalParams: {...baseConfig, ...params},
prompts: [{text: "standard test prompt for comparison"}]
}
});
});
电商内容创作团队的商品图生成流程：
| 阶段 | 传统方式 | 使用 LiuMo Batch |
|---|---|---|
| 需求分析 | 手动记录需求 | 创建需求配置模板 |
| 参数配置 | 每张图单独调整 | 批量应用参数模板 |
| 批量生成 | 手动逐张生成 | 自动队列执行 |
| 效果审核 | 文件夹中查找对比 | 画廊中并排对比 |
| 选定优化 | 重新调整参数重试 | 修改配置后重新队列 |
| 交付存档 | 文件散落各处 | 完整配置 + 结果打包 |
http://127.0.0.1:7860）快速启动：
# 方法 1：直接打开 HTML 文件
open liumo-base/index.html
# 方法 2：使用本地 HTTP 服务器
python -m http.server 8000
# 然后访问 http://localhost:8000
环境准备：
# 1. 确保已安装 Stable Diffusion WebUI
# 2. 启动 WebUI 时添加 API 参数
./webui.sh --api
# 3. 获取 LiuMo Batch 代码
git clone https://github.com/Liudef06/liumo-base.git
// 自定义配置示例
const customConfig = {
// 界面定制
ui: {
theme: 'dark', // 'dark' | 'light' | 'auto'
language: 'zh-CN', // 界面语言
defaultTabCount: 3, // 启动时创建的标签页数
autoSaveInterval: 300000 // 自动保存间隔 (ms)
},
// 生成设置
generation: {
defaultSteps: 25,
defaultWidth: 512,
defaultHeight: 768,
defaultSampler: 'DPM++ 2M Karras',
maxQueueSize: 100, // 队列最大任务数
retryFailed: true, // 自动重试失败任务
retryCount: 3 // 最大重试次数
},
// 存储设置
storage: {
maxHistoryImages: 50,
enableLocalStorage: true,
exportFormat: 'json', // 'json' | 'yaml'
backupInterval: 3600000 // 自动备份间隔 (ms)
}
};
基于当前架构，项目有几个明确的演进方向：
项目采用开放协作模式，欢迎多种形式的贡献：
| 贡献类型 | 技能要求 | 入门任务 |
|---|---|---|
| 代码贡献 | JavaScript/CSS | 修复已知 issue、添加测试用例 |
| 文档改进 | 技术写作 | 完善使用文档、添加教程 |
| 插件开发 | 前端开发 | 开发实用插件、工具集成 |
| 问题反馈 | 产品使用 | 提交 bug 报告、功能建议 |
| 社区支持 | 沟通能力 | 回答用户问题、社区管理 |
WebUI LiuMo Batch 代表了 AIGC 工具发展的一个重要方向：从单点工具到工作流平台的演进。通过将复杂的批量生成任务抽象为可管理的配置和工作流，它显著降低了 Stable Diffusion 等 AI 绘画工具的使用门槛，同时提高了专业用户的工作效率。
项目的技术实现展示了现代 Web 技术的强大能力：纯前端实现、完整的本地运行、丰富的交互体验，所有这些都不需要复杂的后端架构。其代码质量、架构设计和用户体验都达到了生产级应用的标准。
随着 AIGC 技术的普及和深化，类似 WebUI LiuMo Batch 的工作流工具将变得越来越重要。它们不仅是效率工具，更是创意工作者的思维延伸，帮助人们更好地驾驭 AI 的创造力，将更多精力聚焦于创意本身而非技术细节。
无论你是 AI 绘画的爱好者、专业的内容创作者，还是研究 AI 生成技术的研究者，WebUI LiuMo Batch 都值得你深入了解和使用。它可能就是你寻找的那个能够将 AI 创造力与人类工作流程完美结合的关键工具。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online