Upload 8 files

main.py

@@ -0,0 +1,275 @@
+from flask import Flask, request, jsonify, render_template
+import requests
+import os
+import math
+import logging
+
+app = Flask(__name__)
+app.static_folder = 'static'
+
+# Configure logging
+logging.basicConfig(level=logging.DEBUG)
+
+# Configuration
+USDA_API_ENDPOINT = "https://api.nal.usda.gov/fdc/v1"
+USDA_API_KEY = os.environ.get('USDA_API_KEY')
+
+# Error messages
+INVALID_INPUT_ERROR = "Invalid input"
+MISSING_REQUIRED_FIELDS_ERROR = "Missing required fields"
+FAILED_TO_FETCH_NUTRIENT_DATA_ERROR = "Failed to fetch nutrient data"
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/calculate-metrics', methods=['POST'])
+def calculate_metrics():
+    data = request.json
+    app.logger.debug(f"Received data for calculate_metrics: {data}")
+    
+    required_fields = ['age', 'gender', 'heightFeet', 'heightInches', 'weight', 'targetWeight', 'waist', 'neck', 'hip', 'steps', 'standingHours']
+    missing_fields = [field for field in required_fields if field not in data or data[field] is None]
+    
+    if missing_fields:
+        app.logger.error(f"Missing required fields: {', '.join(missing_fields)}")
+        return jsonify({"error": MISSING_REQUIRED_FIELDS_ERROR, "missing_fields": missing_fields}), 400
+
+    try:
+        age = int(data['age'])
+        gender = data['gender']
+        height_feet = int(data['heightFeet'])
+        height_inches = int(data['heightInches'])
+        weight = float(data['weight'])  # in kg
+        target_weight = float(data['targetWeight'])  # in kg
+        waist = float(data['waist'])  # in cm
+        neck = float(data['neck'])  # in cm
+        hip = float(data['hip'])  # in cm
+        steps = int(data['steps'])
+        standing_hours = float(data['standingHours'])
+        
+        # Convert height to cm
+        height = (height_feet * 30.48) + (height_inches * 2.54)  # Convert to cm
+        
+    except (ValueError, KeyError) as e:
+        app.logger.error(f"Invalid input: {str(e)}")
+        return jsonify({"error": INVALID_INPUT_ERROR, "details": str(e)}), 400
+
+    if age <= 0 or height <= 0 or weight <= 0 or target_weight <= 0 or waist <= 0 or neck <= 0 or hip <= 0 or steps < 0 or standing_hours < 0:
+        app.logger.error("Invalid input values")
+        return jsonify({"error": INVALID_INPUT_ERROR, "details": "Input values must be positive numbers"}), 400
+
+    if gender not in ['male', 'female', 'other']:
+        app.logger.error("Invalid gender")
+        return jsonify({"error": INVALID_INPUT_ERROR, "details": "Gender must be 'male', 'female', or 'other'"}), 400
+
+    # Calculate BMI
+    bmi = weight / ((height / 100) ** 2)
+
+    # Calculate body fat percentage (using U.S. Navy method)
+    if gender == 'male':
+        body_fat = 86.010 * math.log10(waist - neck) - 70.041 * math.log10(height) + 36.76
+    elif gender == 'female':
+        body_fat = 163.205 * math.log10(waist + hip - neck) - 97.684 * math.log10(height) - 78.387
+    else:
+        # For 'other' gender, use an average of male and female calculations
+        body_fat_male = 86.010 * math.log10(waist - neck) - 70.041 * math.log10(height) + 36.76
+        body_fat_female = 163.205 * math.log10(waist + hip - neck) - 97.684 * math.log10(height) - 78.387
+        body_fat = (body_fat_male + body_fat_female) / 2
+
+    # Calculate lean body mass
+    lean_body_mass = weight * (1 - (body_fat / 100))
+
+    # Calculate recommended calorie intake (using Mifflin-St Jeor Equation)
+    if gender == 'male':
+        bmr = 10 * weight + 6.25 * height - 5 * age + 5
+    elif gender == 'female':
+        bmr = 10 * weight + 6.25 * height - 5 * age - 161
+    else:
+        # For 'other' gender, use an average of male and female calculations
+        bmr_male = 10 * weight + 6.25 * height - 5 * age + 5
+        bmr_female = 10 * weight + 6.25 * height - 5 * age - 161
+        bmr = (bmr_male + bmr_female) / 2
+
+    # Adjust for activity level
+    activity_factor = 1.2 + (steps / 10000) * 0.1 + (standing_hours / 24) * 0.1
+    recommended_calories = bmr * activity_factor
+
+    # Calculate time to reach target weight
+    weight_difference = abs(weight - target_weight)
+    daily_calorie_deficit = 500  # Assuming a 500 calorie deficit per day
+    days_to_target = (weight_difference * 7700) / daily_calorie_deficit  # 7700 calories ≈ 1 kg of body fat
+
+    response = {
+        'bmi': round(bmi, 2),
+        'bodyFatPercentage': round(body_fat, 2),
+        'leanBodyMass': round(lean_body_mass, 2),
+        'recommendedCalories': round(recommended_calories),
+        'timeToTargetWeight': f"{round(days_to_target)} days"
+    }
+
+    app.logger.debug(f"Calculated metrics: {response}")
+    return jsonify(response)
+
+@app.route('/api/personalized-recommendations', methods=['POST'])
+def get_personalized_recommendations():
+    data = request.json
+    app.logger.debug(f"Received data for personalized_recommendations: {data}")
+
+    required_fields = ['age', 'gender', 'height', 'weight', 'targetWeight', 'bmi', 'bodyFatPercentage', 'recommendedCalories', 'steps', 'standingHours']
+    missing_fields = [field for field in required_fields if field not in data or data[field] is None]
+    if missing_fields:
+        app.logger.error(f"Missing required fields: {', '.join(missing_fields)}")
+        return jsonify({"error": MISSING_REQUIRED_FIELDS_ERROR, "missing_fields": missing_fields}), 400
+
+    try:
+        age = int(data['age'])
+        gender = data['gender']
+        height = float(data['height'])
+        weight = float(data['weight'])
+        target_weight = float(data['targetWeight'])
+        bmi = float(data['bmi'])
+        body_fat_percentage = float(data['bodyFatPercentage'])
+        recommended_calories = int(data['recommendedCalories'])
+        steps = int(data['steps'])
+        standing_hours = float(data['standingHours'])
+    except (ValueError, KeyError) as e:
+        app.logger.error(f"Invalid input: {str(e)}")
+        return jsonify({"error": INVALID_INPUT_ERROR, "details": str(e)}), 400
+
+    # Diet recommendations
+    diet_recommendations = []
+    if bmi < 18.5:
+        diet_recommendations.append("Increase calorie intake with nutrient-dense foods to reach a healthy weight")
+        diet_recommendations.append("Focus on foods high in healthy fats, such as avocados, nuts, and olive oil")
+        diet_recommendations.append("Incorporate protein-rich foods like lean meats, fish, eggs, and legumes")
+    elif 18.5 <= bmi < 25:
+        diet_recommendations.append("Maintain a balanced diet with a focus on whole foods")
+        diet_recommendations.append("Ensure adequate intake of fruits, vegetables, whole grains, and lean proteins")
+        diet_recommendations.append("Monitor portion sizes to maintain your healthy weight")
+    elif 25 <= bmi < 30:
+        diet_recommendations.append("Slightly reduce calorie intake and focus on nutrient-dense, low-calorie foods")
+        diet_recommendations.append("Increase fiber intake through vegetables, fruits, and whole grains")
+        diet_recommendations.append("Choose lean proteins and limit saturated fats")
+    else:
+        diet_recommendations.append("Reduce calorie intake and focus on whole, unprocessed foods")
+        diet_recommendations.append("Prioritize vegetables, lean proteins, and complex carbohydrates")
+        diet_recommendations.append("Avoid sugary drinks and high-calorie snacks")
+
+    if (gender == 'male' and body_fat_percentage > 25) or (gender == 'female' and body_fat_percentage > 32) or (gender == 'other' and body_fat_percentage > 28):
+        diet_recommendations.append("Increase protein intake to support lean muscle mass")
+        diet_recommendations.append("Consider adding a protein shake or Greek yogurt as a snack")
+        diet_recommendations.append("Include more fish, chicken, turkey, or plant-based proteins in your meals")
+
+    diet_recommendations.append(f"Aim for {recommended_calories} calories per day")
+    diet_recommendations.append("Include a variety of colorful fruits and vegetables in your diet")
+    diet_recommendations.append("Stay hydrated by drinking at least 8 glasses of water daily")
+    diet_recommendations.append("Limit processed foods and choose whole grains over refined grains")
+
+    if weight > target_weight:
+        diet_recommendations.append("Create a calorie deficit of 500 calories per day to lose weight")
+        diet_recommendations.append("Use smaller plates to help control portion sizes")
+        diet_recommendations.append("Start meals with a salad or vegetable soup to increase satiety")
+    elif weight < target_weight:
+        diet_recommendations.append("Increase your calorie intake by 500 calories per day to gain weight")
+        diet_recommendations.append("Add healthy, calorie-dense foods like nuts, seeds, and dried fruits to your meals")
+        diet_recommendations.append("Consider drinking smoothies made with fruits, oats, and protein powder")
+    else:
+        diet_recommendations.append("Maintain your current calorie intake to maintain your weight")
+        diet_recommendations.append("Practice mindful eating and listen to your body's hunger and fullness cues")
+
+    # Exercise recommendations
+    exercise_recommendations = []
+    if steps < 5000:
+        exercise_recommendations.append("Gradually increase your daily step count to at least 7,500 steps")
+        exercise_recommendations.append("Take short walks during breaks or after meals")
+        exercise_recommendations.append("Use stairs instead of elevators when possible")
+    elif 5000 <= steps < 10000:
+        exercise_recommendations.append("Aim to reach 10,000 steps per day for better health")
+        exercise_recommendations.append("Try brisk walking or light jogging to increase step count")
+        exercise_recommendations.append("Consider using a treadmill desk or walking meetings")
+    else:
+        exercise_recommendations.append("Great job on your step count! Consider adding more intense exercises")
+        exercise_recommendations.append("Incorporate interval training or hill walks to challenge yourself")
+        exercise_recommendations.append("Set new step goals to maintain motivation")
+
+    if standing_hours < 2:
+        exercise_recommendations.append("Try to increase your standing time to at least 2-4 hours per day")
+        exercise_recommendations.append("Use a standing desk or elevate your workstation for part of the day")
+        exercise_recommendations.append("Take phone calls while standing or walking")
+    elif 2 <= standing_hours < 4:
+        exercise_recommendations.append("Good job on standing! Aim to increase your standing time to 4-6 hours per day")
+        exercise_recommendations.append("Alternate between sitting and standing every 30-60 minutes")
+        exercise_recommendations.append("Try gentle exercises or stretches while standing")
+    else:
+        exercise_recommendations.append("Excellent standing habits! Maintain your current standing routine")
+        exercise_recommendations.append("Incorporate balance exercises or yoga poses while standing")
+        exercise_recommendations.append("Consider a treadmill desk for light walking while working")
+
+    exercise_recommendations.append("Include strength training exercises at least 2-3 times per week")
+    exercise_recommendations.append("Aim for at least 150 minutes of moderate-intensity aerobic activity per week")
+    exercise_recommendations.append("Don't forget to stretch before and after exercises to improve flexibility")
+
+    if weight > target_weight:
+        exercise_recommendations.append("Incorporate high-intensity interval training (HIIT) to boost fat burning")
+        exercise_recommendations.append("Try circuit training to combine strength and cardio exercises")
+        exercise_recommendations.append("Consider joining group fitness classes for motivation and guidance")
+    elif weight < target_weight:
+        exercise_recommendations.append("Focus on compound exercises and progressive overload to build muscle mass")
+        exercise_recommendations.append("Incorporate resistance band exercises for muscle growth")
+        exercise_recommendations.append("Ensure adequate rest between workouts for muscle recovery and growth")
+    else:
+        exercise_recommendations.append("Mix cardio and strength training to maintain your current weight and improve overall fitness")
+        exercise_recommendations.append("Try new activities or sports to keep your routine interesting")
+        exercise_recommendations.append("Set performance-based goals to stay motivated")
+
+    if age > 50:
+        exercise_recommendations.append("Include balance and flexibility exercises to maintain mobility")
+        exercise_recommendations.append("Consider low-impact activities like swimming or cycling to protect joints")
+
+    response = {
+        'dietRecommendations': diet_recommendations,
+        'exerciseRecommendations': exercise_recommendations
+    }
+
+    app.logger.debug(f"Generated recommendations: {response}")
+    return jsonify(response)
+
+@app.route('/api/search-food', methods=['GET'])
+def search_food():
+    query = request.args.get('query', '')
+    if not query:
+        return jsonify({"error": "Missing query parameter"}), 400
+
+    try:
+        response = requests.get(
+            f"{USDA_API_ENDPOINT}/foods/search",
+            params={
+                "api_key": USDA_API_KEY,
+                "query": query,
+                "dataType": ["Survey (FNDDS)"],
+                "pageSize": 10
+            }
+        )
+        response.raise_for_status()
+        data = response.json()
+
+        results = []
+        for food in data.get('foods', []):
+            nutrients = {nutrient['nutrientName']: nutrient['value'] for nutrient in food.get('foodNutrients', [])}
+            results.append({
+                'description': food['description'],
+                'calories': nutrients.get('Energy', 0),
+                'protein': nutrients.get('Protein', 0),
+                'carbs': nutrients.get('Carbohydrate, by difference', 0),
+                'fat': nutrients.get('Total lipid (fat)', 0)
+            })
+
+        return jsonify(results)
+
+    except requests.RequestException as e:
+        app.logger.error(f"Error fetching food data: {str(e)}")
+        return jsonify({"error": "Failed to fetch food data"}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)

static/css/styles.css

@@ -0,0 +1,117 @@
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+h1, h2, h3 {
+    color: #333;
+}
+
+form {
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+input, select {
+    width: 100%;
+    padding: 5px;
+    margin-bottom: 10px;
+}
+
+button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+li {
+    cursor: pointer;
+    padding: 5px;
+    margin-bottom: 5px;
+    background-color: #f0f0f0;
+}
+
+li:hover {
+    background-color: #e0e0e0;
+}
+
+canvas {
+    border: 1px solid #ddd;
+    margin-top: 20px;
+}
+
+.flex-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.flex-container > div {
+    flex: 1;
+    margin-right: 20px;
+}
+
+#visualization {
+    text-align: center;
+}
+
+#bmi-display {
+    margin-top: 20px;
+}
+
+.notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    color: white;
+    font-weight: bold;
+    opacity: 0.9;
+    transition: opacity 0.3s ease-in-out;
+}
+
+.notification.success {
+    background-color: #4CAF50;
+}
+
+.notification.info {
+    background-color: #2196F3;
+}
+
+.notification.error {
+    background-color: #f44336;
+}
+
+@media (max-width: 600px) {
+    body {
+        padding: 10px;
+    }
+    
+    .flex-container {
+        flex-direction: column;
+    }
+    
+    .flex-container > div {
+        margin-right: 0;
+        margin-bottom: 20px;
+    }
+}

static/data/food_items.json

@@ -0,0 +1,42 @@
+{
+    "Apple": {
+        "calories": 95,
+        "effect": "decrease"
+    },
+    "Banana": {
+        "calories": 105,
+        "effect": "decrease"
+    },
+    "Chicken Breast": {
+        "calories": 165,
+        "effect": "decrease"
+    },
+    "Pizza Slice": {
+        "calories": 285,
+        "effect": "increase"
+    },
+    "Salad": {
+        "calories": 100,
+        "effect": "decrease"
+    },
+    "Cheeseburger": {
+        "calories": 300,
+        "effect": "increase"
+    },
+    "Yogurt": {
+        "calories": 150,
+        "effect": "decrease"
+    },
+    "Ice Cream": {
+        "calories": 270,
+        "effect": "increase"
+    },
+    "Broccoli": {
+        "calories": 55,
+        "effect": "decrease"
+    },
+    "French Fries": {
+        "calories": 365,
+        "effect": "increase"
+    }
+}

static/js/app.js

@@ -0,0 +1,247 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const userForm = document.getElementById('user-form');
+    const selectedFoodList = document.getElementById('selected-food-list');
+    const canvas = document.getElementById('belly-fat-canvas');
+    const ctx = canvas.getContext('2d');
+    const searchInput = document.getElementById('food-search');
+    const searchResults = document.getElementById('search-results');
+
+    let selectedItems = [];
+    let userMetrics = {};
+    let recommendedCalories = 2000; // Default value, will be updated after user submits metrics
+
+    function updateUserMetrics() {
+        userMetrics.age = parseInt(document.getElementById('age').value);
+        userMetrics.gender = document.getElementById('gender').value;
+        userMetrics.heightFeet = parseInt(document.getElementById('height-feet').value);
+        userMetrics.heightInches = parseInt(document.getElementById('height-inches').value);
+        userMetrics.weight = parseFloat(document.getElementById('weight').value);
+        userMetrics.targetWeight = parseFloat(document.getElementById('target-weight').value);
+        userMetrics.waist = parseFloat(document.getElementById('waist').value);
+        userMetrics.neck = parseFloat(document.getElementById('neck').value);
+        userMetrics.hip = parseFloat(document.getElementById('hip').value);
+        userMetrics.steps = parseInt(document.getElementById('steps').value);
+        userMetrics.standingHours = parseFloat(document.getElementById('standing-hours').value);
+    }
+
+    userForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        updateUserMetrics();
+        calculateMetrics();
+    });
+
+    function calculateMetrics() {
+        console.log('calculateMetrics function called');
+        const heightInCm = (userMetrics.heightFeet * 30.48) + (userMetrics.heightInches * 2.54);
+        const weightInKg = userMetrics.weight * 0.45359237;
+        const targetWeightInKg = userMetrics.targetWeight * 0.45359237;
+        const waistInCm = userMetrics.waist * 2.54;
+        const neckInCm = userMetrics.neck * 2.54;
+        const hipInCm = userMetrics.hip * 2.54;
+
+        const metricsData = {
+            age: userMetrics.age,
+            gender: userMetrics.gender,
+            heightFeet: userMetrics.heightFeet,
+            heightInches: userMetrics.heightInches,
+            weight: weightInKg,
+            targetWeight: targetWeightInKg,
+            waist: waistInCm,
+            neck: neckInCm,
+            hip: hipInCm,
+            steps: userMetrics.steps,
+            standingHours: userMetrics.standingHours
+        };
+
+        console.log('Sending metrics data:', metricsData);
+        fetch('/api/calculate-metrics', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(metricsData),
+        })
+            .then(response => {
+                console.log('Response status:', response.status);
+                return response.json();
+            })
+            .then(data => {
+                console.log('Received metrics data:', data);
+                if (data.error) {
+                    console.error('Error calculating metrics:', data.error);
+                    showNotification(`Error: ${data.error}`, 'error');
+                    return;
+                }
+                document.getElementById('bmi-value').textContent = data.bmi;
+                document.getElementById('recommended-calories').textContent = data.recommendedCalories;
+                document.getElementById('body-fat-percentage').textContent = data.bodyFatPercentage + '%';
+                document.getElementById('lean-body-mass').textContent = (data.leanBodyMass * 2.20462).toFixed(2) + ' lbs';
+                document.getElementById('target-weight-time').textContent = data.timeToTargetWeight;
+                recommendedCalories = data.recommendedCalories;
+                updateBellyFatVisualization({ calories: 0, protein: 0, carbs: 0, fat: 0 });
+                getPersonalizedRecommendations(data);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showNotification(`Error: ${error.message}`, 'error');
+            });
+    }
+
+    function getPersonalizedRecommendations(metricsData) {
+        const recommendationData = {
+            ...userMetrics,
+            ...metricsData,
+            height: (userMetrics.heightFeet * 30.48) + (userMetrics.heightInches * 2.54)
+        };
+
+        console.log('Sending recommendation data:', recommendationData);
+        fetch('/api/personalized-recommendations', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(recommendationData),
+        })
+            .then(response => response.json())
+            .then(data => {
+                console.log('Received recommendations:', data);
+                if (data.error) {
+                    console.error('Error getting recommendations:', data.error);
+                    showNotification(`Error: ${data.error}`, 'error');
+                    return;
+                }
+                displayRecommendations(data);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showNotification(`Error: ${error.message}`, 'error');
+            });
+    }
+
+    function displayRecommendations(recommendations) {
+        const dietRecommendationsList = document.getElementById('diet-recommendations-list');
+        const exerciseRecommendationsList = document.getElementById('exercise-recommendations-list');
+
+        dietRecommendationsList.innerHTML = '';
+        exerciseRecommendationsList.innerHTML = '';
+
+        recommendations.dietRecommendations.forEach(recommendation => {
+            const li = document.createElement('li');
+            li.textContent = recommendation;
+            dietRecommendationsList.appendChild(li);
+        });
+
+        recommendations.exerciseRecommendations.forEach(recommendation => {
+            const li = document.createElement('li');
+            li.textContent = recommendation;
+            exerciseRecommendationsList.appendChild(li);
+        });
+    }
+
+    function searchFood() {
+        const query = searchInput.value.trim();
+        if (query.length < 2) return;
+
+        fetch(`/api/search-food?query=${encodeURIComponent(query)}`)
+            .then(response => response.json())
+            .then(data => {
+                displaySearchResults(data);
+            })
+            .catch(error => console.error('Error:', error));
+    }
+
+    function displaySearchResults(results) {
+        searchResults.innerHTML = '';
+        results.forEach(item => {
+            const li = document.createElement('li');
+            li.textContent = item.description;
+            li.addEventListener('click', () => addFoodItem(item));
+            searchResults.appendChild(li);
+        });
+    }
+
+    function addFoodItem(item) {
+        selectedItems.push(item);
+        updateSelectedFoodList();
+        updateBellyFatVisualization();
+    }
+
+    function updateSelectedFoodList() {
+        selectedFoodList.innerHTML = '';
+        selectedItems.forEach(item => {
+            const li = document.createElement('li');
+            li.textContent = `${item.description} (${item.calories} kcal)`;
+            selectedFoodList.appendChild(li);
+        });
+    }
+
+    function updateBellyFatVisualization() {
+        const totalNutrients = calculateTotalNutrients();
+        
+        // Clear the canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw yellow plate
+        ctx.beginPath();
+        ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 3, 0, 2 * Math.PI);
+        ctx.fillStyle = 'yellow';
+        ctx.fill();
+
+        // Draw green circles for food items
+        const foodItems = Math.min(selectedItems.length, 20);
+        for (let i = 0; i < foodItems; i++) {
+            const angle = (i / foodItems) * 2 * Math.PI;
+            const radius = canvas.width / 4;
+            const x = canvas.width / 2 + radius * Math.cos(angle);
+            const y = canvas.height / 2 + radius * Math.sin(angle);
+
+            ctx.beginPath();
+            ctx.arc(x, y, 10, 0, 2 * Math.PI);
+            ctx.fillStyle = 'green';
+            ctx.fill();
+        }
+
+        // Draw stack graph
+        drawStackGraph(totalNutrients);
+
+        // Update total calories display
+        document.getElementById('total-calories').textContent = totalNutrients.calories;
+    }
+
+    function calculateTotalNutrients() {
+        return selectedItems.reduce((total, item) => {
+            total.calories += item.calories || 0;
+            total.protein += item.protein || 0;
+            total.carbs += item.carbs || 0;
+            total.fat += item.fat || 0;
+            return total;
+        }, { calories: 0, protein: 0, carbs: 0, fat: 0 });
+    }
+
+    function drawStackGraph(nutrients) {
+        const barWidth = 40;
+        const barHeight = 100;
+        const startX = canvas.width - barWidth - 10;
+        const startY = canvas.height - 10;
+
+        const totalMacros = nutrients.protein + nutrients.carbs + nutrients.fat;
+        const proteinHeight = (nutrients.protein / totalMacros) * barHeight;
+        const carbsHeight = (nutrients.carbs / totalMacros) * barHeight;
+        const fatHeight = (nutrients.fat / totalMacros) * barHeight;
+
+        ctx.fillStyle = 'red';
+        ctx.fillRect(startX, startY - fatHeight, barWidth, fatHeight);
+
+        ctx.fillStyle = 'blue';
+        ctx.fillRect(startX, startY - fatHeight - carbsHeight, barWidth, carbsHeight);
+
+        ctx.fillStyle = 'green';
+        ctx.fillRect(startX, startY - fatHeight - carbsHeight - proteinHeight, barWidth, proteinHeight);
+    }
+
+    // Add these event listeners
+    searchInput.addEventListener('input', searchFood);
+
+    // Call updateBellyFatVisualization initially to draw the empty plate
+    updateBellyFatVisualization();
+});

templates/index.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Belly Fat Visualizer</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body>
+    <h1>Belly Fat Visualizer</h1>
+
+    <div id="user-metrics">
+        <h2>Enter Your Metrics</h2>
+        <form id="user-form">
+            <label for="age">Age:</label>
+            <input type="number" id="age" required>
+
+            <label for="gender">Gender:</label>
+            <select id="gender" required>
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+                <option value="other">Other</option>
+            </select>
+
+            <label for="height-feet">Height (feet):</label>
+            <input type="number" id="height-feet" required>
+
+            <label for="height-inches">Height (inches):</label>
+            <input type="number" id="height-inches" required>
+
+            <label for="weight">Weight (lbs):</label>
+            <input type="number" id="weight" required>
+
+            <label for="target-weight">Target Weight (lbs):</label>
+            <input type="number" id="target-weight" required>
+
+            <label for="waist">Waist Circumference (inches):</label>
+            <input type="number" id="waist" required>
+
+            <label for="neck">Neck Circumference (inches):</label>
+            <input type="number" id="neck" required>
+
+            <label for="hip">Hip Circumference (inches):</label>
+            <input type="number" id="hip" required>
+
+            <label for="steps">Daily Steps:</label>
+            <input type="number" id="steps" required>
+
+            <label for="standing-hours">Standing Hours:</label>
+            <input type="number" id="standing-hours" required>
+
+            <button type="submit">Calculate</button>
+        </form>
+    </div>
+
+    <div id="food-selection">
+        <h2>Select Food Items</h2>
+        <div class="search-container">
+            <input type="text" id="food-search" placeholder="Search for food...">
+            <ul id="search-results"></ul>
+        </div>
+        <div class="flex-container">
+            <div>
+                <h3>Selected Food Items:</h3>
+                <ul id="selected-food-list"></ul>
+            </div>
+        </div>
+        <div>
+            <h3>Total Calories: <span id="total-calories">0</span></h3>
+        </div>
+    </div>
+
+    <div id="visualization">
+        <h2>Belly Fat Visualization</h2>
+        <canvas id="belly-fat-canvas" width="300" height="300"></canvas>
+        <div id="health-metrics">
+            <h3>Your BMI: <span id="bmi-value"></span></h3>
+            <h3>Recommended Daily Calories: <span id="recommended-calories"></span></h3>
+            <h3>Body Fat Percentage: <span id="body-fat-percentage"></span></h3>
+            <h3>Lean Body Mass: <span id="lean-body-mass"></span></h3>
+            <h3>Time to Reach Target Weight: <span id="target-weight-time"></span></h3>
+        </div>
+    </div>
+
+    <div id="recommendations">
+        <h2>Personalized Recommendations</h2>
+        <div id="diet-recommendations">
+            <h3>Diet Recommendations:</h3>
+            <ul id="diet-recommendations-list"></ul>
+        </div>
+        <div id="exercise-recommendations">
+            <h3>Exercise Recommendations:</h3>
+            <ul id="exercise-recommendations-list"></ul>
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+</body>
+</html>