Update templates/index.html

templates/index.html

@@ -284,45 +284,11 @@
             analyzeImage(file);
         }
 
-        function analyzeImage(file) {
-            const formData = new FormData();
-            formData.append('image', file);
-
-            // Show loading
-            loading.style.display = 'block';
-            results.style.display = 'none';
 
-            // Simulate progress
-            let progress = 0;
-            const progressFill = document.querySelector('.progress-fill');
-            const progressInterval = setInterval(() => {
-                progress += Math.random() * 15;
-                if (progress > 90) progress = 90;
-                progressFill.style.width = progress + '%';
-            }, 500);
-
-            fetch('/analyze', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => response.json())
-            .then(data => {
-                clearInterval(progressInterval);
-                progressFill.style.width = '100%';
-                
-                setTimeout(() => {
-                    loading.style.display = 'none';
-                    displayResults(data);
-                }, 1000);
-            })
-            .catch(error => {
-                clearInterval(progressInterval);
-                loading.style.display = 'none';
-                alert('Analysis failed: ' + error.message);
-            });
-        }
 
         function displayResults(data) {
+            console.log('Received data:', data); // Debug log
+            
             if (data.error) {
                 results.innerHTML = `
                     <div class="error-card">
@@ -334,15 +300,16 @@
                 return;
             }
 
-            const summary = data.analysis_summary;
-            const roomClass = data.room_classification;
-            const quality = data.quality_analysis;
-            const objects = data.object_detection;
-            const assessment = data.property_assessment;
-            const insights = data.property_insights;
-            const scene = data.scene_analysis;
-            const market = data.market_analysis;
-            const roomSize = data.room_size_estimation;
+            // Safely extract data with defaults
+            const summary = data.analysis_summary || {};
+            const roomClass = data.room_classification || { room_type: 'Unknown', confidence: 0 };
+            const quality = data.quality_analysis || { quality_score: 0, quality_level: 'Unknown' };
+            const objects = data.object_detection || { objects: [], analysis: {} };
+            const assessment = data.property_assessment || { overall_score: 0, professional_grade: false };
+            const insights = data.property_insights || { marketing_tips: [], target_audience: [], pricing_considerations: [], improvement_suggestions: [] };
+            const scene = data.scene_analysis || { style_analysis: { dominant_style: 'Unknown', style_confidence: 0, quality_indicators: [], functionality_indicators: [] }, scene_concepts: [] };
+            const market = data.market_analysis || { market_tier: 'Unknown', target_market: 'Unknown', price_positioning: 'Unknown', competitive_position: 'Unknown', competitive_advantages: [], differentiation_factors: [], market_opportunities: [] };
+            const roomSize = data.room_size_estimation || { estimated_size: 'Unknown', confidence: 'Low' };
 
             results.innerHTML = `
                 <!-- Analysis Summary -->
@@ -413,12 +380,12 @@
                             <div class="col-md-6">
                                 <h6>Competitive Advantages:</h6>
                                 <ul>
-                                    ${market.competitive_advantages.map(adv => `<li>${adv}</li>`).join('')}
+                                    ${(market.competitive_advantages || []).map(adv => `<li>${adv}</li>`).join('')}
                                 </ul>
                                 
                                 <h6>Differentiation Factors:</h6>
                                 <ul>
-                                    ${market.differentiation_factors.map(factor => `<li>${factor}</li>`).join('')}
+                                    ${(market.differentiation_factors || []).map(factor => `<li>${factor}</li>`).join('')}
                                 </ul>
                             </div>
                         </div>
@@ -435,23 +402,23 @@
                             <div class="col-md-6">
                                 <h6><i class="fas fa-bullhorn"></i> Marketing Tips</h6>
                                 <ul>
-                                    ${insights.marketing_tips.map(tip => `<li>${tip}</li>`).join('')}
+                                    ${(insights.marketing_tips || []).map(tip => `<li>${tip}</li>`).join('')}
                                 </ul>
                                 
                                 <h6><i class="fas fa-users"></i> Target Audience</h6>
                                 <ul>
-                                    ${insights.target_audience.map(audience => `<li>${audience}</li>`).join('')}
+                                    ${(insights.target_audience || []).map(audience => `<li>${audience}</li>`).join('')}
                                 </ul>
                             </div>
                             <div class="col-md-6">
                                 <h6><i class="fas fa-dollar-sign"></i> Pricing Considerations</h6>
                                 <ul>
-                                    ${insights.pricing_considerations.map(consideration => `<li>${consideration}</li>`).join('')}
+                                    ${(insights.pricing_considerations || []).map(consideration => `<li>${consideration}</li>`).join('')}
                                 </ul>
                                 
                                 <h6><i class="fas fa-tools"></i> Improvement Suggestions</h6>
                                 <ul>
-                                    ${insights.improvement_suggestions.map(suggestion => `<li>${suggestion}</li>`).join('')}
+                                    ${(insights.improvement_suggestions || []).map(suggestion => `<li>${suggestion}</li>`).join('')}
                                 </ul>
                             </div>
                         </div>
@@ -471,7 +438,7 @@
                                 
                                 <h6>Scene Concepts:</h6>
                                 <div>
-                                    ${scene.scene_concepts.map(concept => 
+                                    ${(scene.scene_concepts || []).map(concept => 
                                         `<span class="scene-concept">${concept.concept} (${(concept.confidence * 100).toFixed(1)}%)</span>`
                                     ).join('')}
                                 </div>
@@ -479,14 +446,14 @@
                             <div class="col-md-6">
                                 <h6>Quality Indicators:</h6>
                                 <ul>
-                                    ${scene.style_analysis.quality_indicators.map(indicator => 
+                                    ${(scene.style_analysis.quality_indicators || []).map(indicator => 
                                         `<li>${indicator.concept} (${(indicator.confidence * 100).toFixed(1)}%)</li>`
                                     ).join('')}
                                 </ul>
                                 
                                 <h6>Functionality Indicators:</h6>
                                 <ul>
-                                    ${scene.style_analysis.functionality_indicators.map(indicator => 
+                                    ${(scene.style_analysis.functionality_indicators || []).map(indicator => 
                                         `<li>${indicator.concept} (${(indicator.confidence * 100).toFixed(1)}%)</li>`
                                     ).join('')}
                                 </ul>
@@ -505,23 +472,23 @@
                             <div class="col-md-6">
                                 <h6>Strengths:</h6>
                                 <ul>
-                                    ${assessment.strengths.map(strength => `<li class="insight-card">${strength}</li>`).join('')}
+                                    ${(assessment.strengths || []).map(strength => `<li class="insight-card">${strength}</li>`).join('')}
                                 </ul>
                                 
                                 <h6>Weaknesses:</h6>
                                 <ul>
-                                    ${assessment.weaknesses.map(weakness => `<li class="warning-card">${weakness}</li>`).join('')}
+                                    ${(assessment.weaknesses || []).map(weakness => `<li class="warning-card">${weakness}</li>`).join('')}
                                 </ul>
                             </div>
                             <div class="col-md-6">
                                 <h6>Recommendations:</h6>
                                 <ul>
-                                    ${assessment.recommendations.map(rec => `<li class="insight-card">${rec}</li>`).join('')}
+                                    ${(assessment.recommendations || []).map(rec => `<li class="insight-card">${rec}</li>`).join('')}
                                 </ul>
                                 
                                 <h6>Market Opportunities:</h6>
                                 <ul>
-                                    ${market.market_opportunities.map(opp => `<li class="insight-card">${opp}</li>`).join('')}
+                                    ${(market.market_opportunities || []).map(opp => `<li class="insight-card">${opp}</li>`).join('')}
                                 </ul>
                             </div>
                         </div>
@@ -537,7 +504,7 @@
                         <div class="row">
                             <div class="col-md-6">
                                 <h6>Detected Objects:</h6>
-                                ${objects.objects.map(obj => `
+                                ${(objects.objects || []).map(obj => `
                                     <div class="object-item">
                                         <span><i class="fas fa-tag"></i> ${obj.label}</span>
                                         <div class="confidence-bar">
@@ -584,6 +551,58 @@
             results.style.display = 'block';
         }
 
+        // Add error handling for the fetch request
+        function analyzeImage(file) {
+            const formData = new FormData();
+            formData.append('image', file);
+
+            // Show loading
+            loading.style.display = 'block';
+            results.style.display = 'none';
+
+            // Simulate progress
+            let progress = 0;
+            const progressFill = document.querySelector('.progress-fill');
+            const progressInterval = setInterval(() => {
+                progress += Math.random() * 15;
+                if (progress > 90) progress = 90;
+                progressFill.style.width = progress + '%';
+            }, 500);
+
+            fetch('/analyze', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                clearInterval(progressInterval);
+                progressFill.style.width = '100%';
+                
+                setTimeout(() => {
+                    loading.style.display = 'none';
+                    displayResults(data);
+                }, 1000);
+            })
+            .catch(error => {
+                clearInterval(progressInterval);
+                loading.style.display = 'none';
+                console.error('Analysis failed:', error);
+                results.innerHTML = `
+                    <div class="error-card">
+                        <h5><i class="fas fa-exclamation-triangle"></i> Analysis Failed</h5>
+                        <p>Error: ${error.message}</p>
+                        <p>Please try again or check the server logs.</p>
+                    </div>
+                `;
+                results.style.display = 'block';
+            });
+        }
+
         function getScoreClass(score) {
             if (score >= 85) return 'score-excellent';
             if (score >= 70) return 'score-good';