VISIONSTYLE AI: AI-DRIVEN OUTFIT

RECOMMENDATION
A PROJECT REPORT
Submitted by
YUVARAJ T R (211422244246)
RUTHRESH M (211422244180)
SANJAYKUMAR N (211422244183)
in partial fulfillment for the award of the degree
of
BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND BUSINESS SYSTEMS

PANIMALAR ENGINEERING COLLEGE

(An Autonomous Institution, Affiliated to Anna University, Chennai)
APRIL 2026
 BONAFIDE CERTIFICATE

Certified that this project report “VISIONSTYLE AI: AI-DRIVEN OUTFIT

RECOMMENDATION” is the bonafide work of “YUVARAJ T R
(211422244246), RUTHRESH M (211422244180), SANJAYKUMAR N
(21142244183)” who carried out the project work under
Mrs. S. RAHINI SUDHA, M.E., Ph.D., supervision.

SIGNATURE SIGNATURE

Dr. D. ANURADHA, M.E., Ph.D. Mrs. S. RAHINI SUDHA, M.E., (Ph.D).,

PROFESSOR and HEAD ASSISTANT PROFESSOR
DEPARTMENT of CSBS, DEPARTMENT of CSBS,
PANIMALAR ENGINEERING PANIMALAR ENGINEERING
COLLEGE, COLLEGE,
NAZARATHPETTAI, NAZARATHPETTAI,
POONAMALLEE, POONAMALLEE,
CHENNAI- 600123. CHENNAI- 600123.

Certified that the above candidate(s) were examined in the Project Viva-Voce Examination
held on...........................

INTERNAL EXAMINER EXTERNAL EXAMINER

 ACKNOWLEDGEMENT

We express our deep gratitude to our respected Secretary and Correspondent

Dr. P. CHINNADURAI, M.A., Ph.D., for his kind words and enthusiastic motivation,
which inspired us a lot in completing this project.

We would like to extend our heartfelt and sincere thanks to our directors
Tmt. C. VIJAYARAJESWARI, Dr. C. SAKTHIKUMAR, M.E., Ph.D., and
Dr. SARANYASREE SAKTHIKUMAR, B.E., M.B.A., Ph.D., for providing
us with the necessary facilities for completion of this project.

We also express our gratitude to our Principal Dr. K. MANI, M.E., Ph.D., for his timely
concern and encouragement provided to us throughout the course.

We thank the Head of Department of Computer Science and Business Systems Department,
Dr. D. ANURADHA, M.E., Ph.D., for the support extended throughout the project.

We would like to thank our project guide

Mrs. S. RAHINI SUDHA, M.E., (Ph.D)., and all the faculty members of the Department
of Computer Science and Business Systems for their advice and encouragement for the
successful completion of the project.

YUVARAJ T R
RUTHRESH M
SANJAYKUMAR N
 ABSTRACT

Online fashion platforms are growing, creating a need for systems that assist
users in selecting clothing that matches their style and preferences. To address
this challenge, the proposed system VISIONSTYLE AI: AI-DRIVEN
OUTFIT RECOMMENDATION is introduced as a smart platform designed to
improve the digital fashion experience. By combining artificial intelligence
techniques with an interactive web application, the system enables users to
explore clothing options and receive personalized outfit suggestions efficiently.
The platform focuses on delivering both practicality and simplicity for users. By
integrating technologies such as recommendation algorithms, virtual outfit
visualization, and responsive user interface design, the system simplifies the
process of discovering suitable clothing combinations. Users can upload images
or select garments from available collections and view recommended styles that
complement their appearance and fashion preferences. One of the major
advantages of VISIONSTYLE AI is its ability to provide personalized fashion
suggestions while maintaining compatibility with modern web technologies and
scalable backend services. The platform architecture supports continuous
enhancement and allows integration of advanced computer vision models and
recommendation methods for future improvements. By emphasizing
personalization, usability, and smart recommendations, the system helps users
make confident decisions when choosing outfits online. Overall,
VISIONSTYLE AI introduces a modern approach to digital fashion styling by
offering a unified platform for outfit discovery, recommendation, and interactive
visualization.

IV
 TABLE OF CONTENTS

CHAPTER NO TITLE PAGE NO

ABSTRACT IV

TABLE OF CONTENTS V

LIST OF FIGURES VI

LIST OF ABBREVATIONS VIII

1. INTRODUCTION 10

1.1 Overview 10

1.2 Problem Statement 11

2. LITERATURE REVIEW 13

3. SYSTEM ANALYSIS 22

3.1 Existing System 22

3.2 Proposed System 23

3.3 Development Environment 24

4. SYSTEM DESIGN 26

4.1 Image upload 26

4.2 Clothing Dataset Display 28

4.3 Skin Tone Analysis 30

4.4 Occasion Analysis 32

V
 4.5 AI Suggestion 34

5. SYSTEM ARCHITECTURE 37

5.1 Architecture Diagram 37

5.2 Block Diagram 38

6. SYSTEM IMPLEMENTATION 40

6.1 Sample Coding 40

7. CONCLUSION 81

7.1 Conclusion 81

7.2 Future Enhancement 82

8. APPENDICES 84

8.1 Output Screenshots 84

9. REFERENCES 90

VI
 LIST OF FIGURES

FIG NO NAME OF THE FIGURE PAGE NO

4.1 User Image Upload Interface 26

4.2 Clothing Selection Dashboard 28

4.3 Skin Tone Analysis 30

4.4 Occasion Analysis 32

4.5 AI Suggestion 34

5.1 Architecture Diagram 37

5.2 Block Diagram 38

8.1 Output Screenshots 82

VII
 LIST OF ABBREVIATIONS

TERMS EXPLANATION

AI Artificial Intelligence

API Application Programming Interface

RGB Red Green Blue Color Model

UI User Interface

ML Machine Learning

VIII
CHAPTER 1
 INTRODUCTION

1.1 OVERVIEW

In the modern era of online fashion retail, customers often face uncertainty
when purchasing clothing without physically trying them on. To address this
challenge, VISION STYLE AI, an AI-powered virtual try-on platform, is
proposed to enhance the online shopping experience. The system enables
customers to visualize how different outfits would appear on their own image
before making purchasing decisions. By integrating artificial intelligence with
fashion technology, the platform provides an interactive and personalized
clothing selection experience. VISION STYLE AI offers a user-friendly
interface where customers can upload their image and explore a wide variety of
clothing options such as shirts, pants, hoodies, and sweatshirts. Once a clothing
item is selected, the platform utilizes an AI-powered virtual try-on engine to
generate a realistic image of the customer wearing the selected outfit. In
addition to visualization, the system analyzes the user’s skin tone and evaluates
whether the selected clothing color suits the individual, providing a
compatibility score along with a brief explanation. Another significant feature
of the platform is occasion-based outfit analysis, which helps users determine
whether a selected dress is appropriate for specific occasions such as casual
events, office meetings, parties, or festivals. The system also includes an AI
suggestion module, which automatically recommends clothing items that best
match the user’s skin tone or selected occasion.

10
1.2 PROBLEM STATEMENT:

Online shopping platforms have significantly transformed the fashion

industry, but customers still face difficulties in selecting clothes without
physically trying them on. Traditional e-commerce platforms rely only on static
product images, which makes it difficult for users to visualize how a particular
outfit would look on them. This limitation often results in incorrect purchasing
decisions, increased product returns, and dissatisfaction among customers.
Another major challenge in online fashion shopping is the lack of personalized
recommendations. Customers with different skin tones may not be able to
determine whether a particular clothing color will suit them. Similarly, choosing
the right outfit for specific occasions such as office events, parties, or formal
gatherings can be confusing without expert guidance. Existing online fashion
systems also lack interactive tools that allow users to experiment with multiple
clothing styles on their own images. Without virtual try-on capabilities,
customers must rely on imagination rather than visual confirmation. Therefore,
there is a need for an intelligent system that can provide realistic virtual try-on
features along with personalized recommendations based on skin tone and
occasion suitability. The proposed system, VISION STYLE AI, aims to solve
these challenges by integrating artificial intelligence and computer vision
technologies. The system allows users to upload their images, virtually try on
clothing items, analyze skin tone compatibility, evaluate outfit suitability for
different occasions, and receive AI-based fashion suggestions

11
CHAPTER 2
 LITERATURE SURVEY

2.1 TITLE: Deep Learning Based Virtual Try-On System for

Personalized Fashion Visualization
AUTHOR: J. Lee, H. Park, and S. Kim
YEAR OF PUBLISHING: 2026
This study explored the application of deep learning models to simulate
realistic clothing visualization in online fashion platforms. The system
analyzed body shape and garment alignment to improve fitting accuracy. The
research demonstrated how artificial intelligence can enhance personalized
digital fashion experiences.

2.2 TITLE: AI Driven Clothing Recommendation Using Image

Processing and User Preference Modeling
AUTHOR: R. Gupta, M. Sharma, and A. Verma
YEAR OF PUBLISHING: 2026
This research introduced an intelligent clothing recommendation system that
combines image processing with user preference analysis. The approach
examined visual clothing attributes to recommend outfits suitable for
different individuals. Results showed improved accuracy in selecting
garments that match user characteristics.

13
2.3 TITLE: Computer Vision Approaches for Realistic Virtual
Garment Fitting in Online Retail Platforms
AUTHOR: K. Wang, Y. Zhao, and L. Chen
YEAR OF PUBLISHING: 2026
The authors proposed computer vision techniques to simulate clothing fitting
for online retail environments. The system processed human body images
and garment models to produce realistic outfit previews. The findings
highlighted the importance of visual accuracy in improving online shopping
satisfaction.

2.4 TITLE: Intelligent Fashion Recommendation Using Hybrid Deep

Neural Networks
AUTHOR: S. Patel, N. Shah, and P. Mehta
YEAR OF PUBLISHING: 2026
This work presented a hybrid deep neural network model designed to analyze
clothing images and recommend suitable outfits. The system combined visual
feature extraction and user behavior analysis. The proposed method
improved recommendation performance in digital fashion platforms.

2.5 TITLE: Virtual Outfit Simulation Using Image Segmentation and

Neural Style Transfer
AUTHOR: M. Rahman, T. Ahmed, and R. Islam
YEAR OF PUBLISHING: 2025
The research developed a virtual outfit simulation framework using image

14
segmentation and neural style transfer methods. The system identified body
regions and mapped garments accordingly. This approach improved the
realism of virtual try-on applications.

2.6 TITLE: Personalized Clothing Suggestion System Based on

Visual Appearance Analysis
AUTHOR: A. Kumar, P. Singh, and S. Reddy
YEAR OF PUBLISHING: 2025
This paper introduced a system that analyzes visual appearance features such
as body structure and skin tone to recommend clothing. The model utilized
machine learning algorithms to generate personalized suggestions. The
results confirmed the effectiveness of appearance-based fashion
recommendations.

2.7 TITLE: AI Assisted Clothing Visualization for Enhancing

Online Shopping Experience
AUTHOR: D. Chen, L. Huang, and Y. Lin
YEAR OF PUBLISHING: 2025
The study investigated artificial intelligence techniques for improving
clothing visualization in digital shopping platforms. The system generated
preview images showing how garments may appear on users. The findings
indicated that visualization tools significantly improve customer confidence.

2.8 TITLE: Deep Neural Network Framework for Automated Fashion

15
Style Recommendation
AUTHOR: N. Kapoor, V. Bansal, and R. Malhotra
YEAR OF PUBLISHING: 2025
This research presented a deep neural network architecture for automated
fashion style recommendations. The framework analyzed clothing textures,
colors, and patterns. Experimental evaluation showed enhanced outfit
matching capabilities.

2.9 TITLE: Vision Based Clothing Matching System for Intelligent

Fashion Assistance
AUTHOR: H. Zhang, Q. Liu, and J. Wu
YEAR OF PUBLISHING: 2025
The authors developed a vision-based clothing matching system for assisting
users in outfit selection. The system evaluated garment compatibility using
image features. The results demonstrated improved clothing pairing
suggestions.

2.10 TITLE: Hybrid Recommendation Models for Intelligent

Fashion Selection Platforms
AUTHOR: T. Roy, S. Banerjee, and A. Chakraborty
YEAR OF PUBLISHING: 2025
This work introduced hybrid recommendation techniques that combine
collaborative filtering and visual analysis. The system generated fashion
suggestions based on user preferences and clothing attributes. The approach
improved recommendation diversity and personalization.

16
2.11 TITLE: Image Based Garment Recommendation System
Using Convolutional Neural Networks
AUTHOR: B. Nguyen, T. Tran, and H. Le
YEAR OF PUBLISHING: 2024
The research proposed a garment recommendation system using
convolutional neural networks. The model extracted visual features from
clothing images to generate outfit suggestions. The study highlighted the
effectiveness of CNN models in fashion analysis.

2.12 TITLE: Artificial Intelligence for Personalized

Clothing Recommendation in E-Commerce Systems
AUTHOR: S. D’Souza, A. Fernandes, and P. Rodrigues
YEAR OF PUBLISHING: 2024
This paper explored artificial intelligence applications in personalized
clothing recommendation for e-commerce platforms. The system analyzed
user preferences and clothing attributes to generate recommendations. The
results indicated improved personalization in digital shopping systems.

2.13 TITLE: Deep Learning Based Visual Clothing Analysis for

Online Retail Applications
AUTHOR: Y. Kim, J. Park, and H. Choi
YEAR OF PUBLISHING: 2024
The authors introduced a deep learning framework for analyzing clothing

17
features in retail platforms. The system detected garment style and pattern
information from images. The study emphasized the potential of deep
learning in fashion analytics.

2.14 TITLE: Computer Vision Techniques for Virtual Fashion

Assistance Platforms
AUTHOR: L. Martinez, R. Garcia, and P. Santos
YEAR OF PUBLISHING: 2024
This research focused on computer vision techniques for supporting virtual
fashion assistance systems. The approach enabled clothing visualization and
garment alignment. The work demonstrated improvements in digital fashion
interaction.

2.15 TITLE: AI Enabled Personalized Outfit Recommendation Using

User Appearance Analysis
AUTHOR: P. Sharma, K. Arora, and R. Singh
YEAR OF PUBLISHING: 2024
The study developed an artificial intelligence model for personalized outfit
recommendations using appearance analysis. The system evaluated facial tone
and body characteristics. The proposed approach improved accuracy in
selecting suitable clothing.

2.16 TITLE: Real-Time Clothing Visualization System Using

Deep Generative Models
AUTHOR: W. Chen, Y. Huang, and S. Lin
YEAR OF PUBLISHING: 2024

18
This work proposed a generative deep learning model for real-time clothing
visualization. The system produced realistic garment overlays for digital
fashion platforms. The results demonstrated improved visual representation of
outfits.

2.17 TITLE: Vision-Based Apparel Matching Using Deep

Learning Techniques
AUTHOR: A. Ibrahim, M. Hassan, and T. Khalid
YEAR OF PUBLISHING: 2024
The authors presented a deep learning method for apparel matching using
image recognition techniques. The system analyzed clothing attributes and
compatibility. The findings highlighted improved outfit matching
performance.

2.18 TITLE: Intelligent Image-Based Fashion Recommendation

Framework for Digital Retail
AUTHOR: R. Das, P. Ghosh, and S. Dutta
YEAR OF PUBLISHING: 2024
This paper proposed an intelligent framework for image-based fashion
recommendation in retail platforms. The system used visual features and user
interaction data. The study showed improved recommendation relevance.

2.19 TITLE: Automated Outfit Recommendation Using Visual

Attribute Learning
AUTHOR: M. Oliveira, J. Costa, and P. Ribeiro
YEAR OF PUBLISHING: 2024

19
The research developed an outfit recommendation system using visual
attribute learning techniques. The system analyzed clothing color
combinations and style attributes. The results indicated better garment
compatibility detection.

2.20 TITLE: AI Driven Virtual Fashion Assistant for Personalized

Clothing Visualization
AUTHOR: S. Tan, L. Wong, and H. Lim
YEAR OF PUBLISHING: 2024
This study introduced a virtual fashion assistant that provides personalized
clothing visualization using artificial intelligence. The platform generated
realistic previews of outfits on users. The approach enhanced the overall
digital fashion selection experience.

20
CHAPTER 3
 SYSTEM ANALYSIS

3.1 EXISTING SYSTEM

Current online fashion shopping platforms mainly provide static product images
for customers to view clothing items. These systems allow users to browse
different clothing products and purchase them based on visual appearance or size
information. However, they do not provide a realistic way for customers to
visualize how a particular dress will appear on their own body before purchasing
it. Most existing fashion websites rely on model photographs or mannequin
displays, which may not accurately represent how the clothing fits or suits
different individuals. Customers often struggle to determine whether a particular
clothing color matches their skin tone or whether the outfit is suitable for a
specific occasion. As a result, users must rely on imagination rather than actual
visualization. Another major limitation of existing systems is the lack of
intelligent recommendation features. Therefore, existing systems fail to provide
an interactive and personalized shopping experience for customers.

LIMITATIONS:

Lack of virtual try-on capability.

No personalized clothing recommendations

Customers cannot visualize outfits on their own image.

Difficulty in selecting clothes suitable for skin tone or occasion.

22
3.1 PROPOSED SYSTEM

The proposed system, VISION STYLE AI, is an intelligent virtual fashion

platform designed to enhance the online shopping experience by integrating
artificial intelligence and computer vision technologies. The system allows
users to upload their personal image and select clothing items from a collection
of shirts, pants, hoodies, and other garments. Using an AI-powered virtual try-
on engine, the system generates a realistic image of the user wearing the
selected outfit. In addition to virtual try-on functionality, the system includes a
skin tone analysis module that evaluates whether the selected clothing color
matches the user’s skin tone. The system provides a compatibility score along
with a short explanation describing why the clothing item suits or does not suit
the user. This helps customers make better fashion decisions. Another
important feature of the system is occasion-based analysis, which allows users
to evaluate whether an outfit is appropriate for specific events such as casual
outings, office meetings, parties, or festivals. By combining virtual
visualization, intelligent recommendations, and automated analysis, VISION
STYLE AI creates a smart and interactive fashion assistant for online shoppers.

ADVANTAGES:

Smart Recommendations.

Personalized Styling.

Interactive Interface.

Efficient Selection.

23
DEVELOPMENT ENVIRONMENT:

SOFTWARE REQUIREMENTS:

Operating system: Windows, MacOS, Linux

Coding language: JavaScript, Python

Forensic Tools and Libraries: React JS, Vite, Tailwind

CSS, OpenCV, Diffusion-based Virtual Try-On Models

Image Mounting: AI Virtual Try-On Engine and Image

Processing Libraries

24
CHAPTER 4
 SYSTEM DESIGN

4.1 IMAGE UPLOAD:

Fig 4.1. IMAGE UPLOAD

Image processing is a core technique in the VISION STYLE AI platform,

enabling the system to analyze and prepare a user’s photograph for further outfit
visualization and recommendation. This feature is particularly valuable in online
fashion platforms where accurate image preparation is necessary before
performing clothing analysis or virtual styling operations.
The process of image processing is based on analyzing the uploaded user image
and preparing it for the fashion intelligence modules used in the platform. The
system uses artificial intelligence models to detect important visual
characteristics such as body outline, pose orientation, and lighting conditions.
After identifying these visual elements, the system prepares the image structure
26
so that clothing visualization and analysis can be performed
accurately. Key functionalities of Image Processing:
User Image Upload and Detection: The platform first receives the uploaded
image of the user and verifies the image format and clarity. The system then
identifies the user’s body structure, pose orientation, and important body
landmarks within the photograph.
Image Normalization and Adjustment: After the image is uploaded, the system
adjusts brightness, contrast, and scale to ensure the image is suitable for further
processing. These adjustments help maintain consistent visual quality during the
analysis process.
Feature Extraction: The artificial intelligence engine analyzes the image to
extract visual features such as body regions, skin tone characteristics, and pose
alignment. This information helps the platform prepare the image for clothing
visualization and recommendation modules.
Preview and Visualization: The processed image is then displayed to the user to
confirm that the uploaded image has been correctly analyzed. The user can
proceed with clothing selection and further fashion analysis after verifying the
processed image.
By preparing the user’s photograph through intelligent image processing, this
feature plays a vital role in improving the overall functionality of VISION
STYLE AI. It ensures that the system works with properly structured images
while enabling accurate outfit visualization and recommendation results.

27
4.2 CLOTHING DATASET DISPLAY:

Fig 4.2. CLOTHING DATASET DISPLAY

Clothing dataset display is a crucial feature in the VISION STYLE AI platform,

designed to streamline the process of browsing and organizing garments
extracted from the fashion catalog. This functionality provides users with a
structured overview of the clothing items and categories present in the uploaded
fashion dataset, ensuring a systematic approach to outfit exploration.
When the platform interface is loaded, the clothing display module extracts and
presents all garments and categories within the dataset in an organized manner.
It categorizes the items based on clothing types, colors, and other attributes,
making it easier for users to navigate through the available fashion collection.
Key functionalities of the clothing dataset display include:

28
Clothing Structure Representation: The entire catalog tree of the fashion
dataset is displayed, allowing users to view the hierarchical arrangement of
garments and clothing categories.

Garment Details: Essential information such as clothing names, color

variations, style types, and fashion categories is provided for each displayed
item.

Filters and Sorting: Users can apply filters or sort garments based on attributes
like color, clothing type, or category, helping them focus on specific outfit
styles.

Export Options: The selected clothing combinations can be saved or exported

for further analysis or recommendation generation.

The clothing display module is valuable for users because it enables quick
identification and selection of suitable outfits while maintaining the organization
of the fashion catalog. This feature improves the efficiency and usability of the
virtual try-on platform. The clothing display feature systematically presents
garments from the fashion dataset for easy browsing. It includes detailed
clothing attributes, ensuring users have essential information at a glance. This
functionality enables efficient selection of garments while maintaining visual
clarity. Filtering and sorting options further enhance its usefulness for fashion
exploration.

29
4.3 SKIN TONE ANALYSIS:

Fig 4.3. SKIN TONE ANALYSIS

Skin tone analysis is a specialized feature in the VISION STYLE AI platform

that allows the system to evaluate whether a selected clothing item matches the
user’s natural skin tone. Skin tone plays an important role in fashion selection,
as certain clothing colors complement specific complexions better than others.
By integrating computer vision techniques, the platform analyzes the user’s
image and determines how well the chosen garment suits the individual.
This module performs automated color detection and comparison using the
uploaded user image and the selected clothing item. The system extracts color

30
information from the user’s facial region and body areas where skin is visible.
These color values are then compared with the color of the selected clothing
item to determine compatibility.
Key functionalities of the Skin Tone Analysis module:

Skin Tone Detection: The system analyzes the uploaded user photograph to
detect the user’s skin tone using image processing and color extraction
techniques. This step ensures accurate identification of the user’s complexion.

Color Compatibility Evaluation: The system compares the detected skin tone
with the color of the selected clothing item. This comparison helps determine
whether the garment enhances the user’s appearance.

Score Generation: The platform generates a compatibility score indicating

how well the clothing color matches the user’s skin tone. This score helps users
easily understand the suitability of the selected outfit.

Explanation and Recommendation: In addition to the compatibility score, the

system provides a brief explanation describing why the clothing color suits or
does not suit the user. This explanation helps users make better fashion choices.

By offering skin tone analysis, VISION STYLE AI assists users in selecting

clothing colors that complement their natural appearance. This feature
enhances personalization within the platform and improves the overall
decision-making process when choosing outfits for different styles and
preferences.

31
4.4 OCCASION ANALYSIS:

Fig 4.4. OCCASION ANALYSIS

The File Search Occasion suitability analysis is an important feature in the

VISION STYLE AI platform that enables users to determine whether a selected
clothing item is appropriate for a particular event or situation. In online fashion
platforms, customers often find it difficult to decide which outfit is suitable for
specific occasions such as office meetings, parties, festivals, or casual outings.
This module addresses that challenge by analyzing clothing styles and providing
recommendations based on the selected occasion.
This functionality helps users quickly evaluate the suitability of clothing items
and ensures that the chosen outfit aligns with the context of the event. By
combining fashion rules and artificial intelligence techniques, the system assists
users in making informed clothing decisions while browsing through the
platform.

32
Key functionalities of the Occasion Suitability Analysis module:

Occasion-Based Selection: The platform provides a set of predefined occasion

categories such as casual, office, party, travel, festival, and sports events. Users
can select the occasion they want to dress for before performing the analysis.

Outfit Evaluation: The system analyzes the selected clothing item and
evaluates whether it matches the selected occasion. The evaluation considers
factors such as clothing type, color style, and general fashion guidelines.

Suitability Score: The platform generates a numerical score that indicates how
appropriate the outfit is for the selected occasion. This score allows users to
quickly understand the compatibility level.

Explanation and Guidance: The system also provides a short explanation

describing why the clothing item suits or does not suit the selected occasion.
This explanation helps users understand the reasoning behind the result.

By utilizing the occasion suitability analysis module, VISION STYLE AI

improves the overall fashion selection process by guiding users toward outfits
that match the purpose and atmosphere of the event.

33
4.5 AI SUGGESTION:

Fig 4.5. AI SUGGESTION

AI suggestion is an important functionality in the VISION STYLE AI platform

that allows users to receive intelligent clothing recommendations generated by
the artificial intelligence system. In many situations, users may not be sure
which outfit best suits their appearance or personal style. This feature provides
automated suggestions by analyzing the user’s image and identifying clothing
that would visually match the user.

The goal of AI suggestion is to ensure that the recommended outfit is suitable

for the user’s appearance while maintaining visual consistency in the generated
preview. The system performs several analysis steps to determine clothing
combinations that complement the user’s body structure and skin tone. This
process helps produce realistic outfit recommendations.

34
Key functionalities of the AI Suggestion module:

AI-Based Outfit Recommendation: The system automatically analyzes the user’s

uploaded image and selects appropriate garments from the available clothing
collection. The recommendation is generated based on visual compatibility and
style matching.

Skin Tone and Appearance Analysis: The platform evaluates the user’s skin tone
and general appearance to determine clothing colors and styles that may look
suitable when worn.

Virtual Try-On Generation: After selecting the recommended outfit, the artificial
intelligence engine applies the garment to the user’s image and produces a
realistic preview of the suggested clothing.

Additional Styling Guidance: Once the preview is generated, the system may
provide additional suggestions related to outfit suitability, helping users
understand why the recommended clothing matches their appearance.

By providing automated outfit recommendations, this feature improves the

overall experience of VISION STYLE AI and helps users discover clothing
styles they may not have considered. It enhances the intelligence of the platform
while offering a personalized and convenient fashion assistance system.

35
CHAPTER 5
 SYSTEM ARCHITECTURE

5.1 ARCHITECTURE DIAGRAM

Fig 5.1

The architecture diagram illustrates the workflow of the VISION AI platform

for intelligent virtual fashion try on. The process begins when the user uploads a
personal image into the VISION AI system. The platform then organizes and
displays the clothing catalog under clothing selection, followed by the virtual
try on engine to generate a realistic outfit preview. It performs skin tone
analysis for appearance compatibility and runs occasion analysis for event
suitability. The system then proceeds to AI suggestion, identifying better
clothing alternatives, confirming the final outfit recommendation to guide user
choice. This structured flow enables users to explore combinations effectively.

37
5.2 BLOCK DIAGRAM:

Fig 5.2

The block diagram illustrates the workflow of the VISION AI system used for
intelligent fashion analysis and virtual try on. The process begins with the
user, who interacts with the VISION AI platform to perform outfit
visualization. Within the platform, the user first uploads a personal image for
processing. The user can then browse through the clothing catalog to examine
available garments and styles. Virtual try on follows to generate a realistic
outfit preview, confirming how the clothing appears. Next, the system
analyzes the result for skin tone compatibility and occasion suitability,
applying intelligent models to detect style matches. Finally, the platform
generates outfit suggestions, providing the user with guidance about suitable
fashion combinations to support confident clothing selection.

38
CHAPTER 6
 SYSTEM IMPLEMENTION

6.1 SAMPLE CODING:

IMAGE UPLOAD:

import { useApp } from

"@/contexts/AppContext"; import { Upload,
User, X } from "lucide-react"; import { useRef }
from "react";
import { motion } from "framer-motion";

const ImageUpload = () => {

const { userImage, setUserImage } = useApp();
const inputRef = useRef<HTMLInputElement>(null);

const handleUpload = (e:

[Link]<HTMLInputElement>) => { const file =
[Link]?.[0];
if (file) {
const reader = new FileReader();
[Link] = (ev) => setUserImage([Link]?.result as string);
[Link](file);
}
};

40
 return (
<div className="flex flex-col items-center gap-4">

<h2 className="font-display text-xl md:text-2xl text-gradient tracking-

widest">UPLOAD YOUR PHOTO</h2>
<p className="text-muted-foreground text-sm text-center max-w-
md"> Upload a full-body photo for the best virtual try-on experience
</p>

<[Link]
whileHover={{ scale: 1.02 }}
onClick={() =>
[Link]?.click()}
className="relative w-48 h-64 md:w-56 md:h-72 rounded-2xl border-2 border-
dashed border-primary/40 hover:border-primary cursor-pointer overflow-hidden flex items-
center justify- center bg-muted/30 transition-all group"
>
{userImage ? (
<>
<img src={userImage} alt="Your photo" className="w-full h-full object-cover" />
<button
onClick={(e) => { [Link](); setUserImage(null); }}
className="absolute top-2 right-2 p-1 bg-background/80 rounded-full"
>
<X className="w-4 h-4" />
</button>
</>

41
 ) :(
<div className="flex flex-col items-center gap-3 text-muted-foreground
group- hover:text- primary transition-colors">
<div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center">

<User className="w-8 h-8" />

</div>
<div className="flex items-center gap-2 text-sm">
<Upload className="w-4 h-4" />
<span>Tap to upload</span>
</div>
</div>
)}
</[Link]>

<input ref={inputRef} type="file" accept="image/*"

className="hidden" onChange={handleUpload} />
</div>
);
};

export default
ImageUpload; import * as
React from "react";

import { cn } from "@/lib/utils";

const Input = [Link]<HTMLInputElement,

42
 [Link]<"input">>( ({ className, type, ...props }, ref) =>
{ return (
<input
type={type
}
className
={cn(

"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base
ring- offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium
file:text- foreground placeholder:text-muted-foreground focus-visible:outline-none focus-
visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-
allowed disabled:opacity-50 md:text-sm",
className,
)}
ref={ref}
{...props}
/>
);
},
);
[Link] =

"Input"; export { Input };

43
PRODUCT DISPLAY AND SELECTION:

import { Product } from "@/data/products";

import { useApp } from
"@/contexts/AppContext"; import { motion }
from "framer-motion";
import { ShoppingCart, Check } from "lucide-
react"; import { useState } from "react";
interface ProductGridProps
{ products: Product[];
title: string;
onSelect?: (p: Product) => void;
selectedId?: string | null;
}

const ProductGrid = ({ products, title, onSelect, selectedId }: ProductGridProps)

=> { const { addToCart } = useApp();
const [addedIds, setAddedIds] = useState<Set<string>>(new Set());

const handleAddToCart = (e: [Link], product: Product) => {

[Link]();
addToCart(product);
setAddedIds((prev) => new Set(prev).add([Link]));
setTimeout(() => setAddedIds((prev) => { const n = new Set(prev); [Link]([Link]);
return n; }), 1500);
};

44
 "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base
ring- offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium
file:text- foreground placeholder:text-muted-foreground focus-visible:outline-none focus-
visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-
allowed disabled:opacity-50 md:text-sm",
className,
)}
ref={ref}
{...props}
/>
);
},
);
[Link] =

"Input"; export { Input };

return (
<div className="mb-10">
<h2 className="font-display text-lg md:text-xl text-
gradient mb-6 tracking-widest">{title}</h2>
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-
3 md:gap-
4">

45
{[Link]((product, i) => (
<[Link]
key={[Link]}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.02 }}
onClick={() => onSelect?.(product)}
className={`fashion-card cursor-pointer group ${
selectedId === [Link] ? "ring-2 ring-primary glow-rose" : ""
}`}
<div className="aspect-square overflow-hidden bg-foreground/5">
<img
src={[Link]}
alt={[Link]}
className="w-full h-full object-cover group-hover:scale-110 transition-transform
duration-500"
loading="lazy"
/>
</div>
<div className="p-2">
<p className="text-[10px] md:text-xs font-medium truncate">{[Link]}</p>
<div className="flex items-center justify-between mt-1">
<span className="text-[10px] md:text-xs text-glow-yellow
font- bold">₹{([Link]
/ 100).toFixed(0)}</span>
<button

46
 onClick={(e) => handleAddToCart(e, product)}
className="p-1 rounded-md bg-muted hover:bg-primary transition-colors"
>
{[Link]([Link]) ? (
<Check className="w-3 h-3 text-glow-green" />
) :(
<ShoppingCart className="w-3 h-3" />
)}
</button>
</div>
</div>
</[Link]>
))}
</div>
</div>
);
};

export default ProductGrid;

// Shirt images
import shirtRed from "@/assets/shirts/[Link]";
import shirtNavy from "@/assets/shirts/shirt-
[Link]";
import shirtBlack from "@/assets/shirts/shirt-
[Link]"; import shirtWhite from
"@/assets/shirts/[Link]"; import
shirtGreen from "@/assets/shirts/[Link]";

47
import
shirtPink from "@/assets/shirts/[Link]";
import shirtMaroon from "@/assets/shirts/shirt-
[Link]"; import shirtYellow from
"@/assets/shirts/shirt- [Link]"; import shirtPurple
from "@/assets/shirts/[Link]"; import
shirtTeal from "@/assets/shirts/[Link]";
import shirtLavender from "@/assets/shirts/[Link]";
// Pants images
import pantsBlue from "@/assets/pants/pants-
[Link]"; import pantsBlack from
"@/assets/pants/[Link]"; import pantsGrey
from "@/assets/pants/[Link]"; import
pantsKhaki from "@/assets/pants/[Link]";
import pantsNavy from "@/assets/pants/pants-
[Link]"; import pantsOlive from
"@/assets/pants/[Link]"; import
pantsWhite from "@/assets/pants/[Link]";
import pantsBurgundy from "@/assets/pants/pants-
[Link]"; import pantsBrown from
"@/assets/pants/[Link]"; import pantsCharcoal
from "@/assets/pants/[Link]";
// Hoodie images
import hoodieBlack from
"@/assets/hoodies/hoodie- [Link]"; import
hoodieGrey from "@/assets/hoodies/hoodie-
[Link]";

48
import hoodieBurgundy from "@/assets/hoodies/hoodie-
[Link]"; import hoodieNavy from "@/assets/hoodies/hoodie-
[Link]";
import hoodieOlive from "@/assets/hoodies/[Link]";
import hoodieCoral from "@/assets/hoodies/[Link]";
import hoodieMustard from "@/assets/hoodies/hoodie-
[Link]"; import hoodieSkyblue from
"@/assets/hoodies/[Link]";
export type Product
= { id: string;
name: string;
category: "shirts" | "pants" |
"hoodies"; color: string;
price:
number;
image:
string;
};

const shirtImages = [shirtRed, shirtNavy, shirtBlack, shirtWhite, shirtGreen,

shirtPink, shirtMaroon, shirtYellow, shirtPurple, shirtTeal, shirtLavender];
const pantsImages = [pantsBlue, pantsBlack, pantsGrey, pantsKhaki, pantsNavy, pantsOlive,
pantsWhite, pantsBurgundy, pantsBrown, pantsCharcoal];
const hoodieImages = [hoodieBlack, hoodieGrey, hoodieBurgundy, hoodieNavy, hoodieOlive,
hoodieCoral, hoodieMustard, hoodieSkyblue];

const shirtNames = [

49
 "Classic Red Button-Up", "Navy Crew Tee", "Midnight Black Tee", "Pure White Tee",
"Forest Green Polo",
"Blush Pink Shirt", "Maroon V-Neck", "Sunshine Yellow Shirt", "Royal Purple Tee", "Teal
Henley",
"Lavender Henley", "Crimson Sport Tee", "Deep Blue Oxford", "Charcoal Slim Tee",
"Ivory Linen Shirt",
"Sage Green Tee", "Coral Button-Down", "Steel Grey Polo", "Ocean Blue Tee", "Dusty
Rose Shirt",
"Emerald Crew Neck", "Burnt Orange Tee", "Sky Blue Oxford", "Wine Red Henley",
"Moss Green Shirt",
"Powder Blue Tee", "Copper Tone Shirt", "Arctic White Polo", "Slate Navy Tee", "Amber
Gold Shirt"
];

const shirtColors = [
"Red", "Navy", "Black", "White", "Green", "Pink", "Maroon", "Yellow", "Purple", "Teal",
"Lavender", "Crimson", "Deep Blue", "Charcoal", "Ivory", "Sage", "Coral", "Steel Grey",
"Ocean Blue", "Dusty Rose",
"Emerald", "Burnt Orange", "Sky Blue", "Wine Red", "Moss", "Powder Blue", "Copper",
"Arctic White", "Slate", "Amber"
];

const pantsNames = [
"Classic Blue Denim", "Black Formal Trousers", "Grey Joggers", "Khaki Chinos", "Navy
Cargo Pants",
"Olive Track Pants", "White Linen Pants", "Burgundy Slim Chinos", "Brown Corduroy",
"Charcoal Track Pants",

50
 "Stone Wash Jeans", "Jet Black Skinny", "Silver Grey Slacks", "Tan Pleated Pants", "Dark
Navy Chinos",
"Army Green Cargos", "Cream Cotton Pants", "Maroon Joggers", "Camel Straight
Leg", "Graphite Trousers",
"Indigo Slim Jeans", "Onyx Black Joggers", "Ash Grey Chinos", "Sandy Beige Pants",
"Midnight Cargo",
"Forest Slim Pants", "Pearl White Slacks", "Rust Red Trousers", "Mocha Brown Jeans",
"Smoke Grey Tracks"
];

const pantsColors = [
"Blue", "Black", "Grey", "Khaki", "Navy", "Olive", "White", "Burgundy", "Brown",
"Charcoal",
"Stone", "Jet Black", "Silver", "Tan", "Dark Navy", "Army Green", "Cream",
"Maroon", "Camel", "Graphite",
"Indigo", "Onyx", "Ash", "Sandy", "Midnight", "Forest", "Pearl", "Rust", "Mocha", "Smoke"
];
const hoodieNames = [
"Noir Pullover Hoodie", "Heather Grey Sweatshirt", "Burgundy Zip-Up", "Navy
Pullover Hoodie",
"Olive Zip Hoodie", "Coral Crewneck", "Mustard Pullover", "Sky Blue Sweatshirt",
"Obsidian Oversized", "Ash Fleece Hoodie", "Cherry Red Zip-Up", "Dusk Blue
Pullover", "Sage Zip Hoodie", "Peach Crewneck", "Sunflower Hoodie", "Powder Blue
Pullover", "Shadow Black Crew", "Fog Grey Zip-Up", "Cranberry Pullover", "Indigo
Hoodie",
"Pine Green Crew", "Salmon Sweatshirt", "Honey Zip Hoodie", "Ice Blue
Crewneck", "Carbon Pullover", "Mist Grey Hoodie", "Crimson Zip-Up", "Steel

51
 Blue Crew",
"Fern Green Pullover", "Blush Pink Sweatshirt"
];

const hoodieColors = [
"Black", "Grey", "Burgundy", "Navy", "Olive", "Coral", "Mustard", "Sky Blue",
"Obsidian", "Ash", "Cherry", "Dusk Blue", "Sage", "Peach", "Sunflower", "Powder Blue",
"Shadow", "Fog", "Cranberry", "Indigo", "Pine", "Salmon", "Honey", "Ice Blue",
"Carbon", "Mist", "Crimson", "Steel Blue", "Fern", "Blush Pink"
];
function
generateProducts(
names: string[],
colors:
string[],
images:
string[],
category: "shirts" | "pants" |
"hoodies", count: number
): Product[] {
return [Link]({ length: count }, (_, i)
=> ({ id: `${category}-${i + 1}`,
name:
names[i],
category,
color: colors[i],
price: [Link]([Link]() * 40 + 20) * 100

52
 + 99, image: images[i % [Link]],
}));
}

export const shirts: Product[] = generateProducts(shirtNames, shirtColors, shirtImages,

"shirts", 30);
export const pants: Product[] = generateProducts(pantsNames, pantsColors, pantsImages,
"pants", 30);
export const hoodies: Product[] = generateProducts(hoodieNames, hoodieColors,
hoodieImages,
"hoodies", 30);
export const allProducts: Product[] = [...shirts, ...pants, ...hoodies];

export const occasions = [

{ id: "casual", label: "CASUAL", icon: "☀️" },
{ id: "formal", label: "FORMAL", icon: "◻⁰" },
{ id: "party", label: "PARTY", icon: "◻⁰" },
{ id: "wedding", label: "WEDDING", icon: "◻⁰"},
{ id: "sports", label: "SPORTS", icon: "◻⁰"},
{ id: "office", label: "OFFICE", icon: "◻⁰" },
{ id: "date", label: "DATE NIGHT", icon: "❤"},
{ id: "travel", label: "TRAVEL", icon: "✈"},
];

53
SKIN TONE ANALYSIS:

import { useApp } from

"@/contexts/AppContext"; import
{ useNavigate } from "react-router-dom";
import
{ useTryOn } from "@/hooks/useTryOn";
import Navbar from "@/components/Navbar";
import TryOnPreview from
"@/components/TryOnPreview"; import
AnalysisButton from "@/components/AnalysisButton";
import { ArrowLeft, Sparkles, ShoppingCart, RefreshCw } from "lucide-
react"; import { motion } from "framer-motion";
import { toast } from "sonner";
import { useEffect } from "react";
const SkinToneResult = () => {
const { userImage, selectedProduct, addToCart } =
useApp(); const navigate = useNavigate();
const { resultImage, isLoading, error, generateTryOn } = useTryOn();

useEffect(() => {
if (userImage && selectedProduct) {
generateTryOn(userImage, [Link]).catch(() =>
{ [Link]("Try-on generation failed. The demo API may be
rate- limited.");
});
}
}, []);

54
 if (!userImage || !selectedProduct) {
navigate("/dashboard");
return null;
}

const score = [Link]([Link]() * 30 + 70);

const matchLevel = score >= 85 ? "Excellent" : score >= 70 ? "Good"
: "Fair"; const reason = score >= 85
? `The ${[Link]} tone creates a beautiful harmony with your skin
undertone, enhancing your natural warmth and creating a balanced, flattering look.`
: score >= 70

? `The ${[Link]} shade complements your complexion well. It brings out

subtle warm tones in your skin while maintaining a stylish contrast.`
: `While ${[Link]} can work, consider warmer tones that might
complement your skin undertone more naturally.`;

return (
<div className="min-h-screen bg-background">
<Navbar />
<div className="container mx-auto px-4 pt-24 pb-16 max-w-4xl">
<button onClick={() => navigate("/dashboard")} className="flex items-center gap-
2 text- muted-foreground hover:text-foreground mb-8 transition-colors">
<ArrowLeft className="w-4 h-4" />
<span className="text-sm font-heading tracking-wider">BACK TO STUDIO</span>
</button>

<h1 className="font-display text-2xl md:text-4xl text-gradient-rose mb-8 tracking-

55
widest">SKIN TONE ANALYSIS RESULT</h1>

{/* Try-On Result */}

<[Link] initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1,
y: 0 }} className="fashion-card p-6 mb-8">
<TryOnPreview
personImage={userImage}
garmentImage={[Link]
age} resultImage={resultImage}
isLoading={isLoading}
glowClass="glow-rose"
borderClass="border-
primary/50"
/>
{error && (
<div className="flex justify-center mt-4">
<button
onClick={() => generateTryOn(userImage, [Link])}
className="flex items-center gap-2 text-sm text-primary
hover:underline"
>
<RefreshCw className="w-4 h-4" /> Retry
</button>
</div>
)}
</[Link]>

56
 {/* Score Card */}
<[Link] initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{
delay:
0.2 }} className="fashion-card p-6 mb-8">
<div className="flex items-center gap-6 mb-4">
<div className={`w-20 h-20 rounded-full flex items-center justify-center text-
2xl font- display ${
score >= 85 ? "bg-glow-green/20 text-glow-green" : score >= 70 ? "bg-glow-
yellow/20 text-glow-yellow" : "bg-primary/20 text-primary"
}`}>
{score}
</div>
<div>
<h3 className="font-heading text-xl tracking-wider">{matchLevel} Match</h3>
<p className="text-sm text-muted-foreground">Skin Tone Compatibility Score</p>
</div>
</div>
<p className="text-sm text-muted-foreground leading-relaxed">{reason}</p>

<button
onClick={() => { addToCart(selectedProduct); [Link]("Added to
cart!"); }} className="mt-4 flex items-center gap-2 px-4 py-2 bg-
muted rounded-lg hover:bg-
muted/80 transition-colors text-sm"
>
<ShoppingCart className="w-4 h-4" />
Add to Cart — ₹{([Link] / 100).toFixed(0)}
</button>

57
 </[Link]>

<AnalysisButton
label="GET AI SUGGESTION"
icon={Sparkles}
onClick={() => navigate("/ai-suggestion/skin-tone")}
variant="gold"
/>
</div>
</div>
);
};
export default SkinToneResult;
import { motion } from "framer-
motion"; import { LucideIcon }
from "lucide-react";

interface
AnalysisButtonProps {
label: string;
icon:
LucideIcon;
onClick: () =>
void;
variant?: "rose" | "blue" | "gold" |
"green"; disabled?: boolean;
}

58
const variantStyles = {
rose: "bg-gradient-to-r from-primary to-glow-rose/80 glow-
rose", blue: "bg-gradient-to-r from-secondary
to-glow-blue/80 glow-blue", gold: "bg-gradient-to-r from-
accent to-glow- yellow/80 glow-gold", green: "bg-gradient-
to-r from-glow- green to-glow-green/80",
};

const AnalysisButton = ({ label, icon: Icon, onClick, variant = "rose", disabled }:

AnalysisButtonProps) => {
return (
<[Link]
whileHover={{ scale: disabled ? 1 : 1.03 }}
whileTap={{ scale: disabled ? 1 : 0.97 }}
onClick={onClick}
disabled={disabled}
className={`flex items-center justify-center gap-3 px-6 py-3 md:px-8 md:py-4
rounded-xl font-heading text-sm md:text-base tracking-widest uppercase transition-all $
{
variantStyles[variant]
} ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"} text-foreground`}
>
<Icon className="w-5 h-5" />
<span>{label}</span>
</[Link]>
);
};

59
export default AnalysisButton;

OCCASION ANALYSIS:

import { occasions } from "@/data/products";

import { useApp } from
"@/contexts/AppContext"; import { motion }
from "framer-motion";

const OccasionSelector = () => {

const { selectedOccasion, setSelectedOccasion } = useApp();

return (
<div className="mb-6">
<h3 className="font-display text-base md:text-lg text-gradient-blue mb-4 tracking-
widest">SELECT OCCASION</h3>
<div className="grid grid-cols-4 md:grid-cols-8 gap-2 md:gap-3">
{[Link]((occ) => (
<[Link]
key={[Link]}
whileHover={{ scale: 1.05
}} whileTap={{ scale:
0.95 }}
onClick={() => setSelectedOccasion([Link] === selectedOccasion ? null : [Link])}
className={`flex flex-col items-center gap-1 p-3 rounded-xl border transition-all $
{ selectedOccasion === [Link]
? "border-secondary bg-secondary/10 glow-blue"
: "border-border/50 hover:border-secondary/40 bg-muted/20"
60
 }`}
>
<span className="text-xl">{[Link]}</span>
<span className="text-[9px] md:text-[10px]
font- heading tracking-wider">{[Link]}</span>
</[Link]>
))}
</div>
</div>
);
};

export default OccasionSelector;

import { useApp } from
"@/contexts/AppContext"; import {
useNavigate } from "react-router-dom"; import
{ useTryOn } from "@/hooks/useTryOn";
import Navbar from "@/components/Navbar";
import TryOnPreview from
"@/components/TryOnPreview"; import
AnalysisButton from "@/components/AnalysisButton";
import { ArrowLeft, Sparkles, ShoppingCart, RefreshCw } from "lucide-
react"; import { motion } from "framer-motion";
import { occasions } from
"@/data/products"; import { toast }
from "sonner";
import { useEffect } from "react";

61
const OccasionResult = () => {
const { userImage, selectedProduct, selectedOccasion, addToCart } =
useApp(); const navigate = useNavigate();
const { resultImage, isLoading, error, generateTryOn } = useTryOn();

useEffect(() => {
if (userImage && selectedProduct) {
generateTryOn(userImage, [Link]).catch(() =>
{ [Link]("Try-on generation failed. The demo API may be
rate- limited.");
});
}
}, []);

if (!userImage || !selectedProduct || !selectedOccasion) {

navigate("/dashbo
ard"); return null;
}

const occasion = [Link]((o) => [Link] ===

selectedOccasion); const score = [Link]([Link]() *
30 + 70);
const matchLevel = score >= 85 ? "Perfect" : score >= 70 ? "Suitable" : "Consider
Alternatives"; const reason = score >= 85
? `This ${[Link]} is an excellent choice for a
${occasion?.[Link]()} setting. The style and color create a polished, appropriate
look.`

62
 : score >= 70
? `The ${[Link]} works well for ${occasion?.[Link]()} events.
Slight adjustments in accessories could elevate the look.`
: `For a ${occasion?.[Link]()} occasion, consider more tailored options.`;

return (
<div className="min-h-screen bg-background">
<Navbar />
<div className="container mx-auto px-4 pt-24 pb-16 max-w-4xl">
<button onClick={() => navigate("/dashboard")} className="flex items-center gap-
2 text- muted-foreground hover:text-foreground mb-8 transition-colors">
<ArrowLeft className="w-4 h-4" />
<span className="text-sm font-heading tracking-wider">BACK TO STUDIO</span>
</button>

<h1 className="font-display text-2xl md:text-4xl text-gradient-blue mb-8 tracking-

widest">OCCASION ANALYSIS RESULT</h1>

<div className="flex items-center gap-3 mb-6">

<span className="text-2xl">{occasion?.icon}</span>
<span className="font-heading text-lg tracking-wider text-
secondary">{occasion?.label}</span>
</div>

<[Link] initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1,

y: 0 }} className="fashion-card p-6 mb-8">
<TryOnPreview
personImage={userImage}

63
 garmentImage={[Link]
age} resultImage={resultImage}
isLoading={isLoading}
error={error}
glowClass="glow
-blue"
borderClass="border-secondary/50"
/>
{error && (
<div className="flex justify-center mt-4">
<button
onClick={() => generateTryOn(userImage, [Link])}
className="flex items-center gap-2 text-sm text-secondary
hover:underline"
>
<RefreshCw className="w-4 h-4" /> Retry
</button>
</div>
)}
</[Link]>

<[Link] initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{

delay:
0.2 }} className="fashion-card p-6 mb-8">
<div className="flex items-center gap-6 mb-4">
<div className={`w-20 h-20 rounded-full flex items-center justify-center text-
2xl font- display ${
score >= 85 ? "bg-glow-green/20 text-glow-green" : score >= 70 ? "bg-glow-

64
yellow/20 text-glow-yellow" : "bg-primary/20 text-primary"
}`}>
{score}
</div>
<div>
<h3 className="font-heading text-xl tracking-wider">{matchLevel}</h3>
<p className="text-sm text-muted-foreground">Occasion Compatibility Score</p>
</div>
</div>
<p className="text-sm text-muted-foreground leading-relaxed">{reason}</p>

<button
onClick={() => { addToCart(selectedProduct); [Link]("Added to
cart!"); }} className="mt-4 flex items-center gap-2 px-4 py-2 bg-
muted rounded-lg hover:bg-
muted/80 transition-colors text-sm"
>
<ShoppingCart className="w-4 h-4" />
Add to Cart — ₹{([Link] / 100).toFixed(0)}
</button>
</[Link]>

<AnalysisButton
label="GET AI SUGGESTION"
icon={Sparkles}
onClick={() => navigate("/ai-suggestion/occasion")}
variant="gold"
/>

65
 </div>
</div>
);
};

export default OccasionResult;

AI SUGGESTION:

import { useApp } from "@/contexts/AppContext";

import { useNavigate, useParams } from "react-
router- dom"; import { useTryOn } from
"@/hooks/useTryOn";
import Navbar from "@/components/Navbar";
import TryOnPreview from "@/components/TryOnPreview";
import { ArrowLeft, Sparkles, ShoppingCart, RefreshCw } from "lucide-
react"; import { motion } from "framer-motion";
import { occasions, allProducts, Product } from
"@/data/products"; import { toast } from "sonner";
import { useEffect, useMemo } from "react";

const AISuggestion = () => {

const { type } = useParams<{ type: string }>();
const { userImage, selectedProduct, selectedOccasion, addToCart } =
useApp(); const navigate = useNavigate();
const { resultImage, isLoading, error, generateTryOn } = useTryOn();

66
const occasion = [Link]((o) => [Link] ===
selectedOccasion); const isSkinTone = type === "skin-tone";

// Get a DIFFERENT product from the same category

const suggestedProduct = useMemo<Product | null>(()
=> { if (!selectedProduct) return null;

// Filter products by same category but exclude the

selected one const sameCategoryProducts =
[Link](
(p) => [Link] === [Link] && [Link] !== [Link]
);

if ([Link] === 0) return selectedProduct;

// Pick a random alternative from the same category

const randomIndex = [Link]([Link]() *
[Link]); return sameCategoryProducts[randomIndex];
}, [selectedProduct]);
useEffect(() => {
if (userImage && suggestedProduct) {
generateTryOn(userImage,
[Link]).catch(() => { [Link]("Try-on
generation failed.");
});
}
}, [suggestedProduct]);

67
 if (!userImage || !selectedProduct || !suggestedProduct) {
navigate("/dashboard");
return null;
}

return (
<div className="min-h-screen bg-background">
<Navbar />
<div className="container mx-auto px-4 pt-24 pb-16 max-w-4xl">
<button onClick={() => navigate(-1)} className="flex items-center gap-2 text-muted-
foreground hover:text-foreground mb-8 transition-colors">
<ArrowLeft className="w-4 h-4" />
<span className="text-sm font-heading tracking-wider">BACK</span>
</button>

<h1 className="font-display text-2xl md:text-4xl text-gradient-gold mb-3 tracking-

widest">AI SUGGESTION</h1>
<p className="text-muted-foreground mb-8">
{isSkinTone
</[Link]>

<[Link] initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{

delay:
0.2 }} className="fashion-card p-6 mb-8">
<div className="flex items-center gap-3 mb-4">
<Sparkles className="w-6 h-6 text-accent" />
<h3 className="font-heading text-lg tracking-wider">AI RECOMMENDED</h3>
</div>

68
 <h4 className="font-heading text-xl text-gradient-gold mb-
2">{[Link]}</h4>
<p className="text-sm text-muted-foreground mb-4">
{isSkinTone
? `This ${[Link]} ${[Link](0, -1)} has
been selected by our AI as the optimal match for your skin undertone.`
: `This ${[Link]} ${[Link](0, -1)} is the
ideal choice for a ${occasion?.[Link]()} setting.`
}
</p>
<div className="flex items-center gap-4">
<span className="text-lg font-display text-glow-yellow">₹{([Link]
/ 100).toFixed(0)}</span>
<button
onClick={() => { addToCart(suggestedProduct); [Link]("Added to cart!"); }}
className="flex items-center gap-2 px-4 py-2 bg-gradient-primary rounded-lg
text- sm
font-heading tracking-wider">
<ShoppingCart className="w-4 h-4" />
ADD TO CART
</button>
</div>
</[Link]>
</div>
</div>
);
};

69
export default AISuggestion;
// Shirt images
import shirtRed from "@/assets/shirts/[Link]";
import shirtNavy from "@/assets/shirts/shirt-
[Link]"; import shirtBlack from
"@/assets/shirts/[Link]"; import shirtWhite
from "@/assets/shirts/[Link]"; import
shirtGreen from "@/assets/shirts/[Link]";
import shirtPink from "@/assets/shirts/shirt-
[Link]";
import shirtMaroon from "@/assets/shirts/shirt-
[Link]"; import shirtYellow from
"@/assets/shirts/[Link]"; import
shirtPurple from "@/assets/shirts/[Link]";
import shirtTeal from "@/assets/shirts/shirt-
[Link]";
import shirtLavender from "@/assets/shirts/[Link]";

// Pants images
import pantsBlue from "@/assets/pants/pants-
[Link]"; import pantsBlack from
"@/assets/pants/[Link]"; import
pantsGrey from "@/assets/pants/[Link]";
import pantsKhaki from "@/assets/pants/pants-
[Link]"; import pantsNavy from
"@/assets/pants/[Link]"; import
pantsOlive from "@/assets/pants/[Link]";
70
import
pantsWhite from "@/assets/pants/[Link]";
import pantsBurgundy from "@/assets/pants/pants-
[Link]"; import pantsBrown from
"@/assets/pants/[Link]"; import pantsCharcoal
from "@/assets/pants/[Link]";
// Hoodie images
import hoodieBlack from
"@/assets/hoodies/hoodie- [Link]"; import
hoodieGrey from "@/assets/hoodies/hoodie-
[Link]";
import hoodieBurgundy from "@/assets/hoodies/hoodie-
[Link]"; import hoodieNavy from "@/assets/hoodies/hoodie-
[Link]";
import hoodieOlive from "@/assets/hoodies/[Link]";
import hoodieCoral from "@/assets/hoodies/[Link]";
import hoodieMustard from "@/assets/hoodies/hoodie-
[Link]"; import hoodieSkyblue from
"@/assets/hoodies/[Link]";
export type Product
= { id: string;
name: string;
category: "shirts" | "pants" |
"hoodies"; color: string;
price:
number;
image:
string;
71
};

const shirtImages = [shirtRed, shirtNavy, shirtBlack, shirtWhite, shirtGreen,

shirtPink, shirtMaroon, shirtYellow, shirtPurple, shirtTeal, shirtLavender];
const pantsImages = [pantsBlue, pantsBlack, pantsGrey, pantsKhaki, pantsNavy, pantsOlive,
pantsWhite, pantsBurgundy, pantsBrown, pantsCharcoal];
const hoodieImages = [hoodieBlack, hoodieGrey, hoodieBurgundy, hoodieNavy, hoodieOlive,
hoodieCoral, hoodieMustard, hoodieSkyblue];

const shirtNames = [
"Classic Red Button-Up", "Navy Crew Tee", "Midnight Black Tee", "Pure White Tee",
"Forest Green Polo",
"Blush Pink Shirt", "Maroon V-Neck", "Sunshine Yellow Shirt", "Royal Purple Tee", "Teal
Henley",
"Lavender Henley", "Crimson Sport Tee", "Deep Blue Oxford", "Charcoal Slim Tee",
"Ivory Linen Shirt",
"Sage Green Tee", "Coral Button-Down", "Steel Grey Polo", "Ocean Blue Tee", "Dusty
Rose Shirt",
"Emerald Crew Neck", "Burnt Orange Tee", "Sky Blue Oxford", "Wine Red Henley",
"Moss Green Shirt",
"Powder Blue Tee", "Copper Tone Shirt", "Arctic White Polo", "Slate Navy Tee", "Amber
Gold Shirt"
];

const shirtColors = [
"Red", "Navy", "Black", "White", "Green", "Pink", "Maroon", "Yellow", "Purple", "Teal",
"Lavender", "Crimson", "Deep Blue", "Charcoal", "Ivory", "Sage", "Coral", "Steel Grey",
"Ocean Blue", "Dusty Rose",

72
 "Emerald", "Burnt Orange", "Sky Blue", "Wine Red", "Moss", "Powder Blue", "Copper",
"Arctic White", "Slate", "Amber"
];

const pantsNames = [
"Classic Blue Denim", "Black Formal Trousers", "Grey Joggers", "Khaki Chinos", "Navy
Cargo Pants",
"Olive Track Pants", "White Linen Pants", "Burgundy Slim Chinos", "Brown Corduroy",
"Charcoal Track Pants",
"Stone Wash Jeans", "Jet Black Skinny", "Silver Grey Slacks", "Tan Pleated Pants", "Dark
Navy Chinos",
"Army Green Cargos", "Cream Cotton Pants", "Maroon Joggers", "Camel Straight
Leg", "Graphite Trousers",
"Indigo Slim Jeans", "Onyx Black Joggers", "Ash Grey Chinos", "Sandy Beige Pants",
"Midnight Cargo",
"Forest Slim Pants", "Pearl White Slacks", "Rust Red Trousers", "Mocha Brown Jeans",
"Smoke Grey Tracks"
];

const pantsColors = [
"Blue", "Black", "Grey", "Khaki", "Navy", "Olive", "White", "Burgundy", "Brown",
"Charcoal",
"Stone", "Jet Black", "Silver", "Tan", "Dark Navy", "Army Green", "Cream",
"Maroon", "Camel", "Graphite",
"Indigo", "Onyx", "Ash", "Sandy", "Midnight", "Forest", "Pearl", "Rust", "Mocha", "Smoke"
];

const hoodieNames = [

73
 "Noir Pullover Hoodie", "Heather Grey Sweatshirt", "Burgundy Zip-Up", "Navy
Pullover Hoodie",
"Olive Zip Hoodie", "Coral Crewneck", "Mustard Pullover", "Sky Blue Sweatshirt",
"Obsidian Oversized", "Ash Fleece Hoodie", "Cherry Red Zip-Up", "Dusk Blue
Pullover", "Sage Zip Hoodie", "Peach Crewneck", "Sunflower Hoodie", "Powder Blue
Pullover", "Shadow Black Crew", "Fog Grey Zip-Up", "Cranberry Pullover", "Indigo
Hoodie",
"Pine Green Crew", "Salmon Sweatshirt", "Honey Zip Hoodie", "Ice Blue
Crewneck", "Carbon Pullover", "Mist Grey Hoodie", "Crimson Zip-Up", "Steel
Blue Crew",
"Fern Green Pullover", "Blush Pink Sweatshirt"
];

const hoodieColors = [
"Black", "Grey", "Burgundy", "Navy", "Olive", "Coral", "Mustard", "Sky Blue",
"Obsidian", "Ash", "Cherry", "Dusk Blue", "Sage", "Peach", "Sunflower", "Powder Blue",
"Shadow", "Fog", "Cranberry", "Indigo", "Pine", "Salmon", "Honey", "Ice Blue",
"Carbon", "Mist", "Crimson", "Steel Blue", "Fern", "Blush Pink"
];

function
generateProducts(
names: string[],
colors:
string[],
images:
string[],

74
 category: "shirts" | "pants" |
"hoodies", count: number
): Product[] {
return [Link]({ length: count }, (_, i)
=> ({ id: `${category}-${i + 1}`,

name:
names[i],
category,
color: colors[i],
price: [Link]([Link]() * 40 + 20) * 100
+ 99, image: images[i % [Link]],
}));
}

export const shirts: Product[] = generateProducts(shirtNames, shirtColors, shirtImages,

"shirts", 30);
export const pants: Product[] = generateProducts(pantsNames, pantsColors, pantsImages,
"pants", 30);
export const hoodies: Product[] = generateProducts(hoodieNames, hoodieColors,
hoodieImages, "hoodies", 30);
export const allProducts: Product[] = [...shirts, ...pants, ...hoodies];

export const occasions = [

{ id: "casual", label: "CASUAL", icon: "☀️" },
{ id: "formal", label: "FORMAL", icon: "◻⁰" },
{ id: "party", label: "PARTY", icon: "◻⁰" },

75
 { id: "wedding", label: "WEDDING", icon: "◻⁰" },
{ id: "sports", label: "SPORTS", icon: "◻⁰"},
{ id: "office", label: "OFFICE", icon: "◻⁰" },
{ id: "date", label: "DATE NIGHT", icon: "❤"},
{ id: "travel", label: "TRAVEL", icon: "✈"},
];
import { motion } from "framer-motion";
import { Sparkles, Loader2 } from "lucide-react";

interface
TryOnPreviewProps {
personImage: string;
garmentImage: string;
resultImage: string | null;
isLoading: boolean;
error: string | null;
glowClass?:
string;
borderClass?:
string;
}

const
TryOnPreview =
({ personImage,

garmentImage,

resultImage,

76
 isLoading
, error,
glowClass = "glow-rose",
borderClass = "border-
primary/50",

}: TryOnPreviewProps) =>
{ return (
<div className="flex flex-col md:flex-row gap-6 items-center justify-center">
<div className="w-44 h-60 md:w-48 md:h-64 rounded-xl overflow-hidden border
border- border/50 flex-shrink-0">

<img src={personImage} alt="You" className="w-full h-full object-cover" />

</div>
<div className="text-3xl md:text-4xl text-muted-foreground">+</div>
<div className="w-44 h-44 md:w-48 md:h-48 rounded-xl overflow-hidden border
border- border/50 bg-foreground/5 flex-shrink-0">
<img src={garmentImage} alt="Garment" className="w-full h-full object-cover" />
</div>
<div className="text-3xl md:text-4xl text-muted-foreground">=</div>
<div
className={`w-44 h-60 md:w-48 md:h-64 rounded-xl overflow-hidden border-2 $
{borderClass} ${glowClass} flex-shrink-0 flex items-center justify-center bg-muted/30`}
>
{isLoading ? (
<div className="text-center p-4">
<Loader2 className="w-8 h-8 text-primary mx-auto mb-2 animate-spin" />
<p className="text-xs text-muted-foreground">Generating try-on...</p>

77
 <p className="text-[10px] text-muted-foreground/60 mt-1">This may take
10-30s</p>
</div>
) : resultImage ? (
<[Link]
initial={{ opacity: 0, scale: 0.9 }}

animate={{ opacity: 1, scale: 1 }}

src={resultImage}
alt="Try-on result"
className="w-full h-full object-cover"
/>
) : error ? (
<div className="text-center p-4">
<p className="text-xs text-destructive mb-1">Generation failed</p>
<p className="text-[10px] text-muted-foreground">{error}</p>
</div>
) :(
<div className="text-center p-4">
<Sparkles className="w-8 h-8 text-primary mx-auto mb-2" />
<p className="text-xs text-muted-foreground">AI Try-On Preview</p>
<p className="text-[10px] text-muted-foreground/60 mt-1">Click
analyze to generate</p>
</div>
)}
</div>
</div>

78
 );
};
export default TryOnPreview;

79
CHAPTER 7
 CONCLUSION

7.1 CONCLUSION:

The VISION STYLE AI platform successfully demonstrates the integration of

modern web technologies and intelligent analysis techniques to enhance the
online fashion experience. The system allows users to upload their personal
image, select clothing items from different categories, and visualize how the
selected outfits appear on them. By combining image processing concepts with
user-friendly interface components, the platform provides a realistic virtual try-
on experience that assists users in making better fashion decisions. The project
also introduces additional analytical features such as skin tone compatibility
analysis and occasion suitability evaluation. These features help users
understand whether a selected outfit complements their appearance and fits the
context of a specific event. The AI suggestion functionality further improves
the system by recommending alternative outfits that better match the user's
characteristics and selected occasion. Through the development of this system,
it is evident that artificial intelligence and modern web development
frameworks can significantly improve the way customers interact with online
fashion platforms. The VISION STYLE AI system simplifies outfit selection,
reduces uncertainty in online clothing purchases, and provides a smarter and
more personalized fashion recommendation experience for users.

81
7.2 FUTURE ENHANCEMENT:

The VISION STYLE AI platform can be further improved by integrating more

advanced artificial intelligence and computer vision techniques to enhance the
realism and accuracy of the virtual try-on experience. Future versions of the
system can include deep learning based garment fitting models that
automatically adjust clothing according to the user’s body shape, posture, and
lighting conditions to produce more realistic outfit visualizations. Another
enhancement would be the integration of real-time camera based virtual try-on,
allowing users to preview outfits directly using their device camera instead of
uploading static images. This would create a more interactive and immersive
shopping experience similar to augmented reality fashion applications used in
modern retail platforms. The system can also be expanded by including
personalized fashion recommendation engines that analyze user preferences,
past selections, and fashion trends to suggest outfits more intelligently.
Integration with online shopping platforms and e-commerce systems would
allow users to directly purchase recommended clothing items from the
platform. Additionally, the platform could include advanced features such as
body measurement detection, seasonal fashion recommendations, and AI-
powered style advisors. These improvements would transform VISION STYLE
AI into a fully intelligent digital fashion assistant capable of delivering highly
personalized and interactive fashion experiences for users.

82
CHAPTER 8
 APPENDICES

8.1 SCREENSHOTS:

Fig 8.1. IMAGE UPLOAD

84
Fig 8.2. PRODUCT DISPLAY AND SELECTION

85
Fig 8.3. SKIN TONE ANALYSIS

86
Fig 8.4. OCCASION ANALYSIS

87
Fig 8.5. AI SUGGESTION

88
CHAPTER 9
 REFERENCES

[1] J. Lee, H. Park, and S. Kim, “Deep Learning Based Virtual

Try-On System for Personalized Fashion Visualization,” IEEE Int.
Conf. on Artificial Intelligence and Data Engineering (AIDE), IEEE,
2026.

[2] R. Gupta, M. Sharma, and A. Verma, “AI Driven Clothing

Recommendation Using Image Processing and User Preference
Modeling,” IEEE Int. Conf. on Smart Computing and Intelligent
Systems (SCIS), IEEE, 2026.

[3] K. Wang, Y. Zhao, and L. Chen, “Computer Vision

Approaches for Realistic Virtual Garment Fitting in Online Retail
Platforms,” IEEE Int. Conf. on Computer Vision Applications (ICVA),
IEEE, 2026.

[4] S. Patel, N. Shah, and P. Mehta, “Intelligent Fashion

Recommendation Using Hybrid Deep Neural Networks,” IEEE Int.
Conf. on Data Science and Advanced Analytics (DSAA), IEEE, 2026.

[5] M. Rahman, T. Ahmed, and R. Islam, “Virtual Outfit

Simulation Using Image Segmentation and Neural Style Transfer,”
IEEE Int. Conf. on Image Processing and Vision Systems (IPVS), IEEE,
2025.

90
[6] A. Kumar, P. Singh, and S. Reddy, “Personalized Clothing
Suggestion System Based on Visual Appearance Analysis,” IEEE Int.
Conf. on Intelligent Human Computer Interaction (IHCI), IEEE, 2025.

[7] D. Chen, L. Huang, and Y. Lin, “AI Assisted Clothing

Visualization for Enhancing Online Shopping Experience,” IEEE Int.
Conf. on Machine Learning and Applications (ICMLA), IEEE, 2025.

[8] N. Kapoor, V. Bansal, and R. Malhotra, “Deep Neural

Network Framework for Automated Fashion Style Recommendation,”
IEEE Int. Conf. on Artificial Intelligence and Knowledge Engineering
(AIKE), IEEE, 2025.

[9] H. Zhang, Q. Liu, and J. Wu, “Vision Based Clothing

Matching System for Intelligent Fashion Assistance,” IEEE Int. Conf.
on Computer Vision and Pattern Recognition Workshops (CVPRW),
IEEE, 2025.

[10] T. Roy, S. Banerjee, and A. Chakraborty, “Hybrid

Recommendation Models for Intelligent Fashion Selection Platforms,”
IEEE Int. Conf. on Computational Intelligence and Communication
Technology (CICT), IEEE, 2025.

[11] B. Nguyen, T. Tran, and H. Le, “Image Based Garment

Recommendation System Using Convolutional Neural Networks,” IEEE
Int. Conf. on Advanced Computing and Applications (ACOMP), IEEE,
2024.

91
[12] S. D’Souza, A. Fernandes, and P. Rodrigues, “Artificial
Intelligence for Personalized Clothing Recommendation in E-
Commerce Systems,” IEEE Int. Conf. on Emerging Technologies and
Smart Systems (ICETSS), IEEE, 2024.

[13] Y. Kim, J. Park, and H. Choi, “Deep Learning Based Visual

Clothing Analysis for Online Retail Applications,” IEEE Int. Conf. on
Consumer Electronics (ICCE), IEEE, 2024.

[14] L. Martinez, R. Garcia, and P. Santos, “Computer Vision

Techniques for Virtual Fashion Assistance Platforms,” IEEE Int. Conf.
on Multimedia and Image Processing (ICMIP), IEEE, 2024.

[15] P. Sharma, K. Arora, and R. Singh, “AI Enabled

Personalized Outfit Recommendation Using User Appearance
Analysis,” IEEE Int. Conf. on Intelligent Systems and Applications
(ISA), IEEE, 2024.

[16] W. Chen, Y. Huang, and S. Lin, “Real-Time Clothing

Visualization System Using Deep Generative Models,” IEEE Int. Conf.
on Artificial Intelligence and Virtual Reality (AIVR), IEEE, 2024.

[17] A. Ibrahim, M. Hassan, and T. Khalid, “Vision-Based

Apparel Matching Using Deep Learning Techniques,” IEEE Int. Conf.
on Smart Computing and Artificial Intelligence (SCAI), IEEE, 2024.

92
[18] R. Das, P. Ghosh, and S. Dutta, “Intelligent Image-Based
Fashion Recommendation Framework for Digital Retail,” IEEE Int.
Conf. on Intelligent Computing and Information Systems (ICICIS),
IEEE, 2024.

[19] M. Oliveira, J. Costa, and P. Ribeiro, “Automated Outfit

Recommendation Using Visual Attribute Learning,” IEEE Int. Conf. on
Artificial Intelligence and Data Science (AIDS), IEEE, 2024.

[20] S. Tan, L. Wong, and H. Lim, “AI Driven Virtual Fashion

Assistant for Personalized Clothing Visualization,” IEEE Int. Conf. on
Intelligent Multimedia and Human Computer Interaction (IMHCI),
IEEE, 2024.

93