├── files.zip
├── files
├── logo.png
└── Sunway Stickers.pdf
├── index.html
├── Readme.md
├── style.css
└── script.js
/files.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uditmahato/beautiful_ugly/HEAD/files.zip
--------------------------------------------------------------------------------
/files/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uditmahato/beautiful_ugly/HEAD/files/logo.png
--------------------------------------------------------------------------------
/files/Sunway Stickers.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uditmahato/beautiful_ugly/HEAD/files/Sunway Stickers.pdf
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Sunway Ugly and Beautiful Face Detector
7 |
8 |
9 |
10 |
11 |
14 |
15 |
Sunway Ugly and Beautiful Face Detector
16 |
17 |
Choose a option to select photo !!!
19 |
26 |
27 |
28 |
32 |
33 |
34 |
35 | Note: you are lucky enough , our system will detect you as ugly, and you will receive a gift hamper.
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | # Beauty Classification Game
2 |
3 | ## Introduction
4 | This is a simple web-based game that allows users to either upload an image or capture one using their device's camera. The captured or uploaded image is then classified by the system as either "beautiful" or "ugly" (for entertainment purposes only).
5 |
6 | ## Instructions
7 | 1. **Upload Image**: Click on the "Choose File" button to upload an image from your device.
8 | 2. **Capture Image**: If your device supports it, click on the "Capture" button to take a picture using your device's camera.
9 | 3. **Classify Image**: After uploading or capturing an image, click on the "Classify" button to see the system's classification.
10 |
11 | ## Browser Compatibility
12 | The game requires access to the device's camera. Make sure your browser supports the `getUserMedia` API for camera access. If your browser does not support camera access, you'll receive an alert message informing you of this limitation.
13 |
14 | ## How It Works
15 | - **Image Selection**: The game allows users to select an image file from their device or capture one using the device's camera.
16 | - **Image Processing**: The selected/captured image is displayed on the screen for review.
17 | - **Image Classification**: The system randomly classifies the image as either "beautiful" or "ugly" (for entertainment purposes only).
18 | - **Result Display**: The classification result is displayed to the user.
19 |
20 | ## Note
21 | - The image classification is purely random using probablity of **30% for the Ugly** and **70% for the beautiful** and for entertainment purposes only.
22 | - This game does not store any images or personal data.
23 |
24 | ## Technologies Used
25 | - JavaScript
26 | - HTML
27 | - CSS
28 |
29 | ## Code Structure
30 | - **Main Script**: The main functionality of image selection, processing, and classification is implemented in JavaScript.
31 | - **HTML Elements**: The HTML file contains elements for image input, video capture, and result display.
32 | - **CSS Styling**: The CSS file provides styling for the user interface elements.
33 |
34 | ## Development
35 | - **Contributing**: Contributions are welcome. Fork the repository, make your changes, and submit a pull request.
36 | - **Issues**: If you encounter any issues or have suggestions for improvement, please open an issue on the GitHub repository.
37 |
38 | ## Credits
39 | Don't forget to give credit by giving star .
40 |
41 | ## License
42 | This project is licensed under the [MIT License](LICENSE).You may use this game by forking this repository . You may modify this and make changes in the design and devleopment under the MIT licence.
43 |
44 | Enjoy playing the Beauty Classification Game!
45 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | #navbar {
2 | background-color: #950808;
3 | display: flex;
4 | align-items: center;
5 | padding: 20px;
6 | margin-top: 0!important;
7 | }
8 |
9 | #header {
10 | flex: 0 0 auto; /* Keeps the header from growing or shrinking */
11 | display: flex;
12 | align-items: center; /* Align items vertically */
13 | margin-left: 20px;
14 | }
15 |
16 | #title {
17 | flex: 1; /* Allow the title to grow and fill remaining space */
18 | display: flex;
19 | align-items: center; /* Align items vertically */
20 | margin-left: 40px; /* Add some spacing between header and title */
21 | }
22 |
23 |
24 |
25 | body {
26 | font-family: Arial, sans-serif;
27 | text-align: center;
28 | background-color: #f8f9fa;
29 | margin: 0;
30 | padding: 0;
31 | }
32 |
33 | .question{
34 | margin-top: 50px!important;
35 | font-family:'Times New Roman';
36 | font-size: 20px;
37 | }
38 |
39 | .questionnote{
40 | margin-top: 180px;
41 | }
42 | #header {
43 | flex: 0 0 auto; /* Keeps the header from growing or shrinking */
44 | display: flex;
45 | align-items: center; /* Align items vertically */
46 | z-index: 1; /* Set z-index to bring it on top */
47 | }
48 |
49 | #logo {
50 | width: 250px;
51 | height: auto;
52 | filter: brightness(300.2) contrast(0.9) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
53 | }
54 |
55 | #title h1 {
56 | color: #ffffff;
57 | font-size: 60px;
58 | }
59 |
60 | #buttonContainer {
61 | display: grid;
62 | grid-template-columns: auto auto;
63 | margin-top: 40px!important;
64 | grid-gap: 150px; /* Adjust gap between buttons as needed */
65 | justify-content: center; /* Center the grid horizontally */
66 | margin: 0 auto; /* Center the grid horizontally */
67 | }
68 | #inputImagei, #captureButtonCam {
69 | width: 200px; /* Set a fixed width for both buttons */
70 | }
71 | #inputImage {
72 | margin-top: 20px;
73 | display: none;
74 | }
75 |
76 | .captureButton {
77 | font-size: medium;
78 | margin-top: 20px;
79 | background-color: #950808;
80 | color: #fff;
81 | border: none;
82 | padding: 10px 20px;
83 | cursor: pointer;
84 | border-radius: 5px;
85 | transition: background-color 0.3s ease; /* Smooth transition on hover */
86 | }
87 |
88 | .captureButton:hover {
89 | color: #950808; /* Darker shade on hover */
90 | border: 1px solid;
91 | background-color: #f8f9fa;
92 | border-color: #950808 2px;
93 | }
94 |
95 | #result {
96 | font-weight: bold;
97 | margin-top: 20px;
98 | color: #333;
99 | font-size: 18px;
100 | }
101 |
102 | .hide {
103 | display: none;
104 | }
105 |
106 | #video {
107 | display: none;
108 | margin-top: 20px;
109 | border: 2px solid #ccc;
110 | border-radius: 5px;
111 | width: 40%; /* Adjust the width as needed */
112 | margin: auto auto; /* Centers the video horizontally */
113 | }
114 |
115 | #canvas {
116 | display: none;
117 | }
118 |
119 | #inputImagei {
120 | margin-top: 20px;
121 | }
122 |
123 | #capturedImageProcess {
124 | width: 15%;
125 | height: 15%;
126 | margin: auto !important;;
127 | }
128 |
129 | #classifyButton2{
130 | position: relative;
131 | top:0;
132 | left: auto;
133 | }
134 |
135 |
136 | /* #photoResultContainer {
137 | display: flex;
138 | justify-content: center;
139 | align-items: center;
140 | flex-wrap: wrap;
141 | margin-top: 30px;
142 | }
143 |
144 | #photoResultContainer>div {
145 | margin: 10px;
146 | flex: 1;
147 | max-width: 300px;
148 | text-align: center;
149 | }
150 |
151 | #photoResultContainer img {
152 | max-width: 100%;
153 | border-radius: 5px;
154 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
155 | } */
156 |
157 | #imagePreview img {
158 | width: 30%; /* Adjust the width as needed */
159 | margin: 0 auto!important; /* Centers the video horizontally */
160 | }
161 |
162 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | let selectedImage;
2 |
3 | // Check for browser compatibility with getUserMedia
4 | if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
5 | alert('Your browser does not support camera access.');
6 | }
7 |
8 | // Event listener for selecting an image file
9 | document.getElementById('inputImage').addEventListener('change', function (event) {
10 | selectedImage = event.target.files[0];
11 | processImage(selectedImage);
12 | document.getElementById('captureButtonCam').classList.add('hide');
13 | document.getElementById('inputImagei').classList.add('hide');
14 | document.getElementById('classifyButton').classList.add('hide');
15 | document.getElementById('classifyButton2').classList.remove('hide');
16 | document.getElementById('photoResultContainer').classList.remove('hide');
17 | // Event listener for classifying the image with classifyButton2
18 | });
19 |
20 | // Event listener for capturing from camera
21 | document.getElementById('captureButtonCam').addEventListener('click', function () {
22 | document.getElementById('inputImagei').classList.add('hide');
23 | const video = document.getElementById('video');
24 | const canvas = document.getElementById('canvas');
25 | const captureButton = document.getElementById('captureButton');
26 |
27 | // Show the video element
28 | video.style.display = 'block';
29 |
30 | // Get user media
31 | navigator.mediaDevices.getUserMedia({ video: true })
32 | .then(stream => {
33 | video.srcObject = stream;
34 | })
35 | .catch(err => {
36 | console.error('Error accessing the camera:', err);
37 | });
38 |
39 | // Capture image from camera
40 | captureButton.addEventListener('click', () => {
41 | canvas.width = video.videoWidth;
42 | canvas.height = video.videoHeight;
43 | canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
44 | const imageDataURL = canvas.toDataURL('image/png');
45 | // Show captureButton element initially
46 | displayCapturedImage(imageDataURL);
47 | stopVideoStream();
48 | });
49 |
50 | // Stop video stream
51 | function stopVideoStream() {
52 | const stream = video.srcObject;
53 | const tracks = stream.getTracks();
54 | tracks.forEach(track => {
55 | track.stop();
56 | });
57 | video.style.display = 'none'; // Hide the video element after stopping the stream
58 | }
59 | document.getElementById('captureButtonCam').classList.add('hide');
60 | document.getElementById('captureButton').classList.remove('hide');
61 |
62 | // Display captured image
63 | function displayCapturedImage(imageDataURL) {
64 | const img = new Image();
65 | img.src = imageDataURL;
66 | document.getElementById('canvas').classList.add('hide');
67 | document.getElementById('photoResultContainer').classList.remove('hide');
68 | document.getElementById('imagePreview').innerHTML = '';
69 | document.getElementById('imagePreview').appendChild(img);
70 | // You can also store the image in a variable if you want to process or save it
71 | // For example:
72 | selectedImage = imageDataURL;
73 | document.getElementById('captureButton').classList.add('hide');
74 | document.getElementById('classifyButton').classList.remove('hide');
75 |
76 | }
77 | });
78 |
79 | function processImage(imageFile) {
80 | const reader = new FileReader();
81 | reader.onload = function () {
82 | const img = new Image();
83 | img.onload = function () {
84 | // Display the captured image on the screen
85 | const imgElement = document.createElement('img');
86 | imgElement.src = reader.result;
87 | imgElement.id = 'capturedImageProcess'; // Assigning an ID to the image
88 | document.getElementById('photoResultContainer').classList.remove('hide');
89 | document.getElementById('imagePreview').innerHTML = '';
90 | document.getElementById('imagePreview').appendChild(imgElement);
91 | };
92 | img.src = reader.result;
93 | };
94 | reader.readAsDataURL(imageFile);
95 | }
96 |
97 |
98 |
99 | // Event listener for classifying the image
100 | document.getElementById('classifyButton').addEventListener('click', function () {
101 | if (!selectedImage) {
102 | alert('Please select an image to classify.');
103 | return;
104 | }
105 | // Replace with your actual image classification function!
106 | // For example, you could use an API call or a machine learning model
107 | const isUgly = Math.random() < 0.2; // Placeholder classification
108 |
109 | const resultElement = document.getElementById('result');
110 | if (isUgly) {
111 | resultElement.textContent = 'You seems ugly according to our system .Hurray !!!! you won.';
112 | } else {
113 | resultElement.textContent = 'Our System says , You are beautiful and Sorry , Please try next time.';
114 | }
115 | });
116 |
117 | // Function to classify the image
118 | function classifyImage() {
119 | console.log("Classifying image...");
120 | const isUgly = Math.random() < 0.2; // Placeholder classification
121 |
122 | const resultElement = document.getElementById('result');
123 | console.log("Result Element:", resultElement); // Log result element to verify if it exists
124 | if (resultElement) {
125 | if (isUgly) {
126 | resultElement.textContent = 'You seems ugly according to our system .Hurray !!!! you won.';
127 | } else {
128 | resultElement.textContent = 'Our System says , You are beautiful and Sorry , Please try next time.';
129 | }
130 | } else {
131 | console.error("Result element not found.");
132 | }
133 | }
134 |
135 | // Event listener for classifying the image with classifyButton2
136 | document.getElementById('classifyButton2').addEventListener('click', function () {
137 | console.log("classifyButton2 clicked");
138 | classifyImage();
139 | });
140 |
141 |
--------------------------------------------------------------------------------
13 |