Spaces:

sksameermujahid
/

propertyverification

Sleeping

File size: 26,616 Bytes

9860c76

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced AI Property Image Analyzer</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .main-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            margin: 20px auto;
            max-width: 1400px;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 20px 20px 0 0;
            text-align: center;
        }
        .upload-area {
            border: 3px dashed #667eea;
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            background: rgba(102, 126, 234, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .upload-area:hover {
            border-color: #764ba2;
            background: rgba(118, 75, 162, 0.05);
        }
        .upload-area.dragover {
            border-color: #764ba2;
            background: rgba(118, 75, 162, 0.1);
        }
        .result-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        .result-card:hover {
            transform: translateY(-5px);
        }
        .result-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            font-weight: bold;
        }
        .result-body {
            padding: 25px;
        }
        .metric-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin: 10px 0;
            border-left: 4px solid #667eea;
        }
        .score-badge {
            font-size: 1.2em;
            font-weight: bold;
            padding: 8px 16px;
            border-radius: 20px;
        }
        .score-excellent { background: #28a745; color: white; }
        .score-good { background: #17a2b8; color: white; }
        .score-fair { background: #ffc107; color: black; }
        .score-poor { background: #dc3545; color: white; }
        .ai-model-badge {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.8em;
            margin: 2px;
            display: inline-block;
        }
        .loading {
            text-align: center;
            padding: 40px;
        }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background: #e9ecef;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s ease;
        }
        .insight-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 10px;
            padding: 15px;
            margin: 10px 0;
            border-left: 4px solid #28a745;
        }
        .warning-card {
            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
            border-radius: 10px;
            padding: 15px;
            margin: 10px 0;
            border-left: 4px solid #ffc107;
        }
        .error-card {
            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
            border-radius: 10px;
            padding: 15px;
            margin: 10px 0;
            border-left: 4px solid #dc3545;
        }
        .object-item {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 10px;
            margin: 5px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .confidence-bar {
            width: 100px;
            height: 6px;
            background: #e9ecef;
            border-radius: 3px;
            overflow: hidden;
        }
        .confidence-fill {
            height: 100%;
            background: linear-gradient(90deg, #28a745 0%, #17a2b8 100%);
            transition: width 0.3s ease;
        }
        .scene-concept {
            background: rgba(102, 126, 234, 0.1);
            border-radius: 8px;
            padding: 8px 12px;
            margin: 5px;
            display: inline-block;
            font-size: 0.9em;
        }
        .market-tier-badge {
            font-size: 1.1em;
            font-weight: bold;
            padding: 10px 20px;
            border-radius: 25px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .tier-luxury { background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); color: #333; }
        .tier-premium { background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%); color: #333; }
        .tier-standard { background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%); color: white; }
        .tier-value { background: linear-gradient(135deg, #6c757d 0%, #495057 100%); color: white; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="main-container">
            <div class="header">
                <h1><i class="fas fa-robot"></i> Advanced AI Property Image Analyzer</h1>
                <p class="mb-0">State-of-the-art AI-powered real estate image analysis with comprehensive insights</p>
            </div>

            <div class="container-fluid p-4">
                <div class="row">
                    <div class="col-md-6">
                        <div class="upload-area" id="uploadArea">
                            <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                            <h4>Upload Property Image</h4>
                            <p>Drag and drop your image here or click to browse</p>
                            <input type="file" id="imageInput" accept="image/*" style="display: none;">
                            <button class="btn btn-primary btn-lg" onclick="document.getElementById('imageInput').click()">
                                <i class="fas fa-upload"></i> Choose Image
                            </button>
                        </div>
                        
                        <div id="imagePreview" class="mt-3" style="display: none;">
                            <img id="previewImg" class="img-fluid rounded" style="max-height: 300px;">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div id="loading" class="loading" style="display: none;">
                            <div class="spinner"></div>
                            <h4>Advanced AI Analysis in Progress...</h4>
                            <p>Multiple AI models are analyzing your image</p>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 0%"></div>
                            </div>
                        </div>

                        <div id="results" style="display: none;">
                            <!-- Results will be populated here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const uploadArea = document.getElementById('uploadArea');
        const imageInput = document.getElementById('imageInput');
        const imagePreview = document.getElementById('imagePreview');
        const previewImg = document.getElementById('previewImg');
        const loading = document.getElementById('loading');
        const results = document.getElementById('results');

        // Drag and drop functionality
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleImageUpload(files[0]);
            }
        });

        uploadArea.addEventListener('click', () => {
            imageInput.click();
        });

        imageInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleImageUpload(e.target.files[0]);
            }
        });

        function handleImageUpload(file) {
            if (!file.type.startsWith('image/')) {
                alert('Please select a valid image file.');
                return;
            }

            // Show preview
            const reader = new FileReader();
            reader.onload = (e) => {
                previewImg.src = e.target.result;
                imagePreview.style.display = 'block';
            };
            reader.readAsDataURL(file);

            // Start analysis
            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) {
            if (data.error) {
                results.innerHTML = `
                    <div class="error-card">
                        <h5><i class="fas fa-exclamation-triangle"></i> Analysis Error</h5>
                        <p>${data.error}</p>
                    </div>
                `;
                results.style.display = 'block';
                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;

            results.innerHTML = `
                <!-- Analysis Summary -->
                <div class="result-card">
                    <div class="result-header">
                        <h4><i class="fas fa-chart-line"></i> Analysis Summary</h4>
                    </div>
                    <div class="result-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="metric-card">
                                    <h6><i class="fas fa-home"></i> Room Type</h6>
                                    <p class="mb-1"><strong>${roomClass.room_type}</strong></p>
                                    <div class="confidence-bar">
                                        <div class="confidence-fill" style="width: ${roomClass.confidence}%"></div>
                                    </div>
                                    <small>Confidence: ${roomClass.confidence}%</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="metric-card">
                                    <h6><i class="fas fa-star"></i> Overall Score</h6>
                                    <span class="score-badge ${getScoreClass(assessment.overall_score)}">${assessment.overall_score}/100</span>
                                    <p class="mt-2 mb-0"><small>${assessment.professional_grade ? 'Professional Grade' : 'Standard Grade'}</small></p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <div class="metric-card">
                                    <h6><i class="fas fa-camera"></i> Quality Score</h6>
                                    <span class="score-badge ${getScoreClass(quality.quality_score)}">${quality.quality_score}/100</span>
                                    <p class="mt-2 mb-0"><small>${quality.quality_level}</small></p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="metric-card">
                                    <h6><i class="fas fa-cube"></i> Objects Detected</h6>
                                    <span class="score-badge score-good">${objects.objects.length}</span>
                                    <p class="mt-2 mb-0"><small>${objects.analysis.total_objects || 0} total</small></p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="metric-card">
                                    <h6><i class="fas fa-ruler-combined"></i> Room Size</h6>
                                    <span class="score-badge score-good">${roomSize.estimated_size}</span>
                                    <p class="mt-2 mb-0"><small>Confidence: ${roomSize.confidence}</small></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Market Analysis -->
                <div class="result-card">
                    <div class="result-header">
                        <h4><i class="fas fa-chart-bar"></i> Market Analysis</h4>
                    </div>
                    <div class="result-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="market-tier-badge tier-${market.market_tier.toLowerCase()}">${market.market_tier}</div>
                                <p class="mt-2"><strong>Target Market:</strong> ${market.target_market}</p>
                                <p><strong>Price Positioning:</strong> ${market.price_positioning}</p>
                                <p><strong>Competitive Position:</strong> ${market.competitive_position}</p>
                            </div>
                            <div class="col-md-6">
                                <h6>Competitive Advantages:</h6>
                                <ul>
                                    ${market.competitive_advantages.map(adv => `<li>${adv}</li>`).join('')}
                                </ul>
                                
                                <h6>Differentiation Factors:</h6>
                                <ul>
                                    ${market.differentiation_factors.map(factor => `<li>${factor}</li>`).join('')}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Property Insights -->
                <div class="result-card">
                    <div class="result-header">
                        <h4><i class="fas fa-lightbulb"></i> Property Insights</h4>
                    </div>
                    <div class="result-body">
                        <div class="row">
                            <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('')}
                                </ul>
                                
                                <h6><i class="fas fa-users"></i> Target Audience</h6>
                                <ul>
                                    ${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('')}
                                </ul>
                                
                                <h6><i class="fas fa-tools"></i> Improvement Suggestions</h6>
                                <ul>
                                    ${insights.improvement_suggestions.map(suggestion => `<li>${suggestion}</li>`).join('')}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Scene Analysis -->
                <div class="result-card">
                    <div class="result-header">
                        <h4><i class="fas fa-palette"></i> Scene Analysis</h4>
                    </div>
                    <div class="result-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Dominant Style: ${scene.style_analysis.dominant_style}</h6>
                                <p><strong>Style Confidence:</strong> ${(scene.style_analysis.style_confidence * 100).toFixed(1)}%</p>
                                
                                <h6>Scene Concepts:</h6>
                                <div>
                                    ${scene.scene_concepts.map(concept => 
                                        `<span class="scene-concept">${concept.concept} (${(concept.confidence * 100).toFixed(1)}%)</span>`
                                    ).join('')}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6>Quality Indicators:</h6>
                                <ul>
                                    ${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 => 
                                        `<li>${indicator.concept} (${(indicator.confidence * 100).toFixed(1)}%)</li>`
                                    ).join('')}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Detailed Analysis -->
                <div class="result-card">
                    <div class="result-header">
                        <h4><i class="fas fa-microscope"></i> Detailed Analysis</h4>
                    </div>
                    <div class="result-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Strengths:</h6>
                                <ul>
                                    ${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('')}
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6>Recommendations:</h6>
                                <ul>
                                    ${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('')}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Object Detection Results -->
                <div class="result-card">
                    <div class="result-header">
                        <h4><i class="fas fa-cube"></i> Object Detection</h4>
                    </div>
                    <div class="result-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Detected Objects:</h6>
                                ${objects.objects.map(obj => `
                                    <div class="object-item">
                                        <span><i class="fas fa-tag"></i> ${obj.label}</span>
                                        <div class="confidence-bar">
                                            <div class="confidence-fill" style="width: ${obj.confidence * 100}%"></div>
                                        </div>
                                        <small>${(obj.confidence * 100).toFixed(1)}%</small>
                                    </div>
                                `).join('')}
                            </div>
                            <div class="col-md-6">
                                <h6>Object Categories:</h6>
                                <p><strong>Furniture:</strong> ${objects.analysis.object_categories?.furniture?.length || 0} items</p>
                                <p><strong>Appliances:</strong> ${objects.analysis.object_categories?.appliances?.length || 0} items</p>
                                <p><strong>Fixtures:</strong> ${objects.analysis.object_categories?.fixtures?.length || 0} items</p>
                                <p><strong>Other:</strong> ${objects.analysis.object_categories?.other?.length || 0} items</p>
                                
                                <h6>Composition Analysis:</h6>
                                <p><strong>Object Density:</strong> ${objects.analysis.object_density?.toFixed(2) || 0}</p>
                                <p><strong>Composition Balance:</strong> ${(objects.analysis.composition_balance * 100).toFixed(1)}%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- AI Models Used -->
                <div class="result-card">
                    <div class="result-header">
                        <h4><i class="fas fa-robot"></i> AI Models Used</h4>
                    </div>
                    <div class="result-body">
                        <div>
                            <span class="ai-model-badge">Room Classification</span>
                            <span class="ai-model-badge">BLIP Captioning</span>
                            <span class="ai-model-badge">DETR Detection</span>
                            <span class="ai-model-badge">Quality Analysis</span>
                            <span class="ai-model-badge">CLIP Scene Understanding</span>
                            <span class="ai-model-badge">Market Analysis</span>
                        </div>
                        <p class="mt-3 mb-0"><small><i class="fas fa-clock"></i> Analysis completed at ${new Date().toLocaleString()}</small></p>
                    </div>
                </div>
            `;

            results.style.display = 'block';
        }

        function getScoreClass(score) {
            if (score >= 85) return 'score-excellent';
            if (score >= 70) return 'score-good';
            if (score >= 50) return 'score-fair';
            return 'score-poor';
        }
    </script>
</body>
</html>