Upload 8 files

.gitignore

@@ -0,0 +1,10 @@
+venv/
+__pycache__/
+*.pyc
+.git
+.gitignore
+captured_images/
+temp_audio/
+wellbeing_logs.csv
+*.docx
+*.pdf

Dockerfile

@@ -0,0 +1,34 @@
+FROM python:3.11-slim
+
+# Install system dependencies including FFmpeg
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    libgomp1 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Create user for Hugging Face
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+# Copy requirements and install
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application
+COPY --chown=user . /app
+
+# Create necessary directories
+RUN mkdir -p captured_images temp_audio
+
+# Expose port 7860 (required by Hugging Face)
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"]

README.md

@@ -1,10 +1,18 @@
----
-title: Therapy Companion
-emoji: ⚡
-colorFrom: purple
-colorTo: gray
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Therapy Companion
+emoji: 🧠
+colorFrom: green
+colorTo: purple
+sdk: docker
+pinned: false
+---
+
+# Therapy Companion - AI Wellbeing Application
+
+This is an AI-powered mental health companion that analyzes emotions through facial expressions and voice.
+
+## Features
+- Face emotion detection
+- Voice emotion recognition
+- Stress assessment
+- Personalized coping strategies

app.py

@@ -0,0 +1,213 @@
+import os
+import datetime
+import logging
+import io
+import base64
+import uuid
+
+import cv2
+import pandas as pd
+import numpy as np
+import librosa
+import torch
+from transformers import Wav2Vec2ForSequenceClassification, Wav2Vec2FeatureExtractor
+from deepface import DeepFace
+
+from flask import Flask, request, jsonify, render_template
+
+# --- App & Logger Setup ---
+app = Flask(__name__)
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+
+# --- Constants & Directory Setup ---
+LOG_FILE = "wellbeing_logs.csv"
+CAPTURED_IMAGE_DIR = "captured_images"
+TEMP_AUDIO_DIR = "temp_audio"
+
+os.makedirs(CAPTURED_IMAGE_DIR, exist_ok=True)
+os.makedirs(TEMP_AUDIO_DIR, exist_ok=True)
+
+# --- Caching the Model ---
+voice_model = None
+voice_feature_extractor = None
+
+def load_voice_emotion_model():
+    global voice_model, voice_feature_extractor
+    if voice_model is None:
+        logging.info("Loading voice emotion model for the first time...")
+        model_name = "superb/wav2vec2-base-superb-er"
+        voice_model = Wav2Vec2ForSequenceClassification.from_pretrained(model_name)
+        voice_feature_extractor = Wav2Vec2FeatureExtractor.from_pretrained(model_name)
+        logging.info("Voice emotion model loaded.")
+    return voice_model, voice_feature_extractor
+
+# --- Analysis Functions ---
+def analyze_voice_emotion(audio_file_path):
+    try:
+        model, feature_extractor = load_voice_emotion_model()
+        y, sr = librosa.load(audio_file_path, sr=16000, mono=True)
+        if y.shape[0] == 0:
+            logging.warning(f"Audio file {audio_file_path} was empty.")
+            return "Error: Invalid or empty audio"
+        inputs = feature_extractor(y, sampling_rate=sr, return_tensors="pt", padding=True)
+        with torch.no_grad():
+            logits = model(**inputs).logits
+        predicted_id = torch.argmax(logits, dim=-1).item()
+        return model.config.id2label[predicted_id]
+    except Exception as e:
+        logging.exception(f"Voice emotion analysis failed for file {audio_file_path}: {e}")
+        return "Error: Voice analysis failed"
+
+def analyze_emotion_from_data(image_bytes, detector_backend="retinaface"):
+    try:
+        nparr = np.frombuffer(image_bytes, np.uint8)
+        img_np = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+        if img_np is None:
+            return "Error: Could not decode image"
+        
+        # Use a fallback detector if the selected one fails
+        try:
+            result = DeepFace.analyze(
+                img_path=img_np, actions=['emotion'],
+                detector_backend=detector_backend, enforce_detection=False
+            )
+        except Exception as detector_error:
+            logging.warning(f"Detector '{detector_backend}' failed: {detector_error}. Falling back to 'opencv'.")
+            result = DeepFace.analyze(
+                img_path=img_np, actions=['emotion'],
+                detector_backend='opencv', enforce_detection=False
+            )
+
+        if isinstance(result, list) and len(result) > 0:
+            return result[0].get("dominant_emotion", "No face detected")
+        else:
+            return "No face detected"
+    except Exception as e:
+        logging.exception(f"Face emotion analysis failed with backend {detector_backend}: {e}")
+        return "Error: Face analysis failed"
+
+def assess_stress_enhanced(face_emotion, sleep_hours, activity_level, voice_emotion):
+    activity_map = {"Very Low": 3, "Low": 2, "Moderate": 1, "High": 0}
+    emotion_map = { "angry": 2, "disgust": 2, "fear": 2, "sad": 2, "neutral": 1, "surprise": 1, "happy": 0 }
+    face_emotion_score = emotion_map.get(str(face_emotion).lower(), 1)
+    voice_emotion_score = emotion_map.get(str(voice_emotion).lower(), 1)
+    emotion_score = round((face_emotion_score + voice_emotion_score) / 2) if voice_emotion != "N/A" else face_emotion_score
+    activity_score = activity_map.get(str(activity_level), 1)
+    try:
+        sleep_hours = float(sleep_hours)
+        sleep_score = 0 if sleep_hours >= 7 else (1 if sleep_hours >= 5 else 2)
+    except (ValueError, TypeError):
+        sleep_score, sleep_hours = 2, 0
+    stress_score = emotion_score + activity_score + sleep_score
+    feedback = f"**Your potential stress score is {stress_score} (lower is better).**\n\n**Breakdown:**\n"
+    feedback += f"- Face Emotion: {face_emotion} (score: {face_emotion_score})\n"
+    feedback += f"- Voice Emotion: {voice_emotion} (score: {voice_emotion_score})\n"
+    feedback += f"- Sleep: {sleep_hours} hours (score: {sleep_score})\n"
+    feedback += f"- Activity: {activity_level} (score: {activity_score})\n"
+    if stress_score <= 2:
+        feedback += "\nGreat job! You seem to be in a good space."
+    elif stress_score <= 4:
+        feedback += "\nYou're doing okay, but remember to be mindful of your rest and mood."
+    else:
+        feedback += "\nConsider taking some time for self-care. Improving sleep or gentle activity might help."
+    return feedback, stress_score
+
+# --- Flask Routes ---
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/analyze_face', methods=['POST'])
+def analyze_face_endpoint():
+    data = request.json
+    detector = data.get('detector', 'retinaface')
+    image_data = base64.b64decode(data['image'].split(',')[1])
+    emotion = analyze_emotion_from_data(image_data, detector_backend=detector)
+    image_path = "N/A"
+    if not emotion.startswith("Error:") and not emotion == "No face detected":
+        filename = f"face_{uuid.uuid4()}.jpg"
+        image_path = os.path.join(CAPTURED_IMAGE_DIR, filename)
+        with open(image_path, "wb") as f:
+            f.write(image_data)
+    return jsonify({'emotion': emotion, 'image_path': image_path})
+
+@app.route('/analyze_voice', methods=['POST'])
+def analyze_voice_endpoint():
+    audio_file = request.files.get('audio')
+    if not audio_file:
+        return jsonify({'error': 'No audio file provided'}), 400
+    temp_filename = f"{uuid.uuid4()}.webm"
+    temp_filepath = os.path.join(TEMP_AUDIO_DIR, temp_filename)
+    try:
+        audio_file.save(temp_filepath)
+        emotion = analyze_voice_emotion(temp_filepath)
+    finally:
+        if os.path.exists(temp_filepath):
+            os.remove(temp_filepath)
+    return jsonify({'voice_emotion': emotion})
+
+@app.route('/log_checkin', methods=['POST'])
+def log_checkin_endpoint():
+    data = request.json
+    feedback, stress_score = assess_stress_enhanced(
+        data['emotion'], data['sleep_hours'], data['activity_level'], data['voice_emotion']
+    )
+    # *** FIX: Format timestamp as a consistent string BEFORE saving ***
+    new_log_entry = {
+        "timestamp": datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+        "face_emotion": data['emotion'],
+        "voice_emotion": data.get('voice_emotion', 'N/A'),
+        "sleep_hours": data['sleep_hours'],
+        "activity_level": data['activity_level'],
+        "stress_score": stress_score,
+        "detector_backend": data.get('detector', 'retinaface'),
+        "image_path": data.get('image_path', 'N/A')
+    }
+    try:
+        header = not os.path.exists(LOG_FILE)
+        df_new = pd.DataFrame([new_log_entry])
+        df_new.to_csv(LOG_FILE, mode='a', header=header, index=False)
+        return jsonify({'feedback': feedback, 'stress_score': stress_score, 'status': 'success'})
+    except Exception as e:
+        logging.exception(f"Could not save log: {e}")
+        return jsonify({'error': f'Could not save log: {e}'}), 500
+
+@app.route('/get_logs', methods=['GET'])
+def get_logs_endpoint():
+    if not os.path.exists(LOG_FILE):
+        return jsonify({'data': [], 'columns': []})
+    try:
+        df = pd.read_csv(LOG_FILE)
+        # *** FIX: No need to parse/reformat timestamps. They are already correct strings. ***
+        return jsonify({
+            'data': df.to_dict(orient='records'),
+            'columns': df.columns.tolist()
+        })
+    except pd.errors.EmptyDataError:
+        return jsonify({'data': [], 'columns': []})
+    except Exception as e:
+        logging.exception(f"Could not read logs: {e}")
+        return jsonify({'error': 'Could not read logs'}), 500
+
+@app.route('/clear_logs', methods=['POST'])
+def clear_logs_endpoint():
+    try:
+        if os.path.exists(LOG_FILE):
+            os.remove(LOG_FILE)
+        for directory in [CAPTURED_IMAGE_DIR, TEMP_AUDIO_DIR]:
+            if os.path.exists(directory):
+                for f in os.listdir(directory):
+                    os.remove(os.path.join(directory, f))
+        return jsonify({'status': 'success', 'message': 'All logs and images cleared.'})
+    except Exception as e:
+        logging.exception(f"Error clearing logs: {e}")
+        return jsonify({'status': 'error', 'message': str(e)}), 500
+
+if __name__ == '__main__':
+    load_voice_emotion_model()
+    # Hugging Face requires port 7860
+    port = int(os.environ.get('PORT', 7860))
+    app.run(debug=False, host='0.0.0.0', port=port)

requirements.txt

@@ -0,0 +1,19 @@
+# requirements.txt
+
+Flask
+pandas
+numpy
+opencv-python
+deepface
+librosa
+torch
+transformers
+soundfile
+gunicorn
+tf-keras
+accelerate
+safetensors
+mediapipe
+sentencepiece
+scipy
+requests

static/css/style.css

@@ -0,0 +1,162 @@
+/* static/css/style.css */
+:root {
+    --bg-color: #F4F7F6;
+    --card-bg: #FFFFFF;
+    --primary-color: #3A8DDE;
+    --primary-hover: #2C68A6;
+    --secondary-color: #5FAD56;
+    --danger-color: #D9534F;
+    --danger-hover: #C9302C;
+    --text-primary: #212529;
+    --text-secondary: #6C757D;
+    --border-color: #DEE2E6;
+    --font-heading: 'Poppins', sans-serif;
+    --font-body: 'Noto Sans', sans-serif;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+    font-family: var(--font-body);
+    background-color: var(--bg-color);
+    background-image: url('https://images.unsplash.com/photo-1554034483-04fda0d3507b?q=80&w=2070&auto=format&fit=crop');
+    background-size: cover;
+    background-attachment: fixed;
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+.container { display: flex; min-height: 100vh; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); }
+
+/* --- Sidebar --- */
+.sidebar {
+    width: 380px; flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 30px; border-right: 1px solid var(--border-color);
+    overflow-y: auto;
+}
+.sidebar-header { text-align: center; margin-bottom: 30px; }
+.logo { margin: 0 auto 10px; }
+.sidebar-header h2 { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
+
+.step { padding-bottom: 20px; border-bottom: 1px dashed var(--border-color); margin-bottom: 20px; }
+.step:last-child { border-bottom: none; }
+.step-header h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 1.1em; }
+.step-header span {
+    display: flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px;
+    background-color: var(--primary-color);
+    color: white; border-radius: 50%; font-size: 0.9em;
+}
+
+.video-frame { padding: 5px; border: 1px solid var(--border-color); margin-top: 10px; border-radius: 8px; background: #fff; }
+video { display: block; border-radius: 4px; }
+
+/* --- Buttons & Forms --- */
+button {
+    width: 100%; padding: 12px 15px; font-size: 1em;
+    font-family: var(--font-heading); font-weight: 600;
+    border: none; border-radius: 8px; cursor: pointer;
+    color: white; margin-top: 10px;
+    background-color: var(--text-secondary);
+    transition: all 0.2s ease;
+}
+button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
+button:disabled { background-color: #ccc; cursor: not-allowed; }
+button.primary { background-color: var(--primary-color); }
+button.primary:hover { background-color: var(--primary-hover); }
+button.danger { background-color: var(--danger-color); }
+button.danger:hover { background-color: var(--danger-hover); }
+
+label { font-weight: 700; font-size: 0.9em; display: block; margin-bottom: 5px; }
+select, input[type="range"] {
+    width: 100%; margin-top: 5px;
+    background-color: #F8F9FA; border: 1px solid var(--border-color);
+    color: var(--text-primary); padding: 10px; border-radius: 8px;
+}
+select { margin-bottom: 10px; }
+
+/* --- Voice Visualizer --- */
+#voice-visualizer {
+    display: block;
+    width: 100%;
+    height: 50px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    border: 1px solid var(--border-color);
+}
+
+/* --- Main Content & Cards --- */
+.main-content { flex-grow: 1; padding: 40px; overflow-y: auto; }
+.main-header { margin-bottom: 30px; }
+.main-header h1 { font-family: var(--font-heading); font-weight: 600; }
+.main-header p { color: var(--text-secondary); font-size: 1.1em; max-width: 600px; }
+
+.card {
+    background-color: var(--card-bg);
+    border-radius: 12px; box-shadow: 0 4px 25px rgba(0,0,0,0.08);
+    border: 1px solid var(--border-color); margin-bottom: 30px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+}
+@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
+
+.card-header { padding: 20px 25px; border-bottom: 1px solid var(--border-color); }
+.card-header h2 { font-family: var(--font-heading); margin: 0; font-size: 1.2em; }
+.card-body { padding: 25px; }
+
+/* Tabs, Dashboard, & Logs */
+.tabs { padding: 0 10px; }
+.tab-link { background-color: transparent; border: none; border-bottom: 3px solid transparent; padding: 15px 20px; font-size: 1em; font-weight: 700; color: var(--text-secondary); }
+.tab-link.active, .tab-link:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); }
+.tab-content { display: none; }
+.section-description { color: var(--text-secondary); margin-bottom: 20px; padding: 0 25px; }
+.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 25px; }
+.chart-card { min-height: 300px; }
+
+.table-container { max-height: 400px; overflow-y: auto; }
+#log-table { width: 100%; border-collapse: collapse; }
+#log-table th, #log-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
+#log-table th { font-family: var(--font-heading); background-color: #f8f9fa; }
+#log-table td:last-child { font-weight: 700; }
+#no-logs-message { padding: 40px 20px; text-align: center; color: var(--text-secondary); }
+
+/* Results Area */
+.results-area { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 30px; }
+#current-analysis-card, #feedback-report-display, #recommendations-card {
+    opacity: 0;
+    animation: fadeIn 0.6s ease-out forwards;
+}
+
+#captured-image-display { width: 100%; border-radius: 8px; margin-bottom: 15px; }
+.result-box {
+    margin-top: 10px; padding: 12px; border-radius: 8px;
+    background-color: #F8F9FA; opacity: 0; transform: translateY(10px);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+}
+.result-box.show { opacity: 1; transform: translateY(0); }
+
+.metric { text-align: center; margin-bottom: 15px; }
+.metric-value { font-size: 2.5em; font-weight: 700; color: var(--primary-color); }
+#recommendations-content ul { list-style: none; padding-left: 0; }
+#recommendations-content li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
+#recommendations-content li::before { content: '✓'; color: var(--secondary-color); font-weight: 700; }
+
+.status-message {
+    margin-top: 15px; min-height: 20px;
+    text-align: center; font-weight: 700;
+}
+.status-message.success { color: var(--secondary-color); }
+.status-message.error { color: var(--danger-color); }
+.status-message.info { color: var(--text-secondary); }
+
+footer { text-align: center; margin-top: 20px; font-size: 0.9em; color: var(--text-secondary); }
+footer button { width: auto; padding: 8px 15px; font-size: 0.9em; margin-top: 15px; }
+
+/* --- Responsiveness --- */
+@media (max-width: 1300px) { .dashboard-grid { grid-template-columns: 1fr; } }
+@media (max-width: 1024px) { .container { flex-direction: column; } .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); } }
+@media (max-width: 768px) { .main-content { padding: 20px; } .results-area { grid-template-columns: 1fr; } }

static/js/main.js

@@ -0,0 +1,333 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // --- STATE MANAGEMENT ---
+    let state = {
+        currentFaceEmotion: null,
+        currentVoiceEmotion: null,
+        currentImagePath: null,
+        currentDetector: 'mediapipe',
+        charts: {},
+        audioContext: null,
+        analyser: null,
+        recorder: null,
+        animationFrameId: null,
+    };
+
+    // --- ELEMENT SELECTORS ---
+    const elements = {
+        video: document.getElementById('video-feed'),
+        canvas: document.getElementById('canvas'),
+        captureBtn: document.getElementById('capture-btn'),
+        detectorSelect: document.getElementById('detector-selector'),
+        faceStatus: document.getElementById('face-status'),
+        recordBtn: document.getElementById('record-btn'),
+        stopBtn: document.getElementById('stop-btn'),
+        voiceStatus: document.getElementById('voice-status'),
+        voiceVisualizer: document.getElementById('voice-visualizer'),
+        sleepSlider: document.getElementById('sleep-slider'),
+        sleepValue: document.getElementById('sleep-value'),
+        activitySelect: document.getElementById('activity-selector'),
+        logCheckinBtn: document.getElementById('log-checkin-btn'),
+        clearLogsBtn: document.getElementById('clear-logs-btn'),
+        analysisCard: document.getElementById('current-analysis-card'),
+        capturedImageDisplay: document.getElementById('captured-image-display'),
+        emotionResultDisplay: document.getElementById('emotion-result-display'),
+        voiceEmotionResultDisplay: document.getElementById('voice-emotion-result-display'),
+        feedbackReportDisplay: document.getElementById('feedback-report-display'),
+        stressMetric: document.getElementById('stress-metric'),
+        feedbackText: document.getElementById('feedback-text'),
+        recommendationsCard: document.getElementById('recommendations-card'),
+        recommendationsContent: document.getElementById('recommendations-content'),
+        logTableBody: document.querySelector('#log-table tbody'),
+        noLogsMessage: document.getElementById('no-logs-message'),
+    };
+
+    // --- INITIALIZATION ---
+    setupWebcam();
+    updateDashboard();
+
+    // --- EVENT LISTENERS ---
+    elements.detectorSelect.addEventListener('change', (e) => state.currentDetector = e.target.value);
+    elements.captureBtn.addEventListener('click', handleFaceCapture);
+    elements.recordBtn.addEventListener('click', startRecording);
+    elements.stopBtn.addEventListener('click', stopRecording);
+    elements.sleepSlider.addEventListener('input', () => elements.sleepValue.textContent = elements.sleepSlider.value);
+    elements.logCheckinBtn.addEventListener('click', handleLogCheckin);
+    elements.clearLogsBtn.addEventListener('click', handleClearLogs);
+
+    function setupWebcam() {
+        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+            navigator.mediaDevices.getUserMedia({ video: true })
+                .then(stream => { elements.video.srcObject = stream; })
+                .catch(err => {
+                    console.error("Webcam Error:", err);
+                    updateStatus(elements.faceStatus, "Webcam access denied.", 'error');
+                });
+        }
+    }
+
+    function handleFaceCapture() {
+        updateStatus(elements.faceStatus, 'Analyzing...', 'info');
+        elements.captureBtn.disabled = true;
+        const context = elements.canvas.getContext('2d');
+        elements.canvas.width = elements.video.videoWidth;
+        elements.canvas.height = elements.video.videoHeight;
+        context.drawImage(elements.video, 0, 0, elements.canvas.width, elements.canvas.height);
+        const imageDataUrl = elements.canvas.toDataURL('image/jpeg');
+
+        fetch('/analyze_face', {
+            method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ image: imageDataUrl, detector: state.currentDetector }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) throw new Error(data.error);
+            state.currentFaceEmotion = data.emotion;
+            state.currentImagePath = data.image_path;
+            elements.analysisCard.style.display = 'block';
+            elements.capturedImageDisplay.src = imageDataUrl;
+            elements.capturedImageDisplay.style.display = 'block';
+            updateStatus(elements.faceStatus, `Success!`, 'success');
+            updateResultDisplay(elements.emotionResultDisplay, `Facial Expression: <strong>${data.emotion}</strong>`);
+        })
+        .catch(error => {
+            state.currentFaceEmotion = null; state.currentImagePath = null;
+            updateStatus(elements.faceStatus, `Analysis failed.`, 'error');
+            updateResultDisplay(elements.emotionResultDisplay, `Analysis Failed`, true);
+        })
+        .finally(() => { elements.captureBtn.disabled = false; });
+    }
+
+    // --- VOICE RECORDING & VISUALIZATION ---
+    async function startRecording() {
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+            updateStatus(elements.voiceStatus, 'Audio capture not supported.', 'error');
+            return;
+        }
+        updateStatus(elements.voiceStatus, 'Starting...', 'info');
+        elements.recordBtn.disabled = true;
+        
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        state.recorder = new MediaRecorder(stream);
+        const audioChunks = [];
+
+        // Setup visualization
+        if (!state.audioContext) {
+            state.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        }
+        state.analyser = state.audioContext.createAnalyser();
+        const source = state.audioContext.createMediaStreamSource(stream);
+        source.connect(state.analyser);
+        drawVoiceVisualizer();
+
+        state.recorder.ondataavailable = event => audioChunks.push(event.data);
+        state.recorder.onstop = () => {
+            const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
+            analyzeVoice(audioBlob);
+            stream.getTracks().forEach(track => track.stop()); // Stop mic access
+            cancelAnimationFrame(state.animationFrameId);
+            clearVisualizer();
+        };
+
+        state.recorder.start();
+        updateStatus(elements.voiceStatus, 'Recording...', 'info');
+        elements.stopBtn.disabled = false;
+    }
+
+    function stopRecording() {
+        if (state.recorder && state.recorder.state === 'recording') {
+            state.recorder.stop();
+            elements.stopBtn.disabled = true;
+            elements.recordBtn.disabled = false;
+        }
+    }
+
+    function analyzeVoice(audioBlob) {
+        const formData = new FormData();
+        formData.append('audio', audioBlob, 'recording.webm');
+        updateStatus(elements.voiceStatus, 'Analyzing...', 'info');
+        
+        fetch('/analyze_voice', { method: 'POST', body: formData })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) throw new Error(data.error);
+                state.currentVoiceEmotion = data.voice_emotion;
+                elements.analysisCard.style.display = 'block';
+                updateStatus(elements.voiceStatus, `Success!`, 'success');
+                updateResultDisplay(elements.voiceEmotionResultDisplay, `Vocal Tone: <strong>${data.voice_emotion}</strong>`);
+            })
+            .catch(error => {
+                state.currentVoiceEmotion = null;
+                updateStatus(elements.voiceStatus, `Analysis failed.`, 'error');
+                updateResultDisplay(elements.voiceEmotionResultDisplay, `Analysis Failed`, true);
+            });
+    }
+    
+    function drawVoiceVisualizer() {
+        const canvas = elements.voiceVisualizer;
+        const canvasCtx = canvas.getContext('2d');
+        state.analyser.fftSize = 256;
+        const bufferLength = state.analyser.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+        
+        const draw = () => {
+            state.animationFrameId = requestAnimationFrame(draw);
+            state.analyser.getByteFrequencyData(dataArray);
+            
+            canvasCtx.fillStyle = '#f8f9fa';
+            canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            const barWidth = (canvas.width / bufferLength) * 2.5;
+            let barHeight;
+            let x = 0;
+            
+            for (let i = 0; i < bufferLength; i++) {
+                barHeight = dataArray[i] / 2;
+                canvasCtx.fillStyle = `rgba(58, 141, 222, ${barHeight / 100})`;
+                canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
+                x += barWidth + 1;
+            }
+        };
+        draw();
+    }
+
+    function clearVisualizer() {
+        const canvas = elements.voiceVisualizer;
+        const canvasCtx = canvas.getContext('2d');
+        canvasCtx.fillStyle = '#f8f9fa';
+        canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    
+    // --- LOGGING & DASHBOARD ---
+    function handleLogCheckin() {
+        if (!state.currentFaceEmotion || state.currentFaceEmotion.startsWith("Error")) {
+            alert("Please complete a successful face analysis before logging.");
+            return;
+        }
+        const payload = {
+            emotion: state.currentFaceEmotion, voice_emotion: state.currentVoiceEmotion || "N/A",
+            sleep_hours: parseFloat(elements.sleepSlider.value), activity_level: elements.activitySelect.value,
+            detector: state.currentDetector, image_path: state.currentImagePath || "N/A"
+        };
+        elements.logCheckinBtn.textContent = 'Logging...';
+        elements.logCheckinBtn.disabled = true;
+
+        fetch('/log_checkin', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) throw new Error(data.error);
+                displayFeedback(data.feedback, data.stress_score);
+                displayRecommendations(data.stress_score);
+                updateDashboard();
+            })
+            .catch(error => alert(`Error logging check-in: ${error.message}`))
+            .finally(() => {
+                elements.logCheckinBtn.textContent = 'Complete Check-in & Get Feedback';
+                elements.logCheckinBtn.disabled = false;
+            });
+    }
+
+    function handleClearLogs() {
+        if (confirm("Are you sure you want to permanently delete all log data?")) {
+            fetch('/clear_logs', { method: 'POST' })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.status === 'success') updateDashboard();
+                    else throw new Error(data.message);
+                })
+                .catch(error => alert(`Error clearing logs: ${error.message}`));
+        }
+    }
+
+    function updateDashboard() {
+        fetch('/get_logs')
+            .then(response => response.json())
+            .then(logData => {
+                Object.values(state.charts).forEach(chart => chart.destroy());
+                state.charts = {};
+                
+                if (logData.data && logData.data.length > 0) {
+                    elements.noLogsMessage.style.display = 'none';
+                    populateLogTable(logData.data);
+                    processLogDataForCharts(logData.data);
+                } else {
+                    elements.logTableBody.innerHTML = '';
+                    elements.noLogsMessage.style.display = 'block';
+                }
+            })
+            .catch(error => console.error("Failed to fetch logs:", error));
+    }
+
+    function populateLogTable(data) {
+        elements.logTableBody.innerHTML = '';
+        data.slice().reverse().forEach(log => {
+            const row = document.createElement('tr');
+            row.innerHTML = `<td>${new Date(log.timestamp).toLocaleString()}</td> <td>${log.face_emotion}</td> <td>${log.voice_emotion}</td> <td>${log.sleep_hours}h</td> <td>${log.activity_level}</td> <td>${log.stress_score}</td>`;
+            elements.logTableBody.appendChild(row);
+        });
+    }
+
+    function processLogDataForCharts(data) {
+        const labels = data.map(d => new Date(d.timestamp).toLocaleDateString());
+        renderChart('trends-chart', 'line', {
+            labels,
+            datasets: [
+                { label: 'Stress Score', data: data.map(d => d.stress_score), borderColor: '#D9534F', backgroundColor: 'rgba(217, 83, 79, 0.1)', fill: true, tension: 0.4 },
+                { label: 'Sleep Hours', data: data.map(d => d.sleep_hours), borderColor: '#3A8DDE', backgroundColor: 'rgba(58, 141, 222, 0.1)', fill: true, tension: 0.4 }
+            ]
+        }, 'Well-being Trends');
+        
+        const faceEmotionCounts = countOccurrences(data.map(d => d.face_emotion).filter(e => e && !e.startsWith('Error')));
+        renderChart('emotion-chart', 'doughnut', { labels: Object.keys(faceEmotionCounts), datasets: [{ data: Object.values(faceEmotionCounts) }] }, 'Facial Emotion Spectrum');
+
+        const voiceEmotionCounts = countOccurrences(data.map(d => d.voice_emotion).filter(e => e && !e.startsWith('Error') && e !== 'N/A'));
+        renderChart('voice-emotion-chart', 'doughnut', { labels: Object.keys(voiceEmotionCounts), datasets: [{ data: Object.values(voiceEmotionCounts) }] }, 'Vocal Emotion Spectrum');
+    }
+
+    // --- UTILITY & DISPLAY FUNCTIONS ---
+    function updateStatus(element, message, type) { element.innerHTML = message; element.className = `status-message ${type}`; }
+    function updateResultDisplay(element, message, isError = false) { element.innerHTML = message; element.style.color = isError ? 'var(--danger-color)' : 'var(--text-primary)'; element.classList.add('show'); }
+    function displayFeedback(feedback, score) {
+        elements.feedbackReportDisplay.style.display = 'block';
+        elements.stressMetric.innerHTML = `<div class="metric-label">Potential Stress Score</div><div class="metric-value">${score}</div>`;
+        elements.feedbackText.innerHTML = feedback.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>');
+    }
+    function displayRecommendations(score) {
+        let content = '<ul>';
+        if (score <= 2) { content += '<li>You seem to be in a great place! Keep up your healthy routines.</li><li>Consider sharing your positivity with someone today.</li>'; }
+        else if (score <= 4) { content += '<li>You\'re managing well. A short walk or 5 minutes of quiet time could be beneficial.</li><li>Ensure you are staying hydrated throughout the day.</li>'; }
+        else { content += '<li>Your stress score is elevated. Prioritize getting a full night\'s sleep.</li><li>Consider a calming activity like listening to music or a guided meditation.</li><li>Reaching out to a friend, family member, or professional can be very helpful.</li>'; }
+        content += '</ul>';
+        elements.recommendationsContent.innerHTML = content;
+        elements.recommendationsCard.style.display = 'block';
+    }
+    function renderChart(canvasId, type, chartData, title) {
+        const ctx = document.getElementById(canvasId).getContext('2d');
+        const chartColors = ['#3A8DDE', '#5FAD56', '#F0AD4E', '#D9534F', '#5BC0DE', '#8E7CC3', '#E56B6F'];
+        let options = { responsive: true, maintainAspectRatio: false,
+            plugins: {
+                title: { display: true, text: title, font: { size: 16, family: "'Poppins', sans-serif" }, padding: { top: 10, bottom: 20 } },
+                legend: { position: 'bottom', labels: { padding: 20, usePointStyle: true } },
+                tooltip: { backgroundColor: 'rgba(0, 0, 0, 0.7)', padding: 10, cornerRadius: 4 }
+            }
+        };
+        
+        if (type === 'line') {
+            options.scales = { y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } }, x: { grid: { display: false } } };
+            options.plugins.legend.labels.usePointStyle = true;
+        } else if (type === 'doughnut') {
+            chartData.datasets[0].backgroundColor = chartColors;
+            chartData.datasets[0].borderColor = 'var(--card-bg)';
+            options.cutout = '60%';
+        }
+        
+        state.charts[canvasId] = new Chart(ctx, { type, data: chartData, options });
+    }
+    function countOccurrences(arr) { return arr.reduce((acc, curr) => (acc[curr] = (acc[curr] || 0) + 1, acc), {}); }
+});
+
+function openTab(evt, tabName) {
+    document.querySelectorAll(".tab-content").forEach(tc => tc.style.display = "none");
+    document.querySelectorAll(".tab-link").forEach(tl => tl.classList.remove("active"));
+    document.getElementById(tabName).style.display = "block";
+    evt.currentTarget.classList.add("active");
+}

templates/index.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mindful Companion</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <div class="container">
+        <aside class="sidebar">
+            <header class="sidebar-header">
+                <div class="logo">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM16.68 15.26C16.42 15.74 15.86 16 15.32 16H8.68C8.14 16 7.58 15.74 7.32 15.26C7.06 14.78 7.14 14.18 7.5 13.76L10.5 10.16V8C10.5 7.17 11.17 6.5 12 6.5C12.83 6.5 13.5 7.17 13.5 8V10.16L16.5 13.76C16.86 14.18 16.94 14.78 16.68 15.26Z" fill="#5FAD56"/></svg>
+                </div>
+                <h2>Your Daily Check-in</h2>
+            </header>
+            
+            <div class="stepper">
+                <div class="step">
+                    <div class="step-header"><h3><span>1</span> Facial Expression</h3></div>
+                    <div class="step-content">
+                        <label for="detector-selector">Analysis Model</label>
+                        <select id="detector-selector">
+                            <option value="retinaface">RetinaFace (High Accuracy)</option>
+                            <option value="mtcnn">MTCNN (Good Balance)</option>
+                            <option value="opencv">OpenCV (Fastest, Basic)</option>
+                            <option value="ssd">SSD (Lightweight)</option>
+                            <option value="dlib">Dlib (CPU-Friendly)</option>
+                            <option value="mediapipe" selected>MediaPipe (Real-time)</option>
+                            <option value="yolov8">YOLOv8 (Modern, Accurate)</option>
+                            <option value="yunet">YuNet (New, Accurate)</option>
+                        </select>
+                        <div class="video-frame"><video id="video-feed" width="100%" autoplay playsinline></video></div>
+                        <canvas id="canvas" style="display:none;"></canvas>
+                        <button id="capture-btn">Analyze Face</button>
+                        <div id="face-status" class="status-message"></div>
+                    </div>
+                </div>
+
+                <div class="step">
+                    <div class="step-header"><h3><span>2</span> Vocal Tone</h3></div>
+                    <div class="step-content">
+                        <!-- NEW: Canvas for voice visualization -->
+                        <canvas id="voice-visualizer" width="300" height="50"></canvas>
+                        <div class="button-group">
+                            <button id="record-btn">Record Voice</button>
+                            <button id="stop-btn" disabled>Stop</button>
+                        </div>
+                        <div id="voice-status" class="status-message"></div>
+                    </div>
+                </div>
+
+                <div class="step">
+                    <div class="step-header"><h3><span>3</span> Lifestyle Factors</h3></div>
+                    <div class="step-content">
+                        <label for="sleep-slider">Hours of Sleep: <span id="sleep-value">7.5</span></label>
+                        <input type="range" id="sleep-slider" min="0" max="12" value="7.5" step="0.5">
+                        <label for="activity-selector">Activity Level</label>
+                        <select id="activity-selector">
+                            <option>Very Low</option><option>Low</option>
+                            <option selected>Moderate</option><option>High</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <div class="step">
+                    <button id="log-checkin-btn" class="primary">Complete Check-in & Get Feedback</button>
+                </div>
+            </div>
+        </aside>
+
+        <main class="main-content">
+            <header class="main-header">
+                <h1>Mindful Companion</h1>
+                <p>A private dashboard for your emotional well-being journey.</p>
+            </header>
+            
+            <div class="results-area">
+                <div id="current-analysis-card" class="card" style="display:none;">
+                    <div class="card-header"><h2>Today's Analysis</h2></div>
+                    <div class="card-body" id="current-checkin-display">
+                        <img id="captured-image-display" src="#" alt="Your captured image" style="display:none;">
+                        <div id="emotion-result-display" class="result-box"></div>
+                        <div id="voice-emotion-result-display" class="result-box"></div>
+                    </div>
+                </div>
+                <div id="feedback-report-display" class="card" style="display: none;">
+                    <div class="card-header"><h2>Your Feedback Report</h2></div>
+                    <div class="card-body">
+                        <div id="stress-metric" class="metric"></div>
+                        <div id="feedback-text" class="feedback-text"></div>
+                    </div>
+                </div>
+                <div id="recommendations-card" class="card" style="display: none;">
+                    <div class="card-header"><h2>💡 Recommended Actions</h2></div>
+                    <div id="recommendations-content" class="card-body"></div>
+                </div>
+            </div>
+
+            <div class="card">
+                 <div class="tabs">
+                    <button class="tab-link active" onclick="openTab(event, 'Dashboard')">Dashboard</button>
+                    <button class="tab-link" onclick="openTab(event, 'LogHistory')">Log History</button>
+                </div>
+
+                <div id="Dashboard" class="tab-content" style="display: block;">
+                    <p class="section-description">Visualize your journey over time. Each data point represents a completed check-in.</p>
+                    <div class="dashboard-grid">
+                        <div class="chart-card"><canvas id="trends-chart"></canvas></div>
+                        <div class="chart-card"><canvas id="emotion-chart"></canvas></div>
+                        <div class="chart-card"><canvas id="voice-emotion-chart"></canvas></div>
+                    </div>
+                </div>
+
+                <div id="LogHistory" class="tab-content">
+                    <p class="section-description">A complete record of all your past check-ins.</p>
+                    <div class="table-container">
+                        <table id="log-table">
+                            <thead><tr>
+                                <th>Timestamp</th><th>Face Emotion</th><th>Voice Emotion</th>
+                                <th>Sleep</th><th>Activity</th><th>Stress Score</th>
+                            </tr></thead>
+                            <tbody></tbody>
+                        </table>
+                        <p id="no-logs-message" style="display:none;">No logs found. Complete a check-in to get started!</p>
+                    </div>
+                </div>
+            </div>
+
+            <footer>
+                <p><em>Disclaimer: This tool is for informational purposes and is not a substitute for professional advice.</em></p>
+                <button id="clear-logs-btn" class="danger">Clear All Log Data</button>
+            </footer>
+        </main>
+    </div>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html>