Spaces:

HoagMin
/

FoodDetection

Sleeping

App Files Files Community

HoagMin commited on Feb 27

Commit

a93166b

1 Parent(s): 751fef8

update ui

Browse files

Files changed (2) hide show

static/js/script.js +82 -3
templates/index.html +37 -7

static/js/script.js CHANGED Viewed

@@ -1,17 +1,92 @@
 let currentImageUrl = "";
 async function analyzeFood() {
     const fileInput = document.getElementById('imageInput');
     const loadingDiv = document.getElementById('loading');
     const editorArea = document.getElementById('editorArea');
-    if (fileInput.files.length === 0) {
-        alert("Vui lòng chọn ảnh trước!");
         return;
     }
     const formData = new FormData();
-    formData.append('file', fileInput.files[0]);
     loadingDiv.classList.remove('hidden');
     editorArea.classList.add('hidden');
@@ -34,6 +109,10 @@ async function analyzeFood() {
             document.getElementById('editDesc').value = data.data.description;
             document.getElementById('editNutri').value = data.data.nutrition_summary;
             editorArea.classList.remove('hidden');
         } else {
             alert("Lỗi từ Server: " + data.message);
         }

 let currentImageUrl = "";
+// 1. THÊM CÁC BIẾN CHO CAMERA
+let stream = null;
+let capturedFile = null; // Biến này sẽ giữ ảnh vừa chụp
+// 2. THÊM SỰ KIỆN LẮNG NGHE:
+// Nếu người dùng chọn file mới từ thiết bị, xóa ảnh đã chụp trước đó để tránh gửi nhầm
+document.getElementById('imageInput').addEventListener('change', function () {
+    capturedFile = null;
+    if (this.files.length > 0) {
+        analyzeFood();
+    }
+});
+// 3. CÁC HÀM ĐIỀU KHIỂN CAMERA
+async function startCamera() {
+    const cameraContainer = document.getElementById('cameraContainer');
+    const video = document.getElementById('videoElement');
+    try {
+        // Yêu cầu quyền mở Camera (ưu tiên camera sau)
+        stream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: 'environment' }
+        });
+        video.srcObject = stream;
+        cameraContainer.classList.remove('hidden'); // Hiện khung camera lên
+    } catch (err) {
+        console.error("Lỗi xin quyền camera:", err);
+        alert("Không thể mở Camera! Hãy đảm bảo bạn đã cấp quyền trong trình duyệt.");
+    }
+}
+function stopCamera() {
+    const cameraContainer = document.getElementById('cameraContainer');
+    if (stream) {
+        // Tắt từng luồng (track) của camera để giải phóng phần cứng
+        stream.getTracks().forEach(track => track.stop());
+    }
+    cameraContainer.classList.add('hidden'); // Giấu khung camera đi
+}
+function capturePhoto() {
+    const video = document.getElementById('videoElement');
+    const canvas = document.getElementById('canvasElement');
+    // Đặt kích thước "phòng tối" bằng với kích thước thật của video
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    // "Rửa" khung hình hiện tại lên canvas
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    // Chuyển hình ảnh từ canvas thành một File thực thụ
+    canvas.toBlob(function (blob) {
+        capturedFile = new File([blob], "camera_capture.jpg", { type: "image/jpeg" });
+        // Thông báo và dọn dẹp
+        alert("📸 Đã chụp ảnh thành công! Hãy bấm 'Quét ảnh' để AI phân tích.");
+        document.getElementById('imageInput').value = ""; // Xóa tên file ở ô input (nếu có)
+        stopCamera();
+        analyzeFood();
+    }, 'image/jpeg', 0.9); // Chất lượng 90%
+}
+// 4. CẬP NHẬT HÀM GỬI API CỦA BẠN
 async function analyzeFood() {
     const fileInput = document.getElementById('imageInput');
     const loadingDiv = document.getElementById('loading');
     const editorArea = document.getElementById('editorArea');
+    // MỚI: KIỂM TRA NGUỒN ẢNH (Ưu tiên ảnh vừa chụp, sau đó mới đến ảnh chọn từ thư viện)
+    let fileToUpload = null;
+    if (capturedFile) {
+        fileToUpload = capturedFile;
+    } else if (fileInput.files.length > 0) {
+        fileToUpload = fileInput.files[0];
+    }
+    // Nếu không có ảnh từ cả 2 nguồn thì báo lỗi
+    if (!fileToUpload) {
+        alert("Vui lòng chọn ảnh hoặc chụp ảnh trước!");
         return;
     }
     const formData = new FormData();
+    formData.append('file', fileToUpload); // Đính kèm ảnh đã chọn vào form
     loadingDiv.classList.remove('hidden');
     editorArea.classList.add('hidden');
             document.getElementById('editDesc').value = data.data.description;
             document.getElementById('editNutri').value = data.data.nutrition_summary;
             editorArea.classList.remove('hidden');
+            // Xóa ảnh sau khi phân tích xong để reset trạng thái cho lần quét tiếp theo
+            capturedFile = null;
+            fileInput.value = "";
         } else {
             alert("Lỗi từ Server: " + data.message);
         }

templates/index.html CHANGED Viewed

@@ -1,30 +1,59 @@
 <!DOCTYPE html>
 <html lang="vi">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Menu Builder</title>
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
     <div class="main-container">
         <div class="panel left-panel">
-            <h1>Quét món</h1>
             <div class="upload-box">
-                <input type="file" id="imageInput" accept="image/*">
-                <button onclick="analyzeFood()" id="btnAnalyze" class="btn-primary">📸 Quét ảnh</button>
             </div>
             <div id="loading" class="hidden">
                 <div class="spinner"></div>
-                <p>Đang phân tích món ăn...</p>
             </div>
             <div id="editorArea" class="hidden">
                 <div class="editor-card">
                     <img id="editImg" src="" alt="Preview">
                     <div class="form-group">
                         <label>Tên món:</label>
                         <input type="text" id="editName" class="form-control big-text">
@@ -51,4 +80,5 @@
     <script src="/static/js/script.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="vi">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Now i know what i eat</title>
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
     <div class="main-container">
         <div class="panel left-panel">
+            <h1> Scan </h1>
             <div class="upload-box">
+                <input type="file" id="imageInput" accept="image/*" style="display: none;">
+                <label for="imageInput"
+                    style="display: inline-flex; align-items: center; border-radius: 5px; border: 2px outset rgb(236, 248, 70); background-color:gold; padding: 8px 15px; cursor: pointer; margin: 0; color: black; box-sizing: border-box; font-family: inherit; font-size: 13.33px;">
+                    Chọn từ máy
+                </label>
+                <button onclick="startCamera()" id="btnOpenCamera"
+                    style="border-radius: 5px; border-color: aqua; margin-left: 10px; padding: 8px 15px; cursor: pointer; background-color: cyan;">Bật
+                    Camera</button>
+                <div id="cameraContainer" class="hidden"
+                    style="margin-top: 15px; border: 2px dashed #ccc; padding: 10px; border-radius: 8px; text-align: center;">
+                    <video id="videoElement" autoplay playsinline
+                        style="width: 100%; max-width: 400px; border-radius: 8px; background: #000;"></video>
+                    <div style="margin-top: 10px; display: flex; gap: 10px; justify-content: center;">
+                        <button onclick="capturePhoto()" class="btn-primary"> Chụp ngay</button>
+                        <button onclick="stopCamera()" style="padding: 8px 15px; cursor: pointer;"> Đóng</button>
+                    </div>
+                </div>
+                <canvas id="canvasElement" style="display: none;"></canvas>
+                <button onclick="analyzeFood()" id="btnAnalyze" class="btn-primary" style="display: none;">📸 Quét
+                    ảnh</button>
             </div>
             <div id="loading" class="hidden">
                 <div class="spinner"></div>
+                <p> Đang phân tích món ăn...</p>
             </div>
             <div id="editorArea" class="hidden">
                 <div class="editor-card">
                     <img id="editImg" src="" alt="Preview">
                     <div class="form-group">
                         <label>Tên món:</label>
                         <input type="text" id="editName" class="form-control big-text">
     <script src="/static/js/script.js"></script>
 </body>
 </html>