Qwen-Image-2512-SDNQ WebUI实战：多用户会话隔离+Prompt历史记录功能扩展思路

Bachnroth

265人浏览 · 2026-02-12 10:59:19

Bachnroth · 2026-02-12 10:59:19 发布

Qwen-Image-2512-SDNQ WebUI实战：多用户会话隔离+Prompt历史记录功能扩展思路

1. 从单点服务到协作平台：为什么需要会话隔离与历史管理

你有没有遇到过这样的情况：团队里好几个人同时用同一个图片生成Web界面，A刚输完“赛博朋克风格的东京夜景”，还没点生成，B就刷新了页面——结果A的提示词没了；或者C调好了CFG Scale=7.5、种子42的黄金参数组合，下一次想复用时却得凭记忆重输？这正是当前Qwen-Image-2512-SDNQ-uint4-svd-r32 WebUI最真实的使用瓶颈。

它很轻量、启动快、界面清爽，但本质上还是一个“单用户终端”：所有操作共享同一份前端状态，后端没有用户上下文，历史记录随页面刷新而清空。对于个人快速试错够用，但一旦进入小团队协作、教学演示、客户交付等真实场景，就会明显感觉到“缺了点什么”。

这不是功能缺陷，而是设计取舍——原项目聚焦于模型能力的快速暴露，把工程复杂度压到了最低。而今天我们聊的，就是如何在不破坏原有简洁性的前提下，自然地叠加两项关键能力：多用户会话隔离和Prompt历史记录。它们不是炫技的附加项，而是让这个工具真正“活”起来的呼吸感。

这两项扩展背后，其实对应着两个朴素需求：

“我”的操作不该被别人干扰 → 需要会话级状态隔离
“我”上次成功的尝试值得被记住 → 需要可追溯、可复用的历史

接下来，我们会跳过理论堆砌，直接从代码结构、数据存储、前后端协同三个层面，给出一套可落地、易维护、不侵入原逻辑的改造方案。

2. 架构演进：在Flask中构建轻量级会话层

2.1 理解当前状态瓶颈

先看一眼app.py的核心逻辑：它用一个全局变量（或单例）加载模型，所有HTTP请求都走同一个Flask路由处理函数。这意味着：

所有用户的请求共享同一个request.args或request.json解析上下文
前端表单提交后，页面刷新即丢失全部输入状态
没有用户标识，无法区分“张三的提示词”和“李四的提示词”

问题不在代码写得不好，而在它根本没设计“用户”这个概念。

2.2 不引入数据库的会话方案：基于内存+客户端Token

我们不需要立刻上Redis或PostgreSQL。对于中小规模团队（<50并发），一个更轻、更可控的方案是：服务端内存缓存 + 前端持久化Token。

具体怎么做？

后端为每个新访问的浏览器生成唯一会话ID（如UUID4），通过HTTP响应头Set-Cookie: session_id=xxx; HttpOnly; Max-Age=86400下发
服务端用Python字典缓存会话数据：session_store[session_id] = {"prompt": "", "history": [], "last_used": time.time()}
前端在页面加载时读取该Cookie，并在每次API请求中带上X-Session-ID: xxx头
后端路由中统一拦截该Header，自动绑定当前请求到对应会话上下文

这样做的好处是：
零数据库依赖，不增加部署复杂度
会话自动过期（24小时），避免内存无限增长
前端无感迁移——原有表单逻辑完全不动，只加一行Header设置

# 在 app.py 中新增会话中间件（示例）
import uuid
from flask import request, make_response, g
from datetime import datetime

session_store = {}  # 简单内存字典，生产环境建议替换为LRU缓存

def get_or_create_session():
    session_id = request.headers.get("X-Session-ID")
    if not session_id:
        session_id = str(uuid.uuid4())
    # 自动清理超期会话（简化版）
    if session_id not in session_store or (datetime.now().timestamp() - session_store[session_id].get("last_used", 0)) > 86400:
        session_store[session_id] = {
            "prompt": "",
            "negative_prompt": "",
            "history": [],
            "last_used": datetime.now().timestamp()
        }
    session_store[session_id]["last_used"] = datetime.now().timestamp()
    return session_id

@app.before_request
def before_request():
    g.session_id = get_or_create_session()

2.3 前端适配：三行JS搞定会话绑定

修改templates/index.html，在<script>区块中加入：

// 自动读取并携带会话ID
document.addEventListener("DOMContentLoaded", () => {
    const sessionId = getCookie("session_id");
    if (sessionId) {
        // 为所有生成请求添加Header
        const originalFetch = window.fetch;
        window.fetch = function(url, options = {}) {
            if (url.includes("/api/generate")) {
                options.headers = {
                    ...options.headers,
                    "X-Session-ID": sessionId
                };
            }
            return originalFetch(url, options);
        };
    }
});

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);  
    if (parts.length === 2) return parts.pop().split(';').shift();
}

至此，后端已能识别“这是谁的请求”，前端也已自动携带身份——会话隔离的基础骨架就搭好了。

3. Prompt历史记录：不只是保存，更是可检索的工作流

3.1 历史记录该存什么？——从“日志”到“工作资产”

很多方案只做简单数组追加：history.push({prompt, timestamp})。但这对用户价值有限。真正有用的历史，应该支持：

一键复用：点击某条历史，自动填充到Prompt输入框
带上下文回溯：不仅记prompt，还记当时用的宽高比、CFG Scale、种子值
可筛选分类：按日期、关键词、是否成功生成等维度过滤
轻量去重：相同prompt+参数组合不重复记录

因此，我们定义每条历史记录为：

{
  "id": "h_20240520_abc123",
  "prompt": "水墨风格的江南古镇",
  "negative_prompt": "现代建筑,文字,logo",
  "aspect_ratio": "4:3",
  "num_steps": 50,
  "cfg_scale": 4.0,
  "seed": 12345,
  "generated_at": "2024-05-20T14:22:31Z",
  "image_url": "/history/20240520/h_abc123.png"
}

注意：image_url指向的是生成后保存的静态文件路径，而非Base64——既节省内存，又便于CDN分发。

3.2 后端存储与接口增强

在/api/generate成功返回图片前，插入历史记录逻辑：

# 修改 generate 接口（伪代码）
@app.route("/api/generate", methods=["POST"])
def api_generate():
    data = request.get_json()
    # ... 模型推理逻辑 ...
    
    # 生成成功后，保存历史
    history_item = {
        "id": f"h_{int(time.time())}_{uuid.uuid4().hex[:6]}",
        "prompt": data.get("prompt", ""),
        "negative_prompt": data.get("negative_prompt", ""),
        "aspect_ratio": data.get("aspect_ratio", "1:1"),
        "num_steps": data.get("num_steps", 50),
        "cfg_scale": data.get("cfg_scale", 4.0),
        "seed": data.get("seed", random.randint(0, 1e9)),
        "generated_at": datetime.now().isoformat(),
        "image_url": f"/history/{datetime.now().strftime('%Y%m%d')}/{history_id}.png"
    }
    
    # 写入当前会话历史（限制最多50条）
    session_data = session_store[g.session_id]
    session_data["history"].insert(0, history_item)
    session_data["history"] = session_data["history"][:50]  # 仅保留最新50条
    
    # 保存图片到磁盘（略）
    # 返回图片二进制流（保持原有API契约）

同时，新增历史查询接口：

@app.route("/api/history", methods=["GET"])
def api_history():
    limit = int(request.args.get("limit", 20))
    offset = int(request.args.get("offset", 0))
    keyword = request.args.get("q", "").strip()
    
    history = session_store[g.session_id]["history"][offset:offset+limit]
    if keyword:
        history = [h for h in history if keyword.lower() in h["prompt"].lower()]
    
    return jsonify({
        "total": len(session_store[g.session_id]["history"]),
        "items": history
    })

3.3 前端历史面板：嵌入式、不打断主流程

在index.html中，于生成按钮下方新增一个可折叠的历史面板：

<!-- 历史记录区域 -->
<div class="history-panel" style="display:none;">
  <h3> 你的Prompt历史</h3>
  <div id="history-list" class="history-list">
    <!-- 动态渲染 -->
  </div>
  <button onclick="loadMoreHistory()">加载更多</button>
</div>

<script>
async function loadHistory() {
  const res = await fetch("/api/history?limit=10");
  const { items } = await res.json();
  const listEl = document.getElementById("history-list");
  listEl.innerHTML = items.map(item => `
    <div class="history-item" onclick="fillFromHistory(${JSON.stringify(item)})">
      <strong>${item.prompt.substring(0, 40)}${item.prompt.length > 40 ? '...' : ''}</strong>
      <div class="meta">${item.aspect_ratio} | CFG ${item.cfg_scale} | ${new Date(item.generated_at).toLocaleString()}</div>
    </div>
  `).join("");
  document.querySelector(".history-panel").style.display = "block";
}

function fillFromHistory(item) {
  document.getElementById("prompt").value = item.prompt;
  document.getElementById("negative_prompt").value = item.negative_prompt || "";
  // 其他字段同理...
  // 自动展开高级选项
  document.getElementById("advanced-options").style.display = "block";
}
</script>

用户点击“查看历史”，面板滑出；点击某条记录，参数自动回填——整个过程不跳转、不刷新、不中断当前工作流。