流式输出 — AI 交互模式实验室

设计思路

解决的问题：AI 生成内容需要时间（可能 30-60 秒）。如果等全部完成再一次性显示，用户会经历漫长的白屏等待，不知道系统是在工作还是卡死了。这违反了系统状态可见性（尼尔森第一原则）。

设计决策：用 SSE（Server-Sent Events，服务器推送事件）让 AI 边生成边推送，用户看到文字逐字出现——就像聊天时看到"对方正在输入..."。对用户来说，看到进度比速度快更重要——心理学研究表明，已知的等待比未知的等待感觉短 2-3 倍。这同时满足了Doherty Threshold（道尔蒂阈值）：系统响应时间在 400ms 以内，用户就不会失去注意力流。

生活类比：就像微信聊天时看到"对方正在输入..."那几个字——你知道对方在打字，不会怀疑他是不是没看到消息。如果对面没有任何反馈，你过 10 秒就会开始焦虑。流式输出就是 AI 的"正在输入..."。

系统状态可见性 Doherty Threshold 即时反馈感知性能

交互 Demo

播放速度：

AI 设计评审助手

点击下方按钮，模拟 AI 流式输出评审报告

实现方式

用户上传设计图

前端通过 FormData 将设计截图发送到后端 API，同时指定评审维度（信息架构、视觉层级等）。

GLM-4V 分析视觉元素

图片先发送给智谱 GLM-4V 做视觉识别，提取布局结构、色彩方案、组件层级等视觉信息。

DeepSeek 流式生成 + SSE 推送

DeepSeek API 开启 stream: true，每个 token 到达后立即通过 SSE（Server-Sent Events）推送到前端。Nginx 配置 proxy_buffering off 确保逐字推送不被中间层缓存。

源码参考

src/backend/routers/stream.py

@router.post("/api/review/stream")
async def review_stream(image: UploadFile, dimensions: str = Form(...)):
    """SSE streaming review endpoint."""
    dims = json.loads(dimensions)
    visual_analysis = await glm_analyze(image)
    return StreamingResponse(
        stream_review(visual_analysis, dims),
        media_type="text/event-stream",
        headers={"X-Accel-Buffering": "no"}
    )

async def stream_review(visual: str, dims: list):
    client = deepseek_client()
    response = client.chat.completions.create(
        model="deepseek-chat",
        messages=[{"role": "user", "content": build_prompt(visual, dims)}],
        stream=True
    )
    for chunk in response:
        if chunk.choices[0].delta.content:
            yield f"data: {json.dumps({'text': chunk.choices[0].delta.content})}\n\n"
    yield f"data: {json.dumps({'done': True})}\n\n"