|
<!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', () => { |
|
|
|
canvas.width = video.videoWidth; |
|
canvas.height = video.videoHeight; |
|
const context = canvas.getContext('2d'); |
|
context.drawImage(video, 0, 0, canvas.width, canvas.height); |
|
|
|
const dataURL = canvas.toDataURL('image/png'); |
|
|
|
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) { |
|
|
|
const regex = /당류\s*:\s*(\d+(\.\d+)?)\s*g\s*/; |
|
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> |
