Garment Selection Component - Copy this Html, Bootstrap Component to your project

Design a clean and functional webpage with a focus on user friendly garment selection and body image upload for virtual clothing fitting. The page should have the following layout: Body Image Upload Section (Top Left): A large, square box with a message that says: 'Upload an image or select the draw tool to start.' Below this box, have options to manage the uploaded image, such as a 'Layer 1' label and small icons for image manipulation (cropping, masking, etc.). A checkbox option labeled 'Use auto generated mask (Takes 5 seconds)' with the default set to 'Yes.' A dropdown menu labeled 'Category' with options such as 'upper_body.' Garment Upload Section (Top Center): A square box next to the body upload section with 'Drop Image Here or Click to Upload' for users to upload garment images. Beneath the box, include a description input labeled 'Description of garment' with pre filled text (e.g., 'Short Sleeve Round Neck T shirts'). Masked Image and Output Sections (Top Right): Two square boxes labeled 'Masked image output' and 'Output,' respectively, placed beside the garment upload section. These are placeholders for displaying processed and final images. Garment Examples (Bottom Left): A collection of images displayed in rows, each showing various garment types (e.g., dresses, shirts, pants). Include examples of different clothing styles with varied colors and designs to give users a diverse range to pick from. Other Functionalities: Checkboxes and buttons for options like 'Use auto crop & resizing,' with default set to 'No.'