Update templates/index.html

templates/index.html

@@ -83,7 +83,7 @@
         <h1>성분분석표</h1>
         <video id="video" autoplay></video>
         <button id="snap">사진 찍기</button>
-        <canvas id="canvas"></canvas>
+        <canvas id="canvas" style="display:none;"></canvas>
         <p id="analysisResult" class="result"></p>
     </div>
 
@@ -102,32 +102,35 @@
                 console.error("Error accessing webcam: " + err);
             });
 
+        function dataURLToFile(dataurl, filename) {
+            let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+            return new File([u8arr], filename, { type: mime });
+        }
+
         function processAnalysisResult(result) {
             const match = result.match(/\d+/);
             if (match) {
                 const sugarContent = parseInt(match[0], 10);
                 let message = '';
                 let className = '';
-                let count = '';
-
                 if (sugarContent >= 0 && sugarContent <= 20) {
                     message = 'good';
                     className = 'good';
-                    count = match;
                 } else if (sugarContent >= 21 && sugarContent <= 50) {
                     message = 'normal';
                     className = 'normal';
-                    count = match;
                 } else if (sugarContent >= 51) {
                     message = 'dangerous';
                     className = 'dangerous';
-                    count = match;
                 }
-
-                analysisResult.textContent = message + match;
+                analysisResult.textContent = `${message}: ${sugarContent}g`;
                 analysisResult.className = className;
             } else {
-                analysisResult.textContent = 'Error: Could not analyze image.' + match;
+                analysisResult.textContent = 'Error: Could not analyze image.';
                 analysisResult.className = '';
             }
         }
@@ -135,22 +138,28 @@
         snap.addEventListener('click', () => {
             context.drawImage(video, 0, 0, canvas.width, canvas.height);
             const dataURL = canvas.toDataURL('image/png');
+            const file = dataURLToFile(dataURL, 'captured_image.png');
+
+            const formData = new FormData();
+            formData.append('image', file);
+
             fetch('/save_image', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ image: dataURL })
-            }).then(response => response.json())
-                .then(data => {
-                    if (data.analysis_result) {
-                        processAnalysisResult(data.analysis_result);
-                    } else {
-                        analysisResult.textContent = 'Error: 성분분석표를 확인할 수 없습니다.';
-                        analysisResult.className = '';
-                    }
-                    alert(data.message);
-                });
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.analysis_result) {
+                    processAnalysisResult(data.analysis_result);
+                } else {
+                    analysisResult.textContent = 'Error: 성분분석표를 확인할 수 없습니다.';
+                    analysisResult.className = '';
+                }
+                alert(data.message);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
         });
     </script>
 </body>