Hugging Face's logo

Spaces:
yukiapple323
/
Glucolor_making
Sleeping

App Files Community
yukiapple323 commited on
Commit
e43f714
·
verified ·
1 Parent(s): 54373f7

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +103 -0
index.html ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Candy Label Scanner</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/tesseract.js"></script>
10
+ <style>
11
+ #output {
12
+ font-size: 20px;
13
+ margin-top: 20px;
14
+ }
15
+ .red {
16
+ color: red;
17
+ }
18
+ .yellow {
19
+ color: yellow;
20
+ }
21
+ .green {
22
+ color: green;
23
+ }
24
+ video {
25
+ width: 100%;
26
+ height: auto;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <h1>Candy Label Scanner</h1>
32
+ <video id="video" autoplay></video>
33
+ <button id="capture">Capture</button>
34
+ <canvas id="canvas" style="display: none;"></canvas>
35
+ <div id="output"></div>
36
+
37
+ <script>
38
+ const video = document.getElementById('video');
39
+ const canvas = document.getElementById('canvas');
40
+ const output = document.getElementById('output');
41
+ const captureButton = document.getElementById('capture');
42
+
43
+ navigator.mediaDevices.getUserMedia({
44
+ video: {
45
+ facingMode: { exact: "environment" },
46
+ width: { ideal: 2000 },
47
+ height: { ideal: 2000 },
48
+ advanced: [{ focusMode: "continuous" }]
49
+ }
50
+ })
51
+ .then(stream => {
52
+ video.srcObject = stream;
53
+ })
54
+ .catch(err => {
55
+ console.error("Error accessing the camera: ", err);
56
+ });
57
+ captureButton.addEventListener('click', () => {
58
+ // Draw the video frame to the canvas
59
+ canvas.width = video.videoWidth;
60
+ canvas.height = video.videoHeight;
61
+ const context = canvas.getContext('2d');
62
+ context.drawImage(video, 0, 0, canvas.width, canvas.height);
63
+ // Convert canvas to image data
64
+ const dataURL = canvas.toDataURL('image/png');
65
+ // Process the image with Tesseract
66
+ Tesseract.recognize(
67
+ dataURL,
68
+ 'kor+eng', // Use both Korean and English
69
+ {
70
+ logger: m => console.log(m)
71
+ }
72
+ ).then(({ data: { text } }) => {
73
+ console.log(text);
74
+ analyzeNutrition(text);
75
+ }).catch(err => {
76
+ console.error("Tesseract error: ", err);
77
+ });
78
+ });
79
+ function analyzeNutrition(text) {
80
+ // Extract sugar content from the recognized text
81
+ const sugarMatch = text.match(/(\d+(\.\d+)?)(\s*(g|grams|그램))/i);
82
+ if (sugarMatch) {
83
+ const sugarContent = parseFloat(sugarMatch[1]);
84
+ let message = `Sugar content: ${sugarContent}g - `;
85
+ if (sugarContent > 20) {
86
+ message += 'Dangerous';
87
+ output.className = 'red';
88
+ } else if (sugarContent >= 10 && sugarContent <= 20) {
89
+ message += 'Normal';
90
+ output.className = 'yellow';
91
+ } else {
92
+ message += 'Good';
93
+ output.className = 'green';
94
+ }
95
+ output.textContent = message;
96
+ } else {
97
+ output.textContent = 'Sugar content not found';
98
+ output.className = '';
99
+ }
100
+ }
101
+ </script>
102
+ </body>
103
+ </html>