在实际的 AI 产品里用户总会好奇「这条回答到底用了多久？」、「背后是哪家供应商？」等细节。把这些信息收集、返回、再优雅地呈现在聊天窗口，不仅提升透明度，还Neng帮助运营团队快速定位瓶颈。本文将用通俗的语言、完整的代码示例，手把手教你实现「耗时统计 + 基础元信息」的全链路。

提升用户信任感：kan到模型名称、提供方以及响应时间，用户会觉得系统geng「可解释」。

运维监控：当某个模型突发慢响应，后台日志里Yi经有了精准的毫秒级数据，排查成本大幅下降。

产品迭代依据：通过 token 使用量Ke以评估不同模型的经济性，为付费方案提供依据。

下面我们先从后端计时说起，再把结果一路搬到前端 UI。

核心思路：在请求开始前记录一个高精度时间点，业务结束后再算差值。随后把「提供方、模型名、耗时、生成时间」连同 token 用量一起封装进 meta 字段返回。

from pydantic import BaseModel
from typing import Optional
import time
from datetime import datetime
class ChatResponse:
    reply: str
    meta: Optional = None

下面是处理函数的关键片段：

def handle_chat:
    start = time.perf_counter
    meta = None
    try:
        client, cfg = create_client_by_model
        result = client.chat.completions.create(
            model=cfg,
            messages=req.messages,
            temperature=req.temperature or 0.7,
            top_p=req.top_p or 1.0,
            max_tokens=req.max_tokens or 1024,
        )
        answer = result.choices.message.content or ""
        elapsed_ms = int - start) * 1000)
        usage = getattr
        meta = {
            "provider": cfg,
            "model": req.model or DEFAULT_MODEL_NAME,
            "duration_ms": elapsed_ms,
            "reply_at": datetime.now.isoformat,
            "usage": {
                "prompt_tokens": getattr if usage else None,
                "completion_tokens": getattr if usage else None,
                "total_tokens": getattr if usage else None,
            },
        }
    except Exception as exc:
        print
        answer = "AI 服务暂不可用，请稍后再试"
        elapsed_ms = int - start) * 1000)
        meta = {
            "provider": None,
            "model": req.model or DEFAULT_MODEL_NAME,
            "duration_ms": elapsed_ms,
            "reply_at": datetime.now.isoformat,
            "usage": {"prompt_tokens": None, "completion_tokens": None, "total_tokens": None},
        }
    return ChatResponse

流式场景稍微复杂一点：我们在循环读取 chunk 的同时累计完整回复；所有 chunk 发完之后再计算一次耗时并把 meta 包装进 done 事件回传。

def stream_chat:
    full_reply = ""
    start = time.perf_counter
    provider_name = None
    model_name = req.model or DEFAULT_MODEL_NAME
    try:
        client, cfg = create_client_by_model
        provider_name = cfg
        stream_obj = client.chat.completions.create(
            model=cfg,
            messages=req.messages,
            temperature=req.temperature or 0.7,
            top_p=req.top_p or 1.0,
            max_tokens=req.max_tokens or 1024,
            stream=True,
        )
        for chunk in stream_obj:
            delta_text = chunk.choices.delta.content or ""
            if delta_text:
                full_reply += delta_text
                yield f"data: {json.dumps}

"
    except Exception as e:
        print
        yield f"data: {json.dumps}

"
        return
    # ---- 收尾阶段 ----
    elapsed_ms = int - start) * 1000)
    meta_info = {
      "provider": provider_name,
      "model": model_name,
      "duration_ms": elapsed_ms,
      "reply_at": datetime.now.isoformat,
      # 流式暂不提供 token 用量，保持字段结构一致
      "usage":{"prompt_tokens":None,"completion_tokens":None,"total_tokens":None},
    }
    yield f"data: {json.dumps}

"

# web/src/utils/session.js
export default {
   maxTokens: null,
   memoryEnabled:true,
   lastReplyMeta:null,   // ← 新增字段，用来保存Zui近一次响应的 meta
   pinned:false,
   // …其余属性保持不变
}

加载Yi有会话时同样给它补默认值：

# normalize 阶段
return {
   memoryEnabled:true,
   lastReplyMeta:null,
   pinned:false,
   ...item
}

import { computed } from 'vue'
const currentReplyMeta = computed => {
   return currentSession.value?.lastReplyMeta || null
})

updateCurrentSession(session => ({
   ...session,
   updatedAt: Date.now,
   lastReplyMeta: res.data.meta || null, // 把后端返回的 meta 挂上去
   messages:,
}))

if  {
   sessions.value = sortSessions(
     sessions.value.map(item =>
       item.id === currentSessionId.value
         ? {...item,lastReplyMeta:payload.meta||null,updatedAt:Date.now}
         : item
     )
   )
   await fetchMemories
}

  
模型：{{ currentReplyMeta.model || '-' }}
  
提供方：{{ currentReplyMeta.provider || '-' }}
  
耗时：{{ currentReplyMeta.duration_ms }} ms
  
时间：{{ new Date.toLocaleString }}

配合上面的 CSS，这个条形块在视觉上非常轻盈，却Neng让用户“一眼kan穿”背后的技术细节。

单元测试：使用 pytest 对 /api/chat//api/chat/stream 发起模拟请求，断言返回体中必须包含 "duration_ms" 与 "model".

E2E 检查：打开页面发送一条普通提问，在聊天框上方kan到刚才写好的 meta 条；刷新页面确认数据仍然保存在本地 storage 中。

P99 性Neng监控：将后台日志导入 Grafana，把每次请求的 duration_ms 按模型分层绘图，一眼就Neng发现异常峰值。

SLA 验证：设定阈值，若超过则触发告警邮件或 Slack 通知。

A/B 实验也hen有意思：开启「显示耗时」功Neng的一组用户，对比未开启组的留存率差异。Ru果显著提升，那说明透明度真的Neng带来好感度！ 🎉

别让计时代码散落在业务逻辑里！🕰️ 推荐抽成装饰器或统一工具函数，这样以后想改单位或加日志，只改一处就行。

流式场景一定要在 finally 块里Zuo一次计时否则异常导致的数据缺失会让分析变得模糊。

Ru果你使用的是 OpenAI 官方 SDK，它Yi经自带 token 用量字段；但别忘了对齐自己的返回结构，以免前端报错。

UI 那块Ke以酌情加入颜色渐变或动画，让「123 ms」不只是冷冰冰的数据，而是一种即时反馈的快感。

记得在生产环境关闭调试日志，否则每秒几百次请求的计时打印会刷满磁盘。

Ru果项目采用多租户或分账号管理，一定要把 provider/model 信息写入审计表，这对合规检查非常重要。

把「模型是谁」「用了多久」这类底层数据搬到前端，kan似小事，却Neng极大提升透明度和可观测性。本文从后端计时到前端渲染一步步拆解，并附上完整代码片段，你只需要照着复制粘贴，就Neng让自己的聊天产品瞬间拥有专业级监控视图。Ru果还有其他需求，比如分布式追踪 ID 或者CORS 跨域日志 , 完全Ke以在本篇基础上继续 。