https://github.com/yasinatesim/clothes-detection-example-ai

Clothes Detection Example AI web application, uses AI to detect and classify clothing in uploaded photos
https://github.com/yasinatesim/clothes-detection-example-ai

ai-example clothes-detection cocossd mobilenet tenserflow-image-classifier tensorflow

Last synced: 11 months ago
JSON representation

Clothes Detection Example AI web application, uses AI to detect and classify clothing in uploaded photos

• Host: GitHub
• URL: https://github.com/yasinatesim/clothes-detection-example-ai
• Owner: yasinatesim
• License: mit
• Created: 2025-06-24T19:34:32.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2025-06-24T19:35:33.000Z (11 months ago)
• Last Synced: 2025-06-24T20:40:44.118Z (11 months ago)
• Topics: ai-example, clothes-detection, cocossd, mobilenet, tenserflow-image-classifier, tensorflow
• Language: HTML
• Homepage: https://clothes-detection-example-ai.yasinates.com
• Size: 9.77 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  


  

  


  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 ·



---

## 📖 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](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 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):

  ```sh

  python -m http.server 8000

  # Then open http://localhost:8000 in your browser

  ```

- **Node.js (http-server)**:

  ```sh

  npx http-server .

  # Then open the shown URL (usually http://localhost:8080)

  ```

- **PHP (if installed):**

  ```sh

  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](./LICENSE) for more information.

---

_✨ This README was generated by [markdown-manager](https://github.com/yasinatesim/markdown-manager)._