enhanced UI and organise files

.gitignore

@@ -0,0 +1,50 @@
+# Backend (Python)
+be/.env
+be/venv/
+be/__pycache__/
+be/*.pyc
+be/*.pyo
+be/*.pyd
+be/.Python
+be/env/
+be/pip-log.txt
+be/pip-delete-this-directory.txt
+be/.pytest_cache/
+be/*.egg-info/
+be/dist/
+be/build/
+
+# Frontend
+fe/.netlify/
+
+# Netlify
+.netlify
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

README.md

@@ -40,6 +40,62 @@ Backend:
 - Google Fit API
 - OpenAI API
 
+## 🚀Getting Started
+
+### Prerequisites
+- Python 3.7 or higher
+- A modern web browser (Chrome, Firefox, Safari, or Edge)
+- OpenAI API key
+
+### Backend Setup
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/VeCook-fork.git
+   cd VeCook-fork/be
+   ```
+
+2. **Install Python dependencies**
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. **Set up environment variables**
+
+   Create a `.env` file in the `be/` directory with the following:
+   ```
+   OPENAI_API_KEY=your_openai_api_key_here
+   ```
+
+4. **Run the Flask backend**
+   ```bash
+   python app.py
+   ```
+
+   The backend server will start on `http://localhost:5000`
+
+### Frontend Setup
+
+1. **Navigate to the frontend directory**
+   ```bash
+   cd ../fe
+   ```
+
+2. **Open with a local server**
+
+   - **Using VS Code Live Server extension:**
+     Right-click on `index.html` and select "Open with Live Server"
+
+3. **Access the application**
+
+   Open your browser and navigate to `http://127.0.0.1:5500/fe/` if using Live Server extension.
+
+### Usage Tips
+- 🎥 Allow camera access for hand gesture controls
+- 🤚 Raise your hand to activate AI assistance
+- 👉 Point right to go to the next step
+- 👈 Point left to go back to the previous step
+
 ## 👥Contributors
 - [**Michelle Chan (@Chelle007)**](https://github.com/Chelle007) — Backend Web Developer
 - [**Desmond (@desraymondz)**](https://github.com/desraymondz) — JavaScript and ml5.js Developer

fe/assets/favicon_io/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

fe/index.html

@@ -5,6 +5,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mac N Cheese Recipe</title>
+
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon_io/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon_io/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_io/favicon-16x16.png">
+    <link rel="manifest" href="./assets/favicon_io/site.webmanifest">
     <!-- Bootstrap -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
@@ -26,7 +32,7 @@
     <!-- JS -->
     <script src="./scripts/aichat.js"></script>
     <script src="https://accounts.google.com/gsi/client"></script>
-    <script src="google-fit.js"></script>
+    <script src="./scripts/google-fit.js"></script>
     <style>
         * {
             box-sizing: border-box;
@@ -380,7 +386,7 @@
     <!-- Navigation Bar -->
     <nav class="navbar">
         <a href="/" class="logo-container">
-            <img src="styles\logo.png" alt="Your Logo" class="logo-img">
+            <img src="./assets/images/kitchen-copilot-logo.webp" alt="Kitchen Copilot Logo" class="logo-img">
             <span class="logo-text">Kitchen Copilot - VeCook</span>
         </a>
         <div class="nav-links">
@@ -393,7 +399,7 @@
     <div class="content-wrapper">
         <div class="recipe-card">
             <div class="left-section">
-                <img src="./styles/mac.jpg" alt="Creamy mac and cheese" class="recipe-image">
+                <img src="./assets/images/mac.jpg" alt="Creamy mac and cheese" class="recipe-image">
                 <div class="recipe-title">Creamy Mac and Cheese</div>
                 <div class="time-container">
                     <svg class="clock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"

fe/instruction.html

@@ -5,6 +5,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Voice Navigation Steps</title>
+
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon_io/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon_io/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_io/favicon-16x16.png">
+    <link rel="manifest" href="./assets/favicon_io/site.webmanifest">
     <!-- Bootstrap -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

fe/scripts/chatbox.js

@@ -91,10 +91,8 @@ document.addEventListener('DOMContentLoaded', function () {
             const recommendationMessage = await recommend_google_fit();
 
             // After getting the Google Fit recommendation, call the personalize endpoint with "high protein"
-            const aiMessage = await getAIRecommendation("I have high activity level so I need high protein");
+            await getAIRecommendation("I have high activity level so I need high protein");
 
-            // Show response from AI (from personalize API)
-            addMessage(aiMessage, false);
 
         } catch (error) {
             console.error("Error in handleGoogleFitRecommendation:", error);
@@ -133,11 +131,14 @@ document.addEventListener('DOMContentLoaded', function () {
             });
 
             const aiResponse = await response.json(); // Get AI response
-            addMessage(aiResponse.response?.message || "No response received.", false, true); // Show AI response with Yes/No buttons
+            const message = aiResponse.response?.message || "No response received.";
+            addMessage(message, false, true); // Show AI response with Yes/No buttons
+            return message; // Return the message instead of undefined
 
         } catch (error) {
             console.error('Error sending message:', error);
             addMessage('Sorry, something went wrong. Please try again.');
+            return 'Sorry, something went wrong. Please try again.';
         }
     }