Update app.py

app.py

@@ -6,6 +6,7 @@ import os
 import uuid
 import firebase_admin
 from firebase_admin import credentials, firestore
+import re
 
 # 🔐 Firebase setup
 if not firebase_admin._apps:
@@ -44,6 +45,27 @@ st.markdown("""
     .carfind-logo {
         animation: bounceIn 0.6s ease-out;
     }
+    .spec-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 20px;
+    }
+    .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;
+    }
+    .icon {
+        width: 16px;
+        vertical-align: middle;
+        margin-right: 6px;
+    }
     </style>
 """, unsafe_allow_html=True)
 
@@ -96,7 +118,7 @@ def display_chat_history():
                 unsafe_allow_html=True
             )
 
-# 🧭 Tabs: AI Chat | Car Identifier
+# 🛍 Tabs: AI Chat | Car Identifier
 tab1, tab2 = st.tabs(["AI Chat", "What car is that?"])
 
 # 🤖 AI Chat Tab
@@ -188,19 +210,27 @@ with tab2:
                 messages = client.beta.threads.messages.list(thread_id=image_thread.id)
                 assistant_message = messages.data[0].content[0].text.value
 
+                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")
+
                 st.success("✅ Identification Complete")
                 st.markdown(f"""
                     <div style='
-                        font-size: 15px;
-                        background-color: #1a1f25;
-                        color: #ffffff;
-                        padding: 18px 20px;
-                        border-radius: 10px;
-                        border-left: 6px solid #4CAF50;
-                        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-                        line-height: 1.6;
+                        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;
                     '>
-                        {assistant_message}
+                        {cleaned_message}
                     </div>
                 """, unsafe_allow_html=True)