Stable-Diffusion-v1-5-archive Web UI定制化自定义CSS/快捷按钮/历史记录导出技巧1. 引言为什么需要定制你的SD Web UI如果你已经用了一段时间的Stable Diffusion v1.5 Archive可能已经发现默认的Web界面虽然能用但用久了总觉得有点“不够顺手”。比如每次都要手动输入常用的负面提示词想换个界面颜色还得看默认的样式生成了一大堆图片想整理时又无从下手。这就像你买了一辆性能不错的车但座椅高度、方向盘位置都是出厂设置开起来总感觉不是最舒服的状态。今天我就来带你“改装”这辆车让它完全按照你的习惯来工作。本文将分享三个实用的Web UI定制技巧自定义CSS样式让你的界面更符合个人审美甚至能缓解长时间使用的视觉疲劳。添加快捷按钮把重复操作一键化大幅提升工作效率。历史记录导出告别混乱的图片文件夹轻松管理和复现优秀作品。这些技巧都不需要你懂复杂的编程只需要一点点的动手能力就能让你的SD使用体验提升一个档次。下面我们就从最简单的CSS定制开始。2. 自定义CSS样式打造你的专属工作台默认的Web UI界面是标准的Gradio风格虽然简洁但看久了难免单调。通过注入自定义CSS你可以改变颜色、字体、布局甚至添加一些实用的视觉提示。2.1 理解Web UI的样式结构在开始修改之前我们先简单了解一下这个Web界面的构成。它基于Gradio框架每个输入框、按钮、图片区域都是一个独立的HTML元素并带有特定的CSS类名。我们的目标就是找到这些类名然后为它们重新定义样式。最直接的方法是使用浏览器的开发者工具按F12打开。比如你可以右键点击“生成图片”按钮选择“检查”就能看到它的HTML代码和应用的CSS类。2.2 基础CSS修改实战假设我们想将整个页面的背景色改为深灰色让文字更清晰并给生成按钮添加一个醒目的颜色。我们可以创建一个CSS文件比如叫custom_style.css。/* custom_style.css - 基础美化 */ /* 1. 修改全局背景和文字颜色 */ .gradio-container { background-color: #2d2d2d !important; color: #e0e0e0 !important; font-family: Segoe UI, system-ui, sans-serif !important; } /* 2. 美化输入框 */ textarea, input[typetext], input[typenumber] { background-color: #3a3a3a !important; border: 1px solid #555 !important; color: #f0f0f0 !important; border-radius: 6px !important; padding: 8px !important; } /* 3. 重点突出生成按钮 */ button#generate-btn { /* 假设按钮的id是generate-btn请根据实际检查 */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: white !important; font-weight: bold !important; border: none !important; border-radius: 8px !important; padding: 12px 24px !important; transition: all 0.3s ease !important; } button#generate-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(102, 126, 234, 0.4) !important; } /* 4. 美化图片展示区域 */ img { border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }2.3 如何将CSS应用到Web UI创建好CSS文件后你需要让它被Web UI加载。由于我们使用的是预置的镜像服务无法直接修改服务器文件。但我们可以利用浏览器的用户样式功能。方法一使用浏览器插件推荐安装如“Stylus”或“User CSS”这类浏览器插件。然后新建一个样式将上面的CSS代码粘贴进去并设置该样式仅应用于你的Web UI地址如https://gpu-xxxx-7860.web.gpu.csdn.net/。这样每次你访问这个页面时插件就会自动注入你的自定义样式。方法二使用开发者工具直接注入在浏览器中打开Web UI按F12打开开发者工具切换到“控制台”(Console)标签页。输入以下代码并回车可以临时生效刷新页面后失效var style document.createElement(style); style.innerHTML /* 在这里粘贴你的整个CSS代码 */; document.head.appendChild(style);通过简单的CSS修改你的工作环境立刻变得与众不同。接下来我们解决一个更实际的问题——如何减少重复劳动。3. 添加快捷按钮将重复操作一键化在使用SD时我们经常有一些固定操作比如切换一组常用的负面提示词或者快速应用某个固定的分辨率设置。每次都手动输入或选择非常浪费时间。我们可以用一点JavaScript来创建快捷按钮。3.1 创建快捷按钮的原理Gradio的Web界面本质上是一个网页应用页面上所有的元素我们都可以通过JavaScript来访问和操作。我们的思路是在页面上找到我们想控制的输入框比如“Negative Prompt”。在它旁边插入一个我们自己创建的按钮。给这个按钮添加一个点击事件当点击时自动将预设的内容填入对应的输入框。3.2 实现“一键填入常用负面词”按钮假设我们有一套常用的负面提示词组合lowres, bad anatomy, blurry, extra fingers, mutated hands, poorly drawn face。我们希望在负面提示词输入框旁边加一个按钮点击就自动填进去。同样我们需要借助浏览器插件如“Tampermonkey”油猴脚本或开发者工具来运行我们的脚本。这里以创建一个油猴脚本为例// UserScript // name SD Web UI Quick Buttons // namespace http://tampermonkey.net/ // version 1.0 // description 为SD Web UI添加快捷按钮 // author You // match https://gpu-*-7860.web.gpu.csdn.net/* // grant none // /UserScript (function() { use strict; // 等待页面主要元素加载完成 setTimeout(function() { // 1. 找到负面提示词输入框 // 我们需要通过检查元素来找到它的准确选择器 // 假设它的类名是 negative-prompt 或类似的这里用更通用的查找方式 let textareas document.querySelectorAll(textarea); let negPromptTextarea null; for (let ta of textareas) { // 通过placeholder或附近的label文本来判断 if (ta.placeholder ta.placeholder.toLowerCase().includes(negative)) { negPromptTextarea ta; break; } } // 如果没找到尝试找包含“Negative”标签的输入框 if (!negPromptTextarea) { const labels document.querySelectorAll(label, .label); for (let label of labels) { if (label.textContent.includes(Negative)) { // 尝试找到这个label后面的textarea const parent label.parentElement; const ta parent.querySelector(textarea); if (ta) { negPromptTextarea ta; break; } } } } if (negPromptTextarea) { // 2. 创建按钮 const quickButton document.createElement(button); quickButton.textContent 常用负面词; quickButton.style.marginLeft 10px; quickButton.style.padding 6px 12px; quickButton.style.backgroundColor #4CAF50; quickButton.style.color white; quickButton.style.border none; quickButton.style.borderRadius 4px; quickButton.style.cursor pointer; // 3. 定义按钮点击事件 quickButton.onclick function() { negPromptTextarea.value lowres, bad anatomy, blurry, extra fingers, mutated hands, poorly drawn face; // 触发输入事件确保Gradio能捕获到值的变化 negPromptTextarea.dispatchEvent(new Event(input, { bubbles: true })); alert(常用负面词已填入); }; // 4. 将按钮插入到输入框后面 negPromptTextarea.parentNode.insertBefore(quickButton, negPromptTextarea.nextSibling); } // 你可以用类似的方法为其他参数如Seed、Steps创建快捷按钮 // 例如创建一个“随机种子”按钮 let seedInput document.querySelector(input[typenumber][placeholder*Seed], input[typenumber][aria-label*Seed]); if (seedInput) { const randomSeedBtn document.createElement(button); randomSeedBtn.textContent 随机Seed; randomSeedBtn.style.marginLeft 10px; randomSeedBtn.style.padding 6px 12px; randomSeedBtn.style.backgroundColor #2196F3; randomSeedBtn.style.color white; randomSeedBtn.style.border none; randomSeedBtn.style.borderRadius 4px; randomSeedBtn.style.cursor pointer; randomSeedBtn.onclick function() { const randomSeed Math.floor(Math.random() * 1000000); seedInput.value randomSeed; seedInput.dispatchEvent(new Event(input, { bubbles: true })); seedInput.dispatchEvent(new Event(change, { bubbles: true })); // 有时需要change事件 alert(已设置为随机种子: randomSeed); }; seedInput.parentNode.insertBefore(randomSeedBtn, seedInput.nextSibling); } }, 3000); // 延迟3秒执行确保页面完全加载 })();将这个脚本安装到油猴插件中当你再次打开Web UI时页面上就会多出“常用负面词”和“随机Seed”按钮点击即可一键填充非常方便。4. 历史记录导出技巧告别混乱高效管理作品SD Web UI通常会保存生成的历史图片但默认可能只保存在服务器的临时目录或者缺乏有效的管理方式。一个完整的作品应该包括生成的图片和生成时使用的所有参数Prompt、Seed、Steps等这样我们才能完美复现或进行微调。4.1 手动导出单次生成记录每次生成后Web UI右侧会显示图片和推理参数JSON。最基础的方法就是手动保存。右键保存图片。复制右侧的JSON参数粘贴到一个文本文件中。将图片和文本文件放在同一个文件夹并以有意义的名称命名例如“赛博朋克城市_Seed12345”。这个方法简单但生成多了以后会非常繁琐。我们需要自动化。4.2 利用浏览器控制台批量获取历史记录虽然Web UI没有提供直接的批量导出功能但我们可以通过分析网络请求或页面数据来获取。一个相对简单的方法是直接抓取页面上已经加载的历史记录数据。打开开发者工具F12切换到“控制台”(Console)尝试输入以下命令来探索页面结构// 尝试查找包含历史图片或数据的元素 document.querySelectorAll(img); // 查看所有图片 // 或者查看Gradio的内部状态这需要一点探索 try { console.log(window.gradio_config); } catch(e) { console.log(无法直接访问gradio_config); }更可行的方法是监听网络请求。当你点击“生成”时浏览器会向服务器发送一个请求并收到包含图片和参数的响应。打开开发者工具的“网络”(Network)标签页。清空记录然后在Web UI点击“生成图片”。在网络请求列表中找到一个可能是/api/predict/或/run/predict的POST请求。点击这个请求查看它的“响应”(Response)标签页里面很可能就包含了我们需要的图片数据可能是base64编码和所有参数。4.3 构建一个简单的本地导出工具思路基于上述发现我们可以构思一个更强大的方案创建一个用户脚本自动监听每一次生成请求的响应然后将图片和参数自动保存到本地。下面是一个概念性的脚本框架展示了如何捕获数据并触发下载// UserScript // name SD Web UI Auto Saver // namespace http://tampermonkey.net/ // version 0.1 // description 自动保存SD生成结果和参数 // author You // match https://gpu-*-7860.web.gpu.csdn.net/* // grant GM_download // /UserScript (function() { use strict; // 保存生成记录的数组 let generationHistory []; // 重写XMLHttpRequest的send方法以拦截请求 const originalSend XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.send function(body) { // 判断是否是生成图片的请求根据URL或请求体特征 if (this._url this._url.includes(/api/) body body.includes(prompt)) { const originalOnReadyStateChange this.onreadystatechange; this.onreadystatechange function() { if (this.readyState 4 this.status 200) { try { const response JSON.parse(this.responseText); // 假设响应结构是 { data: [图片数据, 参数JSON] } if (response.data response.data.length 1) { const imageData response.data[0]; // 可能是base64或URL const params response.data[1]; // 参数 saveGeneration(imageData, params); } } catch (e) { console.error(解析响应失败:, e); } } if (originalOnReadyStateChange) { originalOnReadyStateChange.apply(this, arguments); } }; } originalSend.apply(this, arguments); }; function saveGeneration(imgData, params) { const timestamp new Date().toISOString().replace(/[:.]/g, -); const filename sd_generation_${timestamp}; // 1. 保存参数为JSON文件 const paramBlob new Blob([JSON.stringify(params, null, 2)], { type: application/json }); const paramUrl URL.createObjectURL(paramBlob); const link1 document.createElement(a); link1.href paramUrl; link1.download ${filename}_params.json; document.body.appendChild(link1); link1.click(); document.body.removeChild(link1); URL.revokeObjectURL(paramUrl); // 2. 保存图片假设imgData是base64字符串 if (imgData.startsWith(data:image)) { const link2 document.createElement(a); link2.href imgData; link2.download ${filename}.png; document.body.appendChild(link2); link2.click(); document.body.removeChild(link2); } console.log(已保存生成记录: ${filename}); } console.log(SD Web UI 自动保存脚本已加载。); })();请注意以上脚本是一个概念演示实际生效需要根据目标Web UI具体的API请求路径和响应格式进行调整。这需要你通过开发者工具进行具体的分析和调试。但它提供了一个清晰的自动化思路。5. 总结打造你的高效AI绘画工作流通过今天的分享我们完成了对Stable Diffusion v1.5 Archive Web UI的三项实用改造视觉个性化CSS定制我们学会了如何通过自定义CSS来改变界面外观让它更符合你的审美和使用习惯甚至可以提升专注度。操作效率化快捷按钮我们利用JavaScript创建了一键填充按钮将高频的重复操作如输入负面词、设置随机种子简化到一次点击显著提升了操作流畅度。作品管理自动化历史导出我们探讨了手动和自动导出生成记录的方法。虽然完整的自动化方案需要针对具体接口进行适配但思路是明确的捕获生成请求的响应自动将图片和参数打包保存为你的作品库建立秩序。这些技巧的核心思想是“主动优化工具而非被动适应工具”。Stable Diffusion是一个强大的引擎而Web UI是你的驾驶舱。花一点时间把这个驾驶舱调整到最顺手的状态你在后续创作之旅中收获的将是持续的效率和愉悦感。从修改一个颜色开始到添加一个按钮再到尝试自动化保存每一步都是对你工作流的一次升级。希望这些技巧能帮助你更高效、更舒适地使用Stable Diffusion释放出更多的创造力。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Stable-Diffusion-v1-5-archiveWeb UI定制化：自定义CSS/快捷按钮/历史记录导出技巧
Stable-Diffusion-v1-5-archive Web UI定制化自定义CSS/快捷按钮/历史记录导出技巧1. 引言为什么需要定制你的SD Web UI如果你已经用了一段时间的Stable Diffusion v1.5 Archive可能已经发现默认的Web界面虽然能用但用久了总觉得有点“不够顺手”。比如每次都要手动输入常用的负面提示词想换个界面颜色还得看默认的样式生成了一大堆图片想整理时又无从下手。这就像你买了一辆性能不错的车但座椅高度、方向盘位置都是出厂设置开起来总感觉不是最舒服的状态。今天我就来带你“改装”这辆车让它完全按照你的习惯来工作。本文将分享三个实用的Web UI定制技巧自定义CSS样式让你的界面更符合个人审美甚至能缓解长时间使用的视觉疲劳。添加快捷按钮把重复操作一键化大幅提升工作效率。历史记录导出告别混乱的图片文件夹轻松管理和复现优秀作品。这些技巧都不需要你懂复杂的编程只需要一点点的动手能力就能让你的SD使用体验提升一个档次。下面我们就从最简单的CSS定制开始。2. 自定义CSS样式打造你的专属工作台默认的Web UI界面是标准的Gradio风格虽然简洁但看久了难免单调。通过注入自定义CSS你可以改变颜色、字体、布局甚至添加一些实用的视觉提示。2.1 理解Web UI的样式结构在开始修改之前我们先简单了解一下这个Web界面的构成。它基于Gradio框架每个输入框、按钮、图片区域都是一个独立的HTML元素并带有特定的CSS类名。我们的目标就是找到这些类名然后为它们重新定义样式。最直接的方法是使用浏览器的开发者工具按F12打开。比如你可以右键点击“生成图片”按钮选择“检查”就能看到它的HTML代码和应用的CSS类。2.2 基础CSS修改实战假设我们想将整个页面的背景色改为深灰色让文字更清晰并给生成按钮添加一个醒目的颜色。我们可以创建一个CSS文件比如叫custom_style.css。/* custom_style.css - 基础美化 */ /* 1. 修改全局背景和文字颜色 */ .gradio-container { background-color: #2d2d2d !important; color: #e0e0e0 !important; font-family: Segoe UI, system-ui, sans-serif !important; } /* 2. 美化输入框 */ textarea, input[typetext], input[typenumber] { background-color: #3a3a3a !important; border: 1px solid #555 !important; color: #f0f0f0 !important; border-radius: 6px !important; padding: 8px !important; } /* 3. 重点突出生成按钮 */ button#generate-btn { /* 假设按钮的id是generate-btn请根据实际检查 */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: white !important; font-weight: bold !important; border: none !important; border-radius: 8px !important; padding: 12px 24px !important; transition: all 0.3s ease !important; } button#generate-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(102, 126, 234, 0.4) !important; } /* 4. 美化图片展示区域 */ img { border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }2.3 如何将CSS应用到Web UI创建好CSS文件后你需要让它被Web UI加载。由于我们使用的是预置的镜像服务无法直接修改服务器文件。但我们可以利用浏览器的用户样式功能。方法一使用浏览器插件推荐安装如“Stylus”或“User CSS”这类浏览器插件。然后新建一个样式将上面的CSS代码粘贴进去并设置该样式仅应用于你的Web UI地址如https://gpu-xxxx-7860.web.gpu.csdn.net/。这样每次你访问这个页面时插件就会自动注入你的自定义样式。方法二使用开发者工具直接注入在浏览器中打开Web UI按F12打开开发者工具切换到“控制台”(Console)标签页。输入以下代码并回车可以临时生效刷新页面后失效var style document.createElement(style); style.innerHTML /* 在这里粘贴你的整个CSS代码 */; document.head.appendChild(style);通过简单的CSS修改你的工作环境立刻变得与众不同。接下来我们解决一个更实际的问题——如何减少重复劳动。3. 添加快捷按钮将重复操作一键化在使用SD时我们经常有一些固定操作比如切换一组常用的负面提示词或者快速应用某个固定的分辨率设置。每次都手动输入或选择非常浪费时间。我们可以用一点JavaScript来创建快捷按钮。3.1 创建快捷按钮的原理Gradio的Web界面本质上是一个网页应用页面上所有的元素我们都可以通过JavaScript来访问和操作。我们的思路是在页面上找到我们想控制的输入框比如“Negative Prompt”。在它旁边插入一个我们自己创建的按钮。给这个按钮添加一个点击事件当点击时自动将预设的内容填入对应的输入框。3.2 实现“一键填入常用负面词”按钮假设我们有一套常用的负面提示词组合lowres, bad anatomy, blurry, extra fingers, mutated hands, poorly drawn face。我们希望在负面提示词输入框旁边加一个按钮点击就自动填进去。同样我们需要借助浏览器插件如“Tampermonkey”油猴脚本或开发者工具来运行我们的脚本。这里以创建一个油猴脚本为例// UserScript // name SD Web UI Quick Buttons // namespace http://tampermonkey.net/ // version 1.0 // description 为SD Web UI添加快捷按钮 // author You // match https://gpu-*-7860.web.gpu.csdn.net/* // grant none // /UserScript (function() { use strict; // 等待页面主要元素加载完成 setTimeout(function() { // 1. 找到负面提示词输入框 // 我们需要通过检查元素来找到它的准确选择器 // 假设它的类名是 negative-prompt 或类似的这里用更通用的查找方式 let textareas document.querySelectorAll(textarea); let negPromptTextarea null; for (let ta of textareas) { // 通过placeholder或附近的label文本来判断 if (ta.placeholder ta.placeholder.toLowerCase().includes(negative)) { negPromptTextarea ta; break; } } // 如果没找到尝试找包含“Negative”标签的输入框 if (!negPromptTextarea) { const labels document.querySelectorAll(label, .label); for (let label of labels) { if (label.textContent.includes(Negative)) { // 尝试找到这个label后面的textarea const parent label.parentElement; const ta parent.querySelector(textarea); if (ta) { negPromptTextarea ta; break; } } } } if (negPromptTextarea) { // 2. 创建按钮 const quickButton document.createElement(button); quickButton.textContent 常用负面词; quickButton.style.marginLeft 10px; quickButton.style.padding 6px 12px; quickButton.style.backgroundColor #4CAF50; quickButton.style.color white; quickButton.style.border none; quickButton.style.borderRadius 4px; quickButton.style.cursor pointer; // 3. 定义按钮点击事件 quickButton.onclick function() { negPromptTextarea.value lowres, bad anatomy, blurry, extra fingers, mutated hands, poorly drawn face; // 触发输入事件确保Gradio能捕获到值的变化 negPromptTextarea.dispatchEvent(new Event(input, { bubbles: true })); alert(常用负面词已填入); }; // 4. 将按钮插入到输入框后面 negPromptTextarea.parentNode.insertBefore(quickButton, negPromptTextarea.nextSibling); } // 你可以用类似的方法为其他参数如Seed、Steps创建快捷按钮 // 例如创建一个“随机种子”按钮 let seedInput document.querySelector(input[typenumber][placeholder*Seed], input[typenumber][aria-label*Seed]); if (seedInput) { const randomSeedBtn document.createElement(button); randomSeedBtn.textContent 随机Seed; randomSeedBtn.style.marginLeft 10px; randomSeedBtn.style.padding 6px 12px; randomSeedBtn.style.backgroundColor #2196F3; randomSeedBtn.style.color white; randomSeedBtn.style.border none; randomSeedBtn.style.borderRadius 4px; randomSeedBtn.style.cursor pointer; randomSeedBtn.onclick function() { const randomSeed Math.floor(Math.random() * 1000000); seedInput.value randomSeed; seedInput.dispatchEvent(new Event(input, { bubbles: true })); seedInput.dispatchEvent(new Event(change, { bubbles: true })); // 有时需要change事件 alert(已设置为随机种子: randomSeed); }; seedInput.parentNode.insertBefore(randomSeedBtn, seedInput.nextSibling); } }, 3000); // 延迟3秒执行确保页面完全加载 })();将这个脚本安装到油猴插件中当你再次打开Web UI时页面上就会多出“常用负面词”和“随机Seed”按钮点击即可一键填充非常方便。4. 历史记录导出技巧告别混乱高效管理作品SD Web UI通常会保存生成的历史图片但默认可能只保存在服务器的临时目录或者缺乏有效的管理方式。一个完整的作品应该包括生成的图片和生成时使用的所有参数Prompt、Seed、Steps等这样我们才能完美复现或进行微调。4.1 手动导出单次生成记录每次生成后Web UI右侧会显示图片和推理参数JSON。最基础的方法就是手动保存。右键保存图片。复制右侧的JSON参数粘贴到一个文本文件中。将图片和文本文件放在同一个文件夹并以有意义的名称命名例如“赛博朋克城市_Seed12345”。这个方法简单但生成多了以后会非常繁琐。我们需要自动化。4.2 利用浏览器控制台批量获取历史记录虽然Web UI没有提供直接的批量导出功能但我们可以通过分析网络请求或页面数据来获取。一个相对简单的方法是直接抓取页面上已经加载的历史记录数据。打开开发者工具F12切换到“控制台”(Console)尝试输入以下命令来探索页面结构// 尝试查找包含历史图片或数据的元素 document.querySelectorAll(img); // 查看所有图片 // 或者查看Gradio的内部状态这需要一点探索 try { console.log(window.gradio_config); } catch(e) { console.log(无法直接访问gradio_config); }更可行的方法是监听网络请求。当你点击“生成”时浏览器会向服务器发送一个请求并收到包含图片和参数的响应。打开开发者工具的“网络”(Network)标签页。清空记录然后在Web UI点击“生成图片”。在网络请求列表中找到一个可能是/api/predict/或/run/predict的POST请求。点击这个请求查看它的“响应”(Response)标签页里面很可能就包含了我们需要的图片数据可能是base64编码和所有参数。4.3 构建一个简单的本地导出工具思路基于上述发现我们可以构思一个更强大的方案创建一个用户脚本自动监听每一次生成请求的响应然后将图片和参数自动保存到本地。下面是一个概念性的脚本框架展示了如何捕获数据并触发下载// UserScript // name SD Web UI Auto Saver // namespace http://tampermonkey.net/ // version 0.1 // description 自动保存SD生成结果和参数 // author You // match https://gpu-*-7860.web.gpu.csdn.net/* // grant GM_download // /UserScript (function() { use strict; // 保存生成记录的数组 let generationHistory []; // 重写XMLHttpRequest的send方法以拦截请求 const originalSend XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.send function(body) { // 判断是否是生成图片的请求根据URL或请求体特征 if (this._url this._url.includes(/api/) body body.includes(prompt)) { const originalOnReadyStateChange this.onreadystatechange; this.onreadystatechange function() { if (this.readyState 4 this.status 200) { try { const response JSON.parse(this.responseText); // 假设响应结构是 { data: [图片数据, 参数JSON] } if (response.data response.data.length 1) { const imageData response.data[0]; // 可能是base64或URL const params response.data[1]; // 参数 saveGeneration(imageData, params); } } catch (e) { console.error(解析响应失败:, e); } } if (originalOnReadyStateChange) { originalOnReadyStateChange.apply(this, arguments); } }; } originalSend.apply(this, arguments); }; function saveGeneration(imgData, params) { const timestamp new Date().toISOString().replace(/[:.]/g, -); const filename sd_generation_${timestamp}; // 1. 保存参数为JSON文件 const paramBlob new Blob([JSON.stringify(params, null, 2)], { type: application/json }); const paramUrl URL.createObjectURL(paramBlob); const link1 document.createElement(a); link1.href paramUrl; link1.download ${filename}_params.json; document.body.appendChild(link1); link1.click(); document.body.removeChild(link1); URL.revokeObjectURL(paramUrl); // 2. 保存图片假设imgData是base64字符串 if (imgData.startsWith(data:image)) { const link2 document.createElement(a); link2.href imgData; link2.download ${filename}.png; document.body.appendChild(link2); link2.click(); document.body.removeChild(link2); } console.log(已保存生成记录: ${filename}); } console.log(SD Web UI 自动保存脚本已加载。); })();请注意以上脚本是一个概念演示实际生效需要根据目标Web UI具体的API请求路径和响应格式进行调整。这需要你通过开发者工具进行具体的分析和调试。但它提供了一个清晰的自动化思路。5. 总结打造你的高效AI绘画工作流通过今天的分享我们完成了对Stable Diffusion v1.5 Archive Web UI的三项实用改造视觉个性化CSS定制我们学会了如何通过自定义CSS来改变界面外观让它更符合你的审美和使用习惯甚至可以提升专注度。操作效率化快捷按钮我们利用JavaScript创建了一键填充按钮将高频的重复操作如输入负面词、设置随机种子简化到一次点击显著提升了操作流畅度。作品管理自动化历史导出我们探讨了手动和自动导出生成记录的方法。虽然完整的自动化方案需要针对具体接口进行适配但思路是明确的捕获生成请求的响应自动将图片和参数打包保存为你的作品库建立秩序。这些技巧的核心思想是“主动优化工具而非被动适应工具”。Stable Diffusion是一个强大的引擎而Web UI是你的驾驶舱。花一点时间把这个驾驶舱调整到最顺手的状态你在后续创作之旅中收获的将是持续的效率和愉悦感。从修改一个颜色开始到添加一个按钮再到尝试自动化保存每一步都是对你工作流的一次升级。希望这些技巧能帮助你更高效、更舒适地使用Stable Diffusion释放出更多的创造力。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
