Virtual_Eyewear_Project_Updated_PPT.pptx

Virtual_Eyewear_Project_PPT.pptx

1. AI-BASED VIRTUAL EYEWEAR TRY-ON SYSTEM By NAME: [Your Name] HT NO: [Your Hall Ticket Number] UNDER THE ESTEEMED GUIDANCE OF [Guide's Name] DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

2. Introduction This project enables users to virtually try on glasses using AI face detection via MediaPipe. It helps people see how a frame looks on their face before purchase.

3. Modules in the Project → Image Upload Module → Try-On Module → Glasses Collection Module Each module helps to enhance the virtual trial room experience.

4. HTML Code Used <input type="file" id="imageUpload" accept="image/*" /> <canvas id="canvas"></canvas> <img src="glasses/pngwing.com.png" class="glasses-option" />

5. CSS Code Used canvas { border: 3px solid #000; border-radius: 10px; max-width: 100%; } .glasses-card { box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); padding: 15px; text-align: center; }

6. JavaScript / MediaPipe Logic → Detect face landmarks using MediaPipe → Get eye positions → Draw glasses on correct position using canvas API Basic Code Example: const imageUpload = document.getElementById("imageUpload"); const canvas = document.getElementById("canvas");

7. Output Screenshot [Insert screenshot here showing glasses on face]

8. THANK YOU! For your attention and support.

9. JavaScript Used in the Project We used JavaScript to perform 3 main tasks: 1️⃣ Load the uploaded image: - JavaScript reads the image chosen by the user. 2️⃣ Draw the image and glasses on canvas: - The canvas is used to show the face and overlay the selected glasses image. 3️⃣ Detect eyes using MediaPipe: - MediaPipe FaceMesh finds the eye positions. - JavaScript uses those points to place glasses correctly on the face. ➡️ This gives a realistic virtual try-on effect without any backend.