change for AI thinking

app.py

@@ -1,5 +1,7 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
+import time
+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
@@ -25,10 +27,9 @@ def respond(
 
     messages.append({"role": "user", "content": message})
 
-    # Track generation state
+    thinking_steps = []
     full_response = ""
-    is_complete = False
-    generation_complete = False
+    start_time = time.time()
     
     # Use chat completion instead of text generation
     for message in client.chat_completion(
@@ -41,19 +42,26 @@ def respond(
         token = message.choices[0].delta.content
         if token:
             full_response += token
-        
-        # Check if generation is complete
-        if message.choices[0].finish_reason == "stop" or not token:
-            generation_complete = True
             
-        # Only yield the final complete response
-        if generation_complete and not is_complete:
-            is_complete = True
-            yield full_response
-            
-    # Ensure we always yield the final response
-    if not is_complete:
-        yield full_response
+            # Save thinking steps every 2 seconds or every 100 characters
+            current_time = time.time()
+            if current_time - start_time > 2 or len(full_response) % 100 == 0:
+                start_time = current_time
+                thinking_steps.append(full_response)
+                
+            # Format with thinking history as HTML
+            if thinking_steps:
+                thinking_html = '<div class="thinking-wrapper"><details><summary>Show thinking process</summary><div class="thinking-steps">'
+                for i, step in enumerate(thinking_steps):
+                    # Escape HTML to prevent rendering issues
+                    safe_step = html.escape(step)
+                    thinking_html += f'<div class="thinking-step">Step {i+1}: {safe_step}</div>'
+                thinking_html += '</div></details></div>'
+                
+                # Yield both thinking and current response
+                yield f"{thinking_html}{full_response}"
+            else:
+                yield full_response
 
 
 # Custom CSS for Plant Wisdom.AI styling
@@ -166,6 +174,50 @@ custom_css = """
     border-radius: 12px;
     background-color: #ffffff;
 }
+
+/* Thinking process styling */
+.thinking-wrapper {
+    margin-bottom: 12px;
+}
+
+details {
+    background-color: #f8faf8;
+    border: 1px solid #e0ede0;
+    border-radius: 8px;
+    padding: 8px;
+    margin-bottom: 16px;
+}
+
+summary {
+    cursor: pointer;
+    color: #2e7d32;
+    font-weight: 500;
+    padding: 4px 8px;
+}
+
+summary:hover {
+    background-color: rgba(46,125,50,0.1);
+    border-radius: 4px;
+}
+
+.thinking-steps {
+    margin-top: 8px;
+    padding: 8px;
+    border-top: 1px solid #e0ede0;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.thinking-step {
+    padding: 4px 8px;
+    font-size: 14px;
+    color: #666;
+    border-bottom: 1px dashed #eee;
+}
+
+.thinking-step:last-child {
+    border-bottom: none;
+}
 """
 
 """