Spaces:

manmohanai
/

faceimotion

Running

App Files Files Community

manmohanai commited on Jul 24, 2025

Commit

9a35b42

verified ·

1 Parent(s): 1d590c3

add functionality capture video and detect water container. check how much ml of water it can have do measurement automatically. - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +346 -465

index.html CHANGED Viewed

@@ -3,521 +3,402 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Emotion Detection Camera</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
     <style>
-        .camera-container {
             position: relative;
-            width: 100%;
-            max-width: 640px;
-            margin: 0 auto;
-            border-radius: 12px;
             overflow: hidden;
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
-        .loading-spinner {
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top: 3px solid #4f46e5;
-            width: 30px;
-            height: 30px;
-            animation: spin 1s linear infinite;
-            margin: 0 auto;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
         }
-        .face-box {
             position: absolute;
-            border: 2px solid #4f46e5;
-            border-radius: 4px;
-            background-color: rgba(79, 70, 229, 0.1);
         }
     </style>
 </head>
-<body class="bg-gray-100 min-h-screen">
     <div class="container mx-auto px-4 py-8">
-        <div class="flex flex-col lg:flex-row gap-8">
-            <div class="lg:w-2/3">
-        <div class="text-center mb-8">
-            <h1 class="text-3xl md:text-4xl font-bold text-indigo-700 mb-2">Emotion Detection Camera</h1>
-            <p class="text-gray-600 max-w-lg mx-auto">Take a photo and our AI will detect your facial expressions and emotions in real-time.</p>
-        </div>
-        <div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto">
-            <div id="status" class="text-center py-4 hidden">
-                <div class="loading-spinner"></div>
-                <p class="mt-2 text-gray-600">Loading models...</p>
-            </div>
-            <div class="camera-container bg-gray-200 aspect-video relative" id="cameraView">
-                <video id="video" autoplay muted playsinline class="w-full h-full object-cover"></video>
-                <canvas id="canvas" class="absolute top-0 left-0 w-full h-full hidden"></canvas>
-            </div>
-            <div class="flex flex-wrap justify-center gap-4 mt-6">
-                <button id="captureBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition-all">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                        <path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
-                    </svg>
-                    Capture Photo
-                </button>
-                <button id="switchCameraBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition-all">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                        <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v8a2 2 0 01-2 2h-2a2 2 0 01-2-2V6z" />
-                    </svg>
-                    Switch Camera
-                </button>
-                <button id="resetBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition-all hidden">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
-                    </svg>
-                    Reset
-                </button>
-            </div>
-            <div id="results" class="mt-8 hidden">
-                <h3 class="text-xl font-semibold text-gray-800 mb-4">Emotion Analysis</h3>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <div>
-                        <h4 class="font-medium text-gray-700 mb-2">Primary Emotion</h4>
-                        <div id="primaryEmotion" class="bg-indigo-50 text-indigo-800 px-4 py-3 rounded-lg font-medium"></div>
                     </div>
-                    <div>
-                        <h4 class="font-medium text-gray-700 mb-2">Confidence Level</h4>
-                        <div id="confidenceLevel" class="bg-indigo-50 text-indigo-800 px-4 py-3 rounded-lg font-medium"></div>
                     </div>
                 </div>
-                <div class="mt-6">
-                    <h4 class="font-medium text-gray-700 mb-2">Detailed Breakdown</h4>
-                    <div id="emotionDetails" class="space-y-2"></div>
                 </div>
-            </div>
-        </div>
-            </div> <!-- End of video content -->
-            <!-- Emotion Suggestions Sidebar -->
-            <div class="lg:w-1/3 bg-white rounded-xl shadow-lg p-6 sticky top-8">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-xl font-semibold text-indigo-700">Emotion Tips</h3>
-                <button id="muteBtn" class="text-gray-500 hover:text-indigo-600">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
-                    </svg>
-                </button>
             </div>
-            <div id="emotionSuggestions" class="space-y-4">
-                <div class="text-center py-8 text-gray-400">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                    <p>Face the camera to get personalized suggestions!</p>
                 </div>
             </div>
         </div>
-    </div> <!-- End of container -->
-        </div> <!-- End of flex container -->
-    </div> <!-- End of main container -->
-    <div class="mt-8 text-center text-gray-500 text-sm">
-        <p>This app uses face-api.js for emotion detection. All processing happens in your browser.</p>
     </div>
     <script>
-        // DOM Elements
-        const video = document.getElementById('video');
-        const canvas = document.getElementById('canvas');
-        const captureBtn = document.getElementById('captureBtn');
-        const switchCameraBtn = document.getElementById('switchCameraBtn');
-        const resetBtn = document.getElementById('resetBtn');
-        const statusElement = document.getElementById('status');
-        const resultsElement = document.getElementById('results');
-        const primaryEmotionElement = document.getElementById('primaryEmotion');
-        const confidenceLevelElement = document.getElementById('confidenceLevel');
-        const emotionDetailsElement = document.getElementById('emotionDetails');
-        let stream = null;
-        let currentFacingMode = 'user'; // 'user' for front camera, 'environment' for back
-        let isCaptured = false;
-        let isCooldown = false;
-        let cooldownEndTime = 0;
-        // Load models and start camera
-        async function init() {
-            statusElement.classList.remove('hidden');
             try {
-                await Promise.all([
-                    faceapi.nets.tinyFaceDetector.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models'),
-                    faceapi.nets.faceLandmark68Net.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models'),
-                    faceapi.nets.faceRecognitionNet.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models'),
-                    faceapi.nets.faceExpressionNet.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models')
-                ]);
-                statusElement.classList.add('hidden');
-                startCamera();
-            } catch (error) {
-                statusElement.innerHTML = `
-                    <div class="bg-red-50 text-red-600 p-4 rounded-lg">
-                        <p>Failed to load models. Please refresh the page or check your internet connection.</p>
-                    </div>
-                `;
-                console.error(error);
-            }
-        }
-        // Start camera with selected facing mode
-        async function startCamera() {
-            if (stream) {
-                stream.getTracks().forEach(track => track.stop());
             }
-            try {
-                stream = await navigator.mediaDevices.getUserMedia({
-                    video: {
-                        facingMode: currentFacingMode,
-                        width: { ideal: 1280 },
-                        height: { ideal: 720 }
-                    },
-                    audio: false
-                });
-                video.srcObject = stream;
-                video.onloadedmetadata = () => {
-                    video.play();
-                    if (!isCaptured) {
-                        detectEmotions();
-                    }
-                };
-            } catch (error) {
-                console.error("Camera error:", error);
-                alert("Could not access the camera. Please make sure you've granted camera permissions.");
-            }
-        }
-        // Detect emotions in real-time
-        async function detectEmotions() {
-            if (isCaptured || isCooldown) {
-                // Show remaining cooldown time if active
-                if (isCooldown) {
-                    const remaining = Math.ceil((cooldownEndTime - Date.now()) / 1000);
-                    if (remaining > 0) {
-                        console.log(`Cooldown: ${remaining}s remaining`);
-                    }
-                }
-                return;
             }
-            const detection = await faceapi.detectSingleFace(video, new faceapi.TinyFaceDetectorOptions())
-                .withFaceLandmarks()
-                .withFaceExpressions();
-            // Clear previous drawings
-            const canvas = faceapi.createCanvasFromMedia(video);
-            const context = canvas.getContext('2d');
-            context.clearRect(0, 0, canvas.width, canvas.height);
-            // Resize canvas to match video dimensions
-            faceapi.matchDimensions(canvas, {
-                width: video.clientWidth,
-                height: video.clientHeight
-            });
-            if (detection) {
-                // Draw face detection box
-                const resizedDetections = faceapi.resizeResults(detection, {
-                    width: video.clientWidth,
-                    height: video.clientHeight
-                });
-                // Draw face box
-                const box = resizedDetections.detection.box;
-                const drawBox = new faceapi.draw.DrawBox(box, {
-                    label: `Confidence: ${Math.round(detection.detection.score * 100)}%`
-                });
-                drawBox.draw(canvas);
-                // Draw face landmarks
-                faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
-                // Get dominant emotion
-                const expressions = detection.expressions;
-                const primaryEmotion = Object.entries(expressions).reduce((a, b) => a[1] > b[1] ? a : b);
-            }
-            // Update emotion suggestions
-            if (detection) {
-                updateEmotionSuggestions(detection.expressions);
-                // Start cooldown period
-                isCooldown = true;
-                cooldownEndTime = Date.now() + 10000; // 10 seconds from now
-                setTimeout(() => {
-                    isCooldown = false;
-                    detectEmotions();
-                }, 10000);
-            } else {
-                // Schedule next detection normally if no face detected
-                setTimeout(() => detectEmotions(), 300);
-            }
-        }
-        // Capture photo and analyze emotions
-        captureBtn.addEventListener('click', async () => {
-            if (isCaptured) return;
-            isCaptured = true;
-            captureBtn.disabled = true;
-            // Create canvas from video
-            canvas.width = video.clientWidth;
-            canvas.height = video.clientHeight;
-            const context = canvas.getContext('2d');
-            context.drawImage(video, 0, 0, canvas.width, canvas.height);
-            // Hide video and show canvas
-            video.classList.add('hidden');
-            canvas.classList.remove('hidden');
-            // Analyze the captured image
-            const detection = await faceapi.detectSingleFace(canvas, new faceapi.TinyFaceDetectorOptions())
-                .withFaceLandmarks()
-                .withFaceExpressions();
-            if (detection) {
-                const expressions = detection.expressions;
-                const primaryEmotion = Object.entries(expressions).reduce((a, b) => a[1] > b[1] ? a : b);
-                // Display results
-                primaryEmotionElement.textContent = `${capitalizeFirstLetter(primaryEmotion[0])} (${Math.round(primaryEmotion[1] * 100)}%)`;
-                confidenceLevelElement.textContent = getConfidenceLevel(primaryEmotion[1]);
-                // Create detailed breakdown
-                emotionDetailsElement.innerHTML = '';
-                Object.entries(expressions)
-                    .sort((a, b) => b[1] - a[1])
-                    .forEach(([emotion, value]) => {
-                        const percentage = Math.round(value * 100);
-                        const emotionItem = document.createElement('div');
-                        emotionItem.className = 'bg-gray-50 p-3 rounded-lg';
-                        emotionItem.innerHTML = `
-                            <div class="flex justify-between items-center">
-                                <span class="font-medium">${capitalizeFirstLetter(emotion)}</span>
-                                <span class="text-gray-600">${percentage}%</span>
-                            </div>
-                            <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
-                                <div class="bg-indigo-500 h-2 rounded-full" style="width: ${percentage}%"></div>
-                            </div>
-                        `;
-                        emotionDetailsElement.appendChild(emotionItem);
-                    });
-                resultsElement.classList.remove('hidden');
-                resetBtn.classList.remove('hidden');
-            } else {
-                alert("No face detected in the captured image. Please try again.");
-                resetApp();
-            }
-            captureBtn.disabled = false;
-        });
-        // Switch between front and back camera
-        switchCameraBtn.addEventListener('click', () => {
-            currentFacingMode = currentFacingMode === 'user' ? 'environment' : 'user';
-            startCamera();
-        });
-        // Reset the app to initial state
-        resetBtn.addEventListener('click', resetApp);
-        function resetApp() {
-            isCaptured = false;
-            video.classList.remove('hidden');
-            canvas.classList.add('hidden');
-            resultsElement.classList.add('hidden');
-            resetBtn.classList.add('hidden');
-            // Clear canvas
-            const context = canvas.getContext('2d');
-            context.clearRect(0, 0, canvas.width, canvas.height);
-            // Restart emotion detection
-            detectEmotions();
-        }
-        // Speech synthesis
-        function speak(text) {
-            if ('speechSynthesis' in window && !isMuted) {
-                speechSynthesis.cancel(); // Cancel any previous speech
-                const utterance = new SpeechSynthesisUtterance(text);
-                utterance.rate = 0.9;
-                speechSynthesis.speak(utterance);
-            }
-        }
-        // Helper functions
-        function capitalizeFirstLetter(string) {
-            return string.charAt(0).toUpperCase() + string.slice(1);
-        }
-        function getConfidenceLevel(confidence) {
-            if (confidence > 0.8) return "Very High";
-            if (confidence > 0.6) return "High";
-            if (confidence > 0.4) return "Moderate";
-            if (confidence > 0.2) return "Low";
-            return "Very Low";
-        }
-        // Track last emotion and values
-        let lastEmotion = null;
-        let lastEmotionValues = {};
-        const EMOTION_CHANGE_THRESHOLD = 0.2; // Minimum change to consider significant
-        // Emotion-based suggestions
-        const emotionTips = {
-            happy: [
-                "Your smile is contagious! Keep spreading joy!",
-                "Try doing something creative today - paint, write, or dance!",
-                "Share your happiness with someone who needs it today."
-            ],
-            sad: [
-                "Why did the sad computer apply for a job? It had too many bytes of emotional baggage!",
-                "Remember: This too shall pass. You've got this!",
-                "Try listening to uplifting music or calling a friend."
-            ],
-            angry: [
-                "Take 5 deep breaths - in through the nose, out through the mouth.",
-                "Try squeezing a stress ball or going for a quick walk.",
-                "Write down what's bothering you, then tear it up!"
-            ],
-            surprised: [
-                "Did you know? The average person is surprised 3 times a day!",
-                "Embrace the unexpected - it keeps life interesting!",
-                "Try something new today to keep that surprised look going!"
-            ],
-            fearful: [
-                "Face your fears one small step at a time - you're stronger than you think!",
-                "Try the 5-4-3-2-1 grounding technique: Name 5 things you can see, 4 you can touch, etc.",
-                "Remember: Courage isn't the absence of fear, but acting despite it."
-            ],
-            disgusted: [
-                "Eww, what's that face for? Try thinking of your favorite food instead!",
-                "When life gives you lemons... make sure they're not rotten first!",
-                "Change your environment - go somewhere pleasant to reset your mood."
-            ],
-            neutral: [
-                "Feeling balanced? Perfect time for mindfulness meditation!",
-                "Try a new facial expression - how about a smile?",
-                "Your calm demeanor is your superpower today."
-            ]
-        };
-        function updateEmotionSuggestions(expressions) {
-            const primaryEmotion = Object.entries(expressions).reduce((a, b) => a[1] > b[1] ? a : b)[0];
-            // Check if emotion values have changed significantly
-            let hasSignificantChange = false;
-            if (lastEmotionValues) {
-                for (const [emotion, value] of Object.entries(expressions)) {
-                    if (Math.abs(value - (lastEmotionValues[emotion] || 0)) > EMOTION_CHANGE_THRESHOLD) {
-                        hasSignificantChange = true;
-                        break;
-                    }
                 }
-            } else {
-                hasSignificantChange = true; // First detection
             }
-            // Only update if emotion changed significantly
-            if (!hasSignificantChange && primaryEmotion === lastEmotion) {
-                return;
             }
-            lastEmotion = primaryEmotion;
-            lastEmotionValues = {...expressions};
-            const suggestionsContainer = document.getElementById('emotionSuggestions');
-            const tips = emotionTips[primaryEmotion] || [
-                "Your emotions are valid. Take a moment to acknowledge how you feel."
-            ];
-            const randomTip = tips[Math.floor(Math.random() * tips.length)];
-            speak(`You seem ${primaryEmotion}. ${randomTip}`);
-            suggestionsContainer.innerHTML = `
-                <div class="bg-indigo-50 rounded-lg p-4">
-                    <div class="flex items-center gap-3 mb-3">
-                        <div class="bg-indigo-100 p-2 rounded-full">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                            </svg>
-                        </div>
-                        <h4 class="font-medium text-indigo-700">${capitalizeFirstLetter(primaryEmotion)} Detected</h4>
-                    </div>
-                    <p class="text-gray-700">${randomTip}</p>
-                </div>
-                <div class="bg-gray-50 rounded-lg p-4">
-                    <h4 class="font-medium text-gray-700 mb-2">Quick Mood Boosters</h4>
-                    <ul class="space-y-2 text-sm text-gray-600">
-                        <li class="flex items-center gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                            </svg>
-                            Take 3 deep breaths
-                        </li>
-                        <li class="flex items-center gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                            </svg>
-                            Drink some water
-                        </li>
-                        <li class="flex items-center gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                            </svg>
-                            Stretch your body
-                        </li>
-                    </ul>
-                </div>
-            `;
-        }
-        // Mute button functionality
-        const muteBtn = document.getElementById('muteBtn');
-        let isMuted = false;
-        muteBtn.addEventListener('click', () => {
-            isMuted = !isMuted;
-            if (isMuted) {
-                muteBtn.innerHTML = `
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
-                    </svg>
-                `;
-                speechSynthesis.cancel();
-            } else {
-                muteBtn.innerHTML = `
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
-                    </svg>
                 `;
             }
         });
-        // Initialize the app
-        document.addEventListener('DOMContentLoaded', init);
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=manmohanai/faceimotion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hydration Tracker</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.18.0/dist/tf.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js"></script>
     <style>
+        .wave {
             position: relative;
             overflow: hidden;
         }
+        .wave::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background-repeat: repeat;
+            height: 10px;
+            background-size: 20px 20px;
+            background-image: radial-gradient(circle at 10px -5px, transparent 12px, #3b82f6 13px);
         }
+        .wave::after {
+            content: "";
             position: absolute;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background-repeat: repeat;
+            height: 15px;
+            background-size: 40px 20px;
+            background-image: radial-gradient(circle at 10px 15px, #3b82f6 12px, transparent 13px);
+        }
+        .glass {
+            transition: all 0.5s ease;
+        }
+        .glass:hover {
+            transform: translateY(-5px);
+        }
+        .progress-ring__circle {
+            transition: stroke-dashoffset 0.5s;
+            transform: rotate(-90deg);
+            transform-origin: 50% 50%;
         }
     </style>
 </head>
+<body class="bg-blue-50 min-h-screen">
     <div class="container mx-auto px-4 py-8">
+        <div class="max-w-3xl mx-auto">
+            <!-- Header -->
+            <header class="text-center mb-8">
+                <h1 class="text-4xl font-bold text-blue-800 mb-2">Hydration Tracker</h1>
+                <p class="text-blue-600">Track your daily water intake and stay hydrated</p>
+            </header>
+            <!-- Main Content -->
+            <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
+                <!-- Progress Circle -->
+                <div class="flex flex-col items-center mb-8">
+                    <div class="relative w-48 h-48 mb-4">
+                        <svg class="w-full h-full" viewBox="0 0 100 100">
+                            <!-- Background circle -->
+                            <circle cx="50" cy="50" r="45" fill="none" stroke="#e2e8f0" stroke-width="8"/>
+                            <!-- Progress circle -->
+                            <circle id="progress-circle" cx="50" cy="50" r="45" fill="none" stroke="#3b82f6"
+                                    stroke-width="8" stroke-dasharray="283" stroke-dashoffset="283"/>
+                        </svg>
+                        <div class="absolute inset-0 flex flex-col items-center justify-center">
+                            <span id="progress-percent" class="text-3xl font-bold text-blue-800">0%</span>
+                            <span class="text-blue-600">Daily Goal</span>
+                        </div>
                     </div>
+                    <div id="progress-text" class="text-center">
+                        <p class="text-lg font-semibold text-blue-800">Start drinking water!</p>
+                        <p class="text-blue-600">0 of 8 glasses (2L)</p>
                     </div>
                 </div>
+                <!-- Video Capture -->
+                <div class="mb-8 bg-blue-50 rounded-lg p-6">
+                    <h2 class="text-xl font-semibold text-blue-800 mb-4">Measure Container Automatically</h2>
+                    <div class="flex flex-col items-center">
+                        <video id="video" width="320" height="240" autoplay class="mb-4 rounded-lg bg-gray-200"></video>
+                        <canvas id="canvas" width="320" height="240" class="hidden"></canvas>
+                        <button id="capture-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
+                            <i class="fas fa-camera mr-2"></i>Capture & Measure
+                        </button>
+                        <div id="measure-result" class="mt-4 text-center hidden">
+                            <p class="font-medium text-blue-800">Detected Container:</p>
+                            <p id="detected-container" class="text-lg font-bold text-blue-800">-</p>
+                            <p id="detected-size" class="text-blue-600">- ml</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Water Container Selection -->
+                <div class="mb-8">
+                    <h2 class="text-xl font-semibold text-blue-800 mb-4">Select Your Container</h2>
+                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                        <div class="glass cursor-pointer bg-blue-50 rounded-lg p-4 flex flex-col items-center"
+                             data-size="250" data-name="Small Glass">
+                            <div class="w-16 h-24 bg-blue-100 rounded-b-lg rounded-t-full relative wave mb-2"
+                                 style="height: 40%;"></div>
+                            <span class="text-sm font-medium text-blue-800">Small Glass</span>
+                            <span class="text-xs text-blue-600">250ml</span>
+                        </div>
+                        <div class="glass cursor-pointer bg-blue-50 rounded-lg p-4 flex flex-col items-center"
+                             data-size="350" data-name="Medium Glass">
+                            <div class="w-16 h-24 bg-blue-100 rounded-b-lg rounded-t-full relative wave mb-2"
+                                 style="height: 60%;"></div>
+                            <span class="text-sm font-medium text-blue-800">Medium Glass</span>
+                            <span class="text-xs text-blue-600">350ml</span>
+                        </div>
+                        <div class="glass cursor-pointer bg-blue-50 rounded-lg p-4 flex flex-col items-center"
+                             data-size="500" data-name="Large Glass">
+                            <div class="w-16 h-24 bg-blue-100 rounded-b-lg rounded-t-full relative wave mb-2"
+                                 style="height: 80%;"></div>
+                            <span class="text-sm font-medium text-blue-800">Large Glass</span>
+                            <span class="text-xs text-blue-600">500ml</span>
+                        </div>
+                        <div class="glass cursor-pointer bg-blue-50 rounded-lg p-4 flex flex-col items-center"
+                             data-size="1000" data-name="Bottle">
+                            <div class="w-16 h-24 bg-blue-100 rounded-b-lg rounded-t-full relative wave mb-2"
+                                 style="height: 100%;"></div>
+                            <span class="text-sm font-medium text-blue-800">Bottle</span>
+                            <span class="text-xs text-blue-600">1L</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Add Water Intake -->
+                <div class="mb-8">
+                    <h2 class="text-xl font-semibold text-blue-800 mb-4">Add Water Intake</h2>
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        <div class="flex-1">
+                            <label for="custom-amount" class="block text-sm font-medium text-blue-700 mb-1">Custom Amount (ml)</label>
+                            <input type="number" id="custom-amount"
+                                   class="w-full px-4 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <div class="flex items-end">
+                            <button id="add-water"
+                                    class="w-full sm:w-auto px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition">
+                                Add Water
+                            </button>
+                        </div>
+                    </div>
                 </div>
+                <!-- Today's Intake -->
+                <div>
+                    <h2 class="text-xl font-semibold text-blue-800 mb-4">Today's Intake</h2>
+                    <div id="intake-list" class="space-y-3">
+                        <div class="text-center py-4 text-blue-600" id="empty-state">
+                            No water intake recorded yet. Add your first glass!
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-blue-100">
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium text-blue-800">Total:</span>
+                            <span id="total-intake" class="font-bold text-blue-800">0 ml</span>
+                        </div>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="font-medium text-blue-800">Glasses:</span>
+                            <span id="total-glasses" class="font-bold text-blue-800">0</span>
+                        </div>
+                    </div>
+                </div>
             </div>
+            <!-- Hydration Tips -->
+            <div class="bg-white rounded-xl shadow-lg p-6">
+                <h2 class="text-xl font-semibold text-blue-800 mb-4">Hydration Tips</h2>
+                <div class="space-y-4">
+                    <div class="flex items-start">
+                        <div class="flex-shrink-0 mt-1 mr-3 text-blue-500">
+                            <i class="fas fa-check-circle"></i>
+                        </div>
+                        <p class="text-blue-700">Aim for 8 glasses (2 liters) of water per day as a general guideline.</p>
+                    </div>
+                    <div class="flex items-start">
+                        <div class="flex-shrink-0 mt-1 mr-3 text-blue-500">
+                            <i class="fas fa-check-circle"></i>
+                        </div>
+                        <p class="text-blue-700">Drink more if you're active, in hot weather, or pregnant/breastfeeding.</p>
+                    </div>
+                    <div class="flex items-start">
+                        <div class="flex-shrink-0 mt-1 mr-3 text-blue-500">
+                            <i class="fas fa-check-circle"></i>
+                        </div>
+                        <p class="text-blue-700">Your urine color is a good indicator - aim for pale yellow.</p>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
     <script>
+        document.addEventListener('DOMContentLoaded', async function() {
+            // Video Capture Elements
+            const video = document.getElementById('video');
+            const canvas = document.getElementById('canvas');
+            const captureBtn = document.getElementById('capture-btn');
+            const measureResult = document.getElementById('measure-result');
+            const detectedContainer = document.getElementById('detected-container');
+            const detectedSize = document.getElementById('detected-size');
+            // Load COCO-SSD model
+            let model;
             try {
+                model = await cocoSsd.load();
+                console.log('Model loaded successfully');
+            } catch (err) {
+                console.error('Failed to load model:', err);
             }
+            // Start video stream
+            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                navigator.mediaDevices.getUserMedia({ video: true })
+                    .then(function(stream) {
+                        video.srcObject = stream;
+                    })
+                    .catch(function(err) {
+                        console.error("Error accessing camera:", err);
+                    });
             }
+            // Capture and detect button
+            captureBtn.addEventListener('click', async function() {
+                if (!model) {
+                    alert('Model not loaded yet. Please wait...');
+                    return;
+                }
+                // Draw video frame to canvas
+                const context = canvas.getContext('2d');
+                context.drawImage(video, 0, 0, canvas.width, canvas.height);
+                // Detect objects
+                const predictions = await model.detect(canvas);
+                console.log('Predictions:', predictions);
+                // Find drinking glasses or bottles
+                const container = predictions.find(p =>
+                    ['bottle', 'cup', 'wine glass'].includes(p.class)
+                );
+                if (container) {
+                    // Estimate size based on bounding box dimensions
+                    const area = container.bbox[2] * container.bbox[3];
+                    let size;
+                    if (container.class === 'bottle') {
+                        size = Math.round(area * 0.15); // Bottle size estimation
+                        if (size > 1500) size = 1000;
+                        else if (size > 800) size = 750;
+                        else size = 500;
+                    } else {
+                        size = Math.round(area * 0.3); // Glass size estimation
+                        if (size > 400) size = 500;
+                        else if (size > 300) size = 350;
+                        else size = 250;
+                    }
+                    detectedContainer.textContent = container.class.charAt(0).toUpperCase() + container.class.slice(1);
+                    detectedSize.textContent = `${size} ml`;
+                    measureResult.classList.remove('hidden');
+                    // Auto-fill the custom amount field
+                    customAmount.value = size;
+                } else {
+                    detectedContainer.textContent = 'No container detected';
+                    detectedSize.textContent = '';
+                    measureResult.classList.remove('hidden');
+                }
+            });
+            // Constants
+            const DAILY_GOAL_ML = 2000; // 2 liters
+            const GLASS_SIZE_ML = 250; // Standard glass size
+            // DOM Elements
+            const progressCircle = document.getElementById('progress-circle');
+            const progressPercent = document.getElementById('progress-percent');
+            const progressText = document.getElementById('progress-text');
+            const totalIntake = document.getElementById('total-intake');
+            const totalGlasses = document.getElementById('total-glasses');
+            const intakeList = document.getElementById('intake-list');
+            const emptyState = document.getElementById('empty-state');
+            const addWaterBtn = document.getElementById('add-water');
+            const customAmount = document.getElementById('custom-amount');
+            const glassContainers = document.querySelectorAll('.glass');
+            // State
+            let currentIntake = 0;
+            let glassesCount = 0;
+            // Initialize
+            updateUI();
+            // Event Listeners
+            glassContainers.forEach(glass => {
+                glass.addEventListener('click', function() {
+                    const size = parseInt(this.dataset.size);
+                    const name = this.dataset.name;
+                    addWater(size, name);
+                });
+            });
+            addWaterBtn.addEventListener('click', function() {
+                const amount = parseInt(customAmount.value);
+                if (amount && amount > 0) {
+                    addWater(amount, 'Custom Amount');
+                    customAmount.value = '';
+                }
+            });
+            // Functions
+            function addWater(amount, containerName) {
+                currentIntake += amount;
+                glassesCount = Math.round(currentIntake / GLASS_SIZE_ML);
+                // Add to history
+                if (emptyState) emptyState.style.display = 'none';
+                const now = new Date();
+                const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                const intakeItem = document.createElement('div');
+                intakeItem.className = 'flex justify-between items-center bg-blue-50 p-3 rounded-lg';
+                intakeItem.innerHTML = `
+                    <div class="flex items-center">
+                        <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-tint text-blue-500"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium text-blue-800">${containerName}</p>
+                            <p class="text-xs text-blue-600">${timeString}</p>
+                        </div>
+                    </div>
+                    <span class="font-bold text-blue-800">${amount} ml</span>
+                `;
+                intakeList.prepend(intakeItem);
+                updateUI();
+                // Show feedback based on progress
+                const percent = Math.min(Math.round((currentIntake / DAILY_GOAL_ML) * 100), 100);
+                if (percent >= 100) {
+                    showFeedback("Great job! You've reached your daily goal!", "text-green-600");
+                } else if (percent >= 75) {
+                    showFeedback("Almost there! Keep going!", "text-blue-600");
+                } else if (percent >= 50) {
+                    showFeedback("Halfway there! You're doing well.", "text-blue-600");
+                } else if (percent >= 25) {
+                    showFeedback("Good start! Keep hydrating.", "text-blue-600");
                 }
             }
+            function updateUI() {
+                const percent = Math.min((currentIntake / DAILY_GOAL_ML) * 100, 100);
+                const dashoffset = 283 - (283 * percent / 100);
+                progressCircle.style.strokeDashoffset = dashoffset;
+                progressPercent.textContent = `${Math.round(percent)}%`;
+                totalIntake.textContent = `${currentIntake} ml`;
+                totalGlasses.textContent = glassesCount;
+                // Update progress text
+                if (percent >= 100) {
+                    progressText.innerHTML = `
+                        <p class="text-lg font-semibold text-green-600">Goal Achieved!</p>
+                        <p class="text-green-600">${glassesCount} of 8 glasses (${(currentIntake/1000).toFixed(1)}L of 2L)</p>
+                    `;
+                } else {
+                    progressText.innerHTML = `
+                        <p class="text-lg font-semibold text-blue-800">${glassesCount >= 4 ? 'Good progress!' : 'Keep drinking!'}</p>
+                        <p class="text-blue-600">${glassesCount} of 8 glasses (${(currentIntake/1000).toFixed(1)}L of 2L)</p>
+                    `;
+                }
             }
+            function showFeedback(message, colorClass) {
+                const feedback = document.createElement('div');
+                feedback.className = `fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-white shadow-lg rounded-lg px-6 py-3 flex items-center ${colorClass} animate-bounce`;
+                feedback.innerHTML = `
+                    <i class="fas fa-check-circle mr-2"></i>
+                    <span>${message}</span>
                 `;
+                document.body.appendChild(feedback);
+                setTimeout(() => {
+                    feedback.classList.remove('animate-bounce');
+                    feedback.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+                    setTimeout(() => feedback.remove(), 300);
+                }, 3000);
             }
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=manmohanai/faceimotion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>