网站可信认证必须做吗免费咨询律师在线微信

张

张建站

2026/4/7 15:16:14

10分钟阅读

网站可信认证必须做吗,免费咨询律师在线微信,网站后端开发流程,禁止wordpress历史版本Qwen-Image-Lightning实战教程#xff1a;WebUI插件开发——自定义提示词模板库 1. 引言#xff1a;为什么需要提示词模板库#xff1f; 如果你用过文生图模型#xff0c;一定有过这样的体验#xff1a;脑子里有个绝妙的画面#xff0c;但写出来的提示词却平平无奇 padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; background: #0d1117; /* 深色背景匹配原UI */ color: #c9d1d9; display: flex; height: 100vh; overflow: hidden; } /* 主内容区 - 模拟原WebUI */ #main-app { flex: 1; padding: 20px; overflow-y: auto; } .prompt-section { background: #161b22; border-radius: 12px; padding: 24px; margin-bottom: 30px; border: 1px solid #30363d; } #prompt-input { width: 100%; min-height: 120px; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; color: #c9d1d9; padding: 16px; font-size: 16px; resize: vertical; font-family: monospace; } #generate-btn { background: linear-gradient(135deg, #238636, #2ea043); color: white; border: none; padding: 14px 28px; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 20px; display: flex; align-items: center; gap: 8px; } #generate-btn:hover { background: linear-gradient(135deg, #2ea043, #3fb950); } /* 模板库侧边栏 */ #template-sidebar { width: 380px; background: #161b22; border-left: 1px solid #30363d; display: flex; flex-direction: column; transition: transform 0.3s ease; height: 100vh; position: relative; } .sidebar-collapsed #template-sidebar { transform: translateX(100%); } #sidebar-toggle { position: absolute; left: -40px; top: 20px; background: #21262d; border: 1px solid #30363d; border-right: none; border-radius: 8px 0 0 8px; color: #c9d1d9; padding: 10px 12px; cursor: pointer; font-size: 20px; } .sidebar-header { padding: 20px; border-bottom: 1px solid #30363d; display: flex; justify-content: space-between; align-items: center; } .sidebar-header h2 { font-size: 18px; font-weight: 600; } #create-template-btn { background: #21262d; border: 1px solid #30363d; color: #58a6ff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; } #create-template-btn:hover { background: #30363d; } /* 模板分类与列表 */ .template-categories { display: flex; padding: 16px 20px; border-bottom: 1px solid #30363d; gap: 10px; overflow-x: auto; } .category-btn { background: #21262d; border: 1px solid #30363d; color: #8b949e; padding: 8px 16px; border-radius: 20px; cursor: pointer; white-space: nowrap; font-size: 14px; } .category-btn.active { background: #238636; color: white; border-color: #238636; } .template-list { flex: 1; overflow-y: auto; padding: 20px; } .template-item { background: #0d1117; border: 1px solid #30363d; border-radius: 10px; padding: 16px; margin-bottom: 15px; cursor: pointer; transition: all 0.2s; } .template-item:hover { border-color: #58a6ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .template-title { font-weight: 600; margin-bottom: 8px; color: #f0f6fc; display: flex; justify-content: space-between; } .template-preview { color: #8b949e; font-size: 14px; line-height: 1.5; margin-bottom: 12px; max-height: 60px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .template-tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { background: #1f6feb; color: white; padding: 2px 8px; border-radius: 10px; font-size: 12px; } /* 创建/编辑模板的模态框 */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 1000; } .modal-overlay.active { display: flex; } .modal-content { background: #161b22; border-radius: 12px; padding: 30px; width: 90%; max-width: 600px; border: 1px solid #30363d; } .modal-content h3 { margin-bottom: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #c9d1d9; font-size: 14px; } .form-group textarea { min-height: 100px; resize: vertical; } .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 30px; } .btn-secondary { background: #21262d; border: 1px solid #30363d; color: #c9d1d9; padding: 10px 20px; border-radius: 6px; cursor: pointer; } .btn-primary { background: #238636; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; } /style /head body !-- 主应用区域 (模拟原界面) -- div idmain-app div classprompt-section h1⚡ Qwen-Image-Lightning 极速创作室/h1 p stylemargin: 15px 0; color: #8b949e;输入您的创意描述体验4步光速生成。/p textarea idprompt-input placeholder例如一只穿着宇航服的猫在月球上弹吉他电影质感8k高清.../textarea button idgenerate-btn⚡ Generate (4 Steps)/button /div !-- 图片展示区 (模拟) -- div idimage-output stylebackground: #161b22; border-radius:12px; padding:20px; min-height:400px; border:1px solid #30363d; display:grid; place-items:center; color:#8b949e; 生成的图片将显示在这里 /div /div !-- 模板库侧边栏 -- div idtemplate-sidebar div idsidebar-toggle/div div classsidebar-header h2 提示词模板库/h2 button idcreate-template-btn 新建模板/button /div div classtemplate-categories !-- 分类按钮将通过JS动态生成 -- /div div classtemplate-list idtemplate-list-container !-- 模板列表将通过JS动态生成 -- /div /div !-- 创建/编辑模板模态框 -- div classmodal-overlay idtemplate-modal div classmodal-content h3创建新模板/h3 form idtemplate-form div classform-group label fortemplate-title模板名称/label input typetext idtemplate-title placeholder例如电影质感人像 required /div div classform-group label fortemplate-prompt提示词内容/label textarea idtemplate-prompt placeholder输入完整的提示词例如masterpiece, best quality, 1girl, beautiful detailed eyes, cinematic lighting... required/textarea /div div classform-group label fortemplate-category分类/label select idtemplate-category required option value请选择分类/option !-- 分类选项将通过JS动态生成 -- /select /div div classform-group label fortemplate-tags标签用逗号分隔/label input typetext idtemplate-tags placeholder例如人像, 写实, 电影光 /div div classform-group label fortemplate-desc描述可选/label textarea idtemplate-desc placeholder描述这个模板的特点或适用场景/textarea /div div classmodal-actions button typebutton classbtn-secondary idcancel-modal取消/button button typesubmit classbtn-primary保存模板/button /div /form /div /div script srctemplate-library.js/script /body /html4.2 编写核心JavaScript逻辑接下来创建template-library.js文件实现模板库的所有交互逻辑。// template-library.js document.addEventListener(DOMContentLoaded, function() { // 1. 初始化数据 // 预定义的模板库数据 const templateLibrary { categories: [全部, 写实风格, 动漫二次元, 科幻未来, 古风国潮, 概念艺术, 产品设计, 建筑景观], templates: [ { id: 1, title: 电影质感人像, prompt: masterpiece, best quality, 1girl, beautiful detailed eyes, cinematic lighting, photorealistic, 8k, sharp focus, category: 写实风格, tags: [人像, 写实, 电影光], desc: 适用于生成高质量、有电影感的人物特写。 }, { id: 2, title: 赛博朋克都市, prompt: cyberpunk city, neon lights, raining, futuristic, towering skyscrapers, holographic advertisements, highly detailed, night scene, category: 科幻未来, tags: [城市, 夜景, 霓虹], desc: 生成充满科技感与霓虹灯光的未来都市景象。 }, { id: 3, title: 水墨风格山水, prompt: 中国水墨画山水云雾缭绕孤舟远山淡雅留白大师作品, category: 古风国潮, tags: [山水, 水墨, 中国风], desc: 利用Qwen强大的中文理解生成传统水墨画意境。 }, { id: 4, title: 可爱卡通角色, prompt: cute chibi character, anime style, big eyes, smiling, pastel colors, clean background, sticker art, category: 动漫二次元, tags: [角色, 可爱, 卡通], desc: 生成适合用作头像或贴纸的Q版动漫角色。 }, { id: 5, title: 奇幻森林场景, prompt: enchanted forest, magical glowing plants, fireflies, ancient trees, path, fantasy, dreamlike, highly detailed, category: 概念艺术, tags: [自然, 奇幻, 场景], desc: 创造充满魔法生物与发光植物的奇幻森林。 }, { id: 6, title: 极简主义产品, prompt: product photography, minimalist design, white background, studio lighting, clean, professional, high-end, isolated on white, category: 产品设计, tags: [产品, 简约, 白底], desc: 生成适用于电商或产品展示的极简风格渲染图。 } ] }; // 用户收藏的模板存储在浏览器本地 let userTemplates JSON.parse(localStorage.getItem(qwen_user_templates)) || []; let currentCategory 全部; let editingTemplateId null; // 用于跟踪正在编辑的模板ID // 2. DOM元素获取 const promptInput document.getElementById(prompt-input); const generateBtn document.getElementById(generate-btn); const sidebarToggle document.getElementById(sidebar-toggle); const templateSidebar document.getElementById(template-sidebar); const createTemplateBtn document.getElementById(create-template-btn); const templateListContainer document.getElementById(template-list-container); const categoriesContainer document.querySelector(.template-categories); const templateModal document.getElementById(template-modal); const templateForm document.getElementById(template-form); const cancelModalBtn document.getElementById(cancel-modal); const categorySelect document.getElementById(template-category); // 3. 渲染分类按钮 function renderCategories() { categoriesContainer.innerHTML ; // 添加“我的收藏”分类 const allCategories [全部, 我的收藏, ...templateLibrary.categories.filter(c c ! 全部)]; allCategories.forEach(cat { const btn document.createElement(button); btn.className category-btn; if (cat currentCategory) btn.classList.add(active); btn.textContent cat; btn.dataset.category cat; btn.addEventListener(click, () { currentCategory cat; document.querySelectorAll(.category-btn).forEach(b b.classList.remove(active)); btn.classList.add(active); renderTemplates(); }); categoriesContainer.appendChild(btn); }); // 同时渲染表单中的分类下拉选项 renderCategoryOptions(); } function renderCategoryOptions() { categorySelect.innerHTML option value请选择分类/option; templateLibrary.categories.forEach(cat { if (cat ! 全部) { const option document.createElement(option); option.value cat; option.textContent cat; categorySelect.appendChild(option); } }); } // 4. 渲染模板列表 function renderTemplates() { templateListContainer.innerHTML ; let templatesToShow []; if (currentCategory 全部) { templatesToShow [...templateLibrary.templates, ...userTemplates]; } else if (currentCategory 我的收藏) { templatesToShow userTemplates; } else { templatesToShow [ ...templateLibrary.templates.filter(t t.category currentCategory), ...userTemplates.filter(t t.category currentCategory) ]; } if (templatesToShow.length 0) { templateListContainer.innerHTML p styletext-align:center; color:#8b949e; padding:40px;当前分类下暂无模板。/p; return; } templatesToShow.forEach(template { const isUserTemplate template.id 1000; // 假设用户模板ID从1000开始 const item document.createElement(div); item.className template-item; item.dataset.id template.id; item.innerHTML div classtemplate-title span${template.title}/span ${isUserTemplate ? span stylefont-size:12px; color:#58a6ff;(我的)/span : } /div div classtemplate-preview title${template.prompt}${template.prompt}/div div classtemplate-tags ${template.tags.map(tag span classtag${tag}/span).join()} /div ${template.desc ? div stylefont-size:12px; color:#8b949e; margin-top:8px;${template.desc}/div : } div stylemargin-top:12px; display:flex; gap:10px; font-size:12px; button classbtn-use stylebackground:#238636; color:white; border:none; padding:4px 12px; border-radius:4px; cursor:pointer;使用/button ${isUserTemplate ? button classbtn-edit stylebackground:#d29922; color:white; border:none; padding:4px 12px; border-radius:4px; cursor:pointer;编辑/button button classbtn-delete stylebackground:#da3633; color:white; border:none; padding:4px 12px; border-radius:4px; cursor:pointer;删除/button : button classbtn-save stylebackground:#1f6feb; color:white; border:none; padding:4px 12px; border-radius:4px; cursor:pointer;收藏/button } /div ; // 绑定事件 item.querySelector(.btn-use).addEventListener(click, () useTemplate(template.prompt)); if (isUserTemplate) { item.querySelector(.btn-edit).addEventListener(click, () editTemplate(template.id)); item.querySelector(.btn-delete).addEventListener(click, () deleteTemplate(template.id)); } else { item.querySelector(.btn-save).addEventListener(click, () saveToUserTemplates(template)); } templateListContainer.appendChild(item); }); } // 5. 核心功能函数 function useTemplate(promptText) { promptInput.value promptText; promptInput.focus(); // 可选添加一个视觉反馈比如短暂高亮输入框 promptInput.style.boxShadow 0 0 0 2px #238636; setTimeout(() { promptInput.style.boxShadow ; }, 300); } function saveToUserTemplates(template) { // 检查是否已收藏 if (userTemplates.some(t t.id template.id)) { alert(该模板已在您的收藏中。); return; } // 为用户模板创建一个新ID简单处理从1000开始递增 const newId 1000 (userTemplates.length 0 ? Math.max(...userTemplates.map(t t.id)) - 1000 1 : 0); const userTemplate { ...template, id: newId }; userTemplates.push(userTemplate); localStorage.setItem(qwen_user_templates, JSON.stringify(userTemplates)); alert(已收藏到“我的模板”); if (currentCategory 我的收藏) { renderTemplates(); // 如果当前就在“我的收藏”分类刷新列表 } } function deleteTemplate(templateId) { if (!confirm(确定要删除这个模板吗)) return; userTemplates userTemplates.filter(t t.id ! templateId); localStorage.setItem(qwen_user_templates, JSON.stringify(userTemplates)); renderTemplates(); } function editTemplate(templateId) { const template userTemplates.find(t t.id templateId); if (!template) return; editingTemplateId templateId; document.querySelector(.modal-content h3).textContent 编辑模板; document.getElementById(template-title).value template.title; document.getElementById(template-prompt).value template.prompt; document.getElementById(template-category).value template.category; document.getElementById(template-tags).value template.tags.join(, ); document.getElementById(template-desc).value template.desc || ; templateModal.classList.add(active); } // 6. 模态框创建/编辑模板逻辑 createTemplateBtn.addEventListener(click, () { editingTemplateId null; document.querySelector(.modal-content h3).textContent 创建新模板; templateForm.reset(); templateModal.classList.add(active); }); cancelModalBtn.addEventListener(click, () { templateModal.classList.remove(active); }); templateModal.addEventListener(click, (e) { if (e.target templateModal) { templateModal.classList.remove(active); } }); templateForm.addEventListener(submit, (e) { e.preventDefault(); const title document.getElementById(template-title).value.trim(); const prompt document.getElementById(template-prompt).value.trim(); const category document.getElementById(template-category).value; const tags document.getElementById(template-tags).value.split(,).map(t t.trim()).filter(t t); const desc document.getElementById(template-desc).value.trim(); if (!title || !prompt || !category) { alert(请填写名称、提示词和分类。); return; } if (editingTemplateId ! null) { // 编辑现有模板 const index userTemplates.findIndex(t t.id editingTemplateId); if (index -1) { userTemplates[index] { ...userTemplates[index], title, prompt, category, tags, desc }; } } else { // 创建新模板 const newId 1000 (userTemplates.length 0 ? Math.max(...userTemplates.map(t t.id)) - 1000 1 : 0); userTemplates.push({ id: newId, title, prompt, category, tags, desc }); } localStorage.setItem(qwen_user_templates, JSON.stringify(userTemplates)); templateModal.classList.remove(active); renderTemplates(); // 刷新列表 // 如果当前分类不是“我的收藏”或对应的分类可以提示用户 if (currentCategory ! 我的收藏 currentCategory ! category) { alert(模板已保存。您可以在“我的收藏”或对应的分类中找到它。); } }); // 7. 侧边栏折叠/展开 sidebarToggle.addEventListener(click, () { document.body.classList.toggle(sidebar-collapsed); sidebarToggle.textContent document.body.classList.contains(sidebar-collapsed) ? : ; }); // 8. 模拟生成按钮点击连接到真实WebUI的逻辑 // 注意这是模拟。在真实集成中这里应调用原WebUI的生成函数或API。 generateBtn.addEventListener(click, () { const prompt promptInput.value; if (!prompt.trim()) { alert(请输入提示词); return; } // 模拟生成过程 generateBtn.disabled true; generateBtn.innerHTML ⏳ 生成中 (约40-50秒)...; const outputDiv document.getElementById(image-output); outputDiv.innerHTML div styletext-align:center;p正在生成: ${prompt}/pp请耐心等待.../p/div; setTimeout(() { generateBtn.disabled false; generateBtn.innerHTML ⚡ Generate (4 Steps); outputDiv.innerHTML div styletext-align:center; color:#3fb950;p✅ 图片生成成功/pp提示词: ${prompt}/pp(此处应显示生成的图片)/p/div; // 在实际环境中这里会是一个图片URL或Base64数据 }, 2000); // 模拟2秒延迟实际中对应Qwen-Image-Lightning的生成时间 }); // 9. 初始化 renderCategories(); renderTemplates(); console.log(Qwen-Image-Lightning 模板库插件已加载); });5. 集成与部署将插件融入真实WebUI我们刚刚构建了一个完整的前端模板库。现在我们需要将它“注入”到真正的Qwen-Image-Lightning WebUI中。由于我们通常无法直接修改其服务端文件这里提供几种实用的前端集成方案5.1 方案一使用浏览器用户脚本推荐无需修改服务端这是最安全、最便捷的方式。使用Tampermonkey或Violentmonkey等浏览器插件。在浏览器中安装 Tampermonkey 插件。点击插件图标选择“创建新脚本”。将我们编写的HTML中的CSS部分和全部JavaScript逻辑整合到一个用户脚本中。核心思路是使用GM_addStyle注入CSS。在页面加载完成后向DOM中插入模板库的侧边栏HTML结构。将我们template-library.js中的所有逻辑数据、函数、事件绑定复制到脚本中。关键步骤需要正确找到原WebUI中提示词输入框和生成按钮的真实选择器并替换我们代码中模拟的#prompt-input和#generate-btn。简化示例脚本结构// UserScript // name Qwen-Image-Lightning Template Library // namespace http://tampermonkey.net/ // version 1.0 // description 为Qwen-Image-Lightning WebUI添加提示词模板库 // author You // match http://你的服务器IP:8082/* // match https://你的服务器IP:8082/* // grant GM_addStyle // /UserScript (function() { use strict; // 1. 注入CSS样式 GM_addStyle( /* 这里粘贴我们之前写的所有CSS代码 */ #template-sidebar { ... } .template-item { ... } /* ... 等等 ... */ ); // 2. 等待页面核心元素加载 function waitForElement(selector, callback) { const el document.querySelector(selector); if (el) { callback(el); } else { setTimeout(() waitForElement(selector, callback), 500); } } waitForElement(textarea, function(originalPromptInput) { // 3. 找到原界面的容器将我们的侧边栏HTML插入到body末尾 const sidebarHTML div idtemplate-sidebar !-- 粘贴侧边栏的完整HTML结构 -- /div div classmodal-overlay idtemplate-modal !-- 粘贴模态框的HTML结构 -- /div ; document.body.insertAdjacentHTML(beforeend, sidebarHTML); // 4. 初始化我们的模板库逻辑 // 注意需要将原代码中 promptInput 的获取改为找到的真实输入框 // 例如const promptInput originalPromptInput; // 同样找到真实的生成按钮并绑定事件 // 然后执行我们 template-library.js 中的所有初始化代码 initTemplateLibrary(originalPromptInput); }); function initTemplateLibrary(realPromptInput) { // 这里是我们之前 template-library.js 中的所有代码 // 但需要做一些适配 // - 将 promptInput 变量指向 realPromptInput // - 可能需要调整生成按钮的事件绑定改为触发原UI的生成逻辑 // - 确保CSS选择器不与原页面冲突 console.log(Template Library Injected!); // ... 其余代码 ... } })();5.2 方案二修改WebUI的静态文件需要服务端访问权限如果你能访问部署Qwen-Image-Lightning的服务器并且其WebUI是类似Gradio或Streamlit等框架构建的你可以直接修改其前端模板文件。找到WebUI的静态HTML或Vue/React组件文件。将我们的CSS和侧边栏HTML结构插入到合适的位置例如主布局组件的侧边。将我们的JavaScript逻辑打包或内联到页面中。重启WebUI服务。这种方法更彻底但需要一定的后端框架知识并且升级镜像时修改可能会被覆盖。5.3 方案三开发为独立的浏览器扩展将模板库打包成一个Chrome或Edge扩展。这适合希望分享给团队或发布到商店的场景。扩展可以拥有更稳定的存储chrome.storage和更强大的API。6. 总结与扩展思路通过本教程我们完成了一个功能完整的Qwen-Image-Lightning提示词模板库插件的前端部分。它具备了模板浏览、分类筛选、一键应用、个人收藏与管理的核心功能。回顾核心步骤分析目标明确要为现有WebUI增加一个非侵入式的模板管理功能。探索结构使用浏览器开发者工具找到原UI中提示词输入框等关键元素。前端构建独立开发了包含界面HTML/CSS与逻辑JavaScript的模板库模块。集成方案提供了通过浏览器用户脚本Tampermonkey注入的实用方案这是最推荐的方式。如何进一步扩展这个插件云端同步将localStorage替换为调用个人云存储API实现模板的跨设备同步。模板分享社区增加一个“发现”标签页从服务器获取热门或社区贡献的模板。提示词优化器集成一个简单的提示词分析功能对用户输入的提示词给出优化建议如补充质量标签、调整语序。生成历史记录使用过的提示词和对应的生成参数方便回溯和复用。参数联动不仅填充提示词还可以让模板关联推荐的生成参数如采样器、步数点击时一并设置。这个插件本质上是一个效率工具它抓住了AI绘画工作流中的一个关键痛点——提示词输入并通过预置和管理的思路将其简化。你可以根据自己的需求继续丰富它的功能让它成为你使用Qwen-Image-Lightning进行创作的得力助手。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。