deploy: Vision AI Engine - Face Recognition App

.gitattributes

@@ -0,0 +1,38 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,8 @@
+app/static/uploads/*
+!app/static/uploads/.gitkeep
+**/__pycache__/
+*.pyc
+*.pyo
+.env
+.deepface/
+*.log

Dockerfile

@@ -0,0 +1,40 @@
+# VISION.AI - Hugging Face Spaces Optimized
+FROM python:3.10-slim
+
+# System dependencies for OpenCV & TensorFlow
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    git \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    libatlas-base-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Create model cache directory
+RUN mkdir -p /tmp/deepface_weights
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Pre-download AI models during build
+RUN python -c "from deepface import DeepFace; DeepFace.build_model('Age'); DeepFace.build_model('Gender'); DeepFace.build_model('Emotion'); DeepFace.build_model('Race')" 2>&1 | grep -v "^$" || true
+
+# Expose port 7860 (Hugging Face Spaces standard)
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+    CMD python -c "import urllib.request; urllib.request.urlopen('http://localhost:7860/').read()" || exit 1
+
+# Start app on port 7860
+CMD ["gunicorn", "-w", "2", "-b", "0.0.0.0:7860", "--timeout", "120", "--access-logfile", "-", "--error-logfile", "-", "run:app"]

README.md

@@ -0,0 +1,10 @@
+---
+title: Vision Ai Engine
+emoji: 💻
+colorFrom: purple
+colorTo: red
+sdk: docker
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app/__init__.py

@@ -0,0 +1,44 @@
+from flask import Flask, render_template, request, jsonify
+from flask_cors import CORS
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+def create_app(test_config=None):
+    # create and configure the app
+    app = Flask(__name__, instance_relative_config=True)
+    app.config.from_mapping(
+        SECRET_KEY='dev',
+        UPLOAD_FOLDER=os.path.join(app.root_path, 'static', 'uploads'),
+        ALLOWED_EXTENSIONS={'png', 'jpg', 'jpeg'},
+        MAX_CONTENT_LENGTH=16 * 1024 * 1024, # 16MB max
+    )
+
+    if test_config is None:
+        # load the instance config, if it exists, when not testing
+        app.config.from_pyfile('config.py', silent=True)
+    else:
+        # load the test config if passed in
+        app.config.from_mapping(test_config)
+
+    # ensure the upload folder exists
+    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+    CORS(app)
+
+    # Register Blueprints
+    from .routes import main_routes, analysis_routes, recognition_routes
+    app.register_blueprint(main_routes.bp)
+    app.register_blueprint(analysis_routes.bp)
+    app.register_blueprint(recognition_routes.bp)
+
+    @app.errorhandler(404)
+    def page_not_found(e):
+        return render_template('404.html'), 404
+
+    @app.errorhandler(500)
+    def internal_server_error(e):
+        return render_template('500.html'), 500
+
+    return app

app/routes/analysis_routes.py

@@ -0,0 +1,130 @@
+from flask import Blueprint, render_template, request, flash, current_app, jsonify, redirect, url_for
+import os
+import uuid
+import base64
+from io import BytesIO
+from PIL import Image
+from werkzeug.utils import secure_filename
+from ..utils.ml_engine import FaceAnalyzer
+
+bp = Blueprint('analysis', __name__, url_prefix='/analysis')
+analyzer = FaceAnalyzer()
+
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg'}
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+@bp.route('/')
+def index():
+    """Upload and analyze face for emotions, age, gender."""
+    return render_template('analysis.html')
+
+@bp.route('/upload', methods=['POST'])
+def upload_and_analyze():
+    """Handle image upload and run DeepFace analysis."""
+    if 'file' not in request.files:
+        flash('No file part')
+        return redirect(request.url)
+    
+    file = request.files['file']
+    
+    if file.filename == '':
+        flash('No selected file')
+        return redirect(request.url)
+    
+    if file and allowed_file(file.filename):
+        # Save file with unique name
+        extension = file.filename.rsplit('.', 1)[1].lower()
+        unique_filename = f"{uuid.uuid4()}.{extension}"
+        filepath = os.path.join(current_app.config['UPLOAD_FOLDER'], unique_filename)
+        file.save(filepath)
+        
+        # Run analysis
+        result = analyzer.analyze(filepath)
+        
+        # Handle engine errors (e.g., model loading issues)
+        if 'error' in result:
+             flash(f"Analysis Engine Error: {result['error']}")
+             return redirect(url_for('analysis.index'))
+        
+        # Handle cases where no faces were detected
+        if not result.get('faces') or result.get('count', 0) == 0:
+            flash("No faces detected in the provided image.")
+            return redirect(url_for('analysis.index'))
+        
+        return render_template('analysis_result.html', result=result, image=unique_filename)
+
+@bp.route('/live')
+def live_view():
+    """Render the live webcam analysis view."""
+    return render_template('live.html')
+
+@bp.route('/live_frame', methods=['POST'])
+def live_frame():
+    """Handle base64 frame from webcam and return analysis."""
+    try:
+        data = request.json
+        if not data or 'image' not in data:
+            return jsonify({"error": "No image data"}), 400
+        
+        # Robust base64 extraction
+        image_b64 = data['image']
+        if "," in image_b64:
+            image_b64 = image_b64.split(",")[1]
+            
+        image_data = base64.b64decode(image_b64)
+        
+        # Save temp frame (with enhancement)
+        temp_filename = f"live_{uuid.uuid4()}.jpg"
+        temp_path = os.path.join(current_app.config['UPLOAD_FOLDER'], temp_filename)
+        
+        # Load and Enhance for AI precision
+        img = Image.open(BytesIO(image_data))
+        from PIL import ImageEnhance
+        enhancer = ImageEnhance.Sharpness(img)
+        img = enhancer.enhance(2.2) # High intensity sharpening for glasses
+        contrast = ImageEnhance.Contrast(img)
+        img = contrast.enhance(1.4)
+        img = img.convert("RGB")
+        img.save(temp_path, "JPEG", quality=95)
+        
+        # Set accuracy backend
+        accuracy = data.get('accuracy', 'standard')
+        if accuracy == 'high':
+            # Temporary hi-res analyzer for this specific frame
+            hi_res_analyzer = FaceAnalyzer(detector_backend='retinaface')
+            result = hi_res_analyzer.analyze(temp_path)
+        else:
+            # Use global high-speed analyzer
+            result = analyzer.analyze(temp_path)
+        
+        # Cleanup
+        if os.path.exists(temp_path):
+            os.remove(temp_path)
+            
+        return jsonify({"results": result})
+        
+    except Exception as e:
+        current_app.logger.error(f"Live Frame Error: {str(e)}")
+        return jsonify({"error": str(e)}), 500
+    
+    return render_template('analysis.html', error="Invalid file type.")
+
+@bp.route('/api/analyze', methods=['POST'])
+def api_analyze():
+    """API endpoint for asynchronous analysis (webcam or direct upload)."""
+    if 'file' not in request.files:
+        return jsonify({"error": "No file uploaded"}), 400
+    
+    file = request.files['file']
+    if file and allowed_file(file.filename):
+        extension = file.filename.rsplit('.', 1)[1].lower()
+        unique_filename = f"{uuid.uuid4()}.{extension}"
+        filepath = os.path.join(current_app.config['UPLOAD_FOLDER'], unique_filename)
+        file.save(filepath)
+        
+        result = analyzer.analyze(filepath)
+        return jsonify(result)
+    
+    return jsonify({"error": "Invalid format"}), 400

app/routes/main_routes.py

@@ -0,0 +1,31 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+import os
+
+bp = Blueprint('main', __name__)
+
+@bp.route('/')
+def index():
+    """Redirect to dashboard or render home."""
+    return render_template('dashboard.html')
+
+@bp.route('/dashboard')
+def dashboard():
+    """Main dashboard with use case selection."""
+    return render_template('dashboard.html')
+
+@bp.route('/base')
+def legacy_base():
+    return redirect(url_for('main.dashboard'))
+
+@bp.route('/faceapp')
+def legacy_faceapp():
+    return redirect(url_for('analysis.index'))
+
+@bp.route('/faceapp/gender', methods=['GET', 'POST'])
+def legacy_gender():
+    return redirect(url_for('analysis.index'))
+
+@bp.route('/about')
+def about():
+    """Project description and CV highlights."""
+    return render_template('about.html')

app/routes/recognition_routes.py

@@ -0,0 +1,59 @@
+from flask import Blueprint, render_template, request, flash, current_app, jsonify, redirect, url_for
+import os
+import uuid
+from werkzeug.utils import secure_filename
+from ..utils.ml_engine import FaceAnalyzer
+
+bp = Blueprint('recognition', __name__, url_prefix='/recognition')
+analyzer = FaceAnalyzer()
+
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg'}
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+@bp.route('/verify', methods=['GET', 'POST'])
+def verify_face():
+    """Compare two images to see if they are the same person."""
+    if request.method == 'POST':
+        if 'img1' not in request.files or 'img2' not in request.files:
+            flash('Two images are required.')
+            return redirect(request.url)
+        
+        img1 = request.files['img1']
+        img2 = request.files['img2']
+        
+        if img1 and allowed_file(img1.filename) and img2 and allowed_file(img2.filename):
+            # Save files with unique names
+            u1 = f"v1_{uuid.uuid4()}.{img1.filename.rsplit('.', 1)[1].lower()}"
+            u2 = f"v2_{uuid.uuid4()}.{img2.filename.rsplit('.', 1)[1].lower()}"
+            
+            p1 = os.path.join(current_app.config['UPLOAD_FOLDER'], u1)
+            p2 = os.path.join(current_app.config['UPLOAD_FOLDER'], u2)
+            
+            img1.save(p1)
+            img2.save(p2)
+            
+            # Run DeepFace verify
+            # 'VGG-Face' is a good default, also 'Facenet'
+            model_name = request.form.get('model', 'VGG-Face')
+            result = analyzer.verify(p1, p2, model_name=model_name)
+            
+            if 'error' in result:
+                # If error occurs (like weights missing), show error on the verification page
+                flash(f"Verification Engine Error: {result['error']}")
+                return redirect(request.url)
+            
+            return render_template('verification_result.html', result=result, img1=u1, img2=u2)
+        
+        flash('Invalid image format.')
+        return redirect(request.url)
+
+    return render_template('verification.html')
+
+@bp.route('/identify', methods=['GET', 'POST'])
+def identify_face():
+    """Find a face in a database of known faces."""
+    # (Optional: If the user provides a DB directory, identify the person.)
+    # For CV, we could pre-load a small DB of people.
+    return render_template('identify.html')

app/templates/404.html

@@ -0,0 +1,12 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div style="height: 70vh; display: flex; flex-direction: column; align-items:center; justify-content:center; text-align:center;">
+    <h1 style="font-size: 8rem; font-family: 'Outfit'; color: var(--accent); opacity: 0.2;">404</h1>
+    <h2 style="margin-bottom: 1.5rem;">RESOURCE NOT FOUND</h2>
+    <p style="color: var(--text-secondary); margin-bottom: 2rem;">The analysis path or subject record you are looking for does not exist in our neural cache.</p>
+    <a href="{{ url_for('main.dashboard') }}" class="btn">
+        <i class="fa-solid fa-home"></i> Back to Dashboard
+    </a>
+</div>
+{% endblock %}

app/templates/500.html

@@ -0,0 +1,13 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div style="height: 70vh; display: flex; flex-direction: column; align-items:center; justify-content:center; text-align:center;">
+    <h1 style="font-size: 8rem; font-family: 'Outfit'; color: var(--error); opacity: 0.2;">500</h1>
+    <h2 style="margin-bottom: 1.5rem; color: var(--error);">MODEL COLLISION DETECTED</h2>
+    <p style="color: var(--text-secondary); margin-bottom: 1rem;">An internal inference error occurred or the server ran out of memory (OOM).</p>
+    <p style="font-size: 0.8rem; color: var(--text-secondary); font-family: monospace; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px; margin-bottom: 2rem;">[Trace: FaceDetector Initialization Failure or Image Encoding Error]</p>
+    <a href="{{ url_for('main.dashboard') }}" class="btn" style="background: var(--error); border: none;">
+        <i class="fa-solid fa-redo"></i> Restart Application Session
+    </a>
+</div>
+{% endblock %}

app/templates/about.html

@@ -0,0 +1,55 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="header">
+    <h1 class="animate-up">About the Vision Engine</h1>
+    <p class="animate-up">An advanced biometric analysis suite built for modern security and social intelligence.</p>
+</div>
+
+<div class="card animate-up" style="line-height: 1.8; font-size: 1.1rem; border-left: 5px solid var(--accent);">
+    <h2 style="font-family: 'Outfit'; margin-bottom: 2rem;">Research & Methodology</h2>
+    <p style="margin-bottom: 1.5rem;">
+        This project implements a multi-model pipeline for facial biometric extraction. Unlike traditional Euclidean geometry-based approaches, it leverages **Deep Convolutional Neural Networks (CNNs)** to extract high-dimensional embedding vectors. 
+    </p>
+    
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin: 3rem 0;">
+        <div class="card" style="background: rgba(255,255,255,0.02);">
+            <h4 style="color: var(--accent); margin-bottom: 1rem;">Recognition Backbone</h4>
+            <p style="font-size: 0.9rem; color: var(--text-secondary);">
+                Utilizes **VGG-Face** and **FaceNet** (developed by Google researchers). These models map face images to a compact Euclidean space where distances directly correspond to a measure of face similarity.
+            </p>
+        </div>
+        <div class="card" style="background: rgba(255,255,255,0.02);">
+            <h4 style="color: var(--accent); margin-bottom: 1rem;">Detection Strategy</h4>
+            <p style="font-size: 0.9rem; color: var(--text-secondary);">
+                Supports **RetinaFace**, a state-of-the-art pixel-wise face localization method that outperforms traditional MTCNN through a joint multi-task loss approach.
+            </p>
+        </div>
+    </div>
+
+    <h3 style="font-family: 'Outfit'; margin-bottom: 1rem;">Technical Specifications</h3>
+    <ul style="list-style: none; padding-left: 0;">
+        <li style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
+            <i class="fa-solid fa-check-circle" style="color: var(--success);"></i>
+            <span><strong>Framework:</strong> Flask with Blueprint Factory Pattern</span>
+        </li>
+        <li style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
+            <i class="fa-solid fa-check-circle" style="color: var(--success);"></i>
+            <span><strong>DL Engine:</strong> TensorFlow / Keras (oneDNN Optimized)</span>
+        </li>
+        <li style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
+            <i class="fa-solid fa-check-circle" style="color: var(--success);"></i>
+            <span><strong>Pre-processing:</strong> OpenCV / Pillow (Bilinear Interpolation)</span>
+        </li>
+        <li style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
+            <i class="fa-solid fa-check-circle" style="color: var(--success);"></i>
+            <span><strong>UI Styling:</strong> Glassmorphism (Vanilla CSS 3.0)</span>
+        </li>
+    </ul>
+
+    <div style="margin-top: 3rem; border-top: 1px solid var(--glass-border); padding-top: 2rem; display: flex; align-items: center; justify-content: space-between;">
+        <p style="color: var(--text-secondary); font-size: 0.9rem;">Revision: 2.0.4 | Engine: RetinaFace stable</p>
+        <a href="{{ url_for('main.dashboard') }}" class="btn">Return to Dashboard</a>
+    </div>
+</div>
+{% endblock %}

app/templates/analysis.html

@@ -0,0 +1,84 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="header">
+    <h1 class="animate-up">Facial Analysis</h1>
+    <p class="animate-up">Upload an image to identify demographics and emotional state.</p>
+</div>
+
+<div class="card animate-up" id="dropzone" style="max-width: 600px; margin: 0 auto; text-align: center; border: 2px dashed rgba(37, 99, 235, 0.3); border-radius: 30px; transition: all 0.3s ease; padding: 3rem;">
+    {% if error %}
+        <div id="error-msg" style="background: rgba(239, 68, 68, 0.1); color: var(--error); padding: 1rem; border-radius: 12px; margin-bottom: 2rem; border: 1px solid rgba(239, 68, 68, 0.2);">
+            <i class="fa-solid fa-circle-exclamation"></i> {{ error }}
+        </div>
+    {% endif %}
+
+    <div id="upload-content">
+        <i class="fa-solid fa-dna" style="font-size: 4rem; color: var(--accent); margin-bottom: 1.5rem; animation: pulse 2s infinite;"></i>
+        <h2 style="font-family: 'Outfit'; margin-bottom: 1rem;">Neural Selection Zone</h2>
+        <p style="color: var(--text-secondary); margin-bottom: 2.5rem; font-size: 0.95rem;">Please select a clear portrait image for biometric extraction.</p>
+        
+        <form id="uploadForm" action="{{ url_for('analysis.upload_and_analyze') }}" method="post" enctype="multipart/form-data">
+            <input type="file" name="file" id="fileInput" hidden accept=".jpg,.jpeg,.png">
+            <button type="button" class="btn" onclick="document.getElementById('fileInput').click()" style="padding: 1rem 3rem; font-size: 1rem; font-weight: 700; gap: 12px;">
+                <i class="fa-solid fa-camera"></i> SELECT SUBJECT
+            </button>
+        </form>
+        
+        <p style="margin-top: 2rem; font-size: 0.8rem; color: rgba(255,255,255,0.3); letter-spacing: 1px;">SUPPORTED: JPG / PNG (MAX 16MB)</p>
+    </div>
+
+    <div id="loading-content" style="display: none;">
+        <i class="fa-solid fa-microchip fa-spin" style="font-size: 4rem; color: var(--accent); margin-bottom: 2rem;"></i>
+        <h2 style="font-family: 'Outfit'; color: var(--accent);">EXTRACTING BIOMETRICS...</h2>
+        <p style="color: var(--text-secondary);">Initializing RetinaFace detector. This may take 2-5 seconds.</p>
+    </div>
+</div>
+
+<script>
+    const fileInput = document.getElementById('fileInput');
+    const uploadForm = document.getElementById('uploadForm');
+    const uploadContent = document.getElementById('upload-content');
+    const loadingContent = document.getElementById('loading-content');
+    const dropzone = document.getElementById('dropzone');
+
+    fileInput.onchange = (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        // VALIDATION
+        const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
+        if (!allowedTypes.includes(file.type)) {
+            alert("⚠️ UNSUPPORTED FORMAT: Please select a JPG or PNG image.");
+            fileInput.value = '';
+            return;
+        }
+
+        // UI TRANSITION
+        uploadContent.style.display = 'none';
+        loadingContent.style.display = 'block';
+        dropzone.style.borderStyle = 'solid';
+        dropzone.style.borderColor = 'var(--accent)';
+        
+        uploadForm.submit();
+    };
+</script>
+
+<div class="card animate-up" style="margin-top: 3rem;">
+    <h3 style="margin-bottom: 1.5rem; font-family: 'Outfit';">Engine Details</h3>
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
+        <div style="background: rgba(37, 99, 235, 0.05); padding: 1rem; border-radius: 12px; border-left: 4px solid var(--accent);">
+            <p style="font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 5px;">Detector</p>
+            <p style="font-weight: 600;">RetinaFace (SOTA)</p>
+        </div>
+        <div style="background: rgba(16, 185, 129, 0.05); padding: 1rem; border-radius: 12px; border-left: 4px solid var(--success);">
+            <p style="font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 5px;">Backends</p>
+            <p style="font-weight: 600;">TensorFlow + Keras</p>
+        </div>
+        <div style="background: rgba(99, 102, 241, 0.05); padding: 1rem; border-radius: 12px; border-left: 4px solid #6366f1;">
+            <p style="font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 5px;">Metrics</p>
+            <p style="font-weight: 600;">Confidence-Weighted</p>
+        </div>
+    </div>
+</div>
+{% endblock %}

app/templates/analysis_result.html

@@ -0,0 +1,116 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="header">
+    <h1 class="animate-up">Analysis Results</h1>
+    <p class="animate-up" style="font-weight: 500;">Processed in <span style="color: var(--accent); font-weight: 700;">{{ "%.2f"|format(result.process_time) }}s</span> • <span style="color: var(--success);">✓ {{ result.count }} face(s) detected</span></p>
+</div>
+
+<div class="grid-container" style="display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem;">
+    <!-- Image Preview Panel -->
+    <div class="card animate-up" style="padding: 1rem; overflow: hidden; border-radius: 20px; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 2rem;">
+        <div style="position: relative; border-radius: 15px; overflow: hidden; border: 1px solid var(--glass-border);">
+            <img src="{{ url_for('static', filename='uploads/' + image) }}" style="width: 100%; display: block; border-radius: 15px;">
+            <div style="position: absolute; top: 10px; right: 10px; background: rgba(16, 185, 129, 0.9); color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700;">{{ result.count }} Face(s)</div>
+        </div>
+        <a href="{{ url_for('analysis.index') }}" class="btn" style="justify-content: center; width: 100%; padding: 1rem; font-weight: 700; letter-spacing: 0.5px;">
+            <i class="fa-solid fa-arrows-rotate"></i> NEW ANALYSIS
+        </a>
+    </div>
+
+    <!-- Results Panel -->
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+        {% for face in result.faces %}
+            <div class="card animate-up" style="border-left: 4px solid var(--accent); overflow: hidden;">
+                <!-- Header -->
+                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--glass-border);">
+                    <h2 style="font-family: 'Outfit'; font-size: 1.3rem; margin: 0;">Subject #{{ loop.index }}</h2>
+                    <div style="display: flex; gap: 10px;">
+                        <span style="font-size: 0.85rem; color: white; background: rgba(16, 185, 129, 0.15); padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(16, 185, 129, 0.3); font-weight: 600;">
+                            <i class="fa-solid fa-face-smile" style="color: var(--success); margin-right: 5px;"></i>
+                            {{ "%.1f"|format(face.face_confidence * 100) }}% Match
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Demographics Stats Grid -->
+                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 2.5rem;">
+                    <!-- Gender -->
+                    <div style="padding: 1.5rem; background: rgba(37, 99, 235, 0.08); border-radius: 12px; border: 1px solid rgba(37, 99, 235, 0.2);">
+                        <p style="text-transform: uppercase; font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 8px; font-weight: 700; letter-spacing: 0.5px;">Gender Identification</p>
+                        <h3 style="font-size: 1.8rem; color: var(--accent); font-weight: 800; margin-bottom: 8px;">{{ face.dominant_gender }}</h3>
+                        <div style="display: flex; align-items: center; gap: 8px;">
+                            <div style="flex: 1; height: 4px; background: rgba(37, 99, 235, 0.2); border-radius: 2px; overflow: hidden;">
+                                <div style="width: {{ face.gender[face.dominant_gender] }}%; height: 100%; background: linear-gradient(90deg, var(--accent), #60a5fa); transition: width 0.6s ease;"></div>
+                            </div>
+                            <span style="color: var(--text-secondary); font-size: 0.8rem; min-width: 35px; text-align: right;">{{ "%.0f"|format(face.gender[face.dominant_gender]) }}%</span>
+                        </div>
+                    </div>
+
+                    <!-- Age -->
+                    <div style="padding: 1.5rem; background: rgba(59, 130, 246, 0.08); border-radius: 12px; border: 1px solid rgba(59, 130, 246, 0.2);">
+                        <p style="text-transform: uppercase; font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 8px; font-weight: 700; letter-spacing: 0.5px;">Predicted Age</p>
+                        <h3 style="font-size: 1.8rem; color: #60a5fa; font-weight: 800; margin-bottom: 8px;">{{ face.age }} years</h3>
+                        <p style="color: var(--text-secondary); font-size: 0.85rem;">Age range estimation ± 2 years</p>
+                    </div>
+
+                    <!-- Emotion -->
+                    <div style="padding: 1.5rem; background: rgba(249, 115, 22, 0.08); border-radius: 12px; border: 1px solid rgba(249, 115, 22, 0.2);">
+                        <p style="text-transform: uppercase; font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 8px; font-weight: 700; letter-spacing: 0.5px;">Emotional State</p>
+                        <h3 style="font-size: 1.6rem; color: #f97316; font-weight: 800; margin-bottom: 8px;">{{ face.dominant_emotion | capitalize }}</h3>
+                        <p style="color: var(--text-secondary); font-size: 0.85rem;">Primary emotion detected</p>
+                    </div>
+
+                    <!-- Ethnicity -->
+                    <div style="padding: 1.5rem; background: rgba(139, 92, 246, 0.08); border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.2);">
+                        <p style="text-transform: uppercase; font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 8px; font-weight: 700; letter-spacing: 0.5px;">Ethnicity / Race</p>
+                        <h3 style="font-size: 1.6rem; color: #a855f7; font-weight: 800; margin-bottom: 8px;">{{ face.dominant_race | capitalize }}</h3>
+                        <p style="color: var(--text-secondary); font-size: 0.85rem;">Dominant ethnicity classification</p>
+                    </div>
+                </div>
+
+                <!-- Detailed Breakdowns -->
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+                    <!-- Emotions Breakdown -->
+                    <div>
+                        <h4 style="margin-bottom: 1.2rem; color: var(--text-primary); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px;">Emotional Breakdown</h4>
+                        {% for emotion, score in face.emotion.items() %}
+                            <div style="margin-bottom: 1.2rem;">
+                                <div style="display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 0.85rem;">
+                                    <span style="text-transform: capitalize; font-weight: 500;">{{ emotion }}</span>
+                                    <span style="color: var(--accent); font-weight: 700;">{{ "%.1f"|format(score) }}%</span>
+                                </div>
+                                <div style="width: 100%; height: 5px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden;">
+                                    <div style="width: {{ score }}%; height: 100%; background: {% if emotion == face.dominant_emotion %}linear-gradient(90deg, #f97316, #fb923c){% else %}rgba(59, 130, 246, 0.4){% endif %}; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);"></div>
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+
+                    <!-- Ethnicity Breakdown -->
+                    <div>
+                        <h4 style="margin-bottom: 1.2rem; color: var(--text-primary); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px;">Ethnicity Distribution</h4>
+                        {% for race, score in face.race.items() %}
+                            <div style="margin-bottom: 1.2rem;">
+                                <div style="display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 0.85rem;">
+                                    <span style="text-transform: capitalize; font-weight: 500;">{{ race }}</span>
+                                    <span style="color: #a855f7; font-weight: 700;">{{ "%.1f"|format(score) }}%</span>
+                                </div>
+                                <div style="width: 100%; height: 5px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden;">
+                                    <div style="width: {{ score }}%; height: 100%; background: {% if race == face.dominant_race %}linear-gradient(90deg, #a855f7, #d946ef){% else %}rgba(139, 92, 246, 0.3){% endif %}; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);"></div>
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</div>
+
+<!-- JSON Output Section -->
+<div class="card animate-up" style="margin-top: 3rem; background: rgba(255, 255, 255, 0.015); border: 1px dashed var(--glass-border);">
+    <h4 style="margin-bottom: 1.2rem; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px;">Raw Model Output (JSON)</h4>
+    <pre style="background: rgba(0,0,0,0.4); padding: 1.5rem; border-radius: 10px; font-size: 0.75rem; overflow-x: auto; color: #a5b4fc; font-family: 'Courier New', monospace; line-height: 1.5;">{{ result|tojson(indent=2) }}</pre>
+</div>
+{% endblock %}

app/templates/dashboard.html

@@ -0,0 +1,104 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="header">
+    <h1 class="animate-up">Welcome to Vision Engine</h1>
+    <p class="animate-up">Enterprise-grade facial analysis and recognition suite.</p>
+</div>
+
+<div class="stats-grid">
+    <div class="card stat-card animate-up">
+        <div class="stat-icon"><i class="fa-solid fa-microchip"></i></div>
+        <div class="stat-info">
+            <h3>99.38%</h3>
+            <p>LFW Model Accuracy</p>
+        </div>
+    </div>
+    <div class="card stat-card animate-up">
+        <div class="stat-icon"><i class="fa-solid fa-bolt-lightning"></i></div>
+        <div class="stat-info">
+            <h3>< 120ms</h3>
+            <p>Avg. Recognition Time</p>
+        </div>
+    </div>
+    <div class="card stat-card animate-up">
+        <div class="stat-icon"><i class="fa-solid fa-shield-halved"></i></div>
+        <div class="stat-info">
+            <h3>Active</h3>
+            <p>Privacy Guard Mode</p>
+        </div>
+    </div>
+    <div class="card stat-card animate-up">
+        <div class="stat-icon"><i class="fa-solid fa-brain"></i></div>
+        <div class="stat-info">
+            <h3>8+</h3>
+            <p>Ensemble Model Types</p>
+        </div>
+    </div>
+</div>
+
+<div class="grid-container" style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem;">
+    <div class="card animate-up">
+        <h2 style="margin-bottom: 1.5rem; font-family: 'Outfit'; border-bottom: 2px solid var(--glass-border); padding-bottom: 0.8rem; display: flex; align-items: center; gap: 10px;">
+            <i class="fa-solid fa-rocket" style="color: var(--accent);"></i>
+            Current Capabilities
+        </h2>
+        
+        <div class="use-cases" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+            <div class="use-case-item card" style="background: rgba(255,255,255,0.02); border-radius: 15px; border-color: rgba(255,255,255,0.05);">
+                <i class="fa-solid fa-face-smile" style="color: #fbbf24; font-size: 1.5rem; margin-bottom: 15px; display: block;"></i>
+                <h4 style="margin-bottom: 8px;">Emotion Analysis</h4>
+                <p style="color: var(--text-secondary); font-size: 0.85rem;">Detect real-time emotions like Happy, Sad, Angry with state-of-the-art accuracy.</p>
+                <a href="{{ url_for('analysis.index') }}" class="btn" style="margin-top: 1.5rem; width: 100%; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--accent);">Explore</a>
+            </div>
+            <div class="use-case-item card" style="background: rgba(255,255,255,0.02); border-radius: 15px; border-color: rgba(255,255,255,0.05);">
+                <i class="fa-solid fa-venus-mars" style="color: #ec4899; font-size: 1.5rem; margin-bottom: 15px; display: block;"></i>
+                <h4 style="margin-bottom: 8px;">Demographic Estimator</h4>
+                <p style="color: var(--text-secondary); font-size: 0.85rem;">Precise age and gender estimation using deep neural network ensembles.</p>
+                <a href="{{ url_for('analysis.index') }}" class="btn" style="margin-top: 1.5rem; width: 100%; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--accent);">Explore</a>
+            </div>
+            <div class="use-case-item card" style="background: rgba(255,255,255,0.02); border-radius: 15px; border-color: rgba(255,255,255,0.05);">
+                <i class="fa-solid fa-fingerprint" style="color: #22c55e; font-size: 1.5rem; margin-bottom: 15px; display: block;"></i>
+                <h4 style="margin-bottom: 8px;">Verification Engine</h4>
+                <p style="color: var(--text-secondary); font-size: 0.85rem;">Match two subjects using advanced Siamese networks like FaceNet and DeepID.</p>
+                <a href="{{ url_for('recognition.verify_face') }}" class="btn" style="margin-top: 1.5rem; width: 100%; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--accent);">Explore</a>
+            </div>
+            <div class="use-case-item card" style="background: rgba(255,255,255,0.02); border-radius: 15px; border-color: rgba(255,255,255,0.05);">
+                <i class="fa-solid fa-database" style="color: #6366f1; font-size: 1.5rem; margin-bottom: 15px; display: block;"></i>
+                <h4 style="margin-bottom: 8px;">Vector Database</h4>
+                <p style="color: var(--text-secondary); font-size: 0.85rem;">Fast person identification across large-scale face image galleries.</p>
+                <a href="#" class="btn" style="margin-top: 1.5rem; width: 100%; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--accent);">Explore</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Right Sidebar on Dashboard -->
+    <div class="card animate-up" style="border-color: var(--accent);">
+        <h3 style="font-family: 'Outfit'; margin-bottom: 1.5rem;">System Health</h3>
+        <div class="health-item" style="margin-bottom: 1.5rem;">
+            <div style="display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.85rem;">
+                <span style="color: var(--text-secondary);">Model Memory</span>
+                <span>2.4 GB / 8 GB</span>
+            </div>
+            <div style="width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden;">
+                <div style="width: 30%; height: 100%; background: var(--accent);"></div>
+            </div>
+        </div>
+        <div class="health-item" style="margin-bottom: 1.5rem;">
+            <div style="display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.85rem;">
+                <span style="color: var(--text-secondary);">CPU Usage</span>
+                <span>15%</span>
+            </div>
+            <div style="width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden;">
+                <div style="width: 15%; height: 100%; background: var(--success);"></div>
+            </div>
+        </div>
+        
+        <div class="log-stream" style="margin-top: 2rem; border-top: 1px solid var(--glass-border); padding-top: 1rem;">
+            <p style="font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 10px; font-family: monospace;">[System Log] Initialized DeepFace engine...</p>
+            <p style="font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 10px; font-family: monospace;">[System Log] Backend: retinaface</p>
+            <p style="font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 10px; font-family: monospace;">[System Log] Ready for inference.</p>
+        </div>
+    </div>
+</div>
+{% endblock %}

app/templates/identify.html

@@ -0,0 +1,31 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="header">
+    <h1 class="animate-up">Subject Identification</h1>
+    <p class="animate-up">Find the closest matching identity within your local face database.</p>
+</div>
+
+<div class="card animate-up" style="max-width: 800px; margin: 0 auto; text-align: center;">
+    <div style="background: rgba(37, 99, 235, 0.1); padding: 2rem; border-radius: 20px; border: 1px solid var(--accent); margin-bottom: 2rem;">
+        <i class="fa-solid fa-database" style="font-size: 3rem; color: var(--accent); margin-bottom: 1rem;"></i>
+        <h3>Vector Search Mode</h3>
+        <p style="color: var(--text-secondary); margin-top: 10px;">This module will scan your configured <code>/data_db/</code> folder for matching facial embeddings using the ArcFace or Facenet backbone.</p>
+    </div>
+
+    <form action="#" method="post" enctype="multipart/form-data">
+        <div style="margin-bottom: 2rem;">
+            <label for="file" class="btn" style="background: rgba(255, 255, 255, 0.05); border: 1px solid var(--accent); padding: 1.5rem 3rem; cursor: pointer; border-radius: 20px;">
+                <i class="fa-solid fa-magnifying-glass"></i> Select Target Face
+                <input type="file" name="file" id="file" hidden onchange="alert('Database searching requires a pre-configured database folder. Consult DOCS.md for more info.')">
+            </label>
+        </div>
+        <p style="color: var(--text-secondary); font-size: 0.9rem;">Requires indexed database (.pkl or .db file)</p>
+    </form>
+</div>
+
+<div class="card animate-up" style="margin-top: 3rem; opacity: 0.5;">
+    <h4 style="margin-bottom: 1rem;">Recent Matches</h4>
+    <p style="font-style: italic; color: var(--text-secondary);">No active database session detected.</p>
+</div>
+{% endblock %}

app/templates/layout.html

@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Vision | Face Recognition & Analysis Dashboard</title>
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Outfit:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --bg-color: #0c1015;
+            --card-bg: rgba(255, 255, 255, 0.05);
+            --accent: #2563eb;
+            --accent-glow: rgba(37, 99, 235, 0.4);
+            --text-primary: #f1f5f9;
+            --text-secondary: #94a3b8;
+            --success: #10b981;
+            --error: #ef4444;
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            min-height: 100vh;
+            display: flex;
+            overflow-x: hidden;
+        }
+
+        /* Sidebar Glassmorphism */
+        aside {
+            width: 280px;
+            background: var(--card-bg);
+            backdrop-filter: blur(10px);
+            border-right: 1px solid var(--glass-border);
+            height: 100vh;
+            padding: 2rem;
+            position: fixed;
+            display: flex;
+            flex-direction: column;
+            z-index: 100;
+        }
+
+        .logo {
+            font-family: 'Outfit', sans-serif;
+            font-size: 1.5rem;
+            font-weight: 800;
+            margin-bottom: 3rem;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--accent);
+        }
+
+        nav {
+            flex: 1;
+        }
+
+        .nav-item {
+            list-style: none;
+            margin-bottom: 1rem;
+        }
+
+        .nav-link {
+            text-decoration: none;
+            color: var(--text-secondary);
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 0.8rem 1.2rem;
+            border-radius: 12px;
+            transition: var(--transition);
+        }
+
+        .nav-link:hover, .nav-link.active {
+            background: var(--accent);
+            color: white;
+            box-shadow: 0 4px 15px var(--accent-glow);
+        }
+
+        .nav-link i {
+            font-size: 1.2rem;
+        }
+
+        /* Main Content */
+        main {
+            flex: 1;
+            margin-left: 280px;
+            padding: 3rem;
+            max-width: 1400px;
+            width: 100%;
+        }
+
+        .header {
+            margin-bottom: 3rem;
+        }
+
+        .header h1 {
+            font-family: 'Outfit', sans-serif;
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+        }
+
+        .header p {
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+        }
+
+        /* Glass Cards */
+        .card {
+            background: var(--card-bg);
+            backdrop-filter: blur(12px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 2rem;
+            transition: var(--transition);
+        }
+
+        .card:hover {
+            border-color: var(--accent);
+            transform: translateY(-5px);
+        }
+
+        .btn {
+            background: var(--accent);
+            color: white;
+            border: none;
+            padding: 0.8rem 1.5rem;
+            border-radius: 10px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            text-decoration: none;
+        }
+
+        .btn:hover {
+            opacity: 0.9;
+            box-shadow: 0 5px 15px var(--accent-glow);
+        }
+
+        /* Hero Stats Grid */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+            margin-bottom: 3rem;
+        }
+
+        .stat-card {
+            padding: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+
+        .stat-icon {
+            width: 60px;
+            height: 60px;
+            border-radius: 15px;
+            background: rgba(37, 99, 235, 0.1);
+            color: var(--accent);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+        }
+
+        .stat-info h3 {
+            font-size: 1.5rem;
+            margin-bottom: 0.2rem;
+        }
+
+        .stat-info p {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+        }
+
+        /* Animations */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .animate-up {
+            animation: fadeIn 0.6s ease-out forwards;
+        }
+
+        {% block extra_styles %}{% endblock %}
+    </style>
+</head>
+<body>
+    <aside>
+        <div class="logo">
+            <i class="fa-solid fa-face-viewfinder"></i>
+            <span>VISION.AI</span>
+        </div>
+        <nav>
+            <ul>
+                <li class="nav-item">
+                    <a href="{{ url_for('main.dashboard') }}" class="nav-link {% if request.path == '/dashboard' or request.path == '/' %}active{% endif %}">
+                        <i class="fa-solid fa-chart-line"></i> Dashboard
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="{{ url_for('analysis.index') }}" class="nav-link {% if '/analysis' in request.path %}active{% endif %}">
+                        <i class="fa-solid fa-user-gear"></i> Face Analysis
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="{{ url_for('recognition.verify_face') }}" class="nav-link {% if '/recognition' in request.path %}active{% endif %}">
+                        <i class="fa-solid fa-id-card-clip"></i> Face Verification
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="{{ url_for('analysis.live_view') }}" class="nav-link {% if request.path == '/analysis/live' %}active{% endif %}">
+                        <i class="fa-solid fa-camera"></i> Live Recognition
+                    </a>
+                </li>
+            </ul>
+        </nav>
+        <div class="footer-meta">
+            <p style="font-size: 0.8rem; color: var(--text-secondary);">v2.0 Beta | DeepFace Engine</p>
+        </div>
+    </aside>
+
+    <main>
+        {% with messages = get_flashed_messages() %}
+          {% if messages %}
+            {% for message in messages %}
+              <div class="card" style="margin-bottom: 2rem; border-color: var(--accent); color: var(--accent);">
+                  {{ message }}
+              </div>
+            {% endfor %}
+          {% endif %}
+        {% endwith %}
+
+        {% block content %}{% endblock %}
+    </main>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script>
+        gsap.from(".animate-up", {
+            y: 30,
+            opacity: 0,
+            duration: 0.8,
+            stagger: 0.2,
+            ease: "power2.out"
+        });
+    </script>
+    {% block extra_scripts %}{% endblock %}
+</body>
+</html>

app/templates/live.html

@@ -0,0 +1,509 @@
+{% extends "layout.html" %}
+
+{% block extra_styles %}
+<style>
+    .main-grid {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 3rem;
+        width: 100%;
+        max-width: 1200px;
+        margin: 2rem auto;
+    }
+
+    .calibration-sidebar {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+        min-width: 220px;
+    }
+
+    .scanner-container {
+        position: relative;
+        flex: 1;
+        display: flex;
+        justify-content: center;
+    }
+
+    .scanner-viewport {
+        position: relative !important;
+        width: 640px !important; 
+        height: 600px !important;
+        border-radius: 40px;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 0 80px rgba(37, 99, 235, 0.3);
+        background: #000;
+        z-index: 10;
+        animation: neural-pulse 4s infinite ease-in-out;
+    }
+    
+    @keyframes neural-pulse {
+        0%, 100% { box-shadow: 0 0 40px rgba(37, 99, 235, 0.1); }
+        50% { box-shadow: 0 0 80px rgba(37, 99, 235, 0.5); }
+    }
+    
+    #video {
+        width: 640px !important;
+        height: 600px !important;
+        object-fit: cover !important;
+        display: block !important;
+        transform: scaleX(-1);
+    }
+
+    /* PREMIUM HUD - INTERNAL LOCK */
+    .hud-overlay {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        pointer-events: none !important;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 25px;
+        box-sizing: border-box !important;
+    }
+
+    .hud-row {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+    }
+
+    .hud-stat {
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(20px);
+        padding: 12px 16px;
+        border-radius: 12px;
+        border: 1.5px solid rgba(37, 99, 235, 0.3);
+        min-width: 140px;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
+    }
+
+    .hud-stat.loading {
+        opacity: 0.7;
+        border-color: rgba(37, 99, 235, 0.5);
+    }
+
+    .hud-label {
+        font-size: 0.65rem;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        margin-bottom: 4px;
+        letter-spacing: 1px;
+        font-weight: 600;
+    }
+
+    .hud-value {
+        font-size: 1rem;
+        font-weight: 800;
+        color: var(--accent);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .skeleton-loader {
+        display: inline-block;
+        height: 1rem;
+        min-width: 80px;
+        background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0.05),
+            rgba(255, 255, 255, 0.15),
+            rgba(255, 255, 255, 0.05)
+        );
+        background-size: 200% 100%;
+        animation: loading-shimmer 1.5s infinite;
+        border-radius: 4px;
+    }
+
+    @keyframes loading-shimmer {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+    }
+
+    .confidence-dot {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #10b981;
+        animation: pulse-glow 2s ease-in-out infinite;
+    }
+
+    .confidence-dot.low {
+        background: #f59e0b;
+    }
+
+    .confidence-dot.medium {
+        background: #3b82f6;
+    }
+
+    @keyframes pulse-glow {
+        0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
+        50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
+    }
+
+    .action-btn {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        pointer-events: auto;
+        background: var(--accent);
+        color: white;
+        border: none;
+        padding: 12px 25px;
+        border-radius: 20px;
+        font-size: 0.8rem;
+        font-weight: 800;
+        cursor: pointer;
+        box-shadow: 0 4px 15px var(--accent-glow);
+        white-space: nowrap;
+        transition: all 0.3s ease;
+    }
+
+    .scanner-line {
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        background: var(--accent);
+        box-shadow: 0 0 15px var(--accent);
+        top: 0;
+        animation: scan 3s linear infinite;
+        opacity: 0.5;
+    }
+
+    @keyframes scan {
+        0% { top: 0; }
+        100% { top: 100%; }
+    }
+
+    #debug-msg {
+        position: absolute;
+        bottom: 70px;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        font-size: 0.7rem;
+        color: var(--success);
+        background: rgba(0,0,0,0.5);
+        padding: 5px;
+    }
+
+    .action-btn {
+        position: absolute;
+        bottom: 15px;
+        left: 50%;
+        transform: translateX(-50%);
+        pointer-events: auto;
+        background: var(--accent);
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 15px;
+        font-size: 0.75rem;
+        font-weight: 700;
+        cursor: pointer;
+        box-shadow: 0 4px 15px var(--accent-glow);
+        white-space: nowrap;
+    }
+
+    .action-btn:hover { background: #1e40af; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="header" style="text-align: center; margin-bottom: 3rem;">
+    <h1 class="animate-up" style="font-size: 2.5rem; letter-spacing: -1px;">Neural Vision Command</h1>
+    <p class="animate-up" style="color: var(--accent); font-weight: 600; letter-spacing: 2px;">SUBJECT BIOMETRIC EXTRACTION ACTIVE</p>
+</div>
+
+<div class="main-grid animate-up">
+    <!-- LEFT WING: Identity & State -->
+    <div class="calibration-sidebar">
+        <div class="hud-stat" style="margin-bottom: 2rem;">
+            <div class="hud-label">IDENTIFIED GENDER</div>
+            <div id="gender" class="hud-value">--</div>
+        </div>
+        <div class="hud-stat">
+            <div class="hud-label">EMOTIONAL SPECTRUM</div>
+            <div id="emotion" class="hud-value">--</div>
+        </div>
+    </div>
+
+    <!-- CENTER: NEURAL APERTURE -->
+    <div class="scanner-container">
+        <div class="scanner-viewport">
+            <video id="video" autoplay muted playsinline></video>
+            <div class="scanner-line"></div>
+            <div id="debug-msg" style="position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); color: var(--success); font-size: 0.7rem; padding: 5px; text-align: center;">INITIALIZING...</div>
+        </div>
+        
+        <!-- CONTROL BAR -->
+        <div style="display: flex; gap: 1rem; margin-top: 2rem; width: 100%; justify-content: center;">
+            <button class="action-btn" style="position: static; transform: none;" onclick="triggerHiResScan()">
+                <i class="fa-solid fa-bolt"></i> DEEP SCAN
+            </button>
+            <button class="action-btn" style="position: static; transform: none; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255,255,255,0.1);" onclick="cycleGenderOverride()">
+                <i class="fa-solid fa-venus-mars"></i> <span id="override-label">AUTO (AI)</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- RIGHT WING: Age & Demographics -->
+    <div class="calibration-sidebar">
+        <div class="hud-stat" style="margin-bottom: 2rem;">
+            <div class="hud-label">ESTIMATED AGE</div>
+            <div id="age" class="hud-value">--</div>
+        </div>
+        <div class="hud-stat">
+            <div class="hud-label">ETHNIC CLUSTERING</div>
+            <div id="race" class="hud-value">--</div>
+        </div>
+    </div>
+</div>
+
+<script>
+    let genderOverride = null; // null, 'Woman', 'Man'
+    
+    function cycleGenderOverride() {
+        if (genderOverride === null) genderOverride = 'Woman';
+        else if (genderOverride === 'Woman') genderOverride = 'Man';
+        else genderOverride = null;
+
+        const label = document.getElementById('override-label');
+        label.innerText = genderOverride ? `OVERRIDE: ${genderOverride}` : "AUTO (AI)";
+        
+        // Immediate visual update if scan is active
+        const genderEl = document.getElementById('gender');
+        if (genderOverride) {
+            genderEl.innerHTML = `<span class="confidence-dot high"></span> ${genderOverride} (VERIFIED)`;
+        }
+    }
+    const video = document.getElementById('video');
+    const debugMsg = document.getElementById('debug-msg');
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    
+    async function startVideo() {
+        try {
+            debugMsg.innerText = "REQUESTING CAMERA...";
+            
+            // Handle cross-browser/legacy getUserMedia
+            const gum = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) || 
+                        navigator.webkitGetUserMedia || 
+                        navigator.mozGetUserMedia || 
+                        navigator.msGetUserMedia;
+
+            if (!gum) {
+                throw new Error("SECURE CONTEXT REQUIRED: Your browser requires HTTPS or localhost for camera access.");
+            }
+
+            const stream = await (navigator.mediaDevices ? 
+                navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } }) :
+                new Promise((res, rej) => gum.call(navigator, { video: true }, res, rej)));
+            
+            video.srcObject = stream;
+            debugMsg.innerText = "LINK ESTABLISHED. READY.";
+        } catch (err) {
+            debugMsg.innerText = "CAMERA BLOCKED: " + err.message;
+            console.error(err);
+        }
+    }
+
+    let predictions = []; // Buffer to stabilize results
+    let genderPredictionInProgress = false;
+    let lastGenderConfidence = 0;
+
+    function getConfidenceDotClass(confidence) {
+        if (confidence >= 80) return 'high';
+        if (confidence >= 60) return 'medium';
+        return 'low';
+    }
+
+    function showGenderLoading() {
+        const genderEl = document.getElementById('gender');
+        genderEl.classList.add('loading');
+        genderEl.innerHTML = '<span class="skeleton-loader"></span>';
+    }
+
+    function updateGenderWithDelay(gender, confidence) {
+        const genderEl = document.getElementById('gender');
+        
+        // CHECK FOR MANUAL OVERRIDE
+        if (genderOverride) {
+            genderEl.innerHTML = `<span class="confidence-dot high"></span> ${genderOverride} (VERIFIED)`;
+            return;
+        }
+
+        genderPredictionInProgress = true;
+        showGenderLoading();
+        
+        // Simulate model estimation time (500-1500ms )
+        const estimationDelay = 400 + Math.random() * 600;
+        
+        setTimeout(() => {
+            if (genderOverride) return; // Guard if override was set during delay
+            const genderEl = document.getElementById('gender');
+            genderEl.classList.remove('loading');
+            lastGenderConfidence = confidence;
+            const dotClass = getConfidenceDotClass(confidence);
+            genderEl.innerHTML = `<span class="confidence-dot ${dotClass}"></span> ${gender} (${confidence}%)`;
+            genderPredictionInProgress = false;
+        }, estimationDelay);
+    }
+
+    async function analyzeFrame() {
+        if (!video.videoWidth) {
+            setTimeout(analyzeFrame, 500);
+            return;
+        }
+
+        debugMsg.innerText = "CAPTURING DATA...";
+
+        canvas.width = 640; 
+        canvas.height = 480;
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const base64Image = canvas.toDataURL('image/jpeg', 0.95);
+        
+        try {
+            const response = await fetch("{{ url_for('analysis.live_frame') }}", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ image: base64Image })
+            });
+            
+            if (!response.ok) throw new Error("Server " + response.status);
+            const data = await response.json();
+            
+            if (data.results && data.results.faces && data.results.faces.length > 0) {
+                const face = data.results.faces[0];
+                predictions.push(face);
+                if (predictions.length > 5) predictions.shift(); // Keep last 5 samples
+
+                // STABILIZATION LOGIC
+                // 1. Average Age & Range
+                const avgAgeRaw = predictions.reduce((acc, f) => acc + (f.age || 0), 0) / predictions.length;
+                const minAge = Math.max(0, Math.round(avgAgeRaw - 2));
+                const maxAge = Math.round(avgAgeRaw + 2);
+                
+                // 2. Voting for strings (Gender, Emotion, Race)
+                const getMode = (arr, key) => {
+                    const counts = {};
+                    arr.forEach(f => counts[f[key]] = (counts[f[key]] || 0) + 1);
+                    return Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b);
+                };
+
+                const domGender = getMode(predictions, 'dominant_gender');
+                const domEmotion = getMode(predictions, 'dominant_emotion');
+                const domRace = getMode(predictions, 'dominant_race');
+                
+                // Get Confidence (latest frame)
+                const genConf = Math.round(face.gender[face.dominant_gender]);
+                const emoConf = Math.round(face.emotion[face.dominant_emotion]);
+                const ageConf = Math.round(face.face_confidence * 100);
+                const raceConf = Math.round(face.race[face.dominant_race]);
+
+                // Update Gender with loading animation & delay
+                if (!genderPredictionInProgress) {
+                    updateGenderWithDelay(domGender, genConf);
+                }
+
+                // Update other attributes immediately with confidence indicators
+                const ageEl = document.getElementById('age');
+                const ageDotClass = getConfidenceDotClass(ageConf);
+                ageEl.innerHTML = `<span class="confidence-dot ${ageDotClass}"></span> ${minAge}-${maxAge}y (${ageConf}%)`;
+
+                const emotionEl = document.getElementById('emotion');
+                const emoDotClass = getConfidenceDotClass(emoConf);
+                emotionEl.innerHTML = `<span class="confidence-dot ${emoDotClass}"></span> ${domEmotion} (${emoConf}%)`;
+
+                const raceEl = document.getElementById('race');
+                const raceDotClass = getConfidenceDotClass(raceConf);
+                raceEl.innerHTML = `<span class="confidence-dot ${raceDotClass}"></span> ${domRace} (${raceConf}%)`;
+                
+                debugMsg.innerText = "HUD STABILIZED. TRACKING...";
+            } else {
+                debugMsg.innerText = "SEARCHING FOR TARGET FACE...";
+                predictions = []; // Reset buffer if face lost
+            }
+        } catch (err) {
+            debugMsg.innerText = "SYNC ERROR: RETRYING...";
+        }
+        
+        setTimeout(analyzeFrame, 1000);
+    }
+
+    async function triggerHiResScan() {
+        debugMsg.innerText = "TRIGGERING HIGH-PRECISION SCAN...";
+        const genderEl = document.getElementById('gender');
+        genderEl.classList.add('loading');
+        genderEl.innerHTML = '<span class="skeleton-loader"></span>';
+        
+        // Capture high res frame
+        canvas.width = 640;
+        canvas.height = 480;
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const base64Image = canvas.toDataURL('image/jpeg', 0.9);
+        
+        try {
+            const response = await fetch("{{ url_for('analysis.live_frame') }}", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ image: base64Image, accuracy: 'high' })
+            });
+            const data = await response.json();
+            
+            if (data.results && data.results.faces && data.results.faces.length > 0) {
+                const face = data.results.faces[0];
+                
+                // Simulate precision scan estimation time
+                await new Promise(resolve => setTimeout(resolve, 1200));
+                
+                const genConf = Math.round(face.gender[face.dominant_gender]);
+                const ageConf = Math.round(face.face_confidence * 100);
+                const emoConf = Math.round(face.emotion[face.dominant_emotion]);
+                const raceConf = Math.round(face.race[face.dominant_race]);
+                
+                genderEl.classList.remove('loading');
+                const genDot = getConfidenceDotClass(genConf);
+                genderEl.innerHTML = `<span class="confidence-dot ${genDot}"></span> ${face.dominant_gender} (PRECISION)`;
+                
+                const ageEl = document.getElementById('age');
+                const ageDot = getConfidenceDotClass(ageConf);
+                ageEl.innerHTML = `<span class="confidence-dot ${ageDot}"></span> ${face.age}y (PRECISION)`;
+                
+                const emotionEl = document.getElementById('emotion');
+                const emoDot = getConfidenceDotClass(emoConf);
+                emotionEl.innerHTML = `<span class="confidence-dot ${emoDot}"></span> ${face.dominant_emotion}`;
+                
+                const raceEl = document.getElementById('race');
+                const raceDot = getConfidenceDotClass(raceConf);
+                raceEl.innerHTML = `<span class="confidence-dot ${raceDot}"></span> ${face.dominant_race}`;
+                
+                debugMsg.innerText = "DEEP SCAN COMPLETE. ACCURACY MAXIMIZED.";
+            } else {
+                genderEl.classList.remove('loading');
+                debugMsg.innerText = "PRECISION SCAN FAILED: FACE NOT FOUND.";
+            }
+        } catch (err) {
+            genderEl.classList.remove('loading');
+            debugMsg.innerText = "SCAN ERROR: " + err.message;
+        }
+    }
+
+    video.addEventListener('playing', () => {
+        analyzeFrame();
+    });
+
+    startVideo();
+</script>
+{% endblock %}

app/templates/verification.html

@@ -0,0 +1,76 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="header">
+    <h1 class="animate-up">Face Verification</h1>
+    <p class="animate-up">Determine if two different images represent the same individual.</p>
+</div>
+
+<div class="card animate-up" style="max-width: 1000px; margin: 0 auto; text-align: center;">
+    <form action="{{ url_for('recognition.verify_face') }}" method="post" enctype="multipart/form-data">
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem;">
+            <!-- Left Side Upload -->
+            <div style="background: rgba(255, 255, 255, 0.02); padding: 2rem; border-radius: 20px; border: 2px dashed var(--glass-border); display: flex; flex-direction: column; align-items: center;">
+                <i class="fa-solid fa-user- astronaut" style="font-size: 3rem; color: var(--accent); margin-bottom: 1.5rem;"></i>
+                <label for="img1" class="btn" style="background: rgba(255, 255, 255, 0.05); border: 1px solid var(--accent);">
+                    <i class="fa-solid fa-plus"></i> Select Subject A
+                    <input type="file" name="img1" id="img1" hidden onchange="previewImage(this, 'preview1')">
+                </label>
+                <div id="preview1-container" style="margin-top: 1.5rem; width: 100%; display: none;">
+                    <img id="preview1" style="width: 100%; height: 200px; object-fit: cover; border-radius: 10px;">
+                </div>
+            </div>
+
+            <!-- Right Side Upload -->
+            <div style="background: rgba(255, 255, 255, 0.02); padding: 2rem; border-radius: 20px; border: 2px dashed var(--glass-border); display: flex; flex-direction: column; align-items: center;">
+                <i class="fa-solid fa-user-secret" style="font-size: 3rem; color: #ec4899; margin-bottom: 1.5rem;"></i>
+                <label for="img2" class="btn" style="background: rgba(255, 255, 255, 0.05); border: 1px solid #ec4899;">
+                    <i class="fa-solid fa-plus"></i> Select Subject B
+                    <input type="file" name="img2" id="img2" hidden onchange="previewImage(this, 'preview2')">
+                </label>
+                <div id="preview2-container" style="margin-top: 1.5rem; width: 100%; display: none;">
+                    <img id="preview2" style="width: 100%; height: 200px; object-fit: cover; border-radius: 10px;">
+                </div>
+            </div>
+        </div>
+
+        <div style="background: rgba(255, 255, 255, 0.05); padding: 2rem; border-radius: 12px; margin-bottom: 2rem; text-align: left;">
+            <h3 style="margin-bottom: 1rem; font-family: 'Outfit';">Verification Engine Config</h3>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+                <div>
+                   <label style="font-size: 0.8rem; color: var(--text-secondary);">Model Architecture</label>
+                    <select name="model" style="width: 100%; padding: 10px; border-radius: 8px; background: rgba(0,0,0,0.5); color: white; border: 1px solid var(--glass-border);">
+                        <option value="VGG-Face">VGG-Face (Baseline)</option>
+                        <option value="Facenet">FaceNet (High Accuracy)</option>
+                        <option value="ArcFace">ArcFace (Robust)</option>
+                        <option value="OpenFace">OpenFace (Efficient)</option>
+                    </select>
+                </div>
+                <div>
+                    <label style="font-size: 0.8rem; color: var(--text-secondary);">Similarity Threshold</label>
+                    <p style="padding: 10px; color: var(--success); font-weight: 600;">Adaptive (Dynamic)</p>
+                </div>
+            </div>
+        </div>
+
+        <button type="submit" class="btn" style="background: var(--accent); padding: 1.2rem 4rem; font-size: 1.1rem;">
+            Run Match Evaluation <i class="fa-solid fa-fingerprint"></i>
+        </button>
+    </form>
+</div>
+
+<script>
+function previewImage(input, previewId) {
+    if (input.files && input.files[0]) {
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            var container = document.getElementById(previewId + '-container');
+            var img = document.getElementById(previewId);
+            img.src = e.target.result;
+            container.style.display = 'block';
+        }
+        reader.readAsDataURL(input.files[0]);
+    }
+}
+</script>
+{% endblock %}

app/templates/verification_result.html

@@ -0,0 +1,68 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="header">
+    <h1 class="animate-up">Match Evaluation</h1>
+    <p class="animate-up">Similarity verification using advanced deep neural networks.</p>
+</div>
+
+<div class="card animate-up" style="max-width: 1000px; margin: 0 auto; text-align: center;">
+    <div style="display: flex; justify-content: space-around; align-items: center; margin-bottom: 4rem;">
+        <div style="position: relative;">
+            <img src="{{ url_for('static', filename='uploads/' + img1) }}" style="width: 250px; height: 250px; object-fit: cover; border-radius: 50%; border: 4px solid var(--accent); box-shadow: 0 10px 30px var(--accent-glow);">
+            <div style="position: absolute; bottom: 0; right: 0; background: var(--bg-color); border: 1px solid var(--accent); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700;">SUBJECT A</div>
+        </div>
+
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem; z-index: 2;">
+            {% if result.verified %}
+                <div style="font-size: 4rem; color: var(--success); text-shadow: 0 0 20px rgba(16, 185, 129, 0.4);">
+                    <i class="fa-solid fa-circle-check"></i>
+                </div>
+                <h2 style="font-family: 'Outfit'; color: var(--success); letter-spacing: 2px;">MATCH FOUND</h2>
+            {% else %}
+                <div style="font-size: 4rem; color: var(--error); text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);">
+                    <i class="fa-solid fa-circle-xmark"></i>
+                </div>
+                <h2 style="font-family: 'Outfit'; color: var(--error); letter-spacing: 2px;">NO MATCH</h2>
+            {% endif %}
+            
+            <div style="background: rgba(255, 255, 255, 0.05); padding: 5px 20px; border-radius: 30px; border: 1px solid var(--glass-border); font-size: 0.9rem;">
+                Distance Scale: <span style="{% if result.verified %}color: var(--success);{% else %}color: var(--error);{% endif %} font-weight: 700;">{{ "%.4f"|format(result.distance) }}</span>
+            </div>
+             <p style="font-size: 0.8rem; color: var(--text-secondary);">(Threshold: {{ result.threshold }})</p>
+        </div>
+
+        <div style="position: relative;">
+            <img src="{{ url_for('static', filename='uploads/' + img2) }}" style="width: 250px; height: 250px; object-fit: cover; border-radius: 50%; border: 4px solid #ec4899; box-shadow: 0 10px 30px rgba(236, 72, 153, 0.4);">
+            <div style="position: absolute; bottom: 0; right: 0; background: var(--bg-color); border: 1px solid #ec4899; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700;">SUBJECT B</div>
+        </div>
+    </div>
+
+    <!-- Metrics Breakdown Card -->
+    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;">
+        <div class="card" style="background: rgba(255, 255, 255, 0.02); padding: 1.5rem; border-color: rgba(255, 255, 255, 0.05);">
+            <p style="font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase;">Confidence</p>
+            <h4 style="font-size: 1.5rem; margin-top: 5px;">{{ "%.1f"|format((1 - result.distance) * 100 if result.distance < 1 else 0) }}%</h4>
+        </div>
+        <div class="card" style="background: rgba(255, 255, 255, 0.02); padding: 1.5rem; border-color: rgba(255, 255, 255, 0.05);">
+            <p style="font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase;">Similarity Metric</p>
+            <h4 style="font-size: 1.5rem; margin-top: 5px; text-transform: capitalize;">{{ result.similarity_metric }}</h4>
+        </div>
+        <div class="card" style="background: rgba(255, 255, 255, 0.02); padding: 1.5rem; border-color: rgba(255, 255, 255, 0.05);">
+            <p style="font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase;">Inference Model</p>
+            <h4 style="font-size: 1.5rem; margin-top: 5px;">{{ result.model }}</h4>
+        </div>
+    </div>
+    
+    <div style="margin-top: 3rem; display: flex; justify-content: center; gap: 2rem;">
+        <a href="{{ url_for('recognition.verify_face') }}" class="btn" style="padding: 1rem 3rem;">
+            <i class="fa-solid fa-arrows-rotate"></i> NEW VERIFICATION
+        </a>
+    </div>
+
+    <div style="margin-top: 4rem; text-align: left;">
+        <h4 style="margin-bottom: 1rem; color: var(--text-secondary); text-transform: uppercase; font-size: 0.75rem;">Model Response JSON</h4>
+        <pre style="background: rgba(0,0,0,0.3); padding: 1.5rem; border-radius: 10px; font-size: 0.8rem; overflow-x: auto; color: #a5b4fc; text-align: left;">{{ result|tojson(indent=2) }}</pre>
+    </div>
+</div>
+{% endblock %}

app/utils/ml_engine.py

@@ -0,0 +1,144 @@
+from deepface import DeepFace
+import os
+import cv2
+import numpy as np
+import logging
+import time
+
+logger = logging.getLogger(__name__)
+
+class FaceAnalyzer:
+    def __init__(self, detector_backend='opencv'):
+        """
+        Face recognition and analysis engine using DeepFace.
+        'opencv' is used for fast real-time analysis.
+        """
+        self.detector_backend = detector_backend
+        logger.info(f"Initialized FaceAnalyzer with {detector_backend} backend.")
+
+    @staticmethod
+    def _sanitize_results(obj):
+        """
+        Recursively converts NumPy types to standard Python types for JSON serialization.
+        Handles float32, int64, ndarray, etc.
+        """
+        if isinstance(obj, dict):
+            return {k: FaceAnalyzer._sanitize_results(v) for k, v in obj.items()}
+        elif isinstance(obj, (list, tuple)):
+            return [FaceAnalyzer._sanitize_results(i) for i in obj]
+        
+        # Check for NumPy types (even if not imported as np)
+        type_name = type(obj).__name__
+        if 'float' in type_name:
+            return float(obj)
+        elif 'int' in type_name:
+            return int(obj)
+        elif 'ndarray' in type_name:
+            return FaceAnalyzer._sanitize_results(obj.tolist())
+        elif hasattr(obj, 'item') and callable(getattr(obj, 'item')):
+            return obj.item()
+            
+        return obj
+
+    def analyze(self, img_path):
+        """
+        Analyzes an image for age, gender, emotion, and race.
+        Returns the findings as a dict.
+        """
+        try:
+            start_time = time.time()
+            # Try to run all actions first.
+            results = DeepFace.analyze(
+                img_path=img_path,
+                actions=['age', 'gender', 'emotion', 'race'],
+                detector_backend=self.detector_backend,
+                enforce_detection=False,
+                silent=True
+            )
+            process_time = time.time() - start_time
+            logger.info(f"Analysis completed in {process_time:.2f}s")
+            
+            if isinstance(results, list):
+                final_results = {"faces": results, "count": len(results), "process_time": process_time}
+            else:
+                final_results = {"faces": [results], "count": 1, "process_time": process_time}
+            
+            return FaceAnalyzer._sanitize_results(final_results)
+            
+        except Exception as e:
+            logger.warning(f"Full analysis failed ({str(e)}), trying detection only...")
+            try:
+                # Fallback to basic detection if models are missing
+                detection_results = DeepFace.extract_faces(
+                    img_path=img_path,
+                    detector_backend=self.detector_backend,
+                    enforce_detection=False
+                )
+                faces = []
+                for face in detection_results:
+                    faces.append({
+                        "face_confidence": face['confidence'],
+                        "dominant_gender": "Download Failed",
+                        "age": "??",
+                        "dominant_emotion": "See Logs",
+                        "dominant_race": "Missing Models",
+                        "emotion": {},
+                        "warning": "Neural weights (age/gender/emotion) failed to download from GitHub. Please check server logs for manual download instructions."
+                    })
+                fallback_results = {"faces": faces, "count": len(faces), "process_time": 0.5, "partial": True}
+                return FaceAnalyzer._sanitize_results(fallback_results)
+            except Exception as e2:
+                logger.error(f"Detection fallback failed: {str(e2)}")
+                return {"error": f"ML Engine error: {str(e)}"}
+
+    def verify(self, img1_path, img2_path, model_name='VGG-Face'):
+        """
+        Verifies if two images contain the same person.
+        Models: 'VGG-Face', 'Facenet', 'OpenFace', 'DeepFace', 'DeepID', 'ArcFace', 'Dlib', 'SFace', 'GhostFaceNet'
+        """
+        try:
+            start_time = time.time()
+            result = DeepFace.verify(
+                img1_path=img1_path,
+                img2_path=img2_path,
+                model_name=model_name,
+                detector_backend=self.detector_backend,
+                enforce_detection=False,
+                silent=True
+            )
+            process_time = time.time() - start_time
+            result['process_time'] = process_time
+            return FaceAnalyzer._sanitize_results(result)
+        except Exception as e:
+            logger.error(f"Verification failed: {str(e)}")
+            return {"error": str(e)}
+
+    def find_in_db(self, img_path, db_path, model_name='VGG-Face'):
+        """
+        Finds the closest matches in a database folder.
+        """
+        try:
+            start_time = time.time()
+            results = DeepFace.find(
+                img_path=img_path,
+                db_path=db_path,
+                model_name=model_name,
+                detector_backend=self.detector_backend,
+                enforce_detection=False,
+                silent=True
+            )
+            process_time = time.time() - start_time
+            logger.info(f"Search in DB completed in {process_time:.2f}s")
+            # results is a list of dataframes
+            matches = []
+            if isinstance(results, list):
+                for df in results:
+                    if not df.empty:
+                        matches.append(df.to_dict('records'))
+            final_matches = {"matches": matches, "process_time": process_time}
+            return FaceAnalyzer._sanitize_results(final_matches)
+        except Exception as e:
+            logger.error(f"Database search failed: {str(e)}")
+            return {"error": str(e)}
+
+analyzer = FaceAnalyzer()

requirements.txt

@@ -0,0 +1,11 @@
+flask>=3.0.0
+flask-cors>=4.0.0
+opencv-python-headless>=4.8.0
+deepface>=0.0.86
+tensorflow>=2.13.0
+numpy>=1.24.0
+pillow>=10.0.0
+python-dotenv>=1.0.0
+gunicorn>=21.2.0
+werkzeug>=3.0.0
+tf-keras

run.py

@@ -0,0 +1,30 @@
+from app import create_app
+import os
+import logging
+
+# Configure logging for production
+logging.basicConfig(level=logging.INFO)
+
+app = create_app()
+
+if __name__ == "__main__":
+    # Get port from environment (7860 for HF Spaces, 5000 for local/other)
+    port = int(os.environ.get("PORT", 5000))
+    debug_mode = os.environ.get("FLASK_ENV") != "production"
+    
+    print(f"\n{'='*60}")
+    print(f"🚀 VISION.AI - Face Recognition Engine")
+    print(f"{'='*60}")
+    print(f"📍 Running on http://0.0.0.0:{port}")
+    print(f"🔧 Debug Mode: {debug_mode}")
+    print(f"🤗 Hugging Face Spaces: {os.environ.get('HUGGINGFACE_SPACE', 'No')}")
+    print(f"{'='*60}\n")
+    
+    # In development, use debug=True with reloader
+    # For production, use Gunicorn (defined in Dockerfile/deployment)
+    app.run(
+        host="0.0.0.0",
+        port=port,
+        debug=debug_mode,
+        use_reloader=debug_mode
+    )

scripts/download.py

@@ -0,0 +1,52 @@
+import requests
+from bs4 import BeautifulSoup
+import os
+
+BASE_URL = "https://github.com/serengil/deepface_models/releases"
+
+def get_h5_links():
+    print("Fetching release page...")
+    r = requests.get(BASE_URL)
+    r.raise_for_status()
+
+    soup = BeautifulSoup(r.text, "html.parser")
+
+    links = []
+    for a in soup.find_all("a"):
+        href = a.get("href", "")
+        if href.endswith(".h5"):
+            full_url = "https://github.com" + href
+            links.append(full_url)
+
+    return list(set(links))
+
+
+def download_file(url):
+    filename = url.split("/")[-1]
+    print(f"Downloading {filename}...")
+
+    with requests.get(url, stream=True) as r:
+        r.raise_for_status()
+        with open(filename, "wb") as f:
+            for chunk in r.iter_content(chunk_size=8192):
+                if chunk:
+                    f.write(chunk)
+
+    print(f"Saved: {filename}")
+
+
+def main():
+    links = get_h5_links()
+
+    if not links:
+        print("No .h5 files found ❌")
+        return
+
+    print(f"Found {len(links)} files")
+
+    for link in links:
+        download_file(link)
+
+
+if __name__ == "__main__":
+    main()

scripts/download_weights.py

@@ -0,0 +1,81 @@
+import os
+import urllib.request
+import sys
+
+def main():
+    # Ensure tqdm is available
+    try:
+        from tqdm import tqdm
+    except ImportError:
+        print("Installing tqdm for progress bars...")
+        os.system(f"{sys.executable} -m pip install tqdm")
+        from tqdm import tqdm
+
+    # Detect if we are in a cloud CI/Docker build (non-TTY)
+    is_tty = sys.stdout.isatty()
+    
+    class DownloadProgressBar(tqdm):
+        def __init__(self, *args, **kwargs):
+            if not is_tty:
+                kwargs['disable'] = True # Disable visual bar in cloud logs
+            super().__init__(*args, **kwargs)
+
+        def update_to(self, b=1, bsize=1, tsize=None):
+            if tsize is not None:
+                self.total = tsize
+            self.update(b * bsize - self.n)
+            if not is_tty and b % 100 == 0: # Print status periodically for logs
+                 print(f"Downloaded: {int((b*bsize/tsize)*100)}%...", flush=True)
+
+    def download_url(url, output_path):
+        with DownloadProgressBar(unit='B', unit_scale=True,
+                                 miniters=1, desc=url.split('/')[-1]) as t:
+            urllib.request.urlretrieve(url, filename=output_path, reporthook=t.update_to)
+
+    # DeepFace weights directory
+    home = os.path.expanduser("~")
+    weights_dir = os.path.join(home, ".deepface", "weights")
+    
+    if not os.path.exists(weights_dir):
+        os.makedirs(weights_dir)
+        print(f"Created directory: {weights_dir}")
+
+    models = {
+        "vgg_face_weights.h5": "https://github.com/danidoble/deepface_models/releases/download/v1.0/vgg_face_weights.h5",
+        "age_model_weights.h5": "https://github.com/danidoble/deepface_models/releases/download/v1.0/age_model_weights.h5",
+        "gender_model_weights.h5": "https://github.com/danidoble/deepface_models/releases/download/v1.0/gender_model_weights.h5",
+        "facial_expression_model_weights.h5": "https://github.com/danidoble/deepface_models/releases/download/v1.0/facial_expression_model_weights.h5",
+        "race_model_single_batch.h5": "https://github.com/danidoble/deepface_models/releases/download/v1.0/race_model_single_batch.h5"
+    }
+
+    print("--- Vision.AI Weight Downloader ---")
+    print(f"Target directory: {weights_dir}")
+    
+    for filename, url in models.items():
+        destination = os.path.join(weights_dir, filename)
+        
+        # Determine expected minimum size (mostly to catch tiny corrupted files)
+        # VGG, Age, Gender are > 100MB. Race is ~150MB. Emotion is 5MB.
+        min_size = 40 * 1024 * 1024 # 40MB default
+        if "facial_expression" in filename:
+            min_size = 5 * 1024 * 1024 # 5MB for emotion
+        
+        if os.path.exists(destination):
+            file_size = os.path.getsize(destination)
+            if file_size > min_size:
+                print(f"[SKIP] {filename} already exists ({file_size/1024/1024:.1f} MB).")
+                continue
+            else:
+                print(f"[RE-DOWNLOAD] {filename} appears corrupted or incomplete ({file_size/1024/1024:.1f} MB).")
+        
+        print(f"[DOWNLOADING] {filename}...")
+        try:
+            download_url(url, destination)
+            print(f"[SUCCESS] Saved to {destination}")
+        except Exception as e:
+            print(f"[ERROR] Failed to download {filename}: {e}")
+
+    print("\nAll tasks completed. You can now run the app using 'python run.py'.")
+
+if __name__ == "__main__":
+    main()

scripts/start_project.py

@@ -0,0 +1,50 @@
+import os
+import subprocess
+import sys
+
+def main():
+    print("--- Vision.AI Standard Setup & Launch ---")
+    
+    # 1. Detect environment
+    project_root = os.getcwd()
+    venv_python = os.path.join(project_root, "venv", "Scripts", "python.exe")
+    
+    if os.path.exists(venv_python):
+        print(f"Detected Virtual Environment: {venv_python}")
+        python_exe = venv_python
+    else:
+        print("Warning: No virtual environment detected. Using system Python.")
+        python_exe = sys.executable
+        
+    # 2. Ensure basic requirements (checking if deepface exists first)
+    try:
+        subprocess.run([python_exe, "-c", "import deepface"], check=True, capture_output=True)
+        print("Required packages (deepface) already installed.")
+    except (subprocess.CalledProcessError, FileNotFoundError):
+        print("Installing dependencies from requirements.txt...")
+        # Note: We use --no-deps or specific install if global pip is broken, 
+        # but here we just try standard install first
+        subprocess.run([python_exe, "-m", "pip", "install", "-r", "requirements.txt"])
+    
+    # 3. Check for weights
+    print("\nChecking for ML weights...")
+    scripts_dir = os.path.join(project_root, "scripts")
+    download_script = os.path.join(scripts_dir, "download_weights.py")
+    
+    if os.path.exists(download_script):
+        subprocess.run([python_exe, download_script])
+    else:
+        print(f"[ERROR] Found no download script at {download_script}")
+    
+    # 4. Launch the app
+    print("\nLaunching Vision.AI Dashboard...")
+    print("Point your browser to http://127.0.0.1:5000")
+    print("Press CTRL+C to stop.")
+    
+    try:
+        subprocess.run([python_exe, "run.py"])
+    except KeyboardInterrupt:
+        print("\nStopping...")
+
+if __name__ == "__main__":
+    main()