fix

app.py

@@ -1,4 +1,5 @@
 import base64
+import html
 import mimetypes
 import os
 from pathlib import Path
@@ -11,6 +12,7 @@ DEFAULT_MODEL = os.getenv("DEFAULT_MODEL", "ERNIE-4.5-VL-28B-A3B-Thinking")
 BASE_URL = os.getenv("BASE_URL","")
 api_key = os.getenv("ERNIE_API_KEY","")
 
+
 CUSTOM_CSS = """
 body {
     background: radial-gradient(circle at top, #fdfbff 0%, #e7ecf7 45%, #dfe6f5 100%);
@@ -29,6 +31,18 @@ body {
     margin-bottom: 0;
     font-weight: 500;
 }
+#model-link {
+    margin-top: 6px;
+    font-size: 0.95rem;
+}
+#model-link a {
+    color: #4c1d95;
+    text-decoration: none;
+    font-weight: 500;
+}
+#model-link a:hover {
+    text-decoration: underline;
+}
 #examples-panel {
     margin-top: 20px;
     padding: 18px 22px;
@@ -76,12 +90,48 @@ body {
     border: 1px solid rgba(15, 23, 42, 0.1);
     box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
 }
+.ernie-section {
+    border-radius: 18px;
+    margin-bottom: 14px;
+    padding: 16px 18px;
+    border: 1px solid rgba(15, 23, 42, 0.1);
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+.ernie-section-header {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+    color: rgba(15, 23, 42, 0.65);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.ernie-section-body {
+    margin-top: 10px;
+    font-size: 1rem;
+    color: rgba(15, 23, 42, 0.92);
+    white-space: pre-wrap;
+    line-height: 1.55;
+}
+.ernie-thinking {
+    border-color: rgba(79, 70, 229, 0.35);
+    background: rgba(129, 140, 248, 0.08);
+}
+.ernie-answer {
+    border-color: rgba(16, 185, 129, 0.35);
+    background: rgba(110, 231, 183, 0.08);
+}
 
 @media (prefers-color-scheme: dark) {
     body {
         background: radial-gradient(circle at top, #1f264b 0%, #0f172a 45%, #040713 100%);
         color: #ecf2ff;
     }
+    #model-link a {
+        color: #a5b4fc;
+    }
     #examples-panel {
         border: 1px solid rgba(255, 255, 255, 0.05);
         background: rgba(8, 13, 30, 0.85);
@@ -100,6 +150,25 @@ body {
         border: 1px solid rgba(99, 102, 241, 0.25);
         box-shadow: 0 25px 70px rgba(2, 6, 23, 0.7);
     }
+    .ernie-section {
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: rgba(15, 23, 42, 0.85);
+        box-shadow: 0 10px 30px rgba(2, 6, 23, 0.55);
+    }
+    .ernie-section-header {
+        color: rgba(236, 242, 255, 0.75);
+    }
+    .ernie-section-body {
+        color: rgba(248, 250, 255, 0.95);
+    }
+    .ernie-answer {
+        border-color: rgba(45, 212, 191, 0.45);
+        background: rgba(8, 47, 56, 0.65);
+    }
+    .ernie-thinking {
+        border-color: rgba(165, 180, 252, 0.4);
+        background: rgba(30, 27, 75, 0.65);
+    }
 }
 """
 
@@ -130,6 +199,27 @@ def _text_content(text: str) -> Dict[str, Any]:
 def _message(role: str, content: Any) -> Dict[str, Any]:
     return {"role": role, "content": content}
 
+def _format_sections(thinking: str, answer: str | None = None) -> str:
+    """Render Thinking/Answer blocks with HTML so the chatbot can style them."""
+    def _build_block(kind: str, label: str, text: str, icon: str) -> str:
+        text = (text or "").strip()
+        if not text:
+            return ""
+        escaped = html.escape(text)
+        return (
+            f'<div class="ernie-section ernie-{kind}">'
+            f'<div class="ernie-section-header">{icon} {label}</div>'
+            f'<div class="ernie-section-body">{escaped}</div>'
+            "</div>"
+        )
+
+    sections = [
+        _build_block("thinking", "Thinking", thinking, "🧠"),
+        _build_block("answer", "Answer", answer, "✨") if answer is not None else "",
+    ]
+    rendered = "".join(section for section in sections if section)
+    return rendered
+
 def _build_user_message(message: Dict[str, Any]) -> Dict[str, Any]:
     files = message.get("files") or []
     text = (message.get("text") or "").strip()
@@ -176,38 +266,58 @@ def stream_response(message: Dict[str, Any], history: List[Dict[str, Any]], mode
             messages=messages,
             stream=True
         )
-        thinking = ""  # 收集推理内容
-        answer = ""    # 收集回答内容
-        thinking_complete = False  # 推理是否完成的标记
+        thinking_parts: List[str] = []
+        answer_parts: List[str] = []
+        answer_started = False
 
-        # 第一阶段：只输出Thinking
-        for chunk in stream:
-            delta = chunk.choices[0].delta
-            # 处理推理内容
-            if hasattr(delta, "reasoning_content") and delta.reasoning_content:
-                thinking += delta.reasoning_content
-                # 直接yield Thinking（不带Answer）
-                yield f"Thinking:\n{thinking}\n\n"
-            # 检测到回答内容，标记推理结束
-            if hasattr(delta, "content") and delta.content:
-                answer += delta.content
-                thinking_complete = True
-                break
-
-        # 若推理未完成但流已结束，强制标记完成
-        if not thinking_complete:
-            thinking_complete = True
-
-        # 第二阶段：先输出完整Thinking，再输出Answer（流式）
         for chunk in stream:
             delta = chunk.choices[0].delta
-            if hasattr(delta, "content") and delta.content:
-                answer += delta.content
-                # 直接yield 完整Thinking + 当前Answer
-                yield f"Thinking:\n{thinking}\n\nAnswer:\n{answer}"
+
+            if getattr(delta, "reasoning_content", None):
+                thinking_parts.append(delta.reasoning_content)
+
+            if getattr(delta, "content", None):
+                answer_started = True
+                answer_parts.append(delta.content)
+
+            thinking_text = "".join(thinking_parts)
+            answer_text = "".join(answer_parts) if answer_parts else None
+
+            if answer_started:
+                rendered = _format_sections(thinking_text, answer_text)
+            else:
+                rendered = _format_sections(thinking_text)
+
+            if rendered:
+                yield rendered
+
+        if not answer_started and thinking_parts:
+            # 流结束但模型未返回Answer时，至少保证Thinking被展示完全
+            rendered = _format_sections("".join(thinking_parts))
+            if rendered:
+                yield rendered
     except Exception as e:
         yield f"Failed to get response: {e}"
 
+def run_example(message: Dict[str, Any], history: List[Dict[str, Any]] | None = None):
+    """
+    用于 Examples 点击时直接走大模型。
+    - 输入还是 ChatInterface 那种 message dict：{"text": ..., "files": [...]}
+    - history 是 Chatbot 当前的消息列表（type="messages"）
+    - 输出改成 Chatbot 需要的消息列表：[{role, content}, ...]
+    """
+    history = history or []
+
+    # 直接复用你现有的流式函数，只是把它返回的 HTML 包一层 messages
+    for rendered in stream_response(message, history):
+        # 这里只简单把 user 文本展示出来；图片就当“上下文里有了”，不专门渲染
+        user_text = (message.get("text") or "").strip() or "[Example]"
+        display_history = history + [
+            {"role": "user", "content": user_text},
+            {"role": "assistant", "content": rendered},
+        ]
+        # 关键：对 Chatbot 来说，返回值要是「完整的消息列表」
+        yield display_history
 
 def build_demo() -> gr.Blocks:
     theme = gr.themes.Soft(primary_hue="violet", secondary_hue="cyan", neutral_hue="slate")
@@ -224,7 +334,23 @@ def build_demo() -> gr.Blocks:
                 """,
                 elem_id="hero-text",
             )
+            gr.Markdown(
+                """
+                <p id="model-link">
+                    Here is a link to the model on Hugging Face:
+                    <a href="https://huggingface.co/baidu/ERNIE-4.5-VL-28B-A3B-Thinking" target="_blank" rel="noopener">
+                        Hugging Face - ERNIE-4.5-VL-28B-A3B-Thinking
+                    </a>
+                </p>
+                """
+            )
 
+        textbox = gr.MultimodalTextbox(
+            show_label=False,
+            placeholder="Enter text, or upload one or more images...",
+            file_types=["image","video"],
+            file_count="multiple"
+        )
         chatbot = gr.Chatbot(
             type="messages",
             allow_tags=["think"],
@@ -233,12 +359,6 @@ def build_demo() -> gr.Blocks:
             bubble_full_width=False,
             show_copy_button=True,
         )
-        textbox = gr.MultimodalTextbox(
-            show_label=False,
-            placeholder="Enter text, or upload one or more images...",
-            file_types=["image","video"],
-            file_count="multiple"
-        )
         
         examples = [
             {
@@ -246,28 +366,22 @@ def build_demo() -> gr.Blocks:
                 "files": ["examples/case1.png"] 
             },
             {
-                "text": "图中实际上有几个真人",
+                "text": "How many real people are actually in the picture?",
                 "files": ["examples/case2.png"]
             },
         ]
 
-        with gr.Row(elem_id="examples-panel"):
-            with gr.Column(scale=1):
-                gr.Markdown(
-                    """
-                    <h4>Quick Examples</h4>
-                    <p>选择一个示例，即可快速体验 ERNIE 的视觉 + 推理能力。</p>
-                    """,
-                    elem_id="examples-copy",
-                )
-            with gr.Column(scale=2):
-                gr.Examples(
-                    examples=examples,
-                    inputs=textbox,
-                    label=None,
-                    examples_per_page=4,
-                    elem_id="examples-grid",
-                )
+        with gr.Column(elem_id="examples-panel"): 
+            gr.Examples(
+                examples=examples,
+                inputs=textbox,
+                label=None,
+                examples_per_page=4,
+                elem_id="examples-grid",
+                fn=run_example,      # 点击示例时，直接走大模型
+                outputs=chatbot,     
+                run_on_click=True,   
+            )
 
         with gr.Column(elem_id="chat-wrapper"):
             chat_interface = gr.ChatInterface(