Update app.py

app.py

@@ -141,6 +141,52 @@ def format_output_html(thinking, answer, code_blocks, prompt_tokens, completion_
     total_tokens = prompt_tokens + completion_tokens
     thinking_tokens_est = len(thinking.split()) * 1.3  # Rough estimate
     
+    # Build thinking section HTML if exists
+    thinking_html = ""
+    if thinking:
+        thinking_html = f"""
+        <details style="background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 12px; padding: 20px; margin-bottom: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
+            <summary style="cursor: pointer; font-weight: 600; font-size: 16px; color: #495057; user-select: none; display: flex; align-items: center; gap: 8px;">
+                <span style="font-size: 20px;">🧠</span>
+                <span>Reasoning Process ({int(thinking_tokens_est):,} tokens)</span>
+                <span style="margin-left: auto; font-size: 12px; color: #6c757d;">Click to expand/collapse</span>
+            </summary>
+            <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #dee2e6; color: #212529; line-height: 1.7; white-space: pre-wrap; font-size: 14px; font-family: 'SF Mono', Monaco, Consolas, monospace; background: #ffffff; padding: 16px; border-radius: 8px;">
+{thinking}
+            </div>
+        </details>
+        """
+    
+    # Build code blocks HTML if exist
+    code_html = ""
+    if code_blocks:
+        code_blocks_html = ""
+        for lang, code in code_blocks:
+            lang_display = lang if lang else "code"
+            code_blocks_html += f"""
+            <div style="margin-bottom: 16px; background: #1e1e1e; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+                <div style="background: #2d2d2d; padding: 12px 20px; color: #ffffff; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #3d3d3d;">
+                    <span>{lang_display}</span>
+                    <button onclick="navigator.clipboard.writeText(this.parentElement.nextElementSibling.textContent)" 
+                            style="background: #4CAF50; color: white; border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; transition: background 0.2s;"
+                            onmouseover="this.style.background='#45a049'" 
+                            onmouseout="this.style.background='#4CAF50'">
+                        📋 Copy
+                    </button>
+                </div>
+                <pre style="margin: 0; padding: 20px; color: #d4d4d4; overflow-x: auto; font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 14px; line-height: 1.6;"><code>{code.strip()}</code></pre>
+            </div>
+            """
+        
+        code_html = f"""
+        <div style="margin-top: 24px;">
+            <h3 style="color: #1a1a1a; font-size: 18px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
+                <span style="font-size: 22px;">💻</span> Code
+            </h3>
+            {code_blocks_html}
+        </div>
+        """
+    
     html = f"""
     <div style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 100%; margin: 0 auto; background: #ffffff; color: #1a1a1a;">
         
@@ -168,18 +214,7 @@ def format_output_html(thinking, answer, code_blocks, prompt_tokens, completion_
         </div>
         
         <!-- Thinking Section (Collapsible) -->
-        {f'''
-        <details style="background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 12px; padding: 20px; margin-bottom: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
-            <summary style="cursor: pointer; font-weight: 600; font-size: 16px; color: #495057; user-select: none; display: flex; align-items: center; gap: 8px;">
-                <span style="font-size: 20px;">🧠</span>
-                <span>Reasoning Process ({int(thinking_tokens_est):,} tokens)</span>
-                <span style="margin-left: auto; font-size: 12px; color: #6c757d;">Click to expand/collapse</span>
-            </summary>
-            <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #dee2e6; color: #212529; line-height: 1.7; white-space: pre-wrap; font-size: 14px; font-family: 'SF Mono', Monaco, Consolas, monospace; background: #ffffff; padding: 16px; border-radius: 8px;">
-{thinking}
-            </div>
-        </details>
-        ''' if thinking else ''}
+        {thinking_html}
         
         <!-- Answer Section -->
         <div style="background: #ffffff; border: 2px solid #28a745; border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 4px rgba(40,167,69,0.1);">
@@ -192,27 +227,7 @@ def format_output_html(thinking, answer, code_blocks, prompt_tokens, completion_
         </div>
         
         <!-- Code Blocks -->
-        {f'''
-        <div style="margin-top: 24px;">
-            <h3 style="color: #1a1a1a; font-size: 18px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
-                <span style="font-size: 22px;">💻</span> Code
-            </h3>
-            {"".join([f'''
-            <div style="margin-bottom: 16px; background: #1e1e1e; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
-                <div style="background: #2d2d2d; padding: 12px 20px; color: #ffffff; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #3d3d3d;">
-                    <span>{lang if lang else "code"}</span>
-                    <button onclick="navigator.clipboard.writeText(this.parentElement.nextElementSibling.textContent)" 
-                            style="background: #4CAF50; color: white; border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; transition: background 0.2s;"
-                            onmouseover="this.style.background='#45a049'" 
-                            onmouseout="this.style.background='#4CAF50'">
-                        📋 Copy
-                    </button>
-                </div>
-                <pre style="margin: 0; padding: 20px; color: #d4d4d4; overflow-x: auto; font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 14px; line-height: 1.6;"><code>{code.strip()}</code></pre>
-            </div>
-            ''' for lang, code in code_blocks])}
-        </div>
-        ''' if code_blocks else ''}
+        {code_html}
         
     </div>
     """