chetantiwari/Computer-Vision-Project-Work

1class ClothingAnalyzer {2    constructor() {3        this.imageInput = document.getElementById('imageInput');4        this.uploadArea = document.getElementById('uploadArea');5        this.analyzeBtn = document.getElementById('analyzeBtn');6        this.previewSection = document.getElementById('previewSection');7        this.imagePreview = document.getElementById('imagePreview');8        this.loading = document.getElementById('loading');9        this.results = document.getElementById('results');10        11        this.initializeEventListeners();12    }13    14    initializeEventListeners() {15        // Upload area click16        this.uploadArea.addEventListener('click', () => {17            this.imageInput.click();18        });19        20        // File input change21        this.imageInput.addEventListener('change', (e) => {22            this.handleFileSelect(e.target.files[0]);23        });24        25        // Drag and drop26        this.uploadArea.addEventListener('dragover', (e) => {27            e.preventDefault();28            this.uploadArea.classList.add('dragover');29        });30        31        this.uploadArea.addEventListener('dragleave', () => {32            this.uploadArea.classList.remove('dragover');33        });34        35        this.uploadArea.addEventListener('drop', (e) => {36            e.preventDefault();37            this.uploadArea.classList.remove('dragover');38            this.handleFileSelect(e.dataTransfer.files[0]);39        });40        41        // Analyze button42        this.analyzeBtn.addEventListener('click', () => {43            this.analyzeImage();44        });45    }46    47    handleFileSelect(file) {48        if (!file) return;49        50        // Validate file type51        if (!file.type.startsWith('image/')) {52            alert('Please select a valid image file');53            return;54        }55        56        // Show preview57        const reader = new FileReader();58        reader.onload = (e) => {59            this.imagePreview.src = e.target.result;60            this.previewSection.style.display = 'block';61            this.analyzeBtn.disabled = false;62            this.results.style.display = 'none';63        };64        reader.readAsDataURL(file);65        66        // Store file for analysis67        this.selectedFile = file;68    }69    70    async analyzeImage() {71        if (!this.selectedFile) return;72        73        // Show loading74        this.loading.style.display = 'block';75        this.results.style.display = 'none';76        this.analyzeBtn.disabled = true;77        78        try {79            // Create form data80            const formData = new FormData();81            formData.append('file', this.selectedFile);82            83            // Send request84            const response = await fetch('/analyze', {85                method: 'POST',86                body: formData87            });88            89            if (!response.ok) {90                throw new Error(`HTTP error! status: ${response.status}`);91            }92            93            const data = await response.json();94            this.displayResults(data);95            96        } catch (error) {97            console.error('Analysis failed:', error);98            alert('Analysis failed. Please try again.');99        } finally {100            this.loading.style.display = 'none';101            this.analyzeBtn.disabled = false;102        }103    }104    105    displayResults(data) {106        // Display basic attributes107        document.getElementById('styleResult').textContent = data.style_classification;108        document.getElementById('formalityResult').textContent = data.formality;109        document.getElementById('textureResult').textContent = data.texture;110        111        // Display detected items112        const itemsHtml = data.clothing_items113            .map(item => `<div class="item-tag">${item.item_type} (${Math.round(item.confidence * 100)}%)</div>`)114            .join('');115        document.getElementById('itemsResult').innerHTML = itemsHtml || 'No items detected';116        117        // Display color palette118        this.displayColorPalette(data.dominant_colors);119        120        // Display confidence scores121        this.displayConfidenceScores(data.confidence_scores);122        123        // Show results124        this.results.style.display = 'block';125    }126    127    displayColorPalette(colors) {128        const colorPalette = document.getElementById('colorPalette');129        130        const colorHtml = colors.map(color => `131            <div class="color-item">132                <div class="color-swatch" style="background-color: ${color.hex}"></div>133                <div>134                    <div style="font-weight: 600">${color.color_name}</div>135                    <div style="font-size: 0.9rem; color: #64748b">${color.percentage}%</div>136                </div>137            </div>138        `).join('');139        140        colorPalette.innerHTML = colorHtml;141    }142    143    displayConfidenceScores(scores) {144        const confidenceContainer = document.getElementById('confidenceScores');145        146        const scoresHtml = Object.entries(scores).map(([key, value]) => `147            <div style="margin-bottom: 15px">148                <div style="display: flex; justify-content: space-between; margin-bottom: 5px">149                    <span style="text-transform: capitalize">${key}</span>150                    <span>${Math.round(value * 100)}%</span>151                </div>152                <div class="confidence-bar">153                    <div class="confidence-fill" style="width: ${value * 100}%"></div>154                </div>155            </div>156        `).join('');157        158        confidenceContainer.innerHTML = scoresHtml;159    }160}161 162// Initialize the application163document.addEventListener('DOMContentLoaded', () => {164    new ClothingAnalyzer();165});166