complete webui for vllm

Author: wangkang-mt

vllm/demo/gradio_demo/__pycache__/gradio_musa.cpython-38.pyc

@@ -2,6 +2,8 @@
 import requests
 import json
 import argparse
+import time
+import gradio_musa
 
 
 def parse_args():
@@ -52,6 +54,10 @@ def chat_with_model_streaming(user_input, history):
     history = history or []  # 初始化历史记录
     bot_response = ""  # 存储逐步生成的回答
 
+    # ✅ 记录开始时间
+    start_time = time.time()
+    token_count = 0  # ✅ 记录生成的 Token 数量
+
     try:
         # ✅ 使用 requests 的流式请求
         with requests.post(VLLM_API_URL, json=payload, stream=True) as response:
@@ -70,25 +76,45 @@ def chat_with_model_streaming(user_input, history):
                                 if "content" in delta:
                                     bot_response += delta["content"]
                                     # ✅ 逐步更新聊天记录
-                                    yield history + [(user_input, bot_response)], ""
+                                    token_count += 1  # ✅ 每个 Token 计数  
+                                    yield history + [(user_input, bot_response)], "", "推理中..."
                             except json.JSONDecodeError:
                                 pass
+            # ✅ 记录结束时间 & 计算时长
+            elapsed_time = time.time() - start_time
+            tps = token_count / elapsed_time if elapsed_time > 0 else 0  # ✅ 计算 Tokens Per Second
+
+            speed_text = f"⏱️  耗时: {elapsed_time:.2f} 秒 | 🔢 Tokens: {token_count} | ⚡ 速度: {tps:.2f} TPS"
+            yield history + [(user_input, bot_response)], "", speed_text  # ✅ 返回推理速度
 
     except Exception as e:
         bot_response = f"❌ 推理失败: {str(e)}"
         yield history + [(user_input, bot_response)], ""
 
+
+
+# ✅ 清除聊天记录 & 计时器
+def clear_chat():
+    return [], "", "⏱️  耗时: 0.00 秒 | 🔢 Tokens: 0 | ⚡ 速度: 0.00 TPS"  # ✅ 清空所有 UI
+
 # 构建 Gradio 界面
-with gr.Blocks() as demo:
-    gr.Markdown("## 💬 Web UI 接入 vLLM 模型（流式输出）")
-    chatbot = gr.Chatbot()
-    txt = gr.Textbox(placeholder="请输入你的问题", label="输入")
-    clear = gr.Button("清除")
-    submit = gr.Button("提交")
+with gradio_musa.Blocks() as demo:
+    # gr.Markdown("## 💬 Web UI 接入 vLLM 模型（流式输出）")
+    chatbot = gr.Chatbot(label="Running on MTT S4000")
+    msg_input = gr.Textbox(placeholder="请输入你的问题", label="输入...", lines=1, autofocus=True)
+
+    speed_display = gr.Textbox(label="推理速度", value="⏱️  耗时: 0.00 秒 | 🔢 Tokens: 0 | ⚡ 速度: 0.00 TPS", interactive=False)  # >✅ 显示推理速度
+
+    # clear = gr.Button("清除")
+    # submit = gr.Button("提交")
+    with gr.Row():
+        submit_btn = gr.Button(value="提交")
+        clear_btn = gr.Button("清除历史")  # ✅ 添加清除按钮
 
     # ✅ 使用流式函数
-    submit.click(chat_with_model_streaming, [txt, chatbot], [chatbot, txt])
-    txt.submit(chat_with_model_streaming, [txt, chatbot], [chatbot, txt])
-    clear.click(lambda: ([], ""), [], [chatbot, txt])
+    msg_input.submit(chat_with_model_streaming, inputs=[msg_input, chatbot], outputs=[chatbot, msg_input, speed_display]) # ✅ 按 Enter 触发
+    submit_btn.click(chat_with_model_streaming, inputs=[msg_input, chatbot], outputs=[chatbot, msg_input, speed_display]) # ✅ 按按钮触发
+    clear_btn.click(clear_chat, inputs=[], outputs=[chatbot, msg_input, speed_display])  # ✅ 清除聊天 & 计时
 
+demo.queue()  # ✅ 允许流式数据传输
 demo.launch(server_name=args.ip)

vllm/demo/gradio_demo/app.py

@@ -1,13 +1,13 @@
 import gradio as gr
 
 
-TITLE="在摩尔线程KUAE集群上基于MT Transformer推理引擎运行的QwQ 32B推理模型"
+TITLE=""
 
 TOP = """\
 <div class="top">
         <div class="top-container">
                 <img class="logo" width="140" height="37" src="https://kuae-playground.mthreads.com/image/[email protected]">
-                <h2>夸娥工场</h2>
+                <h2>GPU GENIUS</h2>
         </div>
 </div>"""
 
@@ -19,11 +19,7 @@
 window.onload = function() {
     document.title = "''' + TITLE + '''";
 }'''
-HEADER = TOP + "<h1>" + TITLE + "</h1><p>" + '''\
-在摩尔线程KUAE集群上，QwQ 32B模型通过摩尔线程推理vLLM + MT Transformer引擎高效运行。
-<p>QwQ 32B是Qwen系列中的推理模型。与传统的指令调优模型相比，QwQ 32B模型具有思考和推理的能力，在下游任务中，尤其是在解决困难问题时，性能显著提升。QwQ 32B是中型推理模型，能够与当前最先进的推理模型（如DeepSeek-R1和o1-mini）相媲美，展现出竞争力的表现。</p>
-<p>借助于<b>摩尔线程KUAE集群</b>和<b>MT Transformer引擎</b>的强大支持，QwQ 32B模型更好地应对复杂任务，推动了智能推理技术的发展。
-</p>'''
+HEADER = TOP + "<h1>" + TITLE + "</h1><p>"