Update app.py

app.py

@@ -2334,150 +2334,165 @@ def create_interface():
     template_types = ["Short AC template AC", "Long AC template AC"]
 
     def format_results_as_html(text_results):
-        """Convert the text results into styled HTML."""
-        if not text_results:
-            return """
-                <div class="p-4 text-gray-600">
-                    Results will appear here after processing...
-                </div>
-            """
-        
-        # Split into sections
-        sections = text_results.split('■')
-        header = sections[0]
-        issues = sections[1:]
-        
-        # Format header
-        header_html = f"""
-            <div class="max-w-4xl mx-auto p-4 bg-white rounded-lg shadow-sm mb-6">
-                <h1 class="text-2xl font-bold text-gray-800 mb-4">Document Check Results Summary</h1>
-                <div class="text-lg {'text-green-600' if 'All checks passed' in header else 'text-amber-600'}">
-                    {header.strip()}
-                </div>
+    """Convert the text results into styled HTML."""
+    if not text_results:
+        return """
+            <div class="p-4 text-gray-600">
+                Results will appear here after processing...
             </div>
         """
-        
-        # Format each issue section
-        issues_html = ""
-        for section in issues:
-            if not section.strip():
-                continue
-                
-            lines = section.strip().split('\n')
-            title = lines[0]
-            content = '\n'.join(lines[1:])
+    
+    # Remove ANSI color codes
+    ansi_escape = re.compile(r'\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])')
+    text_results = ansi_escape.sub('', text_results)
+    
+    # Split into sections while preserving the header
+    sections = text_results.split('■')
+    header = sections[0].strip()
+    issues = sections[1:]
+    
+    # Format header
+    header_html = f"""
+        <div class="max-w-4xl mx-auto p-4 bg-white rounded-lg shadow-sm mb-6">
+            <h1 class="text-2xl font-bold text-gray-800 mb-4">Document Check Results Summary</h1>
+            <div class="text-lg {'text-green-600' if 'All checks passed' in header else 'text-amber-600'}">
+                {header.strip()}
+            </div>
+        </div>
+    """
+    
+    # Format each issue section
+    issues_html = ""
+    for section in issues:
+        if not section.strip():
+            continue
             
-            # Split content into description, how to fix, and examples
-            parts = content.split('Example Fix:')
-            description = parts[0]
-            examples = parts[1] if len(parts) > 1 else ""
+        # Split the section into title and content
+        parts = section.strip().split('\n', 1)
+        if len(parts) < 2:
+            continue
             
-            issues_html += f"""
-                <div class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden">
-                    <div class="bg-gray-50 px-6 py-4 border-b">
-                        <h2 class="text-lg font-semibold text-gray-800">{title.strip()}</h2>
-                    </div>
-                    
-                    <div class="px-6 py-4">
-                        <div class="text-gray-600 mb-4">
-                            {description.strip()}
-                        </div>
-                        
-                        <div class="bg-green-50 rounded p-4 mb-4">
-                            <div class="text-green-800">
-                                <span class="font-medium">How to fix:</span>
-                                {description.split('How to fix:')[1].strip() if 'How to fix:' in description else ''}
-                            </div>
-                        </div>
-                    """
+        title = parts[0].strip()
+        content = parts[1].strip()
+        
+        # Extract description and solution
+        description_parts = content.split('How to fix:', 1)
+        description = description_parts[0].strip()
+        solution = description_parts[1].split('Examples:', 1)[0].strip() if len(description_parts) > 1 else ""
+        
+        # Extract examples and issues
+        examples_match = re.search(r'Examples:\s*\n\s*❌[^✓]+✓[^•]+', content, re.MULTILINE | re.DOTALL)
+        examples_html = ""
+        if examples_match:
+            examples_text = examples_match.group(0)
+            incorrect = re.search(r'❌\s*([^✓]+)', examples_text)
+            correct = re.search(r'✓\s*([^•\n]+)', examples_text)
             
-            if examples:
-                examples_lines = examples.strip().split('\n')
-                issues_html += """
+            if incorrect and correct:
+                examples_html = f"""
                     <div class="mb-4">
                         <h3 class="font-medium text-gray-800 mb-2">Examples:</h3>
                         <div class="space-y-2 ml-4">
-                """
-                
-                for line in examples_lines:
-                    line = line.strip()
-                    if line.startswith('❌'):
-                        issues_html += f"""
                             <div class="text-red-600">
                                 <span class="inline-block w-4">❌</span>
-                                {line.replace('❌ Incorrect:', '').strip()}
+                                {incorrect.group(1).strip()}
                             </div>
-                        """
-                    elif line.startswith('✓'):
-                        issues_html += f"""
                             <div class="text-green-600">
                                 <span class="inline-block w-4">✓</span>
-                                {line.replace('✓ Correct  :', '').strip()}
-                            </div>
-                        """
-                    elif line.startswith('•'):
-                        issues_html += f"""
-                            <div class="text-gray-600 ml-4">
-                                • {line.replace('•', '').strip()}
+                                {correct.group(1).strip()}
                             </div>
-                        """
-                    elif 'more similar issues' in line:
-                        issues_html += f"""
-                            <div class="text-gray-500 italic mt-2">
-                                {line.strip()}
-                            </div>
-                        """
-                        
-                issues_html += """
                         </div>
                     </div>
                 """
+        
+        # Extract issues
+        issues_match = re.findall(r'•\s*([^•\n]+)', content)
+        issues_html_section = ""
+        if issues_match:
+            issues_html_section = """
+                <div class="mt-4">
+                    <h3 class="font-medium text-gray-800 mb-2">Issues found in your document:</h3>
+                    <div class="space-y-2">
+            """
+            for i, issue in enumerate(issues_match[:3]):
+                issues_html_section += f"""
+                    <div class="text-gray-600 ml-4">
+                        • {issue.strip()}
+                    </div>
+                """
+            if len(issues_match) > 3:
+                issues_html_section += f"""
+                    <div class="text-gray-500 italic ml-4">
+                        ...and {len(issues_match) - 3} more similar issues
+                    </div>
+                """
+            issues_html_section += "</div></div>"
+        
+        # Combine the section
+        issues_html += f"""
+            <div class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden">
+                <div class="bg-gray-50 px-6 py-4 border-b">
+                    <h2 class="text-lg font-semibold text-gray-800">{title}</h2>
+                </div>
                 
-            issues_html += """
+                <div class="px-6 py-4">
+                    <div class="text-gray-600 mb-4">
+                        {description}
                     </div>
+                    
+                    <div class="bg-green-50 rounded p-4 mb-4">
+                        <div class="text-green-800">
+                            <span class="font-medium">How to fix: </span>
+                            {solution}
+                        </div>
+                    </div>
+                    
+                    {examples_html}
+                    {issues_html_section}
                 </div>
-            """
-        
-        # Combine all HTML
-        full_html = f"""
-        <div class="mx-auto p-4" style="font-family: system-ui, -apple-system, sans-serif;">
-            <style>
-                .text-2xl {{ font-size: 1.5rem; }}
-                .text-lg {{ font-size: 1.125rem; }}
-                .font-bold {{ font-weight: 700; }}
-                .font-semibold {{ font-weight: 600; }}
-                .font-medium {{ font-weight: 500; }}
-                .text-gray-800 {{ color: #1f2937; }}
-                .text-gray-600 {{ color: #4b5563; }}
-                .text-gray-500 {{ color: #6b7280; }}
-                .text-green-600 {{ color: #059669; }}
-                .text-green-800 {{ color: #065f46; }}
-                .text-red-600 {{ color: #dc2626; }}
-                .text-amber-600 {{ color: #d97706; }}
-                .bg-white {{ background-color: #ffffff; }}
-                .bg-gray-50 {{ background-color: #f9fafb; }}
-                .bg-green-50 {{ background-color: #ecfdf5; }}
-                .rounded-lg {{ border-radius: 0.5rem; }}
-                .shadow-sm {{ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }}
-                .mb-6 {{ margin-bottom: 1.5rem; }}
-                .mb-4 {{ margin-bottom: 1rem; }}
-                .mb-2 {{ margin-bottom: 0.5rem; }}
-                .ml-4 {{ margin-left: 1rem; }}
-                .mt-2 {{ margin-top: 0.5rem; }}
-                .p-4 {{ padding: 1rem; }}
-                .px-6 {{ padding-left: 1.5rem; padding-right: 1.5rem; }}
-                .py-4 {{ padding-top: 1rem; padding-bottom: 1rem; }}
-                .space-y-2 > * + * {{ margin-top: 0.5rem; }}
-                .italic {{ font-style: italic; }}
-                .border-b {{ border-bottom: 1px solid #e5e7eb; }}
-                .overflow-hidden {{ overflow: hidden; }}
-            </style>
-            {header_html}
-            {issues_html}
-        </div>
+            </div>
         """
-        
-        return full_html
+    
+    # Final HTML with styling
+    full_html = f"""
+    <div class="mx-auto p-4" style="font-family: system-ui, -apple-system, sans-serif;">
+        <style>
+            .text-2xl {{ font-size: 1.5rem; }}
+            .text-lg {{ font-size: 1.125rem; }}
+            .font-bold {{ font-weight: 700; }}
+            .font-semibold {{ font-weight: 600; }}
+            .font-medium {{ font-weight: 500; }}
+            .text-gray-800 {{ color: #1f2937; }}
+            .text-gray-600 {{ color: #4b5563; }}
+            .text-gray-500 {{ color: #6b7280; }}
+            .text-green-600 {{ color: #059669; }}
+            .text-green-800 {{ color: #065f46; }}
+            .text-red-600 {{ color: #dc2626; }}
+            .text-amber-600 {{ color: #d97706; }}
+            .bg-white {{ background-color: #ffffff; }}
+            .bg-gray-50 {{ background-color: #f9fafb; }}
+            .bg-green-50 {{ background-color: #ecfdf5; }}
+            .rounded-lg {{ border-radius: 0.5rem; }}
+            .shadow-sm {{ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }}
+            .mb-6 {{ margin-bottom: 1.5rem; }}
+            .mb-4 {{ margin-bottom: 1rem; }}
+            .mb-2 {{ margin-bottom: 0.5rem; }}
+            .ml-4 {{ margin-left: 1rem; }}
+            .mt-2 {{ margin-top: 0.5rem; }}
+            .p-4 {{ padding: 1rem; }}
+            .px-6 {{ padding-left: 1.5rem; padding-right: 1.5rem; }}
+            .py-4 {{ padding-top: 1rem; padding-bottom: 1rem; }}
+            .space-y-2 > * + * {{ margin-top: 0.5rem; }}
+            .italic {{ font-style: italic; }}
+            .border-b {{ border-bottom: 1px solid #e5e7eb; }}
+            .overflow-hidden {{ overflow: hidden; }}
+        </style>
+        {header_html}
+        {issues_html}
+    </div>
+    """
+    
+    return full_html
 
     with gr.Blocks() as demo:
         gr.Markdown(