Qwen3-Reranker-0.6B保姆级教程：Gradio界面添加实时token消耗与耗时统计-洪萨配资

Qwen3-Reranker-0.6B保姆级教程：Gradio界面添加实时token消耗与耗时统计

1. 为什么需要这个功能？

你有没有遇到过这样的情况：在用Qwen3-Reranker-0.6B做文本重排序时，点下“运行”按钮后只能干等，不知道模型到底处理了多少token、花了多长时间？更别说对比不同查询的效率差异了。

原生Gradio界面只显示结果，不反馈过程——这就像开车没有仪表盘：你知道车在动，但不知道油量剩多少、时速多少、发动机温度如何。对调试、优化和实际部署来说，这种“黑盒体验”非常不友好。

本教程就来帮你把这块仪表盘装上。我们将从零开始，在vLLM服务基础上，为Qwen3-Reranker-0.6B的Gradio WebUI增加两项关键指标：

实时token消耗统计（输入+输出总token数）
端到端耗时统计（从点击提交到结果返回的完整延迟）

全程不改模型、不碰vLLM核心代码，只通过轻量级接口增强和前端逻辑扩展实现。所有步骤均可复制粘贴执行，小白也能一次成功。

2. 环境准备与服务启动

2.1 确认基础环境已就绪

请确保你已完成以下前置准备（若未完成，请先参考官方文档完成部署）：

Python ≥ 3.10
CUDA 12.1+（推荐12.4）
已安装vllm==0.6.4（或兼容版本）
已下载Qwen3-Reranker-0.6B模型权重至本地路径（如/models/Qwen3-Reranker-0.6B）
已配置好vllm启动脚本（建议使用--enable-prefix-caching --max-num-seqs 256提升重排序场景吞吐）

小提示：Qwen3-Reranker-0.6B 是专为文本重排序任务优化的轻量级模型，参数仅0.6B，却支持32K上下文和100+语言。它不是通用大模型，而是“精准射手”——不生成文字，只对候选文本按相关性打分排序。因此它的token统计逻辑和生成类模型略有不同：我们统计的是重排序请求中所有文本片段的总输入token数（含query + candidates），而非生成token。

2.2 启动vLLM服务并验证可用性

使用以下命令启动服务（请根据你的路径调整）：

CUDA_VISIBLE_DEVICES=0 vllm serve \ --model /models/Qwen3-Reranker-0.6B \ --host 0.0.0.0 \ --port 8000 \ --tensor-parallel-size 1 \ --dtype bfloat16 \ --enable-prefix-caching \ --max-model-len 32768 \ --trust-remote-code \ --served-model-name qwen3-reranker-0.6b

启动后，检查日志是否正常：

tail -f /root/workspace/vllm.log

正常日志应包含类似内容：

INFO 01-26 14:22:33 [api_server.py:590] Started server process (pid=12345) INFO 01-26 14:22:33 [api_server.py:591] Serving model 'qwen3-reranker-0.6b' on http://0.0.0.0:8000

若出现OSError: [Errno 98] Address already in use，请先杀掉占用8000端口的进程：

lsof -i :8000 | grep LISTEN | awk '{print $2}' | xargs kill -9

2.3 测试API连通性（不依赖WebUI）

在终端中执行一次curl测试，确认服务真正就绪：

curl -X POST "http://localhost:8000/v1/rerank" \ -H "Content-Type: application/json" \ -d '{ "model": "qwen3-reranker-0.6b", "query": "如何快速部署AI模型？", "documents": [ "使用Docker一键打包模型服务", "vLLM提供高吞吐推理引擎", "Gradio可快速构建交互界面" ] }'

成功响应示例（截取关键字段）：

{ "id": "cmpl-xxx", "results": [ {"index": 0, "relevance_score": 0.924}, {"index": 1, "relevance_score": 0.871}, {"index": 2, "relevance_score": 0.783} ], "usage": { "prompt_tokens": 47, "total_tokens": 47 } }

注意：usage.prompt_tokens字段即为我们后续要展示的“输入token数”。Qwen3-Reranker 不生成新文本，因此total_tokens == prompt_tokens。

3. Gradio WebUI增强开发

3.1 创建最小可行WebUI（无统计版）

新建文件app.py，写入基础Gradio界面：

import gradio as gr import requests import json API_URL = "http://localhost:8000/v1/rerank" def rerank(query, documents_str): documents = [doc.strip() for doc in documents_str.strip().split("\n") if doc.strip()] if not query or not documents: return "请输入查询语句和至少一个候选文档" payload = { "model": "qwen3-reranker-0.6b", "query": query, "documents": documents } try: response = requests.post(API_URL, json=payload, timeout=60) response.raise_for_status() result = response.json() # 格式化输出 output_lines = ["【重排序结果】"] for item in sorted(result["results"], key=lambda x: x["relevance_score"], reverse=True): doc = documents[item["index"]] score = round(item["relevance_score"], 3) output_lines.append(f"{score:.3f} → {doc}") return "\n".join(output_lines) except Exception as e: return f"调用失败：{str(e)}" with gr.Blocks(title="Qwen3-Reranker-0.6B WebUI") as demo: gr.Markdown("## Qwen3-Reranker-0.6B 文本重排序工具") with gr.Row(): with gr.Column(): query_input = gr.Textbox(label="查询语句", placeholder="例如：人工智能有哪些应用方向？") docs_input = gr.Textbox( label="候选文档（每行一个）", placeholder="例如：\n机器学习是AI的子领域\n深度学习需要大量标注数据\n强化学习通过试错学习", lines=6 ) run_btn = gr.Button(" 开始重排序", variant="primary") with gr.Column(): output_box = gr.Textbox(label="排序结果", lines=10, interactive=False) run_btn.click( fn=rerank, inputs=[query_input, docs_input], outputs=output_box ) demo.launch(server_name="0.0.0.0", server_port=7860, share=False)

运行它：

python app.py

访问http://你的IP:7860即可看到基础界面。此时还没有token和耗时统计——我们接下来给它装上“仪表盘”。

3.2 增加实时token与耗时统计（核心改造）

修改app.py，重点增强三处：

在请求前记录起始时间
解析API返回中的usage字段
在界面上新增两个状态显示区域

更新后的完整app.py（已标注关键改动）：

import gradio as gr import requests import json import time from datetime import timedelta API_URL = "http://localhost:8000/v1/rerank" def rerank_with_stats(query, documents_str): documents = [doc.strip() for doc in documents_str.strip().split("\n") if doc.strip()] if not query or not documents: return "请输入查询语句和至少一个候选文档", 0, "00:00:00" # 记录请求开始时间 start_time = time.time() payload = { "model": "qwen3-reranker-0.6b", "query": query, "documents": documents } try: response = requests.post(API_URL, json=payload, timeout=60) response.raise_for_status() result = response.json() # 提取token统计（vLLM标准格式） usage = result.get("usage", {}) prompt_tokens = usage.get("prompt_tokens", 0) total_tokens = usage.get("total_tokens", 0) # 计算耗时（秒→时分秒格式） elapsed = time.time() - start_time elapsed_str = str(timedelta(seconds=int(elapsed))) # 如 00:00:03 # 格式化输出 output_lines = ["【重排序结果】"] for item in sorted(result["results"], key=lambda x: x["relevance_score"], reverse=True): doc = documents[item["index"]] score = round(item["relevance_score"], 3) output_lines.append(f"{score:.3f} → {doc}") return "\n".join(output_lines), prompt_tokens, elapsed_str except Exception as e: error_msg = f"调用失败：{str(e)}" return error_msg, 0, "00:00:00" with gr.Blocks(title="Qwen3-Reranker-0.6B WebUI（增强版）") as demo: gr.Markdown("## Qwen3-Reranker-0.6B 文本重排序工具 —— 带实时统计") with gr.Row(): with gr.Column(): query_input = gr.Textbox(label="查询语句", placeholder="例如：如何快速部署AI模型？") docs_input = gr.Textbox( label="候选文档（每行一个）", placeholder="例如：\n使用Docker一键打包模型服务\nvLLM提供高吞吐推理引擎\nGradio可快速构建交互界面", lines=6 ) run_btn = gr.Button(" 开始重排序", variant="primary") with gr.Column(): output_box = gr.Textbox(label="排序结果", lines=10, interactive=False) # 新增两个状态显示组件（关键！） with gr.Group(): gr.Markdown("### 实时统计") token_display = gr.Number(label="输入Token数", value=0, interactive=False, precision=0) time_display = gr.Textbox(label="总耗时", value="00:00:00", interactive=False) # 绑定多个输出（result + tokens + time） run_btn.click( fn=rerank_with_stats, inputs=[query_input, docs_input], outputs=[output_box, token_display, time_display] ) demo.launch(server_name="0.0.0.0", server_port=7860, share=False)

为什么这样设计？
gr.Number用于整数型token计数，视觉更清晰；
gr.Textbox用于耗时，支持自定义格式（如00:00:03）；
所有统计字段都放在右侧同组内，符合用户视线动线（操作→结果→指标）；
不依赖JavaScript前端计算，全部由Python后端完成，稳定可靠。

3.3 运行增强版WebUI并验证效果

保存文件后重新运行：

python app.py

打开浏览器，输入示例数据：

查询语句：开源大模型如何部署？

候选文档：

使用vLLM启动推理服务 用Ollama本地运行模型 Docker容器化部署方案

点击“ 开始重排序”，你会立刻看到：

左侧输出框显示排序结果（带分数）
右侧输入Token数显示类似58
右侧总耗时显示类似00:00:02

这说明统计功能已生效。你可以尝试不同长度的query和documents，观察token数和耗时的实时变化。

4. 进阶技巧与实用建议

4.1 如何让统计更“专业”？—— 添加token/耗时趋势图

如果你希望长期监控性能，可在Gradio中嵌入简单折线图。只需在app.py中追加以下代码（放在demo.launch()之前）：

# 在Blocks定义后、launch前添加 with gr.Tab(" 性能趋势"): gr.Markdown("历史请求的Token消耗与耗时变化（最近5次）") plot_output = gr.Plot() # 模拟历史数据（实际项目中可存入CSV或数据库） import matplotlib.pyplot as plt import numpy as np def update_plot(): # 示例：模拟5次请求数据 times = ["00:00:01", "00:00:02", "00:00:01", "00:00:03", "00:00:02"] tokens = [42, 58, 47, 73, 51] indices = list(range(1, 6)) fig, ax1 = plt.subplots(figsize=(6, 4)) color1 = 'tab:blue' ax1.set_xlabel('请求序号') ax1.set_ylabel('Token数', color=color1) ax1.plot(indices, tokens, 'o-', color=color1, label='Token数') ax1.tick_params(axis='y', labelcolor=color1) ax1.grid(True, alpha=0.3) ax2 = ax1.twinx() color2 = 'tab:red' ax2.set_ylabel('耗时（秒）', color=color2) seconds = [int(t.split(':')[-1]) for t in times] # 简化提取秒数 ax2.plot(indices, seconds, 's--', color=color2, label='耗时') ax2.tick_params(axis='y', labelcolor=color2) fig.tight_layout() return fig demo.load(update_plot, inputs=None, outputs=plot_output)

这样就在WebUI顶部增加了“ 性能趋势”标签页，自动绘制最近5次请求的token与耗时对比图。

4.2 避免常见坑：token统计不准怎么办？

如果你发现token数始终为0，或与预期差距很大，请按顺序排查：

确认vLLM版本：vllm>=0.6.0才默认返回usage字段。旧版本需加参数--enable-chunked-prefill并确保模型支持。
检查模型是否启用trust-remote-code：Qwen3-Reranker需此参数才能正确加载tokenizer。
验证API返回结构：用curl手动请求，确认响应中确实存在"usage": {...}字段。
注意重排序特殊性：Qwen3-Reranker的token数 = query token + 所有documents token之和（不含特殊指令token）。它不统计“输出token”，因为不生成新文本。

4.3 生产环境建议：为统计增加缓存与告警

对于团队共用或生产环境，建议补充两点：

添加请求ID与日志记录：在rerank_with_stats函数开头加入request_id = str(uuid.uuid4())[:8]，并将request_id,query,prompt_tokens,elapsed写入日志文件，便于回溯。
设置耗时阈值告警：当elapsed > 5.0时，在输出框顶部用红色文字提示耗时超5秒，请检查网络或GPU负载。

这两项只需几行代码即可实现，大幅提升运维友好度。