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" style="display:none;"></canvas>
+        <canvas id="canvas" style="display: none;"></canvas>
         <p id="analysisResult" class="result"></p>
     </div>
 
@@ -93,7 +93,7 @@
         const snap = document.getElementById('snap');
         const context = canvas.getContext('2d');
         const analysisResult = document.getElementById('analysisResult');
-
+        
         navigator.mediaDevices.getUserMedia({ video: true })
             .then(stream => {
                 video.srcObject = stream;
@@ -102,15 +102,6 @@
                 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) {
@@ -127,7 +118,7 @@
                     message = 'dangerous';
                     className = 'dangerous';
                 }
-                analysisResult.textContent = `${message}: ${sugarContent}g`;
+                analysisResult.textContent = `${message} (${sugarContent}g)`;
                 analysisResult.className = className;
             } else {
                 analysisResult.textContent = 'Error: Could not analyze image.';
@@ -138,28 +129,22 @@
         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',
-                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);
-            });
+                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);
+                });
         });
     </script>
 </body>