Update app.py

app.py

@@ -2355,10 +2355,11 @@ def create_interface():
         issues_count_match = re.search(r'Found (\d+) categories', header)
         issues_count = issues_count_match.group(1) if issues_count_match else len(issues)
         
-        # Format header
+        # Format header with title
         header_html = f"""
             <div class="max-w-4xl mx-auto p-4 bg-white rounded-lg shadow-sm mb-6">
-                <div class="text-lg {'text-green-600' if 'All checks passed' in header else 'text-amber-600'}">
+                <h1 class="text-2xl font-bold mb-4">Document Check Results Summary</h1>
+                <div class="text-lg text-amber-600">
                     Found {issues_count} categories of issues that need attention:
                 </div>
             </div>
@@ -2370,7 +2371,6 @@ def create_interface():
             if not section.strip():
                 continue
                 
-            # Split the section into title and content
             parts = section.strip().split('\n', 1)
             if len(parts) < 2:
                 continue
@@ -2381,31 +2381,29 @@ def create_interface():
             # 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 ""
+            solution = description_parts[1].split('Example Fix:', 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_match = re.search(r'Example Fix:\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)
+                incorrect = re.search(r'❌\s*Incorrect:\s*([^✓]+)', examples_text)
+                correct = re.search(r'✓\s*Correct:\s*([^•\n]+)', examples_text)
                 
                 if incorrect and correct:
                     examples_html = f"""
                         <div class="mb-4">
-                            <h3 class="font-medium text-gray-800 mb-2">Examples:</h3>
+                            <h3 class="font-medium text-gray-800 mb-2">Example Fix:</h3>
                             <div class="space-y-2 ml-4">
                                 <div class="text-red-600">
-                                    <span class="inline-block w-4">❌</span>
-                                    Incorrect:
+                                    ❌ Incorrect:
                                 </div>
                                 <div class="text-red-600 ml-8">
                                     {incorrect.group(1).strip()}
                                 </div>
-                                <div class="text-green-600">
-                                    <span class="inline-block w-4">✓</span>
-                                    Correct:
+                                <div class="text-green-600 mt-2">
+                                    ✓ Correct:
                                 </div>
                                 <div class="text-green-600 ml-8">
                                     {correct.group(1).strip()}
@@ -2421,21 +2419,17 @@ def create_interface():
                 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">
+                        <ul class="list-none space-y-2">
                 """
-                for i, issue in enumerate(issues_match[:3]):
+                for issue in issues_match[:3]:
                     issues_html_section += f"""
-                        <div class="text-gray-600 ml-4">
-                            • {issue.strip()}
-                        </div>
+                        <li class="text-gray-600 ml-4">• {issue.strip()}</li>
                     """
                 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>
+                        <li class="text-gray-500 italic ml-4">...and {len(issues_match) - 3} more similar issues</li>
                     """
-                issues_html_section += "</div></div>"
+                issues_html_section += "</ul></div>"
             
             # Combine the section
             issues_html += f"""
@@ -2466,7 +2460,7 @@ def create_interface():
         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-2xl {{ font-size: 1.5rem; line-height: 2rem; }}
                 .text-lg {{ font-size: 1.125rem; }}
                 .font-bold {{ font-weight: 700; }}
                 .font-semibold {{ font-weight: 600; }}
@@ -2487,7 +2481,9 @@ def create_interface():
                 .mb-4 {{ margin-bottom: 1rem; }}
                 .mb-2 {{ margin-bottom: 0.5rem; }}
                 .ml-4 {{ margin-left: 1rem; }}
+                .ml-8 {{ margin-left: 2rem; }}
                 .mt-2 {{ margin-top: 0.5rem; }}
+                .mt-4 {{ margin-top: 1rem; }}
                 .p-4 {{ padding: 1rem; }}
                 .px-6 {{ padding-left: 1.5rem; padding-right: 1.5rem; }}
                 .py-4 {{ padding-top: 1rem; padding-bottom: 1rem; }}
@@ -2495,6 +2491,7 @@ def create_interface():
                 .italic {{ font-style: italic; }}
                 .border-b {{ border-bottom: 1px solid #e5e7eb; }}
                 .overflow-hidden {{ overflow: hidden; }}
+                .list-none {{ list-style-type: none; }}
             </style>
             {header_html}
             {issues_html}
@@ -2506,9 +2503,9 @@ def create_interface():
     with gr.Blocks() as demo:
         gr.Markdown(
             """
-            # 📑 FAA Document Checker Tool
+            <h1 style="color: #ea580c; font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">📑 FAA Document Checker Tool</h1>
             
-            ### Purpose
+            <h2 style="color: #ea580c; font-size: 1.25rem; font-weight: 600; margin-top: 1rem;">Purpose</h2>
             This tool checks Word documents for compliance with U.S. federal documentation standards and guidelines, including:
             
             - GPO Style Manual requirements
@@ -2516,7 +2513,7 @@ def create_interface():
             - FAA Orders:
             - Plain Language Guidelines per Plain Writing Act of 2010
             
-            ### Validation Checks Include:
+            <h2 style="color: #ea580c; font-size: 1.25rem; font-weight: 600; margin-top: 1rem;">Validation Checks Include:</h2>
             - Required heading structure and organization
             - Standard terminology usage
             - Proper acronym definitions and usage
@@ -2527,7 +2524,7 @@ def create_interface():
             - Spacing and punctuation
             - Placeholder content detection
             
-            ### How to Use
+            <h2 style="color: #ea580c; font-size: 1.25rem; font-weight: 600; margin-top: 1rem;">How to Use</h2>
             1. Upload your Word document (.docx format)
             2. Select the document type
             3. Click "Check Document"