Update app.py

Harmonized how the output is parsed and styled. added and expansion for repetitive text

app.py

@@ -38,12 +38,11 @@ class VibeThinkerModel:
     def generate_response(self, prompt, temperature=0.6, max_new_tokens=8192, max_thinking_tokens=4096):
         """Generate response with thinking length control"""
         if not self.model or not self.tokenizer:
-            return "Model not loaded!", 0, 0, 0
+            return "Model not loaded!", 0, 0, 0, None
         
         try:
             start_time = time.time()
             
-            # Format prompt for competitive coding
             formatted_prompt = f"""<|im_start|>system
 You are a competitive programming expert. Provide clear, concise solutions to coding problems.
 
@@ -59,11 +58,9 @@ Keep reasoning under {max_thinking_tokens} tokens. Be direct and avoid repetitio
 <|im_start|>assistant
 """
             
-            # Tokenize input
             inputs = self.tokenizer(formatted_prompt, return_tensors="pt").to(self.device)
             prompt_length = inputs.input_ids.shape[1]
             
-            # Generate
             with torch.no_grad():
                 outputs = self.model.generate(
                     **inputs,
@@ -76,30 +73,34 @@ Keep reasoning under {max_thinking_tokens} tokens. Be direct and avoid repetitio
                     pad_token_id=self.tokenizer.eos_token_id,
                 )
             
-            # Decode output
             full_output = self.tokenizer.decode(outputs[0], skip_special_tokens=True)
             
-            # Extract only assistant's response
             if "<|im_start|>assistant" in full_output:
                 generated_text = full_output.split("<|im_start|>assistant")[-1].strip()
             else:
                 generated_text = full_output[len(formatted_prompt):].strip()
             
-            # Check for loops
+            # Store original before truncation
+            original_text = generated_text
+            truncated_content = None
+            
+            # Check for loops and truncate if needed
             if self._detect_loop(generated_text):
                 generated_text = self._truncate_loop(generated_text)
+                # Calculate what was removed
+                if len(generated_text) < len(original_text):
+                    truncated_content = original_text[len(generated_text):].strip()
                 generated_text += "\n\n⚠️ *[Repetitive content detected and truncated]*"
             
             generation_time = time.time() - start_time
             completion_length = outputs.shape[1] - prompt_length
             
-            return generated_text, prompt_length, completion_length, generation_time
+            return generated_text, prompt_length, completion_length, generation_time, truncated_content
             
         except Exception as e:
-            return f"Error during generation: {str(e)}", 0, 0, 0
+            return f"Error during generation: {str(e)}", 0, 0, 0, None
     
     def _detect_loop(self, text):
-        """Detect repetitive loops"""
         words = text.split()
         if len(words) < 20:
             return False
@@ -115,7 +116,6 @@ Keep reasoning under {max_thinking_tokens} tokens. Be direct and avoid repetitio
         return False
     
     def _truncate_loop(self, text):
-        """Truncate at loop start"""
         words = text.split()
         for length in [10, 15, 20]:
             if len(words) < length * 2:
@@ -128,30 +128,47 @@ Keep reasoning under {max_thinking_tokens} tokens. Be direct and avoid repetitio
                     return ' '.join(words[:rest_start])
         return text
 
-def parse_model_output(text):
+def parse_model_output(text, truncated_content=None):
     """
-    Parse model output into three clean sections:
-    1. Thinking (reasoning/analysis) - collapsed by default
-    2. Explanation (solution approach without code) - main display
-    3. Code blocks (implementation) - separate section with copy/download
+    Parse model output into sections with proper edge case handling
     """
     loop_warning = ""
+    loop_details_html = ""
+    
     if "[Repetitive content detected and truncated]" in text:
-        loop_warning = "\n\n⚠️ **Note**: Repetitive content was detected and removed"
         text = text.replace("⚠️ *[Repetitive content detected and truncated]*", "")
+        
+        # Create expandable section for truncated content
+        if truncated_content:
+            truncated_escaped = truncated_content.replace('<', '&lt;').replace('>', '&gt;')
+            truncated_word_count = len(truncated_content.split())
+            loop_details_html = f"""
+            <details style="background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; padding: 16px; margin-top: 12px;">
+                <summary style="cursor: pointer; font-weight: 600; font-size: 14px; color: #856404; user-select: none; display: flex; align-items: center; gap: 8px;">
+                    <span style="font-size: 18px;">⚠️</span>
+                    <span>Truncated Repetitive Content ({truncated_word_count} words removed)</span>
+                    <span style="margin-left: auto; font-size: 12px; font-weight: normal;">▶ Click to view what was removed</span>
+                </summary>
+                <div style="margin-top: 12px; padding-top: 12px; border-top: 2px solid #ffc107; color: #856404; line-height: 1.6; white-space: pre-wrap; font-size: 13px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; max-height: 400px; overflow-y: auto;">
+{truncated_escaped}
+                </div>
+            </details>
+            """
+        
+        loop_warning = loop_details_html
     
-    # Step 1: Extract ALL code blocks first (to separate them from text)
+    # Extract all code blocks
     code_pattern = r'```(\w+)?\n(.*?)```'
     code_blocks = re.findall(code_pattern, text, re.DOTALL)
     
-    # Remove code blocks from text to get pure text content
-    text_without_code = re.sub(code_pattern, '###CODE_BLOCK_PLACEHOLDER###', text, flags=re.DOTALL)
+    # Remove code blocks from text
+    text_without_code = re.sub(code_pattern, '###CODE_PLACEHOLDER###', text, flags=re.DOTALL)
     
-    # Step 2: Split into thinking and explanation
+    # Try to find thinking section
     thinking_content = ""
     explanation_content = text_without_code
     
-    # Try to find explicit thinking tags
+    # Check for explicit thinking tags
     thinking_patterns = [
         r'<think>(.*?)</think>',
         r'<thinking>(.*?)</thinking>',
@@ -164,12 +181,11 @@ def parse_model_output(text):
             explanation_content = re.sub(pattern, '', text_without_code, flags=re.DOTALL | re.IGNORECASE).strip()
             break
     
-    # If no explicit tags, try to detect thinking section by content
+    # If no explicit tags, try to detect thinking by content
     if not thinking_content:
-        # Look for sections before "Solution:", "Implementation:", "Code:", "Here's"
         split_patterns = [
             r'^(.*?)(?=\n\n(?:Solution|Implementation|Code|Here\'s|Let me|Let\'s code|Final code))',
-            r'^(.*?)(?=###CODE_BLOCK_PLACEHOLDER###)',
+            r'^(.*?)(?=###CODE_PLACEHOLDER###)',
         ]
         
         for pattern in split_patterns:
@@ -177,7 +193,6 @@ def parse_model_output(text):
             if match:
                 potential_thinking = match.group(1).strip()
                 
-                # Only classify as "thinking" if it's substantial and contains reasoning keywords
                 if len(potential_thinking) > 150:
                     thinking_lower = potential_thinking.lower()
                     reasoning_keywords = [
@@ -189,11 +204,9 @@ def parse_model_output(text):
                         explanation_content = text_without_code[len(potential_thinking):].strip()
                         break
     
-    # Step 3: Clean up explanation (remove code placeholders and extra whitespace)
-    explanation_content = explanation_content.replace('###CODE_BLOCK_PLACEHOLDER###', '').strip()
-    explanation_content = re.sub(r'\n{3,}', '\n\n', explanation_content)  # Remove excessive blank lines
-    
-    # Remove common prefixes that indicate code section headers
+    # Clean up explanation
+    explanation_content = explanation_content.replace('###CODE_PLACEHOLDER###', '').strip()
+    explanation_content = re.sub(r'\n{3,}', '\n\n', explanation_content)
     explanation_content = re.sub(
         r'(?:Implementation|Code|Solution|Here\'s the code|Final code):\s*$',
         '',
@@ -201,7 +214,7 @@ def parse_model_output(text):
         flags=re.IGNORECASE
     ).strip()
     
-    # Step 4: Handle boxed answers
+    # Handle boxed answers
     answer_match = re.search(r'\\boxed\{([^}]+)\}', explanation_content)
     if answer_match:
         explanation_content = f"**Final Answer:** {answer_match.group(1)}\n\n{explanation_content}"
@@ -212,36 +225,62 @@ def parse_model_output(text):
 
 def format_output_html(thinking, explanation, code_blocks, prompt_tokens, completion_tokens, generation_time):
     """
-    Format output with clear separation:
-    - Stats at top
-    - Thinking (collapsed)
-    - Explanation (main content, no code)
-    - Code blocks (separate section)
+    Format output with harmonized design and edge case handling
     """
     total_tokens = prompt_tokens + completion_tokens
     thinking_tokens_est = len(thinking.split()) * 1.3 if thinking else 0
     tokens_per_sec = completion_tokens / generation_time if generation_time > 0 else 0
     
-    # Thinking section (collapsed by default)
+    # Card style for consistent sections
+    card_base_style = "background: #ffffff; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);"
+    
+    # Thinking section (collapsed, only show if exists)
     thinking_html = ""
-    if thinking:
+    if thinking and len(thinking.strip()) > 0:
         thinking_escaped = thinking.replace('<', '&lt;').replace('>', '&gt;')
         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;">
+        <details style="{card_base_style} border-left: 4px solid #6c757d;">
+            <summary style="cursor: pointer; font-weight: 600; font-size: 16px; color: #495057; user-select: none; display: flex; align-items: center; gap: 10px; padding: 4px 0;">
                 <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; font-weight: normal;">▶ Click to expand</span>
+                <span>Reasoning Process</span>
+                <span style="margin-left: auto; font-size: 13px; color: #6c757d; font-weight: normal;">~{int(thinking_tokens_est):,} tokens • Click to expand ▼</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;">
+            <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e9ecef; color: #495057; line-height: 1.8; white-space: pre-wrap; font-size: 14px; font-family: 'SF Mono', Monaco, 'Courier New', monospace;">
 {thinking_escaped}
             </div>
         </details>
         """
     
-    # Code blocks section
+    # Explanation section (only show if has meaningful content)
+    # Note: explanation may contain the loop warning HTML which should NOT be escaped
+    explanation_html = ""
+    if explanation and len(explanation.strip()) > 10:
+        # Split into text and HTML parts
+        # If it contains our loop warning HTML, don't escape that part
+        if '<details style="background: #fff3cd' in explanation:
+            # Split at the warning
+            parts = explanation.split('<details style="background: #fff3cd', 1)
+            text_part = parts[0].replace('<', '&lt;').replace('>', '&gt;')
+            html_part = '<details style="background: #fff3cd' + parts[1] if len(parts) > 1 else ''
+            explanation_display = text_part + html_part
+        else:
+            explanation_display = explanation.replace('<', '&lt;').replace('>', '&gt;')
+        
+        explanation_html = f"""
+        <div style="{card_base_style} border-left: 4px solid #28a745;">
+            <h3 style="margin: 0 0 16px 0; color: #28a745; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px;">
+                <span style="font-size: 22px;">✅</span>
+                <span>Solution Explanation</span>
+            </h3>
+            <div style="color: #495057; line-height: 1.8; font-size: 15px; white-space: pre-wrap;">
+{explanation_display}
+            </div>
+        </div>
+        """
+    
+    # Code section (only show if code exists)
     code_html = ""
-    if code_blocks:
+    if code_blocks and len(code_blocks) > 0:
         code_blocks_html = ""
         for idx, (lang, code) in enumerate(code_blocks):
             lang_display = lang if lang else "code"
@@ -249,32 +288,36 @@ def format_output_html(thinking, explanation, code_blocks, prompt_tokens, comple
             code_clean = code.strip()
             
             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>
+            <div style="margin-bottom: 16px; background: #1e1e1e; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
+                <div style="background: #2d2d2d; padding: 12px 20px; color: #e0e0e0; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center;">
+                    <span style="display: flex; align-items: center; gap: 8px;">
+                        <span style="font-size: 16px;">💻</span>
+                        <span>{lang_display}</span>
+                    </span>
                     <div style="display: flex; gap: 8px;">
-                        <button onclick="navigator.clipboard.writeText(document.getElementById('{code_id}').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'">
+                        <button onclick="navigator.clipboard.writeText(document.getElementById('{code_id}').textContent); this.textContent='✓ Copied'; setTimeout(() => this.textContent='📋 Copy', 2000)" 
+                                style="background: #28a745; color: white; border: none; padding: 7px 16px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.2s;"
+                                onmouseover="if(this.textContent==='📋 Copy') this.style.background='#218838'" 
+                                onmouseout="if(this.textContent==='📋 Copy') this.style.background='#28a745'">
                             📋 Copy
                         </button>
                         <button onclick="downloadCode(document.getElementById('{code_id}').textContent, '{lang_display}')" 
-                                style="background: #2196F3; 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='#0b7dda'" 
-                                onmouseout="this.style.background='#2196F3'">
+                                style="background: #007bff; color: white; border: none; padding: 7px 16px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.2s;"
+                                onmouseover="this.style.background='#0056b3'" 
+                                onmouseout="this.style.background='#007bff'">
                             💾 Download
                         </button>
                     </div>
                 </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; background: #1e1e1e;"><code id="{code_id}">{code_clean}</code></pre>
+                <pre style="margin: 0; padding: 20px; color: #d4d4d4; overflow-x: auto; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 14px; line-height: 1.6; background: #1e1e1e;"><code id="{code_id}">{code_clean}</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> Implementation
+        <div style="{card_base_style} border-left: 4px solid #007bff;">
+            <h3 style="margin: 0 0 20px 0; color: #007bff; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px;">
+                <span style="font-size: 22px;">📝</span>
+                <span>Implementation</span>
             </h3>
             {code_blocks_html}
         </div>
@@ -302,57 +345,53 @@ def format_output_html(thinking, explanation, code_blocks, prompt_tokens, comple
         </script>
         """
     
-    # Escape HTML in explanation to prevent rendering issues
-    explanation_escaped = explanation.replace('<', '&lt;').replace('>', '&gt;')
+    # If no explanation but has code, add a minimal message
+    if not explanation_html and code_html:
+        explanation_html = f"""
+        <div style="{card_base_style} border-left: 4px solid #6c757d;">
+            <p style="color: #6c757d; font-size: 14px; margin: 0; font-style: italic;">
+                No explanation provided - see implementation below.
+            </p>
+        </div>
+        """
     
     html = f"""
-    <div style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 100%; margin: 0 auto; background: #ffffff; color: #1a1a1a;">
+    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; max-width: 100%; margin: 0 auto; background: #f8f9fa; padding: 20px; border-radius: 12px;">
         
-        <!-- Stats -->
-        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 12px; margin-bottom: 24px; color: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
-            <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">📊 Generation Stats</h3>
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; font-size: 14px;">
-                <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 8px;">
-                    <div style="opacity: 0.9; font-size: 12px; margin-bottom: 4px;">Time</div>
-                    <div style="font-size: 20px; font-weight: bold;">{generation_time:.1f}s</div>
+        <!-- Stats Card -->
+        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 24px; border-radius: 12px; margin-bottom: 20px; color: white; box-shadow: 0 4px 12px rgba(102,126,234,0.3);">
+            <h3 style="margin: 0 0 16px 0; font-size: 17px; font-weight: 600; opacity: 0.95;">📊 Generation Stats</h3>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; font-size: 13px;">
+                <div style="background: rgba(255,255,255,0.15); padding: 14px; border-radius: 8px; backdrop-filter: blur(10px);">
+                    <div style="opacity: 0.85; font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;">Time</div>
+                    <div style="font-size: 22px; font-weight: 700;">{generation_time:.1f}s</div>
                 </div>
-                <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 8px;">
-                    <div style="opacity: 0.9; font-size: 12px; margin-bottom: 4px;">Speed</div>
-                    <div style="font-size: 20px; font-weight: bold;">{tokens_per_sec:.1f} t/s</div>
+                <div style="background: rgba(255,255,255,0.15); padding: 14px; border-radius: 8px; backdrop-filter: blur(10px);">
+                    <div style="opacity: 0.85; font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;">Speed</div>
+                    <div style="font-size: 22px; font-weight: 700;">{tokens_per_sec:.1f} t/s</div>
                 </div>
-                <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 8px;">
-                    <div style="opacity: 0.9; font-size: 12px; margin-bottom: 4px;">Prompt</div>
-                    <div style="font-size: 20px; font-weight: bold;">{prompt_tokens:,}</div>
+                <div style="background: rgba(255,255,255,0.15); padding: 14px; border-radius: 8px; backdrop-filter: blur(10px);">
+                    <div style="opacity: 0.85; font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;">Prompt</div>
+                    <div style="font-size: 22px; font-weight: 700;">{prompt_tokens:,}</div>
                 </div>
-                <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 8px;">
-                    <div style="opacity: 0.9; font-size: 12px; margin-bottom: 4px;">Output</div>
-                    <div style="font-size: 20px; font-weight: bold;">{completion_tokens:,}</div>
+                <div style="background: rgba(255,255,255,0.15); padding: 14px; border-radius: 8px; backdrop-filter: blur(10px);">
+                    <div style="opacity: 0.85; font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;">Output</div>
+                    <div style="font-size: 22px; font-weight: 700;">{completion_tokens:,}</div>
                 </div>
-                <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 8px;">
-                    <div style="opacity: 0.9; font-size: 12px; margin-bottom: 4px;">Thinking</div>
-                    <div style="font-size: 20px; font-weight: bold;">~{int(thinking_tokens_est):,}</div>
+                <div style="background: rgba(255,255,255,0.15); padding: 14px; border-radius: 8px; backdrop-filter: blur(10px);">
+                    <div style="opacity: 0.85; font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;">Thinking</div>
+                    <div style="font-size: 22px; font-weight: 700;">~{int(thinking_tokens_est):,}</div>
                 </div>
-                <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 8px;">
-                    <div style="opacity: 0.9; font-size: 12px; margin-bottom: 4px;">Total</div>
-                    <div style="font-size: 20px; font-weight: bold;">{total_tokens:,}</div>
+                <div style="background: rgba(255,255,255,0.15); padding: 14px; border-radius: 8px; backdrop-filter: blur(10px);">
+                    <div style="opacity: 0.85; font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;">Total</div>
+                    <div style="font-size: 22px; font-weight: 700;">{total_tokens:,}</div>
                 </div>
             </div>
         </div>
         
-        <!-- Thinking (Collapsed) -->
+        <!-- Content Sections -->
         {thinking_html}
-        
-        <!-- Explanation (Main Content - No Code) -->
-        <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);">
-            <h3 style="margin: 0 0 16px 0; color: #28a745; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px;">
-                <span style="font-size: 22px;">✅</span> Solution Explanation
-            </h3>
-            <div style="color: #212529; line-height: 1.8; font-size: 15px; white-space: pre-wrap; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
-{explanation_escaped}
-            </div>
-        </div>
-        
-        <!-- Code (Separate Section) -->
+        {explanation_html}
         {code_html}
         
     </div>
@@ -371,7 +410,7 @@ def generate_solution(prompt, temperature=0.6, max_tokens=8192, max_thinking_tok
     progress(0, desc="🔄 Initializing...")
     progress(0.2, desc="🧠 Generating solution...")
     
-    response, prompt_tokens, completion_tokens, gen_time = vibe_model.generate_response(
+    response, prompt_tokens, completion_tokens, gen_time, truncated = vibe_model.generate_response(
         prompt, 
         temperature=temperature, 
         max_new_tokens=max_tokens,
@@ -380,8 +419,7 @@ def generate_solution(prompt, temperature=0.6, max_tokens=8192, max_thinking_tok
     
     progress(0.8, desc="📝 Formatting output...")
     
-    # Parse into three sections: thinking, explanation, code
-    thinking, explanation, code_blocks = parse_model_output(response)
+    thinking, explanation, code_blocks = parse_model_output(response, truncated)
     html_output = format_output_html(thinking, explanation, code_blocks, prompt_tokens, completion_tokens, gen_time)
     
     progress(1.0, desc="✅ Complete!")
@@ -429,12 +467,12 @@ with gr.Blocks(
                 - Lower thinking tokens (1024-2048) for faster, direct solutions
                 - Higher thinking tokens (4096-8192) for complex reasoning
                 - Temperature 0.6 balances creativity and accuracy
-                - Automatic loop detection and truncation
                 
                 **Output Structure:**
-                - 🧠 **Reasoning Process** (collapsed) - The model's thinking steps
-                - ✅ **Solution Explanation** - Approach and logic without code
-                - 📝 **Implementation** - Clean code with copy/download buttons
+                - 🧠 **Reasoning** (collapsed) - Model's thinking process
+                - ✅ **Explanation** - Solution approach without code
+                - 📝 **Implementation** - Clean code with copy/download
+                - ⚠️ **Truncated Content** (if detected) - View removed repetitions
                 """)
             
             generate_btn = gr.Button("🚀 Generate Solution", variant="primary", size="lg")