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