Spaces:
Sleeping
Sleeping
File size: 4,541 Bytes
e43f714 acf0e96 e43f714 534f4b3 b6697ae acf0e96 f576be1 e43f714 534f4b3 e43f714 534f4b3 e43f714 534f4b3 acf0e96 e43f714 acf0e96 e43f714 b6697ae 534f4b3 e43f714 acf0e96 4d2fe33 e43f714 534f4b3 e43f714 3109812 e43f714 3109812 e43f714 61d88b8 |
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 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!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);
// Preprocess the image
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
preprocess(imageData);
// Draw the preprocessed image on the canvas
context.putImageData(imageData, 0, 0);
// Convert the canvas to data URL
const dataURL = canvas.toDataURL('image/png');
// Recognize text using Tesseract
Tesseract.recognize(
dataURL,
'kor+eng', // Recognize 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 preprocess(imageData) {
// Binarization
binarization(imageData);
// Noise reduction
noiseReduction(imageData);
// Border enhancement
borderEnhancement(imageData);
// Resize
resize(imageData);
}
function binarization(imageData) {
// Binarization code
}
function noiseReduction(imageData) {
// Noise reduction code
}
function borderEnhancement(imageData) {
// Border enhancement code
}
function resize(imageData) {
// Resize code
}
function analyzeNutrition(text) {
// Extract sugar content from the recognized text
const sugarMatch = text.match(/(당[^\d]*)(\d+(\.\d+)?)(\s*(g|grams|그램))/i);
if (sugarMatch) {
const sugarContent = parseFloat(sugarMatch[2]);
let message = `Sugar content: ${sugarContent}g - `;
if (sugarContent <= 20) {
message += 'Good';
output.className = 'green';
} else if (sugarContent <= 50) {
message += 'Normal';
output.className = 'yellow';
} else {
message += 'Dangerous';
output.className = 'red';
}
output.textContent = message;
} else {
output.textContent = 'Sugar content not found';
output.className = '';
}
}
</script>
</body>
</html> |