Clothes Detection Example AI

---

This project is the Clothes Detection Example AI web application. It uses AI to detect and classify clothing in uploaded photos!

· View Demo · Report Bug / Request Feature ·

---

This project was built using a vibe coding workflow 🎧✨

Development focused on rapid experimentation, fast iteration, and creative problem solving rather than strict upfront planning.

⚠️ Note: Repositories on my GitHub that contain a Vibe Coding section indicate this development style. Projects without this section are written using a traditional manual coding approach.

Even in vibe-coded projects, all code is reviewed, controlled, and validated by me before being committed.

---

📖 About

This project is a modern AI-powered web app for detecting and classifying clothing in images. It leverages TensorFlow.js and pre-trained models (COCO-SSD, MobileNet) to analyze photos directly in the browser. The interface is clean, responsive, and user-friendly.

💡 Purpose

To provide a simple, accessible tool for clothing detection and classification using AI, all running client-side in the browser. Great for demos, learning, and experimentation with computer vision.

🚀 Tech Stack

TensorFlow.js	Machine learning in the browser
COCO-SSD	Object detection model for clothing and accessories
MobileNet	Image classification model
HTML5	Markup and structure
CSS3	Modern, responsive styling
JavaScript	Client-side logic

🧐 What's Inside?

• 🖼️ Image Upload: Upload and analyze your own photos
• 🤖 AI Detection: Detects clothing, accessories, and people
• 📊 Detailed Results: Shows detected items, confidence, and bounding boxes
• 📱 Responsive UI: Works on desktop and mobile
• 📝 No Backend: All processing is done in the browser

⚡️ Getting Started

📦 Prerequisites

• Modern web browser (Chrome, Firefox, Edge, Safari)
• No installation required for demo

🚀 Local Usage

Just open index.html in your browser. No build step needed.

⚠️ Important: How to Run This Project

Note: You cannot simply double-click index.html to run this app because browser security restrictions will prevent the AI models from loading locally. You must serve the project with a local or remote web server.

🖥️ Recommended Ways to Run

1. VS Code (Recommended)

• Install the Live Server extension.
• Right-click index.html and select "Open with Live Server".
• The app will open in your browser and models will load correctly.

2. JetBrains IDEs (WebStorm, PhpStorm, etc.)

• Right-click index.html and choose "Open in Browser" (JetBrains IDEs automatically serve files over HTTP).
• Alternatively, use the built-in web server feature.

3. Command Line (Windows, macOS, Linux)

• Python 3 (cross-platform):

  python -m http.server 8000
  # Then open http://localhost:8000 in your browser

• Node.js (http-server):

  npx http-server .
  # Then open the shown URL (usually http://localhost:8080)

• PHP (if installed):

  php -S localhost:8000
  # Then open http://localhost:8000

Do not use the file:// protocol (double-clicking the file) — models will not load!

📚 Features

• Fast, client-side AI detection
• Modern and clean UI
• No data leaves your device
• Supports JPG, PNG, GIF images (up to 10MB)
• Visualizes detection results with bounding boxes and labels

🔑 License

MIT License © 2025 Yasin Ateş

See LICENSE for more information.

---

✨ This README was generated by markdown-manager.