Spaces:
Sleeping
Sleeping
<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', | |
{ | |
logger: m => console.log(m) | |
} | |
).then(({ data: { text } }) => { | |
console.log(text); | |
analyzeNutrition(text); | |
}); | |
}); | |
async 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> | |