# hardercomparison

**Repository Path**: front-end_38/hardercomparison

## Basic Information

- **Project Name**: hardercomparison
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-23
- **Last Updated**: 2026-02-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WardrobeAI

A modern, AI-powered fashion styling web application built with Vue 3 and TypeScript. Discover your personal style with AI-powered outfit recognition, manage your outfit gallery, and explore fashion trends through our blog.

## Features

### 🤖 AI Outfit Recognition
- Upload images and let AI identify clothing items
- Automatic detection of clothing types, colors, and brands
- Style analysis and season recommendations
- Save recognized outfits to your personal gallery

### 🧩 Outfit Decomposition
- Upload outfit images and let AI break them down into individual pieces
- Layer-by-layer analysis
- Color palette extraction
- Style and occasion recommendations

### 🖼️ Outfit Gallery
- Personal collection of saved outfit templates
- Advanced filtering by style, season, and tags
- Detailed outfit information and item breakdown
- Favorite outfits for quick access

### 📝 Fashion Blog
- Latest fashion trends and style tips
- Category-based article organization
- Detailed blog posts with rich content
- Search and filter functionality

## Tech Stack

- **Framework**: Vue 3 (Composition API)
- **Language**: TypeScript (Strict Mode)
- **Build Tool**: Vite
- **Routing**: Vue Router
- **Styling**: CSS Variables (Warm & Approachable Theme)

## Project Structure

```
src/
├── components/          # Common reusable components
│   └── common/         # Base common components
├── modules/            # Feature modules (independent, pluggable)
│   ├── ai-recognition/     # AI outfit recognition module
│   ├── outfit-decomposition/ # Outfit decomposition module
│   ├── outfit-gallery/     # Outfit gallery module
│   ├── fashion-blog/       # Fashion blog module
│   └── user-profile/       # User profile module
├── composables/        # Global composables
├── utils/              # Global utilities
├── router/             # Vue Router configuration
└── assets/             # Static assets
    └── styles/         # Global styles
```

## Getting Started

### Prerequisites

- Node.js 18+ 
- npm or yarn

### Installation

1. Install dependencies:
```bash
npm install
```

2. Start the development server:
```bash
npm run dev
```

3. Open your browser and navigate to `http://localhost:5173`

### Build for Production

```bash
npm run build
```

The built files will be in the `dist` directory.

### Preview Production Build

```bash
npm run preview
```

## Development Guidelines

This project follows strict Vue 3 + TypeScript development rules. Please refer to `.cursorrules` for detailed coding standards.

### Key Principles

- **Modularity**: Each feature is a self-contained module
- **Type Safety**: Strict TypeScript with no `any` types
- **Composition API**: Use `<script setup>` syntax
- **Code Clarity**: Well-documented, readable code

## Features in Detail

### AI Recognition Module
- Image upload with drag & drop support
- Real-time clothing item detection
- Visual bounding box markers
- Style and season analysis
- Save to gallery functionality

### Outfit Decomposition Module
- Image upload with drag & drop support
- Layer-by-layer outfit breakdown
- Color palette analysis
- Item details and style tags
- Save analysis functionality

### Outfit Gallery Module
- Grid view of saved outfits
- Advanced filtering and sorting
- Detailed outfit view modal
- Favorite management
- Pagination support

### Fashion Blog Module
- Article listing with categories
- Rich content blog posts
- Search and filter capabilities
- Author information and metadata

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT License