Update app.py

app.py

@@ -47,24 +47,25 @@ st.markdown("""
     }
     .car-spec-output {
         font-family: "Segoe UI", sans-serif;
-        font-size: 14px;
+        font-size: 10px;
         background-color: #ffffff;
         color: #003B6F;
-        padding: 20px;
+        padding: 18px;
         border-radius: 10px;
         box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-        border-left: 5px solid #0071BC;
-        line-height: 1.6;
+        border-left: 4px solid #0071BC;
+        line-height: 1.5;
     }
     .spec-table {
         width: 100%;
         border-collapse: collapse;
-        margin-top: 15px;
-        margin-bottom: 20px;
+        margin-top: 12px;
+        margin-bottom: 16px;
+        font-size: 10px;
     }
     .spec-table th, .spec-table td {
         border: 1px solid #ddd;
-        padding: 10px 12px;
+        padding: 6px 8px;
         text-align: left;
     }
     .spec-table th {
@@ -75,9 +76,9 @@ st.markdown("""
         background-color: #f7f9fc;
     }
     .icon {
-        width: 16px;
+        width: 14px;
         vertical-align: middle;
-        margin-right: 6px;
+        margin-right: 5px;
     }
     </style>
 """, unsafe_allow_html=True)
@@ -85,13 +86,14 @@ st.markdown("""
 st.markdown("""
     <div style='text-align: center; margin-top: 20px; margin-bottom: -10px;'>
         <span style='display: inline-flex; align-items: center; gap: 8px;'>
-            <img src='https://www.carfind.co.za/images/Carfind-Icon.svg' width='30' class='carfind-logo'/>
-            <span style='font-size: 14px; color: gray;'>Powered by Carfind</span>
+            <img src='https://www.carfind.co.za/images/Carfind-Icon.svg' width='28' class='carfind-logo'/>
+            <span style='font-size: 12px; color: gray;'>Powered by Carfind</span>
         </span>
     </div>
 """, unsafe_allow_html=True)
 
-# 🔁 Firebase Chat Functions
+# Firebase Chat Functions
+
 def get_or_create_thread_id():
     doc_ref = db.collection("users").document(user_id)
     doc = doc_ref.get()
@@ -113,33 +115,23 @@ def save_message(role, content):
     })
 
 def display_chat_history():
-    messages = db.collection("users").document(user_id).collection("messages") \
-        .order_by("timestamp").stream()
-
-    assistant_icon_html = "<img src='https://www.carfind.co.za/images/Carfind-Icon.svg' width='22' style='vertical-align:middle;'/>"
+    messages = db.collection("users").document(user_id).collection("messages").order_by("timestamp").stream()
+    assistant_icon_html = "<img src='https://www.carfind.co.za/images/Carfind-Icon.svg' width='20' style='vertical-align:middle;'/>"
     for msg in list(messages)[::-1]:
         data = msg.to_dict()
         if data["role"] == "user":
-            st.markdown(
-                f"<div class='stChatMessage' data-testid='stChatMessage-user'>"
-                f"👤 <strong>You:</strong> {data['content']}</div>", unsafe_allow_html=True
-            )
+            st.markdown(f"<div class='stChatMessage' data-testid='stChatMessage-user'>👤 <strong>You:</strong> {data['content']}</div>", unsafe_allow_html=True)
         else:
-            st.markdown(
-                f"<div class='stChatMessage' data-testid='stChatMessage-assistant'>"
-                f"{assistant_icon_html} <strong>Carfind Assistant:</strong> {data['content']}</div>",
-                unsafe_allow_html=True
-            )
+            st.markdown(f"<div class='stChatMessage' data-testid='stChatMessage-assistant'>{assistant_icon_html} <strong>Carfind Assistant:</strong> {data['content']}</div>", 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
+# AI Chat Tab
 with tab1:
     input_col, clear_col = st.columns([9, 1])
     with input_col:
         user_input = st.chat_input("Type your message here...")
-
     with clear_col:
         if st.button("🗑️", key="clear-chat", help="Clear Chat"):
             try:
@@ -151,14 +143,12 @@ with tab1:
                 st.rerun()
             except Exception as e:
                 st.error(f"Failed to clear chat: {e}")
-
     thread_id = get_or_create_thread_id()
     display_chat_history()
 
     if user_input:
         client.beta.threads.messages.create(thread_id=thread_id, role="user", content=user_input)
         save_message("user", user_input)
-
         with st.spinner("Thinking and typing... 💭"):
             run = client.beta.threads.runs.create(thread_id=thread_id, assistant_id=assistant_id)
             while True:
@@ -166,7 +156,6 @@ with tab1:
                 if run_status.status == "completed":
                     break
                 time.sleep(1)
-
         messages_response = client.beta.threads.messages.list(thread_id=thread_id)
         latest_response = sorted(messages_response.data, key=lambda x: x.created_at)[-1]
         assistant_message = latest_response.content[0].text.value
@@ -174,78 +163,50 @@ with tab1:
         time.sleep(0.5)
         st.rerun()
 
-# 🚗 "What car is that?" Tab
+# Car Image Tab
 with tab2:
     uploaded_image = st.file_uploader("Upload an image of a car and let Ai identify it for you", type=["jpg", "jpeg", "png"])
-
     if uploaded_image:
         col1, col2 = st.columns([1.2, 1.8])
-
         with col1:
             image = Image.open(uploaded_image)
             st.image(image, caption="Uploaded Image", use_container_width=True)
-
         with col2:
             try:
                 image_thread = client.beta.threads.create()
                 file_response = client.files.create(file=uploaded_image, purpose="assistants")
-
                 client.beta.threads.messages.create(
                     thread_id=image_thread.id,
                     role="user",
                     content=[
-                        {
-                            "type": "image_file",
-                            "image_file": {"file_id": file_response.id}
-                        },
-                        {
-                            "type": "text",
-                            "text": "Please identify this car from the image and include a full vehicle specification table, a short overview of the car, and who it's recommended for."
-                        }
+                        {"type": "image_file", "image_file": {"file_id": file_response.id}},
+                        {"type": "text", "text": "Please identify this car from the image and include a clean HTML-styled specification table without Year or Mileage fields, and avoid markdown or dotted lines."}
                     ]
                 )
-
-                run = client.beta.threads.runs.create(
-                    thread_id=image_thread.id,
-                    assistant_id=assistant_id
-                )
-
+                run = client.beta.threads.runs.create(thread_id=image_thread.id, assistant_id=assistant_id)
                 with st.spinner("🔍 Analyzing image and identifying the car..."):
                     while True:
-                        run_status = client.beta.threads.runs.retrieve(
-                            thread_id=image_thread.id,
-                            run_id=run.id
-                        )
+                        run_status = client.beta.threads.runs.retrieve(thread_id=image_thread.id, run_id=run.id)
                         if run_status.status == "completed":
                             break
                         time.sleep(1)
-
                 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>")
-
-                # Extract markdown table (if present)
                 if '|' in cleaned_message:
                     lines = cleaned_message.split('<br>')
-                    html_table = """<table class='spec-table'>"""
+                    html_table = "<table class='spec-table'>"
                     for line in lines:
-                        if '|' in line:
+                        if '|' in line and '---' not in line and 'Year' not in line and 'Mileage' not 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:
+                        elif '|' not in line:
                             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 class='car-spec-output'>
-                        {cleaned_message}
-                    </div>
-                """, unsafe_allow_html=True)
-
+                st.markdown(f"<div class='car-spec-output'>{cleaned_message}</div>", unsafe_allow_html=True)
             except Exception as e:
                 st.error(f"❌ Error during image analysis: {str(e)}")