Spaces:
Sleeping
Sleeping
File size: 3,604 Bytes
af4d7af 87fbf06 af4d7af feed28b e49e65b feed28b e49e65b feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b af4d7af feed28b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<!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');
navigator.mediaDevices.getUserMedia({
video: {
facingMode: { exact: "environment" },
width: { ideal: 2000 },
height: { ideal: 2000 },
advanced: [{ focusMode: "continuous" }]
}
})
.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+eng', // Use both Korean and English
{
logger: m => console.log(m)
}
).then(({ data: { text } }) => {
console.log(text);
analyzeNutrition(text);
}).catch(err => {
console.error("Tesseract error: ", err);
});
});
function analyzeNutrition(text) {
// Extract sugar content from the recognized text
const sugarMatch = text.match(/(\d+(\.\d+)?)\s*(g|grams|그램)?\s*(sugar|당)/i);
if (sugarMatch) {
const sugarContent = parseFloat(sugarMatch[1]);
let message = `Sugar content: ${sugarContent}g - `;
if (sugarContent > 20) {
message += 'Dangerous';
output.className = 'red';
} else if (sugarContent >= 10 && sugarContent <= 19) {
message += 'Normal';
output.className = 'yellow';
} else {
message += 'Good';
output.className = 'green';
}
output.textContent = message;
} else {
output.textContent = 'Sugar content not found';
output.className = '';
}
}
</script>
</body>
</html>
|