Update UI and add icons properly via Git LFS

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

static/css/style.css

@@ -3,12 +3,12 @@
 }
 
 body {
-    background-color: #0d1612;
+    background-color: #0d1612; 
     color: #ffffff;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     margin: 0;
     padding: 0;
-
+   
 }
 
 /* Class tiện ích dùng chung */
@@ -38,7 +38,7 @@ body {
 }
 
 .hero-section .highlight {
-    color: #00e676;
+    color: #00e676; 
 }
 
 .hero-section p {
@@ -56,11 +56,11 @@ body {
     padding: 20px;
     max-width: 1000px;
     margin: 0 auto;
-    flex-wrap: wrap;
+    flex-wrap: wrap; 
 }
 
 .action-card {
-    background-color: #17241e;
+    background-color: #17241e; 
     border-radius: 16px;
     padding: 40px 30px;
     text-align: center;
@@ -69,7 +69,7 @@ body {
 
 .action-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
 }
 
 
@@ -191,13 +191,8 @@ body {
 }
 
 @keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 
 .editor-card {
@@ -205,8 +200,8 @@ body {
     border-radius: 16px;
     padding: 30px;
     max-width: 900px;
-    margin: 30px auto 60px auto;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    margin: 30px auto 60px auto; 
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
 }
 
 .editor-card img {
@@ -252,12 +247,12 @@ body {
 
 .big-text {
     font-weight: bold;
-    color: #ffb74d;
+    color: #ffb74d; 
 }
 
 .price-text {
     font-weight: bold;
-    color: #00e676;
+    color: #00e676; 
 }
 
 
@@ -269,7 +264,7 @@ body {
     background-color: #17241e;
     padding: 15px 30px;
     border-bottom: 2px solid #2b4535;
-    position: sticky;
+    position: sticky; 
     top: 0;
     z-index: 1000;
 }
@@ -343,7 +338,7 @@ body {
 }
 
 .export-btn {
-    background-color: #ffb74d;
+    background-color: #ffb74d; 
     color: #000;
 }
 
@@ -357,7 +352,7 @@ body {
     padding: 40px;
     border-radius: 8px;
     min-height: 500px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 }
 
 .restaurant-name {
@@ -447,10 +442,9 @@ body {
 }
 
 @media print {
-
-    .navbar,
-    .hero-section,
-    .menu-controls,
+    .navbar, 
+    .hero-section, 
+    .menu-controls, 
     .menu-header-actions,
     .remove-btn {
         display: none !important;
@@ -476,7 +470,7 @@ body {
         break-inside: avoid !important;
         margin-bottom: 30px !important;
     }
-
+    
     .tab-content {
         display: block !important;
     }
@@ -510,11 +504,11 @@ body {
 
 .smart-tag {
     display: inline-block;
-    background-color: rgba(0, 230, 118, 0.15);
-    color: #00e676;
+    background-color: rgba(0, 230, 118, 0.15); 
+    color: #00e676; 
     border: 1px solid #00e676;
     padding: 4px 12px;
-    border-radius: 20px;
+    border-radius: 20px; 
     font-size: 0.8rem;
     font-weight: bold;
     text-transform: uppercase;
@@ -527,4 +521,35 @@ body {
         color: #27ae60 !important;
         background-color: transparent !important;
     }
+}
+
+@media screen and (max-width: 768px) {
+    body, html {
+        overflow-x: hidden;
+    }
+    .navbar {
+        flex-direction: column;
+        padding: 15px 10px;
+        gap: 15px;
+    }
+    .nav-links {
+        flex-wrap: wrap;
+        justify-content: center;
+        width: 100%;
+        gap: 10px;
+    }
+    .lang-select {
+        margin-right: 0;
+        width: 100%;
+        text-align: center;
+    }
+    .nav-btn {
+        flex: 1 1 45%; 
+        font-size: 0.85rem;
+        padding: 10px 5px;
+        text-align: center;
+    }
+    h1 {
+        font-size: 2rem !important;
+    }
 }

static/js/script.js

@@ -1,25 +1,25 @@
 let currentImageUrl = "";
 
 let stream = null;
-let capturedFile = null;
+let capturedFile = null; 
 
-document.getElementById('imageInput').addEventListener('change', function () {
-    capturedFile = null;
+document.getElementById('imageInput').addEventListener('change', function() {
+    capturedFile = null; 
     if (this.files.length > 0) {
-        analyzeFood();
+        analyzeFood(); 
     }
 });
 
 async function startCamera() {
     const cameraContainer = document.getElementById('cameraContainer');
     const video = document.getElementById('videoElement');
-
+    
     try {
-        stream = await navigator.mediaDevices.getUserMedia({
-            video: { facingMode: 'environment' }
+        stream = await navigator.mediaDevices.getUserMedia({ 
+            video: { facingMode: 'environment' } 
         });
         video.srcObject = stream;
-        cameraContainer.classList.remove('hidden');
+        cameraContainer.classList.remove('hidden'); 
     } 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.");
@@ -31,7 +31,7 @@ function stopCamera() {
     if (stream) {
         stream.getTracks().forEach(track => track.stop());
     }
-    cameraContainer.classList.add('hidden');
+    cameraContainer.classList.add('hidden'); 
 }
 
 function capturePhoto() {
@@ -40,18 +40,18 @@ function capturePhoto() {
     canvas.width = video.videoWidth;
     canvas.height = video.videoHeight;
     const ctx = canvas.getContext('2d');
-    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);  
 
-    canvas.toBlob(function (blob) {
+    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 = "";
-        stopCamera();
+        document.getElementById('imageInput').value = ""; 
+        stopCamera(); 
         analyzeFood();
-
-    }, 'image/jpeg', 0.9);
+        
+    }, 'image/jpeg', 0.9); 
 }
 
 async function analyzeFood() {
@@ -95,17 +95,17 @@ async function analyzeFood() {
             let rawPrice = String(data.data.price);
             let numericPrice = parseInt(rawPrice.replace(/\D/g, ''), 10);
             if (!isNaN(numericPrice)) {
-                document.getElementById('editPrice').value = numericPrice.toLocaleString('en-US') + " VND";
-            }
+            document.getElementById('editPrice').value = numericPrice.toLocaleString('en-US') + " VND";
+            } 
             else {
-                document.getElementById('editPrice').value = rawPrice;
+            document.getElementById('editPrice').value = rawPrice;
             }
             document.getElementById('editDesc').value = data.data.description;
-            document.getElementById('editNutri').value = data.data.nutrition_summary;
-
+            document.getElementById('editNutri').value = data.data.nutrition_summary; 
+            
             // Hiển thị tags WIP 
             const tagsDiv = document.getElementById('editTags');
-            tagsDiv.innerHTML = '';
+            tagsDiv.innerHTML = ''; 
             if (data.data.tags && data.data.tags.length > 0) {
                 data.data.tags.forEach(tag => {
                     const span = document.createElement('span');
@@ -120,9 +120,9 @@ async function analyzeFood() {
 
             editorArea.classList.remove('hidden');
             editorArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-            capturedFile = null;
-            fileInput.value = "";
+            
+            capturedFile = null; 
+            fileInput.value = ""; 
         } else {
             alert("Lỗi từ Server: " + data.message);
         }
@@ -136,36 +136,36 @@ async function analyzeFood() {
 
 
 function switchTab(tabId) {
-    document.querySelectorAll('.tab-content').forEach(tab => {
+     document.querySelectorAll('.tab-content').forEach(tab => {
         tab.classList.add('hidden');
     });
-
-
+    
+    
     document.querySelectorAll('.nav-btn').forEach(btn => {
         btn.classList.remove('active');
     });
-
-    document.getElementById(tabId).classList.remove('hidden');
-
-    document.getElementById('btn-' + tabId).classList.add('active');
-
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+    
+     document.getElementById(tabId).classList.remove('hidden');
+    
+     document.getElementById('btn-' + tabId).classList.add('active');
+    
+     window.scrollTo({ top: 0, behavior: 'smooth' });
 }
+ 
+ let menuItems = JSON.parse(localStorage.getItem('myRestaurantMenu')) || [];
 
-let menuItems = JSON.parse(localStorage.getItem('myRestaurantMenu')) || [];
-
-document.addEventListener('DOMContentLoaded', () => {
+ document.addEventListener('DOMContentLoaded', () => {
     renderMenu();
 });
 
-async function analyzeForMenu(inputElement) {
+ async function analyzeForMenu(inputElement) {
     if (!inputElement.files || inputElement.files.length === 0) return;
-
+    
     const file = inputElement.files[0];
     const loadingDiv = document.getElementById('menuLoading');
     const selectedLang = document.getElementById('outputLanguage').value;
     loadingDiv.classList.remove('hidden');
-
+    
     const formData = new FormData();
     formData.append('file', file);
     formData.append('language', selectedLang);
@@ -179,12 +179,12 @@ async function analyzeForMenu(inputElement) {
         loadingDiv.classList.add('hidden');
 
         if (data.success) {
-            let rawPrice = String(data.data.price);
+             let rawPrice = String(data.data.price);
             let numericPrice = parseInt(rawPrice.replace(/\D/g, ''), 10);
             let formattedPrice = !isNaN(numericPrice) ? numericPrice.toLocaleString('en-US') + " VND" : rawPrice;
 
-            const newItem = {
-                id: Date.now(),
+             const newItem = {
+                id: Date.now(),  
                 imageUrl: data.image_url,
                 name: data.data.dish_name,
                 price: formattedPrice,
@@ -194,12 +194,12 @@ async function analyzeForMenu(inputElement) {
                 tags: data.data.tags || []
             };
 
-            menuItems.push(newItem);
+             menuItems.push(newItem);
             localStorage.setItem('myRestaurantMenu', JSON.stringify(menuItems));
-
-            renderMenu();
-
-            inputElement.value = "";
+            
+             renderMenu();
+            
+             inputElement.value = "";
         } else {
             alert("Server Error: " + data.message);
         }
@@ -211,15 +211,15 @@ async function analyzeForMenu(inputElement) {
     }
 }
 
-function removeFromMenu(id) {
+ function removeFromMenu(id) {
     menuItems = menuItems.filter(item => item.id !== id);
     localStorage.setItem('myRestaurantMenu', JSON.stringify(menuItems));
     renderMenu();
 }
 
-function renderMenu() {
+ function renderMenu() {
     const listContainer = document.getElementById('menuList');
-    listContainer.innerHTML = '';
+    listContainer.innerHTML = ''; 
 
     if (menuItems.length === 0) {
         listContainer.innerHTML = '<p class="empty-menu-msg">Your menu is empty. Add some dishes!</p>';
@@ -233,9 +233,9 @@ function renderMenu() {
         // Delete if needed
         let tagsHtml = '';
         if (item.tags && item.tags.length > 0) {
-            tagsHtml = '<div class="tags-container" style="margin-bottom: 10px;">' +
-                item.tags.map(t => `<span class="smart-tag">${t}</span>`).join('') +
-                '</div>';
+            tagsHtml = '<div class="tags-container" style="margin-bottom: 10px;">' + 
+                       item.tags.map(t => `<span class="smart-tag">${t}</span>`).join('') + 
+                       '</div>';
         }
 
 
@@ -257,12 +257,12 @@ function renderMenu() {
     });
 }
 
-function exportToPDF() {
+ function exportToPDF() {
     if (menuItems.length === 0) {
         alert("Cannot export an empty menu!");
         return;
     }
-
-    window.print();
+    
+     window.print();
 }
 

static/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "Food Detection and Menu Generation ",
+  "short_name": "Food Detection",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#17241e",
+  "theme_color": "#17241e",
+  "orientation": "portrait",
+  "icons": [
+    {
+      "src": "/static/icons/icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/icon.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

templates/index.html

@@ -5,8 +5,12 @@
     <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="manifest" href="/static/manifest.json">
+    <meta name="theme-color" content="#17241e">
+
     <link rel="stylesheet" href="/static/css/style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+
 </head>
 
 <body>