<!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" }
}
})
.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',
"image-to-text",
model="team-lucid/trocr-small-korean",
{
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+)?)\s*g\s*/; // 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>