SomelliraAppTry

Sleeping

App Files Files Community

ilar06 commited on Jun 3, 2024

Commit

af4d7af

verified ·

1 Parent(s): bb76bd2

Create index.html

Browse files

Files changed (1) hide show

index.html +104 -0

index.html ADDED Viewed

	@@ -0,0 +1,104 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Candy Label Scanner</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tesseract.js"></script>
+    <style>
+        #output {
+            font-size: 20px;
+            margin-top: 20px;
+        }
+        .red {
+            color: red;
+        }
+        .yellow {
+            color: yellow;
+        }
+        .green {
+            color: green;
+        }
+        video {
+            width: 100%;
+            height: auto;
+        }
+    </style>
+</head>
+<body>
+    <h1>Candy Label Scanner</h1>
+    <video id="video" autoplay></video>
+    <button id="capture">Capture</button>
+    <canvas id="canvas" style="display: none;"></canvas>
+    <div id="output"></div>
+    <script>
+        const video = document.getElementById('video');
+        const canvas = document.getElementById('canvas');
+        const output = document.getElementById('output');
+        const captureButton = document.getElementById('capture');
+        // Access the mobile camera
+        navigator.mediaDevices.getUserMedia({ video: true })
+            .then(stream => {
+                video.srcObject = stream;
+            })
+            .catch(err => {
+                console.error("Error accessing the camera: ", err);
+            });
+        captureButton.addEventListener('click', () => {
+            // Draw the video frame to the canvas
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            const context = canvas.getContext('2d');
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            // Convert canvas to image data
+            const dataURL = canvas.toDataURL('image/png');
+            // Process the image with Tesseract
+            Tesseract.recognize(
+                dataURL,
+                'kor',
+                {
+                    logger: m => console.log(m)
+                }
+            ).then(({ data: { text } }) => {
+                console.log(text);
+                analyzeNutrition(text);
+            });
+        });
+        function analyzeNutrition(text) {
+            // Extract nutritional values (assuming sugar content is labeled as '당류' in Korean)
+            const regex = /당류\s*:\s*(\d+(\.\d+)?)/; // This regex might need adjustments based on label format
+            const match = text.match(regex);
+            let outputDiv = document.getElementById('output');
+            if (match) {
+                const sugarContent = parseFloat(match[1]);
+                let message = `Sugar content: ${sugarContent}g - `;
+                if (sugarContent > 20) {
+                    message += 'Dangerous';
+                    outputDiv.className = 'red';
+                } else if (sugarContent > 10) {
+                    message += 'Normal';
+                    outputDiv.className = 'yellow';
+                } else {
+                    message += 'Good';
+                    outputDiv.className = 'green';
+                }
+                outputDiv.textContent = message;
+            } else {
+                outputDiv.textContent = 'Sugar content not found';
+                outputDiv.className = '';
+            }
+        }
+    </script>
+</body>
+</html>