Update app.py

app.py

@@ -45,21 +45,34 @@ st.markdown("""
     .carfind-logo {
         animation: bounceIn 0.6s ease-out;
     }
+    .car-spec-output {
+        font-family: "Segoe UI", sans-serif;
+        font-size: 14px;
+        background-color: #ffffff;
+        color: #003B6F;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+        border-left: 5px solid #0071BC;
+        line-height: 1.6;
+    }
     .spec-table {
         width: 100%;
         border-collapse: collapse;
-        margin-top: 20px;
+        margin-top: 15px;
+        margin-bottom: 20px;
+    }
+    .spec-table th, .spec-table td {
+        border: 1px solid #ddd;
+        padding: 10px 12px;
+        text-align: left;
     }
     .spec-table th {
         background-color: #0071BC;
         color: white;
-        padding: 10px;
-        text-align: left;
     }
     .spec-table td {
-        padding: 10px;
-        border: 1px solid #ccc;
-        background-color: #f9f9f9;
+        background-color: #f7f9fc;
     }
     .icon {
         width: 16px;
@@ -213,23 +226,23 @@ with tab2:
                 cleaned_message = re.sub(r'\*\*(.*?)\*\*', r'<strong>\1</strong>', assistant_message)
                 cleaned_message = cleaned_message.replace("###", "<h4 style='margin-bottom: 10px;'>").replace("\n", "<br>")
 
-                # Replace key labels with icons
-                cleaned_message = cleaned_message.replace("Transmission", "<img src='https://cdn-icons-png.flaticon.com/128/3448/3448449.png' class='icon'/> Transmission")
-                cleaned_message = cleaned_message.replace("Engine Size", "<img src='https://cdn-icons-png.flaticon.com/128/888/888879.png' class='icon'/> Engine Size")
+                # Extract markdown table (if present)
+                if '|' in cleaned_message:
+                    lines = cleaned_message.split('<br>')
+                    html_table = """<table class='spec-table'>"""
+                    for line in lines:
+                        if '|' in line:
+                            cells = line.strip('|').split('|')
+                            row_html = '<tr>' + ''.join(f'<td>{cell.strip()}</td>' for cell in cells) + '</tr>'
+                            html_table += row_html
+                        else:
+                            html_table += f"</table><p>{line}</p><table class='spec-table'>"
+                    html_table += "</table>"
+                    cleaned_message = html_table
 
                 st.success("✅ Identification Complete")
                 st.markdown(f"""
-                    <div style='
-                        font-family: "Segoe UI", sans-serif;
-                        background-color: #ffffff;
-                        color: #003B6F;
-                        padding: 24px;
-                        border-radius: 12px;
-                        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-                        border-left: 5px solid #0071BC;
-                        font-size: 15.5px;
-                        line-height: 1.7;
-                    '>
+                    <div class='car-spec-output'>
                         {cleaned_message}
                     </div>
                 """, unsafe_allow_html=True)