Added project codebase

.gitignore

@@ -0,0 +1,14 @@
+# Virtual environment
+myenv/
+venv/
+.env/
+
+# Python cache
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+
+# Build artifacts
+*.egg-info/
+Clothing_Attribute_detection_Computer_Vision.egg-info/

app/main.py

@@ -0,0 +1,108 @@
+from fastapi import FastAPI, File, UploadFile, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse
+import uvicorn
+from PIL import Image
+import io
+import asyncio
+from typing import Dict, Any
+
+from app.models.clothing_detector import ClothingDetector
+from app.models.attribute_extractor import AttributeExtractor
+from app.models.color_analyzer import ColorAnalyzer
+from app.schemas.response import ClothingAnalysisResponse
+from app.utils.image_processing import preprocess_image
+
+app = FastAPI(title="Clothing Attribute Detection API", version="1.0.0")
+
+# Add CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Mount static files
+app.mount("/static", StaticFiles(directory="frontend"), name="static")
+
+# Initialize models (loaded once at startup)
+clothing_detector = None
+attribute_extractor = None
+color_analyzer = None
+
+@app.on_event("startup")
+async def load_models():
+    global clothing_detector, attribute_extractor, color_analyzer
+    print("Loading models...")
+    
+    clothing_detector = ClothingDetector()
+    attribute_extractor = AttributeExtractor()
+    color_analyzer = ColorAnalyzer()
+    
+    print("Models loaded successfully!")
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root():
+    with open("frontend/index.html", "r", encoding="utf-8") as f:
+        html = f.read()
+    return HTMLResponse(html)
+
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy", "message": "Clothing Attribute Detection API is running"}
+
+@app.post("/analyze", response_model=ClothingAnalysisResponse)
+async def analyze_clothing(file: UploadFile = File(...)):
+    try:
+        # Validate file type
+        if not file.content_type.startswith("image/"):
+            raise HTTPException(status_code=400, detail="File must be an image")
+        
+        # Read and preprocess image
+        image_bytes = await file.read()
+        image = Image.open(io.BytesIO(image_bytes))
+        processed_image = preprocess_image(image)
+        
+        # Run analysis in parallel
+        detection_task = asyncio.create_task(
+            clothing_detector.detect_clothing_items(processed_image)
+        )
+        attribute_task = asyncio.create_task(
+            attribute_extractor.extract_attributes(processed_image)
+        )
+        color_task = asyncio.create_task(
+            color_analyzer.analyze_colors(processed_image)
+        )
+        
+        # Wait for all tasks to complete
+        clothing_items, attributes, color_analysis = await asyncio.gather(
+            detection_task, attribute_task, color_task
+        )
+        
+        # Combine results
+        result = {
+            "status": "success",
+            "clothing_items": clothing_items,
+            "style_classification": attributes.get("style", "unknown"),
+            "formality": attributes.get("formality", "unknown"), 
+            "texture": attributes.get("texture", "unknown"),
+            "dominant_colors": color_analysis["dominant_colors"],
+            "color_distribution": color_analysis["color_distribution"],
+            "detailed_attributes": attributes,
+            "confidence_scores": {
+                "overall": 0.85,
+                "style": attributes.get("confidence", 0.8),
+                "color": color_analysis.get("confidence", 0.9)
+            }
+        }
+        
+        return ClothingAnalysisResponse(**result)
+        
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Analysis failed: {str(e)}")
+
+if __name__ == "__main__":
+    uvicorn.run("app.main:app", host="0.0.0.0", port=8000, reload=True)

app/models/attribute_extractor.py

@@ -0,0 +1,115 @@
+import torch
+from transformers import BlipProcessor, BlipForConditionalGeneration
+from PIL import Image
+import re
+import asyncio
+from typing import Dict, Any
+
+class AttributeExtractor:
+    def __init__(self):
+        self.model_name = "Salesforce/blip-image-captioning-base"
+        self.processor = None
+        self.model = None
+        self._load_model()
+        
+        # Define attribute patterns for text analysis
+        self.style_patterns = {
+            "formal": ["suit", "blazer", "dress shirt", "tie", "formal", "business", "elegant"],
+            "casual": ["t-shirt", "jeans", "sneakers", "hoodie", "casual", "relaxed", "comfortable", "leggings"],
+            "sports": ["athletic", "sports", "gym", "workout", "running", "training"]
+        }
+        
+        self.texture_patterns = {
+            "cotton": ["cotton", "soft", "comfortable"],
+            "denim": ["denim", "jeans", "rugged"],
+            "silk": ["silk", "smooth", "shiny", "lustrous", "leggings", "velvet"],
+            "wool": ["wool", "warm", "thick"],
+            "leather": ["leather", "tough", "durable"],
+            "synthetic": ["polyester", "synthetic", "artificial"]
+        }
+    
+    def _load_model(self):
+        """Load the BLIP model for image captioning"""
+        try:
+            print("Loading BLIP model for attribute extraction...")
+            self.processor = BlipProcessor.from_pretrained(self.model_name)
+            self.model = BlipForConditionalGeneration.from_pretrained(self.model_name)
+            self.model.eval()
+            print("BLIP model loaded successfully!")
+        except Exception as e:
+            print(f"Error loading BLIP model: {e}")
+            raise
+    
+    async def extract_attributes(self, image: Image.Image) -> Dict[str, Any]:
+        """Extract clothing attributes from image"""
+        try:
+            loop = asyncio.get_event_loop()
+            
+            # Generate multiple captions with different prompts
+            tasks = [
+                loop.run_in_executor(None, self._generate_caption, image, "a photo of"),
+                loop.run_in_executor(None, self._generate_caption, image, "clothing style:"),
+                loop.run_in_executor(None, self._generate_caption, image, "fabric texture:")
+            ]
+            
+            captions = await asyncio.gather(*tasks)
+            
+            # Analyze captions to extract attributes
+            attributes = self._analyze_captions(captions)
+            return attributes
+            
+        except Exception as e:
+            print(f"Attribute extraction error: {e}")
+            return {"style": "unknown", "formality": "unknown", "texture": "unknown"}
+    
+    def _generate_caption(self, image: Image.Image, prompt: str = "") -> str:
+        """Generate caption for the image"""
+        try:
+            if prompt:
+                inputs = self.processor(image, prompt, return_tensors="pt")
+            else:
+                inputs = self.processor(image, return_tensors="pt")
+            
+            with torch.no_grad():
+                out = self.model.generate(**inputs, max_length=50, num_beams=4)
+                caption = self.processor.decode(out[0], skip_special_tokens=True)
+            
+            return caption.lower()
+        except Exception as e:
+            print(f"Caption generation error: {e}")
+            return ""
+    
+    def _analyze_captions(self, captions: list) -> Dict[str, Any]:
+        """Analyze captions to extract structured attributes"""
+        combined_text = " ".join(captions).lower()
+        
+        # Determine style/formality
+        formal_score = sum(1 for word in self.style_patterns["formal"] if word in combined_text)
+        casual_score = sum(1 for word in self.style_patterns["casual"] if word in combined_text)
+        sports_score = sum(1 for word in self.style_patterns["sports"] if word in combined_text)
+        
+        if formal_score > casual_score and formal_score > sports_score:
+            style = "formal"
+            formality = "formal"
+        elif sports_score > casual_score:
+            style = "athletic"
+            formality = "casual"
+        else:
+            style = "casual"
+            formality = "casual"
+        
+        # Determine texture
+        texture_scores = {}
+        for texture, patterns in self.texture_patterns.items():
+            texture_scores[texture] = sum(1 for word in patterns if word in combined_text)
+        
+        detected_texture = max(texture_scores, key=texture_scores.get) if max(texture_scores.values()) > 0 else "unknown"
+        
+        return {
+            "style": style,
+            "formality": formality,
+            "texture": detected_texture,
+            "confidence": 0.8,
+            "raw_captions": captions,
+            "detected_keywords": [word for word in combined_text.split() if any(word in patterns for patterns in self.style_patterns.values())]
+        }

app/models/clothing_detector.py

@@ -0,0 +1,63 @@
+import torch
+from sklearn.cluster import KMeans
+import cv2
+from transformers import AutoImageProcessor, AutoModelForObjectDetection
+from PIL import Image
+import numpy as np
+from typing import List, Dict, Any
+import asyncio
+
+class ClothingDetector:
+    def __init__(self):
+        self.model_name = "yainage90/fashion-object-detection"
+        self.device = 'cpu'  # Force CPU usage
+        self.processor = None
+        self.model = None
+        self._load_model()
+        
+    
+    
+    def _load_model(self):
+        """Load the pre-trained fashion detection model"""
+        try:
+            print("Loading clothing detection model...")
+            self.processor = AutoImageProcessor.from_pretrained(self.model_name)
+            self.model = AutoModelForObjectDetection.from_pretrained(self.model_name)
+            self.model.to(self.device)
+            self.model.eval()
+            print("Clothing detection model loaded successfully!")
+        except Exception as e:
+            print(f"Error loading model: {e}")
+            raise
+    
+    async def detect_clothing_items(self, image: Image.Image) -> List[Dict[str, Any]]:
+        """Detect clothing items in the image"""
+        try:
+            # Run inference in thread pool to avoid blocking
+            loop = asyncio.get_event_loop()
+            results = await loop.run_in_executor(None, self._run_detection, image)
+            return results
+        except Exception as e:
+            print(f"Detection error: {e}")
+            return []
+    
+    def _run_detection(self, image: Image.Image) -> List[Dict[str, Any]]:
+        """Run the actual detection"""
+        with torch.no_grad():
+            inputs = self.processor(images=[image], return_tensors="pt")
+            outputs = self.model(**inputs.to(self.device))
+            
+            target_sizes = torch.tensor([[image.size[1], image.size[0]]])
+            results = self.processor.post_process_object_detection(
+                outputs, threshold=0.4, target_sizes=target_sizes
+            )[0]
+            
+            items = []
+            for score, label, box in zip(results["scores"], results["labels"], results["boxes"]):
+                items.append({
+                    "item_type": self.model.config.id2label[label.item()],
+                    "confidence": round(score.item(), 3),
+                    "bounding_box": [round(i.item()) for i in box]
+                })
+            
+            return items

app/models/color_analyzer.py

@@ -0,0 +1,135 @@
+import cv2
+import numpy as np
+from PIL import Image
+from sklearn.cluster import KMeans
+from typing import Dict, List, Any
+import asyncio
+import webcolors
+
+class ColorAnalyzer:
+    def __init__(self):
+        self.color_names = {
+            'red': [255, 0, 0],
+            'green': [0, 255, 0], 
+            'blue': [0, 0, 255],
+            'yellow': [255, 255, 0],
+            'orange': [255, 165, 0],
+            'purple': [128, 0, 128],
+            'pink': [255, 192, 203],
+            'brown': [165, 42, 42],
+            'black': [0, 0, 0],
+            'white': [255, 255, 255],
+            'gray': [128, 128, 128]
+        }
+    
+    async def analyze_colors(self, image: Image.Image) -> Dict[str, Any]:
+        """Analyze colors in the clothing image"""
+        try:
+            loop = asyncio.get_event_loop()
+            result = await loop.run_in_executor(None, self._extract_colors, image)
+            return result
+        except Exception as e:
+            print(f"Color analysis error: {e}")
+            return {"dominant_colors": [], "color_distribution": {}, "confidence": 0.0}
+    
+    def _extract_colors(self, image: Image.Image) -> Dict[str, Any]:
+        """Extract dominant colors from image"""
+        # Convert PIL image to OpenCV format
+        opencv_image = cv2.cvtColor(np.array(image), cv2.COLOR_RGB2BGR)
+        
+        # Resize image for faster processing
+        height, width = opencv_image.shape[:2]
+        if width > 300:
+            scale = 300 / width
+            new_width = int(width * scale)
+            new_height = int(height * scale)
+            opencv_image = cv2.resize(opencv_image, (new_width, new_height))
+        
+        # Reshape image for KMeans clustering
+        data = opencv_image.reshape((-1, 3))
+        data = np.float32(data)
+        
+        # Apply KMeans to find dominant colors
+        k = 5  # Number of dominant colors to find
+        criteria = (cv2.TERM_CRITERIA_EPS + cv2.TERM_CRITERIA_MAX_ITER, 20, 1.0)
+        _, labels, centers = cv2.kmeans(data, k, None, criteria, 10, cv2.KMEANS_RANDOM_CENTERS)
+        
+        # Convert back to RGB and find closest color names
+        centers = np.uint8(centers)
+        dominant_colors = []
+        color_distribution = {}
+        
+        # Count pixels for each cluster
+        unique_labels, counts = np.unique(labels.flatten(), return_counts=True)
+        total_pixels = len(labels)
+        total_pixels = len(labels)
+        
+        # DEBUG: ensure labels shape matches centers
+        #print(f"[DEBUG] unique_labels: {unique_labels}, counts: {counts}")
+        for idx, (label, count) in enumerate(zip(unique_labels, counts)):
+            # In OpenCV kmeans, label indices correspond to centers rows
+            color_bgr = centers[label]
+            color_rgb = [int(color_bgr[2]), int(color_bgr[1]), int(color_bgr[0])]  # BGR to RGB
+            
+            # Find closest named color
+            color_name = self._get_closest_color_name(color_rgb)
+            #print(f"[DEBUG] Cluster {idx}: RGB {color_rgb}, named as {color_name}, count {count}")
+            percentage = (count / total_pixels) * 100
+            
+            dominant_colors.append({
+                "color_name": color_name,
+                "rgb": color_rgb,
+                "hex": "#{:02x}{:02x}{:02x}".format(color_rgb[0], color_rgb[1], color_rgb[2]),
+                "percentage": round(percentage, 2)
+            })
+            
+            color_distribution[color_name] = round(percentage, 2)
+        
+        # Sort by percentage
+        dominant_colors.sort(key=lambda x: x["percentage"], reverse=True)
+        
+        return {
+            "dominant_colors": dominant_colors[:3],  # Top 3 colors
+            "color_distribution": color_distribution,
+            "confidence": 0.9
+        }
+    
+    def _get_closest_color_name(self, rgb_color: List[int]) -> str:
+        """Find the closest named color to the given RGB value"""
+        # Convert RGB to HSV for hue-based matching
+        import colorsys
+        r, g, b = [c/255.0 for c in rgb_color]
+        h, s, v = colorsys.rgb_to_hsv(r, g, b)
+        # Define target hues for named colors (approximate)
+        hue_map = {
+            'red': 0.0,
+            'orange': 0.08,
+            'yellow': 0.16,
+            'green': 0.33,
+            'blue': 0.61,
+            'purple': 0.78,
+            'pink': 0.92,
+            'brown': 0.08,
+            'gray': None,
+            'black': None,
+            'white': None
+        }
+        # If low saturation or extreme brightness, treat separately
+        if v < 0.2:
+            return 'black'
+        if v > 0.9 and s < 0.15:
+            return 'white'
+        if s < 0.15 and 0.2 < v < 0.9:
+            return 'gray'
+        # Otherwise, find closest hue
+        min_diff = 1.0
+        closest = 'unknown'
+        for name, target_h in hue_map.items():
+            if target_h is None or name in ('black','white','gray'):
+                continue
+            diff = abs(h - target_h)
+            diff = min(diff, 1 - diff)
+            if diff < min_diff:
+                min_diff = diff
+                closest = name
+        return closest

app/schemas/response.py

@@ -0,0 +1,29 @@
+from pydantic import BaseModel
+from typing import List, Dict, Any, Optional
+
+class ClothingItem(BaseModel):
+    item_type: str
+    confidence: float
+    bounding_box: List[int]
+
+class DominantColor(BaseModel):
+    color_name: str
+    rgb: List[int]
+    hex: str
+    percentage: float
+
+class ConfidenceScores(BaseModel):
+    overall: float
+    style: float
+    color: float
+
+class ClothingAnalysisResponse(BaseModel):
+    status: str
+    clothing_items: List[ClothingItem]
+    style_classification: str
+    formality: str
+    texture: str
+    dominant_colors: List[DominantColor]
+    color_distribution: Dict[str, float]
+    detailed_attributes: Dict[str, Any]
+    confidence_scores: ConfidenceScores

app/utils/image_processing.py

@@ -0,0 +1,35 @@
+from PIL import Image
+import numpy as np
+from typing import Tuple
+
+def preprocess_image(image: Image.Image, target_size: Tuple[int, int] = (512, 512)) -> Image.Image:
+    """Preprocess image for model inference"""
+    # Convert to RGB if necessary
+    if image.mode != 'RGB':
+        image = image.convert('RGB')
+    
+    # Resize while maintaining aspect ratio
+    image.thumbnail(target_size, Image.LANCZOS)
+    
+    # Create a new image with the target size and paste the resized image
+    new_image = Image.new('RGB', target_size, (255, 255, 255))
+    paste_position = ((target_size[0] - image.width) // 2, 
+                     (target_size[1] - image.height) // 2)
+    new_image.paste(image, paste_position)
+    
+    return new_image
+
+def enhance_image_quality(image: Image.Image) -> Image.Image:
+    """Enhance image quality for better analysis"""
+    import cv2
+    
+    # Convert to numpy array
+    img_array = np.array(image)
+    
+    # Apply slight gaussian blur to reduce noise
+    blurred = cv2.GaussianBlur(img_array, (3, 3), 0)
+    
+    # Enhance contrast
+    enhanced = cv2.addWeighted(img_array, 1.5, blurred, -0.5, 0)
+    
+    return Image.fromarray(enhanced)

frontend/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Clothing Attribute Detection</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Clothing Attribute Detection System</h1>
+            <p>Upload an image to analyze clothing attributes, style, and colors</p>
+        </header>
+
+        <div class="upload-section">
+            <div class="upload-area" id="uploadArea">
+                <input type="file" id="imageInput" accept="image/*" hidden>
+                <div class="upload-content">
+                    <i class="upload-icon">📁</i>
+                    <p>Click to upload or drag and drop an image</p>
+                    <p class="upload-hint">Supports: JPG, PNG, GIF</p>
+                </div>
+            </div>
+            <button id="analyzeBtn" class="analyze-btn" disabled>Analyze Image</button>
+        </div>
+
+        <div class="preview-section" id="previewSection" style="display: none;">
+            <h3>Image Preview</h3>
+            <img id="imagePreview" alt="Preview">
+        </div>
+
+        <div class="loading" id="loading" style="display: none;">
+            <div class="spinner"></div>
+            <p>Analyzing image...</p>
+        </div>
+
+        <div class="results-section" id="results" style="display: none;">
+            <h2>Analysis Results</h2>
+            
+            <div class="results-grid">
+                <div class="result-card">
+                    <h3>Style Classification</h3>
+                    <div class="result-value" id="styleResult"></div>
+                </div>
+                
+                <div class="result-card">
+                    <h3>Formality</h3>
+                    <div class="result-value" id="formalityResult"></div>
+                </div>
+                
+                <div class="result-card">
+                    <h3>Texture</h3>
+                    <div class="result-value" id="textureResult"></div>
+                </div>
+                
+                <div class="result-card">
+                    <h3>Detected Items</h3>
+                    <div class="result-value" id="itemsResult"></div>
+                </div>
+            </div>
+
+            <div class="color-analysis">
+                <h3>Color Analysis</h3>
+                <div class="color-palette" id="colorPalette"></div>
+            </div>
+
+            <div class="confidence-scores">
+                <h3>Confidence Scores</h3>
+                <div id="confidenceScores"></div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/script.js"></script>
+</body>
+</html>

frontend/script.js

@@ -0,0 +1,165 @@
+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();
+});

frontend/style.css

@@ -0,0 +1,231 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    overflow: hidden;
+}
+
+header {
+    background: linear-gradient(135deg, #4f46e5, #7c3aed);
+    color: white;
+    padding: 40px;
+    text-align: center;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+}
+
+header p {
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+.upload-section {
+    padding: 40px;
+    text-align: center;
+}
+
+.upload-area {
+    border: 3px dashed #cbd5e1;
+    border-radius: 12px;
+    padding: 60px 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: #f8fafc;
+}
+
+.upload-area:hover {
+    border-color: #4f46e5;
+    background: #f1f5f9;
+}
+
+.upload-area.dragover {
+    border-color: #4f46e5;
+    background: #e0e7ff;
+}
+
+.upload-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+.upload-icon {
+    font-size: 3rem;
+}
+
+.upload-hint {
+    color: #64748b;
+    font-size: 0.9rem;
+}
+
+.analyze-btn {
+    background: linear-gradient(135deg, #4f46e5, #7c3aed);
+    color: white;
+    border: none;
+    padding: 15px 40px;
+    border-radius: 50px;
+    font-size: 1.1rem;
+    cursor: pointer;
+    margin-top: 20px;
+    transition: all 0.3s ease;
+}
+
+.analyze-btn:enabled:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
+}
+
+.analyze-btn:disabled {
+    background: #94a3b8;
+    cursor: not-allowed;
+}
+
+.preview-section {
+    padding: 40px;
+    text-align: center;
+}
+
+.preview-section img {
+    max-width: 300px;
+    max-height: 300px;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+}
+
+.loading {
+    padding: 60px;
+    text-align: center;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid #e2e8f0;
+    border-top: 4px solid #4f46e5;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.results-section {
+    padding: 40px;
+}
+
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.result-card {
+    background: #f8fafc;
+    padding: 25px;
+    border-radius: 12px;
+    border-left: 4px solid #4f46e5;
+}
+
+.result-card h3 {
+    color: #1e293b;
+    margin-bottom: 10px;
+    font-size: 1.1rem;
+}
+
+.result-value {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #4f46e5;
+    text-transform: capitalize;
+}
+
+.color-analysis, .confidence-scores {
+    background: #f8fafc;
+    padding: 25px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+}
+
+.color-palette {
+    display: flex;
+    gap: 15px;
+    margin-top: 15px;
+    flex-wrap: wrap;
+}
+
+.color-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 15px;
+    background: white;
+    border-radius: 25px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.color-swatch {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    border: 2px solid #e2e8f0;
+}
+
+.confidence-bar {
+    background: #e2e8f0;
+    border-radius: 25px;
+    height: 8px;
+    margin-top: 5px;
+    overflow: hidden;
+}
+
+.confidence-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #10b981, #34d399);
+    transition: width 0.3s ease;
+}
+
+@media (max-width: 768px) {
+    .container {
+        margin: 10px;
+        border-radius: 12px;
+    }
+    
+    header {
+        padding: 30px 20px;
+    }
+    
+    header h1 {
+        font-size: 2rem;
+    }
+    
+    .upload-section, .results-section {
+        padding: 30px 20px;
+    }
+    
+    .results-grid {
+        grid-template-columns: 1fr;
+    }
+}

requirements.txt

@@ -0,0 +1,21 @@
+fastapi
+uvicorn[standard]
+python-multipart
+
+torch
+torchvision
+transformers
+pillow
+opencv-python
+
+numpy
+scikit-image
+scikit-learn
+
+requests
+aiofiles
+
+pydantic
+python-dotenv
+webcolors
+timm

setup.py

@@ -0,0 +1,11 @@
+from setuptools import setup, find_packages
+
+with open("requirements.txt") as f:
+    requirements = f.read().splitlines() 
+    
+setup(
+    name = "Clothing-Attribute_detection-Computer-Vision",
+    version = "0.0.1",
+    packages = find_packages(),
+    install_requires = requirements,
+)