渐进式加载 — AI 交互模式实验室

设计思路

解决的问题：复杂信息一次性展示会导致认知过载。6 个维度、每个 3-4 条发现、每条关联设计原则——这个信息量足以让任何人放弃阅读。引用米勒定律（7+/-2）和Hick 定律（希克定律）——选项越多决策越慢。

设计决策：SSE（Server-Sent Events）分阶段推送状态更新——视觉分析、流式生成、解析整理、完成。每阶段有独立的图标和文字，符合渐进式信息披露（Progressive Disclosure）原则。用户看到的是信息逐层展开的过程，不是一个 spinner 转 30 秒后突然全出来。

生活类比：新闻的标题、导语、正文结构。你可以只看标题了解发生了什么，也可以深读正文了解细节。没有人强迫你一开始就读全文。好的渐进式加载让用户自己控制深入程度——就像爬楼梯，每一步都有新的发现，而不是站在一面 10 米高的信息墙前不知所措。

米勒定律 7+/-2 Hick 定律渐进式披露认知负荷

交互 Demo

点击"开始渐进式加载"，观察信息按认知顺序逐层展开——每一步完成才展示下一步。

实现方式

SSE 推送 "正在识别设计元素..."

用户上传图片后，SSE 首先推送 step: visual 事件，前端点亮第 1 张卡片，显示 GLM-4V 正在分析。

"正在生成评审报告..." + 流式文本

visual_done 事件完成第 1 步并开启第 2 步。随后 chunk 事件逐 token 推送评审文本，用户看到文字实时生成。

"正在整理评审报告..." → 展示完整结果

done 事件触发所有步骤完成状态，第 2 步显示综合评分，第 3 步展示完整的维度摘要和发现列表。

源码参考

src/backend/routers/stream.py

async def stream_review_with_steps(visual: str, dims: list):
    """SSE with progressive step events."""
    yield f"data: {json.dumps({'step': 'visual', 'message': '正在识别设计元素...'})}\n\n"
    await asyncio.sleep(0.1)

    visual_result = await glm_analyze_image(visual)
    yield f"data: {json.dumps({'step': 'visual_done', 'message': '视觉分析完成'})}\n\n"

    client = deepseek_client()
    response = client.chat.completions.create(
        model="deepseek-chat",
        messages=[{"role": "user", "content": build_prompt(visual_result, dims)}],
        stream=True
    )

    full_text = ""
    for chunk in response:
        if chunk.choices[0].delta.content:
            text = chunk.choices[0].delta.content
            full_text += text
            yield f"data: {json.dumps({'event': 'chunk', 'text': text})}\n\n"

    # Parse final result
    result = parse_json_response(full_text)
    yield f"data: {json.dumps({'event': 'done', **result})}\n\n"