Update app.py

app.py

@@ -1,49 +1,63 @@
 import gradio as gr
-from huggingface_hub import InferenceClient
+import re
+from typing import List, Tuple
+import html
 
-"""
-For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
-"""
-client = InferenceClient("Pinkstack/Superthoughts-lite-v1")
+def create_collapsible_html(thinking: str) -> str:
+    """Create HTML for a collapsible thinking section"""
+    escaped_thinking = html.escape(thinking)
+    return f'''
+    <div class="thinking-container" style="margin: 8px 0;">
+        <details class="thinking-details" style="
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 8px;
+            background-color: #f8f9fa;
+            cursor: pointer;
+        ">
+            <summary style="
+                font-weight: 500;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            ">
+                <span style="transform: rotate(-90deg); display: inline-block;">➤</span>
+                Show thoughts
+            </summary>
+            <div style="
+                margin-top: 8px;
+                padding: 8px;
+                border-top: 1px solid #eee;
+                white-space: pre-wrap;
+            ">{escaped_thinking}</div>
+        </details>
+    </div>
+    '''
 
+def process_message(message: str) -> str:
+    """Process a message to convert thinking sections into collapsible elements"""
+    def replace_thinking(match):
+        thinking_content = match.group(1).strip()
+        return create_collapsible_html(thinking_content)
+    
+    # Replace thinking sections with collapsible elements
+    processed = re.sub(r'<think>(.*?)</think>', replace_thinking, message, flags=re.DOTALL)
+    
+    # Remove output tags if present
+    processed = re.sub(r'<output>(.*?)</output>', r'\1', processed, flags=re.DOTALL)
+    
+    return processed
 
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
-    messages = [{"role": "system", "content": system_message}]
+class CustomChatInterface(gr.ChatInterface):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        
+    def render_message(self, message: str, is_user: bool) -> str:
+        if not is_user:
+            return process_message(message)
+        return message
 
-    for val in history:
-        if val[0]:
-            messages.append({"role": "user", "content": val[0]})
-        if val[1]:
-            messages.append({"role": "assistant", "content": val[1]})
-
-    messages.append({"role": "user", "content": message})
-
-    response = ""
-
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        token = message.choices[0].delta.content
-
-        response += token
-        yield response
-
-
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-demo = gr.ChatInterface(
+demo = CustomChatInterface(
     respond,
     additional_inputs=[
         gr.Textbox(value="You must always include <think> ... </think> <output> </output> tokens.", label="System message"),
@@ -57,8 +71,15 @@ demo = gr.ChatInterface(
             label="Top-p (nucleus sampling)",
         ),
     ],
+    css="""
+    .thinking-details[open] summary span {
+        transform: rotate(0deg) !important;
+    }
+    .thinking-details summary::-webkit-details-marker {
+        display: none;
+    }
+    """
 )
 
-
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()