Hugging Face's logo

Spaces:
devlim
/
supernova
Sleeping

App Files Community
devlim commited on
Commit
11c5ebc
ยท
verified ยท
1 Parent(s): 3072b64

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +157 -153
templates/index.html CHANGED
@@ -1,154 +1,158 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>์„ฑ๋ถ„๋ถ„์„ํ‘œ</title>
8
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
9
- <style>
10
- body {
11
- font-family: 'Roboto', sans-serif;
12
- background-color: #f0f2f5;
13
- display: flex;
14
- justify-content: center;
15
- align-items: center;
16
- height: 100vh;
17
- margin: 0;
18
- }
19
-
20
- .container {
21
- background: #fff;
22
- padding: 20px;
23
- border-radius: 8px;
24
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
25
- text-align: center;
26
- max-width: 700px;
27
- width: 100%;
28
- }
29
-
30
- h1 {
31
- color: #333;
32
- margin-bottom: 20px;
33
- }
34
-
35
- video,
36
- canvas,
37
- img {
38
- border-radius: 8px;
39
- width: 100%;
40
- max-width: 640px;
41
- height: auto;
42
- margin-bottom: 20px;
43
- }
44
-
45
- button {
46
- background-color: #4CAF50;
47
- color: white;
48
- padding: 10px 20px;
49
- border: none;
50
- border-radius: 5px;
51
- cursor: pointer;
52
- font-size: 16px;
53
- transition: background-color 0.3s, transform 0.3s;
54
- }
55
-
56
- button:hover {
57
- background-color: #45a049;
58
- transform: scale(1.05);
59
- }
60
-
61
- .result {
62
- margin-top: 20px;
63
- font-size: 18px;
64
- font-weight: bold;
65
- }
66
-
67
- .good {
68
- color: green;
69
- }
70
-
71
- .normal {
72
- color: orange;
73
- }
74
-
75
- .dangerous {
76
- color: red;
77
- }
78
- </style>
79
- </head>
80
-
81
- <body>
82
- <div class="container">
83
- <h1>์„ฑ๋ถ„๋ถ„์„ํ‘œ</h1>
84
- <video id="video" autoplay></video>
85
- <button id="snap">์‚ฌ์ง„ ์ฐ๊ธฐ</button>
86
- <canvas id="canvas"></canvas>
87
- <p id="analysisResult" class="result"></p>
88
- </div>
89
-
90
- <script>
91
- const video = document.getElementById('video');
92
- const canvas = document.getElementById('canvas');
93
- const snap = document.getElementById('snap');
94
- const context = canvas.getContext('2d');
95
- const analysisResult = document.getElementById('analysisResult');
96
-
97
- navigator.mediaDevices.getUserMedia({ video: true })
98
- .then(stream => {
99
- video.srcObject = stream;
100
- })
101
- .catch(err => {
102
- console.error("Error accessing webcam: " + err);
103
- });
104
-
105
- function processAnalysisResult(result) {
106
- const match = result.match(/\d+/);
107
- if (match) {
108
- const sugarContent = parseInt(match[0], 10);
109
- let message = '';
110
- let className = '';
111
-
112
- if (sugarContent >= 0 && sugarContent <= 20) {
113
- message = 'good';
114
- className = 'good';
115
- } else if (sugarContent >= 21 && sugarContent <= 50) {
116
- message = 'normal';
117
- className = 'normal';
118
- } else if (sugarContent >= 51) {
119
- message = 'dangerous';
120
- className = 'dangerous';
121
- }
122
-
123
- analysisResult.textContent = message;
124
- analysisResult.className = className;
125
- } else {
126
- analysisResult.textContent = 'Error: Could not analyze image.';
127
- analysisResult.className = '';
128
- }
129
- }
130
-
131
- snap.addEventListener('click', () => {
132
- context.drawImage(video, 0, 0, canvas.width, canvas.height);
133
- const dataURL = canvas.toDataURL('image/png');
134
- fetch('/save_image', {
135
- method: 'POST',
136
- headers: {
137
- 'Content-Type': 'application/json',
138
- },
139
- body: JSON.stringify({ image: dataURL })
140
- }).then(response => response.json())
141
- .then(data => {
142
- if (data.analysis_result) {
143
- processAnalysisResult(data.analysis_result);
144
- } else {
145
- analysisResult.textContent = 'Error: ์„ฑ๋ถ„๋ถ„์„ํ‘œ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.';
146
- analysisResult.className = '';
147
- }
148
- alert(data.message);
149
- });
150
- });
151
- </script>
152
- </body>
153
-
 
 
 
 
154
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>์„ฑ๋ถ„๋ถ„์„ํ‘œ</title>
8
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Roboto', sans-serif;
12
+ background-color: #f0f2f5;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ height: 100vh;
17
+ margin: 0;
18
+ }
19
+
20
+ .container {
21
+ background: #fff;
22
+ padding: 20px;
23
+ border-radius: 8px;
24
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
25
+ text-align: center;
26
+ max-width: 700px;
27
+ width: 100%;
28
+ }
29
+
30
+ h1 {
31
+ color: #333;
32
+ margin-bottom: 20px;
33
+ }
34
+
35
+ video,
36
+ canvas,
37
+ img {
38
+ border-radius: 8px;
39
+ width: 100%;
40
+ max-width: 640px;
41
+ height: auto;
42
+ margin-bottom: 20px;
43
+ }
44
+
45
+ button {
46
+ background-color: #4CAF50;
47
+ color: white;
48
+ padding: 10px 20px;
49
+ border: none;
50
+ border-radius: 5px;
51
+ cursor: pointer;
52
+ font-size: 16px;
53
+ transition: background-color 0.3s, transform 0.3s;
54
+ }
55
+
56
+ button:hover {
57
+ background-color: #45a049;
58
+ transform: scale(1.05);
59
+ }
60
+
61
+ .result {
62
+ margin-top: 20px;
63
+ font-size: 18px;
64
+ font-weight: bold;
65
+ }
66
+
67
+ .good {
68
+ color: green;
69
+ }
70
+
71
+ .normal {
72
+ color: orange;
73
+ }
74
+
75
+ .dangerous {
76
+ color: red;
77
+ }
78
+ </style>
79
+ </head>
80
+
81
+ <body>
82
+ <div class="container">
83
+ <h1>์„ฑ๋ถ„๋ถ„์„ํ‘œ</h1>
84
+ <video id="video" autoplay></video>
85
+ <button id="snap">์‚ฌ์ง„ ์ฐ๊ธฐ</button>
86
+ <canvas id="canvas"></canvas>
87
+ <p id="analysisResult" class="result"></p>
88
+ </div>
89
+
90
+ <script>
91
+ const video = document.getElementById('video');
92
+ const canvas = document.getElementById('canvas');
93
+ const snap = document.getElementById('snap');
94
+ const context = canvas.getContext('2d');
95
+ const analysisResult = document.getElementById('analysisResult');
96
+
97
+ navigator.mediaDevices.getUserMedia({ video: true })
98
+ .then(stream => {
99
+ video.srcObject = stream;
100
+ })
101
+ .catch(err => {
102
+ console.error("Error accessing webcam: " + err);
103
+ });
104
+
105
+ function processAnalysisResult(result) {
106
+ const match = result.match(/\d+/);
107
+ if (match) {
108
+ const sugarContent = parseInt(match[0], 10);
109
+ let message = '';
110
+ let className = '';
111
+ let count = '';
112
+
113
+ if (sugarContent >= 0 && sugarContent <= 20) {
114
+ message = 'good';
115
+ className = 'good';
116
+ count = match;
117
+ } else if (sugarContent >= 21 && sugarContent <= 50) {
118
+ message = 'normal';
119
+ className = 'normal';
120
+ count = match;
121
+ } else if (sugarContent >= 51) {
122
+ message = 'dangerous';
123
+ className = 'dangerous';
124
+ count = match;
125
+ }
126
+
127
+ analysisResult.textContent = message + match;
128
+ analysisResult.className = className;
129
+ } else {
130
+ analysisResult.textContent = 'Error: Could not analyze image.' + match;
131
+ analysisResult.className = '';
132
+ }
133
+ }
134
+
135
+ snap.addEventListener('click', () => {
136
+ context.drawImage(video, 0, 0, canvas.width, canvas.height);
137
+ const dataURL = canvas.toDataURL('image/png');
138
+ fetch('/save_image', {
139
+ method: 'POST',
140
+ headers: {
141
+ 'Content-Type': 'application/json',
142
+ },
143
+ body: JSON.stringify({ image: dataURL })
144
+ }).then(response => response.json())
145
+ .then(data => {
146
+ if (data.analysis_result) {
147
+ processAnalysisResult(data.analysis_result);
148
+ } else {
149
+ analysisResult.textContent = 'Error: ์„ฑ๋ถ„๋ถ„์„ํ‘œ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.';
150
+ analysisResult.className = '';
151
+ }
152
+ alert(data.message);
153
+ });
154
+ });
155
+ </script>
156
+ </body>
157
+
158
  </html>