feat: Implement colored output for thinking tokens

GEMINI.md

@@ -30,10 +30,11 @@
 
 # Todolist
 ## 未完成
-- [ ] (进行中) 实现调试模式以观察“思考”和“正文” token 的区别。
+- [ ] (进行中) 为“思考”和“正文” token 实现不同的颜色显示。
 - [ ] (已暂停) 搜索 `huggingface_hub` 文档，确认是否存在用于重启 Space 的 API。
 
 ## 已完成
+- [x] 实现调试模式以观察“思考”和“正文” token 的区别。
 - [x] 修改 `app.py`，移除 `Ling-flash-2.0` 模型，只保留 `Ring-mini-2.0`。
 - [x] **(用户决策)** 确认 `Ling-flash-2.0` 模型过大，暂时移除，仅使用 `Ring-mini-2.0`。
 - [x] 搭建 LangGraph 基础架构并重构 `app.py`。

app.py

@@ -3,13 +3,11 @@ from comp import generate_response
 
 # --- Gradio UI ---
 
-with gr.Blocks() as demo:
+with gr.Blocks(css=".thinking { color: gray; font-style: italic; }") as demo:
     gr.Markdown("# Ling Playground")
     chatbot = gr.Chatbot()
-    with gr.Row():
-        msg = gr.Textbox()
-        token_debugger = gr.Textbox(label="Token Debugger", interactive=False)
-    clear = gr.ClearButton([msg, chatbot, token_debugger])
+    msg = gr.Textbox()
+    clear = gr.ClearButton([msg, chatbot])
 
     def user(user_message, history):
         return "", history + [[user_message, None]]
@@ -17,14 +15,14 @@ with gr.Blocks() as demo:
     def bot(history):
         user_message = history[-1][0]
         history[-1][1] = ""
-        raw_token_text = ""
-        for response, new_text in generate_response(user_message, history[:-1]):
-            history[-1][1] = response
-            raw_token_text += new_text
-            yield history, raw_token_text
+        for response in generate_response(user_message, history[:-1]):
+            html_response = response.replace("<think>", "<div class='thinking'>")
+            html_response = html_response.replace("</think>", "</div>")
+            history[-1][1] = html_response
+            yield history
 
     msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
-        bot, chatbot, [chatbot, token_debugger]
+        bot, chatbot, chatbot
     )
     clear.click(lambda: None, None, chatbot, queue=False)
 

comp.py

@@ -62,7 +62,7 @@ def generate_response(message, history):
     response = ""
     for new_text in streamer:
         response += new_text
-        yield response, new_text
+        yield response
     
     # wait for the generation thread to finish
     thread.join()