Skip to content

This application uses AI-driven image generation to transform user-uploaded photos by applying custom clothing elements and styles.

Notifications You must be signed in to change notification settings

el-frontend/showmeyourstyle

Repository files navigation

ShowMe Your Style

Welcome to ShowMe Your Style, a project developed for the Cloudinary + Midudev Hackathon! This application uses AI-driven image generation to transform user-uploaded photos by applying custom clothing elements and styles.

Overview

ShowMe Your Style is an innovative web application that leverages the power of AI to allow users to upload personal images and see them transformed with various clothing elements. Whether you're looking to visualize a new outfit or experiment with fashion combinations, this app gives users a fun and unique way to "try on" different styles digitally.

Features

  • Image Upload: Users can upload images of themselves to the app.
  • AI-Powered Transformations: The app uses AI to automatically add clothing elements, such as shirts, dresses, hats, or accessories, to the uploaded image.
  • Customizable Styles: Choose from a variety of fashion elements and see the transformation in real-time.
  • Cloudinary Integration: The app integrates with Cloudinary to handle image uploading, processing, and transformation, ensuring high-quality results.

Key Technologies

  • Cloudinary: Handles image uploading, transformation, and optimization.
  • AI Image Generation: Powered by AI to intelligently apply clothing styles to images.
  • Cloudinary Node.js SDK: Used to interact with the Cloudinary API for image processing.
  • React.js: Frontend framework for building the user interface.
  • Next.js: Server-side rendering and routing for the application.

How to Use

  1. Upload Your Image: Click on the upload button to submit your image.
  2. Choose a Transformation: Select from a variety of clothing elements and styles (e.g., jackets, pants, accessories).
  3. See the Magic: Watch as the AI transforms your image, adding the selected clothing items in real-time.
  4. Download or Share: Once you're satisfied with the transformation, download the image or share it on social media.

Getting Started

Prerequisites

To get started with ShowMe Your Style, you'll need to have the following tools installed:

  • Node.js (v14 or higher)
  • npm or yarn

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/show-me-your-style.git
    cd show-me-your-style
  2. Install dependencies:

    npm install
    # or
    yarn install
  3. Add your Cloudinary API Key and Secret in the .env file for image processing.

Running the App

Start the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser to see the app in action.

Contributing

We welcome contributions! Please feel free to submit pull requests, report issues, or suggest new features.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About

This application uses AI-driven image generation to transform user-uploaded photos by applying custom clothing elements and styles.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published