Update app.py

app.py

@@ -81,12 +81,15 @@ def analyze_home_photos(images, timeframe, additional_details, api_key):
 ## FORMAT YOUR RESPONSE LIKE THIS:
 
 ### 📋 KEY RECOMMENDATIONS SUMMARY
-Begin with a brief introduction that states: "Here's a concise summary of the top improvements to maximize your home's value. Detailed explanations, specific costs, and a complete timeline can be found in the sections below."
+Begin with this exact text: "**HOME VALUE MAXIMIZER SUMMARY**"
 
-Then, list 5 bullet points of the MOST IMPACTFUL improvements that will increase the property's value. Each point should be 1-2 sentences only and include:
-- The specific issue identified
-- The recommended solution
-- The estimated value increase or ROI
+Then add this line: "Below are the top improvements to maximize your home's value. See detailed sections for specific costs, instructions, and timeline."
+
+Then, list 5 bullet points of the MOST IMPACTFUL improvements that will increase the property's value. For each bullet:
+- Make the first sentence **bold**
+- Include the specific issue identified
+- Include the recommended solution
+- Include the estimated value increase or ROI
 
 ### 🌟 TOP PRICE-MAXIMIZING PRIORITIES
 Present the 3-4 MOST IMPACTFUL improvements first, formatted as a clear list. Each item MUST include:
@@ -213,54 +216,55 @@ def calculate_cost(token_usage):
         "total_cost": total_cost
     }
 
-# Main application - more compact header
+# Custom CSS to fix all styling issues including text visibility
 st.markdown("""
 <style>
-    /* Make the title and header compact */
-    .main .block-container {padding-top: 1rem !important;}
-    h1 {margin-top: 0 !important; margin-bottom: 0.2rem !important; font-size: 1.8rem !important;}
+    /* Override streamlit's default padding */
+    .main .block-container {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important;
+        max-width: 100% !important;
+    }
     
-    /* Remove spacing after description */
-    .compact-text {margin-bottom: 0.5rem !important; line-height: 1.2 !important;}
+    /* Fix text visibility issues - ensure good contrast */
+    .upload-text {
+        color: #262730 !important;
+        background-color: transparent !important;
+        font-weight: 500 !important;
+    }
     
-    /* Reduced column gap */
-    .st-emotion-cache-ocqkz7 {gap: 1rem !important;}
+    /* Make the title and header area more compact */
+    .title-area {
+        margin: 0 !important;
+        padding: 0 !important;
+        margin-bottom: 0.5rem !important;
+    }
     
-    /* Remove default margin from subheadings */
-    .stSubheader {margin-bottom: 0.5rem !important;}
-</style>
-
-<h1>Home Value Maximizer 🏡</h1>
-<div class="compact-text">
-📸 Upload photos → 💰 Get specific improvements → 🏡 Maximize selling price
-</div>
-""", unsafe_allow_html=True)
-
-# VERY compact instructions - inline with columns
-col_inst_1, col_inst_2, col_inst_3 = st.columns(3)
-with col_inst_1:
-    st.markdown("<small>1. Upload multiple photos of your home</small>", unsafe_allow_html=True)
-with col_inst_2:
-    st.markdown("<small>2. Enter your selling timeline & preferences</small>", unsafe_allow_html=True)
-with col_inst_3:
-    st.markdown("<small>3. Click 'Analyze My Home' for detailed strategies</small>", unsafe_allow_html=True)
-
-# Enhanced CSS for better formatting of the recommendations
-st.markdown("""
-<style>
-    .main .block-container {padding-bottom: 5rem !important; max-width: 100% !important;}
-    
-    /* Responsive styling */
-    @media (max-width: 640px) {
-        .main .block-container {padding: 1rem 0.5rem !important;}
-        h1 {font-size: 1.5rem !important;}
-        h2, h3 {font-size: 1.2rem !important;}
-        .stButton button {width: 100% !important; height: 3rem !important;}
+    /* Make header more compact */
+    .stMarkdown h1 {
+        margin-top: 0 !important;
+        margin-bottom: 0.2rem !important;
+        font-size: 1.8rem !important;
+        padding: 0 !important;
     }
     
-    /* Remove extra space */
-    .st-emotion-cache-16txtl3 p {
-        margin-bottom: 0.5rem;
+    /* Steps styling */
+    .steps-container {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 1rem !important;
+        padding: 0 !important;
+    }
+    
+    .step-item {
+        flex: 1;
+        padding: 0.3rem 0.5rem;
+        font-size: 0.85rem;
+        color: #262730;
+        background-color: #f0f2f6;
+        border-radius: 4px;
+        margin-right: 0.5rem;
+        text-align: center;
     }
     
     /* Enhanced section styling */
@@ -272,11 +276,26 @@ st.markdown("""
         color: white;
     }
     
-    /* Summary section */
+    /* Style for summary section */
     .stMarkdown h3:contains("KEY RECOMMENDATIONS SUMMARY") {
         background-color: #2196f3;
     }
     
+    /* Summary content styling */
+    .summary-title {
+        font-size: 1.2rem;
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+        color: #2196f3;
+    }
+    
+    .summary-subtitle {
+        font-size: 0.9rem;
+        font-weight: 500;
+        margin-bottom: 1rem;
+        color: #424242;
+    }
+    
     /* Priority recommendations */
     .stMarkdown h3:contains("TOP PRICE") {
         background-color: #1e88e5;
@@ -312,7 +331,7 @@ st.markdown("""
         background-color: #8e24aa;
     }
     
-    /* List styling */
+    /* Style for bullet points in summary */
     .stMarkdown ul li {
         margin-bottom: 0.75rem;
         line-height: 1.6;
@@ -320,7 +339,7 @@ st.markdown("""
     
     /* Bold text */
     .stMarkdown strong {
-        color: #263238;
+        color: #262730;
         font-weight: 700;
     }
     
@@ -341,9 +360,42 @@ st.markdown("""
         font-size: 0.85rem;
         margin-top: 1rem;
     }
+    
+    /* Blue background for summary section */
+    .summary-section {
+        background-color: #e3f2fd;
+        border-radius: 8px;
+        padding: 1rem;
+        margin-bottom: 1.5rem;
+        border-left: 4px solid #2196f3;
+    }
+    
+    /* Custom header style for subheaders */
+    .custom-subheader {
+        background-color: #f5f5f5;
+        padding: 10px;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        color: #262730;
+        font-weight: 600;
+    }
 </style>
 """, unsafe_allow_html=True)
 
+# Custom compact header
+st.markdown("""
+<div class="title-area">
+    <h1>Home Value Maximizer 🏡</h1>
+    <div class="upload-text">📸 Upload photos → 💰 Get specific improvements → 🏡 Maximize selling price</div>
+</div>
+
+<div class="steps-container">
+    <div class="step-item">1. Upload multiple photos of your home</div>
+    <div class="step-item">2. Enter your selling timeline & preferences</div>
+    <div class="step-item">3. Click 'Analyze My Home' for detailed strategies</div>
+</div>
+""", unsafe_allow_html=True)
+
 # API Key input if not in secrets
 if not st.session_state["api_key"]:
     st.session_state["api_key"] = st.text_input("Enter your OpenAI API Key", type="password")
@@ -353,7 +405,8 @@ if not st.session_state["api_key"]:
 col1, col2 = st.columns(2)
 
 with col1:
-    st.subheader("📸 Upload Home Photos")
+    # Custom subheader with background
+    st.markdown('<div class="custom-subheader">📸 Upload Home Photos</div>', unsafe_allow_html=True)
     uploaded_files = st.file_uploader("Upload photos of different areas of your home", 
                                      accept_multiple_files=True, 
                                      type=["jpg", "jpeg", "png"])
@@ -382,7 +435,8 @@ with col1:
                 with image_cols[i % min(3, len(images))]:
                     st.image(img, width=150, caption=f"Image {i+1}")
     
-    st.subheader("🏠 Selling Timeline & Details")
+    # Custom subheader with background
+    st.markdown('<div class="custom-subheader">🏠 Selling Timeline & Details</div>', unsafe_allow_html=True)
     
     # Expanded selling timeline options
     timeframe = st.radio("When do you plan to sell your home?",
@@ -392,8 +446,8 @@ with col1:
                                      placeholder="Describe your home, local market conditions, target buyers, or any specific concerns you have about the selling process.",
                                      height=100)
     
-    # Additional preferences
-    st.subheader("💰 Budget & Preferences")
+    # Additional preferences with custom subheader
+    st.markdown('<div class="custom-subheader">💰 Budget & Preferences</div>', unsafe_allow_html=True)
     
     max_budget = st.slider("Maximum budget for improvements ($)", 
                          min_value=1000, 
@@ -425,7 +479,8 @@ with col1:
         st.warning("Please enter your OpenAI API key to enable analysis.")
 
 with col2:
-    st.subheader("💡 Comprehensive Selling Strategies")
+    # Custom subheader with background
+    st.markdown('<div class="custom-subheader">💡 Comprehensive Selling Strategies</div>', unsafe_allow_html=True)
     
     # Process and display analysis results
     if analyze_button or "analysis_result" in st.session_state:
@@ -470,7 +525,24 @@ with col2:
         
         # Display results
         if "analysis_result" in st.session_state:
+            # Process the output to enhance summary formatting
             result = st.session_state["analysis_result"]
+            
+            # Check if we need to style the summary section
+            if "**HOME VALUE MAXIMIZER SUMMARY**" in result:
+                # Split the result to find the summary section
+                parts = result.split("### 📋 KEY RECOMMENDATIONS SUMMARY", 1)
+                if len(parts) > 1:
+                    before_summary = parts[0]
+                    rest_parts = parts[1].split("### 🌟", 1)
+                    if len(rest_parts) > 1:
+                        summary_content = rest_parts[0]
+                        after_summary = "### 🌟" + rest_parts[1]
+                        
+                        # Apply custom formatting to the summary
+                        result = before_summary + '<div class="summary-section">' + summary_content + '</div>' + after_summary
+            
+            # Display the enhanced result
             st.markdown(f'<div class="results-container">{result}</div>', unsafe_allow_html=True)
             
             # Show token usage and cost information