Update app.py

app.py

@@ -211,13 +211,13 @@ def create_gradio_interface() -> gr.Blocks:
     }
     
     .gr-input:focus, .gr-textarea:focus {
-        border-color: #4c4ce3 !important;
+        border-color: #3452DB !important;
         outline: none !important;
-        box-shadow: 0 0 0 2px rgba(76, 76, 227, 0.2) !important;
+        box-shadow: 0 0 0 2px rgba(52, 82, 219, 0.2) !important;
     }
     
     .gr-button {
-        background-color: #4c4ce3 !important;
+        background-color: #3452DB !important;
         color: white !important;
         border-radius: 6px !important;
         padding: 8px 16px !important;
@@ -227,7 +227,7 @@ def create_gradio_interface() -> gr.Blocks:
     }
     
     .gr-button:hover {
-        background-color: #3a3ab8 !important;
+        background-color: #2a41af !important;
     }
 
     .analysis-output {
@@ -236,12 +236,14 @@ def create_gradio_interface() -> gr.Blocks:
         border-radius: 8px;
         border: 1px solid #e0e5ff;
         margin-top: 20px;
+        font-family: 'Open Sans', sans-serif;
     }
 
     .analysis-output h1 {
         font-size: 1.5em;
         font-weight: bold;
         margin-bottom: 1em;
+        color: #1a1a1a;
     }
 
     .analysis-output h2 {
@@ -249,6 +251,9 @@ def create_gradio_interface() -> gr.Blocks:
         font-weight: 600;
         margin-top: 1.5em;
         margin-bottom: 0.5em;
+        color: #2a2a2a;
+        border-bottom: 2px solid #e0e5ff;
+        padding-bottom: 0.5em;
     }
 
     .analysis-output h3 {
@@ -256,20 +261,32 @@ def create_gradio_interface() -> gr.Blocks:
         font-weight: 600;
         margin-top: 1em;
         margin-bottom: 0.5em;
+        color: #3a3a3a;
     }
 
     .analysis-output ul {
         margin-left: 1.5em;
         margin-bottom: 1em;
+        list-style-type: none;
     }
 
     .analysis-output li {
-        margin-bottom: 0.5em;
+        margin-bottom: 0.8em;
+        position: relative;
+        line-height: 1.6;
+    }
+
+    .analysis-output li:before {
+        content: "•";
+        position: absolute;
+        left: -1.2em;
+        color: #3452DB;
     }
 
     .analysis-output p {
         margin-bottom: 1em;
         line-height: 1.6;
+        color: #4a4a4a;
     }
 
     .analysis-output code {
@@ -277,9 +294,56 @@ def create_gradio_interface() -> gr.Blocks:
         padding: 0.2em 0.4em;
         border-radius: 4px;
         font-size: 0.9em;
+        color: #3452DB;
+    }
+
+    /* Star rating styles */
+    .star-rating {
+        color: #3452DB;
+        letter-spacing: 2px;
+    }
+
+    /* Section dividers */
+    .section-divider {
+        border-top: 1px solid #e0e5ff;
+        margin: 2em 0;
+    }
+
+    /* Score indicators */
+    .score-indicator {
+        background: #f8f9ff;
+        padding: 0.5em 1em;
+        border-radius: 4px;
+        border-left: 4px solid #3452DB;
+        margin: 1em 0;
+    }
+
+    /* Special formatting for emojis */
+    .emoji-icon {
+        font-size: 1.2em;
+        margin-right: 0.5em;
+        vertical-align: middle;
     }
     """
 
+    def format_markdown_report(report_text: str) -> str:
+        """Format the report text with proper Markdown and styling"""
+        # Add custom CSS classes and formatting
+        report_text = report_text.replace("============================", "")
+        report_text = report_text.replace("-----------------------------", "")
+        
+        # Add styling to score sections
+        report_text = report_text.replace("[★★★★☆]", "<span class='star-rating'>★★★★☆</span>")
+        report_text = report_text.replace("📊", "<span class='emoji-icon'>📊</span>")
+        report_text = report_text.replace("🔍", "<span class='emoji-icon'>🔍</span>")
+        report_text = report_text.replace("📝", "<span class='emoji-icon'>📝</span>")
+        report_text = report_text.replace("🔄", "<span class='emoji-icon'>🔄</span>")
+        report_text = report_text.replace("💰", "<span class='emoji-icon'>💰</span>")
+        report_text = report_text.replace("📈", "<span class='emoji-icon'>📈</span>")
+        report_text = report_text.replace("🔧", "<span class='emoji-icon'>🔧</span>")
+        
+        return report_text
+
     async def run_analysis(api_key: str,
                          website_url: str,
                          product_category: str,
@@ -301,7 +365,7 @@ def create_gradio_interface() -> gr.Blocks:
                 product_category=product_category,
                 specific_product=specific_product if specific_product else None
             )
-            return result
+            return format_markdown_report(result)
         except Exception as e:
             return f"Error during analysis: {str(e)}"
 
@@ -343,8 +407,7 @@ def create_gradio_interface() -> gr.Blocks:
                 
                 analyze_button = gr.Button(
                     "Analyze Site",
-                    size="lg",
-                    variant="primary"
+                    size="lg"
                 )
             
             # Right column for output