霜儿-汉服-造相Z-Turbo提示词库构建：利用JavaScript开发交互式提示词工具

霜儿-汉服-造相Z-Turbo提示词库构建利用JavaScript开发交互式提示词工具1. 引言从手动拼凑到一键生成如果你经常用“霜儿-汉服-造相Z-Turbo”这类模型来创作古风人像肯定遇到过这样的烦恼每次想生成一张新图都得在脑海里翻找那些关键词——“飘逸的广袖”、“精致的发簪”、“江南水乡背景”然后手动把它们敲进输入框还得反复调整权重符号比如(beautiful eyes:1.2)。这个过程不仅繁琐还容易出错灵感可能就在这来回折腾中溜走了。更麻烦的是好不容易调出一组效果不错的词下次想用的时候要么忘了具体怎么组合的要么得从聊天记录里大海捞针。创作效率就这么被拖慢了。其实这个问题完全可以解决。今天我就来分享一个我自己在用的方法用JavaScript写一个轻量级的本地提示词管理工具。它就像一个为你量身定制的“汉服创作百宝箱”把常用的风格、人物、场景关键词都分门别类放好。你需要的时候点点鼠标就能组合出复杂的提示词还能实时调整权重、预览效果通过调用本地模型的API最后直接复制使用。这不仅能固化你的高效工作流更能把精力完全集中在创意本身。下面我就带你一步步实现它。2. 工具核心设计我们要做一个什么样的东西在动手写代码之前我们先想清楚这个工具到底要帮我们做什么。它不是一个复杂的Web应用而是一个运行在你浏览器里的单页面工具所有数据都保存在本地简单、快速、私密。2.1 核心功能规划这个工具主要解决三个问题关键词管理能方便地新增、编辑、删除不同类别的提示词。比如“服饰”类下面有“唐制齐胸襦裙”、“宋制褙子”“场景”类下面有“月下竹林”、“亭台楼阁”。交互式组合通过勾选、按钮点击等方式将选中的关键词组合成完整的提示词。可以实时看到组合后的效果。权重调整与实时预览能方便地为某个关键词调整权重比如从1.0调到1.5并且最好能调用你本地部署的模型API快速生成一张小图预览验证组合效果。2.2 技术选型与思路为了实现上述功能我们选择最直接的技术栈HTML/CSS构建页面结构让它看起来清晰好用。JavaScript (ES6)实现所有交互逻辑这是核心。浏览器本地存储 (LocalStorage)用来保存你建立的词库关闭浏览器再打开也不会丢失。Fetch API用于和你本地运行的“造相Z-Turbo”API进行通信实现实时预览。整个思路就是用JavaScript动态管理一个关键词的数据集合通过操作DOM来更新界面并将最终数据持久化到LocalStorage。3. 第一步构建基础界面与词库结构我们先从静态页面和基础数据开始。3.1 创建HTML骨架创建一个名为prompt_manager.html的文件用以下代码搭建基础界面。界面主要分为三个区域词库管理区、提示词组合区和预览区。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title汉服AI提示词管理工具/title style * { box-sizing: border-box; margin: 0; padding: 0; font-family: Segoe UI, Microsoft YaHei, sans-serif; } body { background: #f5f7fa; color: #333; line-height: 1.6; padding: 20px; max-width: 1200px; margin: auto; } header { text-align: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 2px solid #e1bee7; } h1 { color: #7b1fa2; } .subtitle { color: #666; font-size: 0.95em; } .container { display: grid; grid-template-columns: 1fr 2fr; gap: 25px; } media (max-width: 900px) { .container { grid-template-columns: 1fr; } } .panel { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; } h2 { color: #4527a0; margin-bottom: 15px; font-size: 1.3em; } h3 { color: #5e35b1; margin: 15px 0 10px; font-size: 1.1em; } .category { margin-bottom: 20px; } .keyword-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .keyword-item { background: #f3e5f5; padding: 6px 12px; border-radius: 15px; font-size: 0.9em; cursor: pointer; user-select: none; border: 1px solid #ce93d8; transition: all 0.2s; } .keyword-item:hover { background: #e1bee7; transform: translateY(-2px); } .keyword-item.selected { background: #7b1fa2; color: white; border-color: #4a148c; } .btn { padding: 8px 16px; margin: 5px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: background 0.2s; } .btn-primary { background: #7b1fa2; color: white; } .btn-primary:hover { background: #6a1b9a; } .btn-secondary { background: #e0e0e0; color: #333; } .btn-secondary:hover { background: #d5d5d5; } #finalPrompt { width: 100%; min-height: 100px; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-family: monospace; background: #f9f9f9; margin: 15px 0; resize: vertical; } .preview-area img { max-width: 100%; max-height: 300px; border-radius: 8px; border: 1px solid #ddd; margin-top: 10px; } .hidden { display: none; } /style /head body header h1 霜儿-汉服提示词工作台/h1 p classsubtitle管理你的专属词库快速组合并预览生成效果/p /header div classcontainer !-- 左侧词库管理区 -- div classpanel h2## 1. 我的汉服词库/h2 div classcategory h3### 1.1 人物与容貌/h3 div classkeyword-list idcategory-looks/div button classbtn btn-secondary onclickaddNewKeyword(looks) 添加关键词/button /div div classcategory h3### 1.2 服饰与发型/h3 div classkeyword-list idcategory-attire/div button classbtn btn-secondary onclickaddNewKeyword(attire) 添加关键词/button /div div classcategory h3### 1.3 场景与氛围/h3 div classkeyword-list idcategory-scene/div button classbtn btn-secondary onclickaddNewKeyword(scene) 添加关键词/button /div div classcategory h3### 1.4 画质与风格/h3 div classkeyword-list idcategory-style/div button classbtn btn-secondary onclickaddNewKeyword(style) 添加关键词/button /div /div !-- 右侧组合与预览区 -- div classpanel h2## 2. 提示词组合与调试/h2 div h3### 2.1 已选关键词/h3 div idselectedKeywords/div button classbtn btn-secondary onclickclearSelection()清空选择/button /div div stylemargin-top: 25px; h3### 2.2 最终提示词/h3 textarea idfinalPrompt readonly placeholder选择的提示词将在这里组合.../textarea button classbtn btn-primary onclickcopyPrompt()复制提示词/button button classbtn btn-secondary onclickregeneratePrompt()智能重组/button /div div stylemargin-top: 25px; h3### 2.3 实时预览/h3 psmall确保本地模型API服务已启动/small/p button classbtn btn-primary onclickgeneratePreview()生成预览图/button div classpreview-area img idpreviewImage classhidden alt预览图片 p idpreviewStatus/p /div /div /div /div script srcprompt_manager.js/script /body /html3.2 初始化JavaScript词库数据接着在同一目录下创建prompt_manager.js文件。我们先定义初始的词库数据并实现将词库渲染到页面的功能。// prompt_manager.js // 1. 初始词库数据 let promptLibrary { looks: [ { text: 霜儿古风少女, weight: 1.0, selected: false }, { text: 精致的五官, weight: 1.0, selected: false }, { text: 含情脉脉的眼神, weight: 1.2, selected: false }, { text: 白皙的皮肤, weight: 1.0, selected: false }, ], attire: [ { text: 齐胸襦裙, weight: 1.0, selected: false }, { text: 大袖衫, weight: 1.0, selected: false }, { text: 刺绣花纹, weight: 1.1, selected: false }, { text: 飘逸的披帛, weight: 1.0, selected: false }, { text: 古典发髻簪子, weight: 1.0, selected: false }, ], scene: [ { text: 江南水乡小桥流水, weight: 1.0, selected: false }, { text: 月下庭院, weight: 1.0, selected: false }, { text: 桃花树下, weight: 1.0, selected: false }, { text: 朦胧的雾气, weight: 0.9, selected: false }, ], style: [ { text: 大师级作品高清, weight: 1.3, selected: false }, { text: 唯美电影光影, weight: 1.2, selected: false }, { text: 细节丰富8K, weight: 1.1, selected: false }, ] }; // 2. 页面加载时从本地存储读取数据或使用初始数据并渲染 document.addEventListener(DOMContentLoaded, function() { loadLibraryFromStorage(); renderAllCategories(); updateFinalPrompt(); }); // 3. 将词库渲染到对应分类的DOM中 function renderCategory(categoryId, keywordArray) { const container document.getElementById(category-${categoryId}); if (!container) return; container.innerHTML ; keywordArray.forEach((keyword, index) { const keywordEl document.createElement(div); keywordEl.className keyword-item ${keyword.selected ? selected : }; keywordEl.textContent ${keyword.text} (${keyword.weight}); keywordEl.title 点击选择双击编辑权重; keywordEl.addEventListener(click, () toggleKeyword(categoryId, index)); keywordEl.addEventListener(dblclick, () editKeywordWeight(categoryId, index)); container.appendChild(keywordEl); }); } function renderAllCategories() { for (const [categoryId, keywords] of Object.entries(promptLibrary)) { renderCategory(categoryId, keywords); } updateSelectedKeywordsDisplay(); }现在打开prompt_manager.html你应该能看到一个分类清晰、带有初始关键词的工具界面了。不过它们还不能点击交互我们接下来就实现这个核心功能。4. 第二步实现核心交互逻辑交互的核心是点击关键词选择/取消以及实时更新底部的最终提示词。4.1 关键词选择与提示词生成在prompt_manager.js中继续添加以下函数// 4. 切换关键词的选择状态 function toggleKeyword(categoryId, index) { promptLibrary[categoryId][index].selected !promptLibrary[categoryId][index].selected; saveLibraryToStorage(); renderCategory(categoryId, promptLibrary[categoryId]); updateSelectedKeywordsDisplay(); updateFinalPrompt(); } // 5. 更新“已选关键词”区域的显示 function updateSelectedKeywordsDisplay() { const container document.getElementById(selectedKeywords); let selectedList []; for (const [cat, keywords] of Object.entries(promptLibrary)) { keywords.filter(kw kw.selected).forEach(kw { selectedList.push(span classkeyword-item selected${kw.text} (${kw.weight})/span); }); } container.innerHTML selectedList.length ? selectedList.join( ) : em暂无选中的关键词/em; } // 6. 生成并更新最终提示词 function updateFinalPrompt() { let finalParts []; for (const keywords of Object.values(promptLibrary)) { keywords.filter(kw kw.selected).forEach(kw { // 根据权重格式化关键词权重为1.0时省略 let formatted kw.text; if (kw.weight ! 1.0) { // 使用常见的权重语法如 (keyword:1.2) formatted (${kw.text}:${kw.weight.toFixed(1)}); } finalParts.push(formatted); }); } const finalPrompt finalParts.join(, ); document.getElementById(finalPrompt).value finalPrompt; } // 7. 清空所有选择 function clearSelection() { for (const keywords of Object.values(promptLibrary)) { keywords.forEach(kw kw.selected false); } saveLibraryToStorage(); renderAllCategories(); updateFinalPrompt(); } // 8. 复制最终提示词到剪贴板 function copyPrompt() { const promptText document.getElementById(finalPrompt); promptText.select(); document.execCommand(copy); alert(提示词已复制到剪贴板); }4.2 编辑关键词与权重我们需要允许用户双击关键词来修改其权重或者通过一个简单的方式添加新词。// 9. 编辑关键词权重 function editKeywordWeight(categoryId, index) { const keyword promptLibrary[categoryId][index]; const newWeight prompt(修改${keyword.text}的权重 (当前: ${keyword.weight}):, keyword.weight); if (newWeight ! null !isNaN(parseFloat(newWeight)) parseFloat(newWeight) 0) { keyword.weight parseFloat(newWeight); saveLibraryToStorage(); renderCategory(categoryId, promptLibrary[categoryId]); updateFinalPrompt(); } } // 10. 添加新关键词到指定分类 function addNewKeyword(categoryId) { const newText prompt(请输入要添加到“${categoryId}”分类的新关键词:); if (newText newText.trim()) { const newWeight prompt(请输入${newText}的权重 (默认 1.0):, 1.0); const weight newWeight !isNaN(parseFloat(newWeight)) parseFloat(newWeight) 0 ? parseFloat(newWeight) : 1.0; promptLibrary[categoryId].push({ text: newText.trim(), weight: weight, selected: false }); saveLibraryToStorage(); renderCategory(categoryId, promptLibrary[categoryId]); } }4.3 数据持久化使用LocalStorage为了让你的词库在关闭浏览器后依然存在我们需要使用LocalStorage来保存和加载数据。// 11. 保存词库到浏览器本地存储 function saveLibraryToStorage() { try { localStorage.setItem(hanfuPromptLibrary, JSON.stringify(promptLibrary)); } catch (e) { console.error(保存词库失败:, e); } } // 12. 从本地存储加载词库 function loadLibraryFromStorage() { try { const saved localStorage.getItem(hanfuPromptLibrary); if (saved) { const parsed JSON.parse(saved); // 简单合并确保数据结构一致 for (const key in promptLibrary) { if (parsed[key]) { promptLibrary[key] parsed[key]; } } } } catch (e) { console.error(加载词库失败使用初始数据:, e); } }至此一个具备基础关键词管理、交互式组合、权重调整和本地保存功能的工具就完成了。你可以点击关键词进行选择/取消双击修改权重添加新词并且所有改动都会自动保存。5. 第三步连接本地模型API实现实时预览这是提升工作流效率的关键一步。假设你的“造相Z-Turbo”模型已经在本地运行并提供了一个生成图片的API接口例如通过http://localhost:7860/sdapi/v1/txt2img。5.1 实现预览生成函数我们需要一个函数将当前组合好的提示词发送到本地模型的API并获取生成的图片进行预览。在prompt_manager.js中添加以下代码。请注意你需要将apiUrl和apiPayload替换成你本地模型API的实际地址和参数格式。// 13. 生成预览图片 async function generatePreview() { const finalPrompt document.getElementById(finalPrompt).value; if (!finalPrompt.trim()) { alert(请先组合一些提示词); return; } const previewBtn document.querySelector(button[onclickgeneratePreview()]); const statusEl document.getElementById(previewStatus); const imgEl document.getElementById(previewImage); previewBtn.disabled true; statusEl.textContent 正在生成预览...; imgEl.classList.add(hidden); // 这里是调用本地模型API的关键部分 // 你需要根据你实际使用的模型API文档修改以下参数 const apiUrl http://localhost:7860/sdapi/v1/txt2img; // 替换为你的API地址 const apiPayload { prompt: finalPrompt, negative_prompt: 低质量模糊畸形丑陋, // 可以设置通用负向提示词 steps: 20, // 预览图可以步数少一点加快生成 width: 512, height: 768, cfg_scale: 7, sampler_name: Euler a, // 采样器 seed: -1, // -1表示随机 }; try { const response await fetch(apiUrl, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify(apiPayload) }); if (!response.ok) { throw new Error(API请求失败: ${response.status}); } const data await.response.json(); // 假设API返回的图片数据是base64编码的并且字段是images if (data.images data.images.length 0) { const imageBase64 data.images[0]; imgEl.src data:image/png;base64,${imageBase64}; imgEl.classList.remove(hidden); statusEl.textContent 预览生成成功; } else { throw new Error(API返回数据中没有找到图片。); } } catch (error) { console.error(生成预览时出错:, error); statusEl.textContent 生成失败: ${error.message}; statusEl.style.color #d32f2f; } finally { previewBtn.disabled false; // 3秒后清除状态信息 setTimeout(() { if (statusEl.textContent.includes(成功) || statusEl.textContent.includes(失败)) { statusEl.textContent ; statusEl.style.color ; } }, 3000); } }重要提示apiUrl和apiPayload的格式因不同的模型部署方式如Stable Diffusion WebUI、ComfyUI等而异。请务必查阅你所使用的工具的API文档调整参数以确保调用成功。如果本地没有运行API这部分功能将无法使用但词库管理功能完全不受影响。6. 总结与进阶思考走到这里一个专属于你的、本地的汉服AI提示词管理工具就基本搭建完成了。它可能界面不那么华丽但非常实用。你可以自由地扩充词库比如加入“手持团扇”、“倚栏远眺”这样的动作词或者“工笔画风”、“水墨渲染”这样的风格词。用下来最大的感受就是它把创作中最机械的部分——记忆、拼凑、调整格式——给自动化了。你现在可以更专注于构思画面和故事技术上的琐事交给这个工具。点击几下一组结构清晰、权重合理的提示词就准备好了还能马上看到预览效果不满意就立刻调整这个迭代速度是以前手动操作没法比的。当然这个工具还有很多可以打磨的地方。比如你可以为每个关键词添加“别名”或“标签”方便搜索可以实现“预设组合”功能把一套成熟的参数如分辨率、采样器和提示词一起保存甚至可以把界面做得更美观用拖拽的方式来调整关键词顺序。不过最重要的第一步已经迈出了。工具的价值不在于功能多复杂而在于它是否真的融入了你的工作流解决了实际痛点。建议你先用起来在使用的过程中自然会冒出“要是它能……就更好了”的想法那时再动手改进也不迟。希望这个小小的工具能帮你更顺畅地描绘出心中的那个古风世界。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。