Update app.py

app.py

@@ -146,7 +146,6 @@ Always add this text at the beginning:
     }
     
     try:
-        # API call takes time, so we don't need to add artificial delay
         response = requests.post(API_URL, headers=headers, json=payload, timeout=90)
         
         if response.status_code == 200:
@@ -194,261 +193,6 @@ def calculate_cost(token_usage):
         "total_cost": total_cost
     }
 
-# House transformation animation
-house_animation_html = """
-<style>
-    /* House Animation Container */
-    .house-animation-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 250px;
-        overflow: hidden;
-        margin: 20px 0;
-    }
-    
-    /* House SVG Styling */
-    .house-svg {
-        width: 200px;
-        height: 200px;
-    }
-    
-    /* House Parts */
-    .house-base {
-        fill: #e0e0e0;
-        transition: fill 2s ease-in-out;
-        animation: colorChange 4s infinite alternate;
-    }
-    
-    .house-roof {
-        fill: #b71c1c;
-        transition: fill 2s ease-in-out;
-        animation: roofColorChange 4s infinite alternate;
-    }
-    
-    .house-door {
-        fill: #5d4037;
-        transition: fill 2s ease-in-out;
-        animation: doorAnimate 4s infinite alternate;
-    }
-    
-    .house-window {
-        fill: #bbdefb;
-        transition: fill 2s ease-in-out;
-        animation: windowLight 4s infinite alternate;
-    }
-    
-    /* Animation for the entire house */
-    .house-container {
-        animation: houseGrow 1s infinite alternate;
-        transform-origin: center bottom;
-    }
-    
-    /* Analysis text animation */
-    .analysis-text {
-        text-align: center;
-        font-size: 18px;
-        font-weight: bold;
-        margin-top: 20px;
-        animation: textFade 2s infinite alternate;
-        color: #1976d2;
-    }
-    
-    /* Workers and tools animations */
-    .worker {
-        fill: #795548;
-        animation: workerMove 4s infinite alternate;
-    }
-    
-    .ladder {
-        fill: #8d6e63;
-        animation: ladderMove 4s infinite alternate-reverse;
-    }
-    
-    .paint-brush {
-        fill: #ff9800;
-        animation: toolAnimate 3s infinite;
-    }
-    
-    /* Improvement elements appear one by one */
-    .improvement {
-        opacity: 0;
-        animation: fadeIn 10s forwards;
-    }
-    
-    .improvement-1 { animation-delay: 1s; }
-    .improvement-2 { animation-delay: 3s; }
-    .improvement-3 { animation-delay: 5s; }
-    .improvement-4 { animation-delay: 7s; }
-    
-    /* Keyframes for animations */
-    @keyframes colorChange {
-        0% { fill: #e0e0e0; }
-        50% { fill: #f5f5f5; }
-        100% { fill: #eeeeee; }
-    }
-    
-    @keyframes roofColorChange {
-        0% { fill: #b71c1c; }
-        50% { fill: #c62828; }
-        100% { fill: #d32f2f; }
-    }
-    
-    @keyframes doorAnimate {
-        0% { fill: #5d4037; }
-        50% { fill: #6d4c41; transform: scaleY(1); }
-        100% { fill: #795548; transform: scaleY(1.02); }
-    }
-    
-    @keyframes windowLight {
-        0% { fill: #bbdefb; }
-        50% { fill: #90caf9; }
-        100% { fill: #64b5f6; }
-    }
-    
-    @keyframes houseGrow {
-        0% { transform: scale(1); }
-        100% { transform: scale(1.02); }
-    }
-    
-    @keyframes textFade {
-        0% { opacity: 0.7; }
-        100% { opacity: 1; }
-    }
-    
-    @keyframes workerMove {
-        0% { transform: translateX(0); }
-        100% { transform: translateX(30px); }
-    }
-    
-    @keyframes ladderMove {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(5deg); }
-    }
-    
-    @keyframes toolAnimate {
-        0% { transform: rotate(0deg); }
-        50% { transform: rotate(-20deg); }
-        100% { transform: rotate(0deg); }
-    }
-    
-    @keyframes fadeIn {
-        0% { opacity: 0; }
-        50% { opacity: 0.5; }
-        100% { opacity: 1; }
-    }
-    
-    /* Loading dots animation */
-    .loading-dots:after {
-        content: '.';
-        animation: dots 1.5s steps(5, end) infinite;
-    }
-    
-    @keyframes dots {
-        0%, 20% { content: '.'; }
-        40% { content: '..'; }
-        60% { content: '...'; }
-        80%, 100% { content: ''; }
-    }
-    
-    /* Progress bar */
-    .progress-container {
-        width: 100%;
-        background-color: #f1f1f1;
-        border-radius: 5px;
-        margin-top: 20px;
-    }
-    
-    .progress-bar {
-        width: 1%;
-        height: 10px;
-        background-color: #4CAF50;
-        border-radius: 5px;
-        animation: progressAnimate 20s linear;
-    }
-    
-    @keyframes progressAnimate {
-        0% { width: 5%; }
-        20% { width: 25%; }
-        50% { width: 55%; }
-        80% { width: 80%; }
-        100% { width: 100%; }
-    }
-    
-    /* Analysis phases */
-    .phase {
-        opacity: 0;
-        animation: phaseShow 20s linear forwards;
-        margin: 5px 0;
-        font-size: 14px;
-    }
-    
-    .phase-1 { animation-delay: 0s; }
-    .phase-2 { animation-delay: 5s; }
-    .phase-3 { animation-delay: 10s; }
-    .phase-4 { animation-delay: 15s; }
-    
-    @keyframes phaseShow {
-        0% { opacity: 0; }
-        5% { opacity: 1; }
-        20% { opacity: 1; }
-        25% { opacity: 0.4; }
-        100% { opacity: 0.4; }
-    }
-</style>
-
-<div class="house-animation-container">
-    <div>
-        <svg class="house-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-            <!-- House Container -->
-            <g class="house-container">
-                <!-- House Base -->
-                <rect class="house-base" x="40" y="80" width="120" height="90" rx="2" />
-                
-                <!-- House Roof -->
-                <polygon class="house-roof" points="30,80 100,30 170,80" />
-                
-                <!-- Door -->
-                <rect class="house-door" x="85" y="120" width="30" height="50" rx="2" />
-                <circle fill="#ffd54f" cx="105" cy="145" r="2" /> <!-- Doorknob -->
-                
-                <!-- Windows -->
-                <rect class="house-window" x="55" y="100" width="20" height="20" rx="2" />
-                <rect class="house-window" x="125" y="100" width="20" height="20" rx="2" />
-                <line x1="65" y1="100" x2="65" y2="120" stroke="#bdbdbd" stroke-width="1" />
-                <line x1="55" y1="110" x2="75" y2="110" stroke="#bdbdbd" stroke-width="1" />
-                <line x1="135" y1="100" x2="135" y2="120" stroke="#bdbdbd" stroke-width="1" />
-                <line x1="125" y1="110" x2="145" y2="110" stroke="#bdbdbd" stroke-width="1" />
-                
-                <!-- Improvements Animation Elements -->
-                <rect class="improvement improvement-1" x="30" y="170" width="140" height="5" fill="#8d6e63" /> <!-- New walkway -->
-                <rect class="improvement improvement-2" x="30" y="77" width="140" height="3" fill="#0288d1" /> <!-- New gutters -->
-                <circle class="improvement improvement-3" cx="160" cy="150" r="10" fill="#81c784" /> <!-- New plants -->
-                <circle class="improvement improvement-4" cx="40" cy="150" r="10" fill="#81c784" /> <!-- New plants -->
-                
-                <!-- Workers -->
-                <circle class="worker" cx="50" cy="140" r="5" />
-                <rect class="ladder" x="150" y="100" width="5" height="40" />
-                <rect class="paint-brush" x="155" y="110" width="10" height="2" transform="rotate(45, 155, 110)" />
-            </g>
-        </svg>
-        
-        <div class="analysis-text">
-            <span class="loading-dots">Analyzing your home</span>
-        </div>
-        
-        <div class="progress-container">
-            <div class="progress-bar"></div>
-        </div>
-        
-        <div class="phase phase-1">✓ Identifying property features...</div>
-        <div class="phase phase-2">✓ Evaluating improvement opportunities...</div>
-        <div class="phase phase-3">✓ Calculating ROI potential...</div>
-        <div class="phase phase-4">✓ Preparing final recommendations...</div>
-    </div>
-</div>
-"""
-
 # Main application
 st.title("Home Value Maximizer 🏡")
 
@@ -654,24 +398,45 @@ with col2:
     if analyze_button or "analysis_result" in st.session_state:
         # Process analysis if button pressed
         if analyze_button:
-            # Display animated house while processing
-            st.markdown(house_animation_html, unsafe_allow_html=True)
-            
-            with st.spinner(""):  # Empty spinner text because we're using our custom animation
+            # Simple loading indicator using pure Streamlit - no HTML, JS or CSS
+            with st.spinner("🏡 Analyzing your home photos..."):
+                # Show a progress bar
+                progress_bar = st.progress(0)
+                
+                # Show the analysis steps with native Streamlit components
+                steps_placeholder = st.empty()
+                steps_placeholder.info("Step 1: Identifying property features...")
+                progress_bar.progress(25)
+                time.sleep(1)  # Small delay for visual effect
+                
+                steps_placeholder.info("Step 2: Evaluating improvement opportunities...")
+                progress_bar.progress(50)
+                time.sleep(1)  # Small delay for visual effect
+                
+                steps_placeholder.info("Step 3: Calculating ROI potential...")
+                progress_bar.progress(75)
+                time.sleep(1)  # Small delay for visual effect
+                
+                steps_placeholder.info("Step 4: Preparing final recommendations...")
+                
+                # Make the actual API call
                 analysis_text = analyze_home_photos(
                     st.session_state["uploaded_images"],
                     timeframe,
                     f"Budget: ${max_budget}. Focus areas: {', '.join(improvement_focus)}. DIY preference: {diy_preference}. {additional_details}",
                     st.session_state["api_key"]
                 )
+                
+                # Complete the progress bar
+                progress_bar.progress(100)
+                
+                # Store the result and clear the loading indicators
                 st.session_state["analysis_result"] = analysis_text
+                steps_placeholder.empty()
+                progress_bar.empty()
         
         # Display results
         if "analysis_result" in st.session_state:
-            # If we just analyzed, the animation is still showing, so we need to clear it
-            if analyze_button:
-                st.empty()  # Clear the animation
-            
             result = st.session_state["analysis_result"]
             st.markdown(f'<div class="results-container">{result}</div>', unsafe_allow_html=True)