E-COMMERCE WEBSITE WITH AR-BASED TECHNOLOGY

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056
Volume: 09 Issue: 03 | Mar 2022 www.irjet.net p-ISSN: 2395-0072
© 2022, IRJET | Impact Factor value: 7.529 | ISO 9001:2008 Certified Journal | Page 610
E-COMMERCE WEBSITE WITH AR-BASED TECHNOLOGY
Ashish Khedekar 1, Mohammed Moheed2, Piyush Khandetod3 , Prof. Anuradha Kapoor4
1Ashish Khedekar, Dept of Information Technology Engineering, Atharva College of Engineering
2Mohammed Moheed, Dept of Information Technology Engineering, Atharva College of Engineering
3Piyush Khandetod, Dept of Information Technology Engineering, Atharva College of Engineering
4Prof. Anuradha Kapoor, Dept of Information Technology Engineering, Atharva College of Engineering,
Maharashtra, India
---------------------------------------------------------------------***----------------------------------------------------------------------
Abstract - Augmented Reality (AR) is advantageous and
reliable with efficiency in serving the customers to watch a
computer-generated view of products with a touch of a finger
from their smartphones at any time at their convenience.
Augmented reality technology enables customers to have a
real-world view of their products virtually which eventually
saves the time for travelling viewing in the real shop.
In this paper, we've developed an E-Commerce website with
AR grounded technology in which customers can try products
nearly with the help of the AR option from home itself. We've
used a media pipe frame for body discovery. The Media Pipe
Holistic channel integrates separate models for disguise, face,
and hand. Because of their different specializations, the input
to one element isn't well-suited for the others. The disguise
estimation model, for illustration, takes a lower, fixed
resolution videotape frame (256x256) as input. For instance,
one was to crop the hand and face regions from that image to
pass to their separate models, the image resolution would be
too low for accurate articulation. Thus, we designed
MediaPipe Holistic as a multi-stage channel, which treats the
different regions using a region applicable image resolution.
AR deals with see-through devices, usually sported on the top
that covers graphics and text on the user's view of his or her
surroundings. AR enhances the real world with computer-
generated things that occur to appear in the same area as the
real world. AR system is developed which incorporates the
brain’s retorts to 2D interfaces by taking visual, auditory, and
kinaesthetic collaborations.
Key Words: Augmented reality, Media pipe, Holistic
model, Disguise Estimation model, Body discovery.
1.INTRODUCTION
Augmented reality is an interactional encounter of an
everyday world where the entities that inhabit the physical
sphere are developed by simulated perceptual knowledge,
sometimes across numerous sensory systems, including
visual, auditory, haptic, and others. It is a flourishing
development among e-commerce companies involved in
business for attracting customers and understanding their
needs. It is a highly graphic, interactivemethodofpresenting
relevant digital information in the context of the physical
environment—generatingcustomers,clarifyingtheirdoubts,
and improving business outcomes in e-commerce sites.
There are two ways for detecting landmarks of the body
using AR technology
1) Open pose model
2) Holistic model
In this paper, we have used a media pipe framework in
which a holistic model is taken for landmark detection
instead of the open pose model because the holistic model
identifies more sights as equated to the open pose model.
More landmarks are revealed resulting in the increased
accuracy and precision of the detection process.
2. PROPOSED APPROACH
As we all know buying a product online on basis of images
available or displayed is quite ambiguous which creates
confusion. As the trying option is not available on the
website and we are quite unclear with our selection and not
at all satisfied. To remove this dilemma, we proposed a
solution to create a website with AR-based technology that
helps users to try products virtually with the help of the AR
option from anywhere and anytime themselves. We have
used a media pipe for body detection. MediaPipe Holistic
comprises a new pipeline with the
enhanced pose, face and hand elements. This individually
tracks in real-time, with the least memory transmission
between their inference backends, with additional support
for interchangeability of the three elements, depending on
the quality of transactions. The MediaPipe Holistic pipeline
incorporates separate models for the pose, face, and hand
components, each of which is optimized for their unique
domain. However, due to their different specialisms, the
response to one module is not compatible with the others.
MediaPipe Holistic approximates the human pose with
a pose detector and consequentkey pointmodel.Then,using
the assumed pose key points, it derives three regions of
interest (ROI). The pipelinethenproducesthefull-resolution
input frame to these ROIs and applies task-specific face and
pose models to estimate their consistent key points. Finally,
all key points are unified with those of the pose model to
yield the full 540+ key points.

3. ARCHITECTURE
The consumer needs to select a product froma widerangeof
available goods on the website which would direct him/her
to the product view page. The product view page is infused
with all the relevant information andpicturesoftheproduct.
Under the price of the product, the consumer would get the
AR view option. The customer can see a virtual pictureofthe
product by clicking on the AR view option and enjoying the
views from all angles vividly. After clicking on the AR view
option, the camera frame will open, and the media pipe
would search for the target in the frame. This would be
followed by the detection of the landmark. The model would
be overlapped on the targeted landmarks and a display of a
2D picture of the product would appear.
4. METHODOLOGY
1. Python: Python is an advanced, universal-objective
programming language. Its layout attitude stresses code
legibility with the use of substantial indentation.Itslanguage
structures and object-tailored approach intend to help
programmers create perfect, logical code for small- and
large-scale events.
2. OpenCV: OpenCV is a collectionofprogrammingfunctions
primarily designed in real-time mainframe visual sense.
Created by Intel, it was later endorsed by Willow Garage.
OpenCV is a fantastic means for picture handling and
presenting computer vision assignments. It is an open-
source virtual storehouse that can be used to execute
assignments like face identification, objection tracing,
landmark identification, and much more. It maintains
multiple languages including python, java C++.
3. MediaPipe: Media Pipe Instant Motion Tracking requires
AR tracing across devices and platforms without
commencing or adjustment. It is built upon the Media Pipe
Box Tracking solution. With Instant Motion Tracking, you
can simply order virtual 2D and 2D matter on fixed or
moving sides, allowing them to impeccably cooperate with
the real-world atmosphere.
4. Django: Django is a complex Python web structure that
facilitates the quick expansion of reliable and supportable
websites. Built by qualified inventors, Django takes the
attention of much of the trouble of web expansion, so you
can concentrate on writing your appwithoutreinventing the
wheel. It is available, unrestricted and open-source, has a
flourishing and active community, wonderful
documentation, and numerous opportunities for free and
paid-for support.
5. IMPLEMENTATION
Mediapipe Holistic is one of the channels that comprise
optimized face, hands, and pose elements which allows for
holistic tracking, thus empowering the prototype to
instantaneously detect hand and body poses along with
facial landmarks. One of the chief norms of MediaPipe
holistic is to identify face and hands andextractkeypointsto
pass on to a computer vision model. Identify face and hands
using Holistic and obtain significant points. The subsequent
code fragment is a purpose to approach image input from
system web camera using OpenCV framework,identifyhand
and facial landmarks and obtain key points. For face
detection, we have used media pipe face mesh whichdetects
468 points on the face and it can also enable the overlay of
digital content and information on top of the physical world
in augmented reality. For body detection, we have used the
media pipe pose model. It is lightweight due to which our
frame rate increased from 5,6 fps to 24,25 fps.
6. ADVANTAGES OF AR IN E-COMMERCE WEBSITES
1. Boost customer engagement
AR is essentially collaborating, makingiteasyforusersto get
obsessed with the website. And the extended theystayon an
e-commerce website, the further chance they may buy
different things. Even if they don’t purchase for the duration
of their visit, the improved involvement means they’ve
established a relationship with brands and products and
tend to make a recollection — making them remember the
website in the future. AR creates an emotional contact
between buyer and product. Presentation of e-commerce
goods in AR increases consumer-product connection makes
the spending experience more impressive, gives users
passions, and amazes them.
2. Reach new customers
To get people’s interest in a blaring world, there is a need to
create a buzz. Creating an appealing ARcampaigncanbe one
way to achieve it. Evolving extended reality solutions in e-
commerce is a great approach to attract a new generation of
customers. Generation Y and Z are tricky to surprise and
Augmented reality would surely help to generate correctly
that WOW effect. As they are the entities who set the

developments for the use of certain items, then to wonder
them is the right way to encourage the purchase of company
products.
3. Reduce returns
With AR, customers receive a lot more information about a
product than with a still image or even a video. Along with
presenting 2D views, what a product would offer to a
consumer can be depicted. This results in matching their
expectations when they receive the product.
4. Creating AR in a Web browser
By creating augmented reality offered from a web browser,
there is an increase in the probability that customers would
use it, which automatically increases the chances that they
would connect with and buy your products.
5. Visualizations before Buying
Customers get the opportunity to visualize a product before
purchasing. Customers want toexperiment withtheproduct,
considering it from all sides to make sure it is value buying.
Customers can perform all the required product strategies
with ease anytime andanywherethroughaugmentedreality.
All they require is to download an application and select the
desired product.
6. Increase Brand Awareness
AR solutions form improved brand awareness and build
greater marketing. The execution of AR technologies can
boost the brand, make it innovative, superior, pioneering,
and noteworthy. Customers always want to return to those
enterprises that have taken care of them and provided them
with the most excellent feel of utilizing their services. This
enhances the reliabilityofconsumersandtheirpreferenceto
buy products.
7. Optimize Supply Chain
AR systems in e-commerce websites or stores contain an
infinite number of products, despite their size and
availability. One can save the expenditures of rent and
maintenance of space, the salaries of consultantsandsellers,
logistics. One needs to create an e-commerce website, fill it
with a wide range of products and look after the customer
experience within an e-commerce website.
Augmented Reality (AR) technology generates fun,
attractive, and immersive consumer experiences.Theability
to accomplish AR following around devices and platforms,
without commencing, stays critical to control AR
applications at scale.
7. RESULT
Augmented Reality in eCommerce websites permits the
consumers to get a dynamic experience of their products.
Also, it will allow the consumers to relate to the product just
like they would in the real world. It provides live 2D
collaborative models to help the consumers make better
buying choices. For example, different products would have
different images as per consumer‘s selection and are
illustrated in the images below
8. CONCLUSION
This website has been curated to simplify the browsing
experience of the consumers and make their purchasing
experience memorable and pleasant. The consumers would
be empowered with the tool of AR in their daily life. E-
Commerce Website with AR Based Technology is a useful
and effective website in assisting the consumers to try the

real world view of their products anytime from anywhere at
their convenience and comfort. The augmented reality in
eCommerce websites provides customers with an enticing
experience, permitting them to have a real-time interface
with products while remaining in their surroundings. The
capacity to preview the article in AR on an e-commerce
website takes away some of the ambiguity of shopping
online. This ultimately makes the consumers confident that
they do not have to go through the hassle of returning their
merchandise. There is so much a person can do staying at
home with the super potentiality of ever developing and
upgrading technology. AR system solutions in e-commerce
websites are an immediate way to success that establishes a
comprehensive customer experience assuring special and
exciting new adventures.
REFERENCES
1. Ohri, Ashish, Shashank Agrawal, andGarima S.Chaudhary.
"On-device Realtime Pose Estimation & Correction.
IJAEM(2021).
2. Seunghwan Choi, SunghyunPark,MinsooLee,Jaegul Choo;
Proceedings of the IEEE/CVF Conference on Computer
Vision and Pattern Recognition (CVPR), 2021, pp. 14131-
14140.
3. Rosni, Nurul Shuhadah, et al. "Development of mobile
markerless augmented reality for cardiovascular system in
anatomy and physiology courses in physiotherapy
education." 2020 14th International Conference on
Ubiquitous Information Management and Communication
(IMCOM). IEEE, 2020.
4. Koca, Buse Asena, Burakhan Çubukçu, and Uğur Yüzgeç.
"Augmented reality application for preschool children with
unity 3D platform." 2019 3rd International Symposium on
Multidisciplinary Studies and Innovative Technologies
(ISMSIT). IEEE, 2019.
5. Bajireanu, Roman, Redes neuraisconvolucionaisEstimaçã
de pose Sobreposição de roupas Inteligencia artificial, 18-
Jan-2019.

E-COMMERCE WEBSITE WITH AR-BASED TECHNOLOGY

More Related Content

Similar to E-COMMERCE WEBSITE WITH AR-BASED TECHNOLOGY (20)

More from IRJET Journal (20)

Recently uploaded (20)

E-COMMERCE WEBSITE WITH AR-BASED TECHNOLOGY