CLASSROOMMAKER TOOL create

app/main.py

@@ -311,6 +311,43 @@ class LoanManager(HFDatasetManager):
 
 loan_mgr = LoanManager()
 
+# --- GESTOR DE ROSTROS (Asistencia) ---
+class FaceManager(HFDatasetManager):
+    """Clase para manejar descriptores de rostros para asistencia."""
+    
+    def __init__(self):
+        super().__init__(
+            dataset_name="HF_DATASET_FACES",
+            data_key="faces",
+            local_filename="faces.json"
+        )
+        self.faces = self._load()
+    
+    def _load(self):
+        if self.use_hf:
+            data = self._load_from_hf()
+            if data is not None:
+                return data
+        return self._load_from_local()
+
+    def save(self):
+        self._save_to_local(self.faces)
+        if self.use_hf:
+            self._save_to_hf(self.faces)
+
+    def add_face(self, label, descriptor):
+        # El descriptor es una lista de 128 floats (face-api.js)
+        self.faces.append({
+            "label": label,
+            "descriptor": descriptor
+        })
+        self.save()
+
+    def get_all(self):
+        return self.faces
+
+face_mgr = FaceManager()
+
 # --- INTEGRACIÓN CON TELEGRAM ---
 TG_TOKEN = os.getenv("TELEGRAM_TOKEN")
 TG_CHAT_ID = os.getenv("TELEGRAM_CHAT_ID")
@@ -611,6 +648,44 @@ def prestamos():
     loans = loan_mgr.get_all()
     return render_template('prestamos.html', title="Préstamos", loans=loans)
 
+# --- CLASSROOM MAKER ---
+
+@app.route('/classroom')
+@login_required
+def classroom():
+    return render_template('classroom.html', title="Classroom Maker")
+
+@app.route('/asistencia')
+@login_required
+def asistencia():
+    return render_template('asistencia.html', title="Toma de Asistencia")
+
+@app.route('/api/faces', methods=['GET', 'POST'])
+@login_required
+def api_faces():
+    if request.method == 'POST':
+        data = request.json
+        label = data.get('label')
+        descriptor = data.get('descriptor')
+        if label and descriptor:
+            face_mgr.add_face(label, descriptor)
+            return jsonify({"status": "success"})
+        return jsonify({"status": "error", "message": "Datos faltantes"}), 400
+    
+    return jsonify(face_mgr.get_all())
+
+@app.route('/api/attendance', methods=['POST'])
+@login_required
+def api_record_attendance():
+    data = request.json
+    label = data.get('label')
+    if label:
+        # Aquí se podría guardar en un historial de asistencia
+        print(f"[ASISTENCIA] {label} presente a las {datetime.datetime.now()}")
+        socketio.emit('notification', {"text": f"Asistencia: {label} registrado", "color": "green"})
+        return jsonify({"status": "success"})
+    return jsonify({"status": "error"}), 400
+
 @app.route('/api/prestamo', methods=['POST'])
 def api_prestamo():
     data = request.json

app/templates/asistencia.html

@@ -0,0 +1,229 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="hero section">
+    <h1>TOMA DE ASISTENCIA</h1>
+    <p class="text-dim">Reconocimiento facial en tiempo real para el Maker Space.</p>
+</div>
+
+<div class="attendance-container glass" style="padding: 2rem; border-radius: 1rem; max-width: 800px; margin: 0 auto;">
+    <div id="loading-overlay" style="text-align: center; padding: 2rem;">
+        <i class="fas fa-spinner fa-spin fa-3x" style="color: #38bdf8;"></i>
+        <p style="margin-top: 1rem;">Cargando modelos de IA...</p>
+    </div>
+
+    <div id="camera-container"
+        style="position: relative; display: none; margin-bottom: 2rem; border-radius: 0.5rem; overflow: hidden; background: #000;">
+        <video id="video" width="720" height="560" autoplay muted
+            style="width: 100%; height: auto; display: block;"></video>
+        <canvas id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
+    </div>
+
+    <div class="controls-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
+        <button id="btn-attendance" class="btn glass active" style="background: #10b981; color: white;">
+            <i class="fas fa-id-card"></i> MODO ASISTENCIA
+        </button>
+        <button id="btn-register" class="btn glass">
+            <i class="fas fa-user-plus"></i> REGISTRAR ROSTRO
+        </button>
+    </div>
+
+    <div id="register-form"
+        style="display: none; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem;">
+        <h3>Nuevo Registro</h3>
+        <p class="text-dim">Mira a la cámara y escribe tu nombre.</p>
+        <div style="display: flex; gap: 1rem; margin-top: 1rem;">
+            <input type="text" id="user-name" class="glass" placeholder="Tu nombre completo"
+                style="flex: 1; padding: 0.8rem; border: none; outline: none; color: white;">
+            <button id="btn-save-face" class="btn" style="background: #38bdf8; color: white;">GUARDAR</button>
+        </div>
+    </div>
+</div>
+
+<!-- Scripts de Face API -->
+<script defer src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
+
+<script>
+    const video = document.getElementById('video');
+    const overlay = document.getElementById('overlay');
+    const loadingOverlay = document.getElementById('loading-overlay');
+    const cameraContainer = document.getElementById('camera-container');
+    const btnAttendance = document.getElementById('btn-attendance');
+    const btnRegister = document.getElementById('btn-register');
+    const registerForm = document.getElementById('register-form');
+    const btnSaveFace = document.getElementById('btn-save-face');
+    const userNameInput = document.getElementById('user-name');
+
+    let mode = 'attendance'; // 'attendance' o 'register'
+    let labeledFaceDescriptors = [];
+    let faceMatcher = null;
+    let detectionActive = false;
+    let currentDescriptor = null;
+
+    // Cargar modelos y arrancar
+    async function init() {
+        try {
+            const MODEL_URL = 'https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights';
+            await Promise.all([
+                faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
+                faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
+                faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL)
+            ]);
+
+            await loadSavedFaces();
+            startVideo();
+        } catch (err) {
+            console.error("Error inicializando Face API:", err);
+            alert("No se pudieron cargar los modelos de IA.");
+        }
+    }
+
+    async function loadSavedFaces() {
+        const res = await fetch('/api/faces');
+        const data = await res.json();
+
+        if (data.length > 0) {
+            labeledFaceDescriptors = data.map(df => {
+                // El descriptor se guarda como array simple en JSON
+                const desc = new Float32Array(df.descriptor);
+                return new faceapi.LabeledFaceDescriptors(df.label, [desc]);
+            });
+            faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6);
+        }
+    }
+
+    function startVideo() {
+        navigator.mediaDevices.getUserMedia({ video: {} })
+            .then(stream => {
+                video.srcObject = stream;
+                loadingOverlay.style.display = 'none';
+                cameraContainer.style.display = 'block';
+                detectionActive = true;
+                onPlay();
+            })
+            .catch(err => {
+                console.error("Error acceso cámara:", err);
+                alert("Es necesario acceso a la cámara.");
+            });
+    }
+
+    async function onPlay() {
+        if (!detectionActive) return;
+
+        const displaySize = { width: video.clientWidth, height: video.clientHeight };
+        faceapi.matchDimensions(overlay, displaySize);
+
+        setInterval(async () => {
+            if (!detectionActive) return;
+
+            const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
+                .withFaceLandmarks()
+                .withFaceDescriptors();
+
+            const resizedDetections = faceapi.resizeResults(detections, displaySize);
+            const ctx = overlay.getContext('2d');
+            ctx.clearRect(0, 0, overlay.width, overlay.height);
+
+            if (mode === 'attendance' && faceMatcher && detections.length > 0) {
+                const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor));
+                results.forEach((result, i) => {
+                    const box = resizedDetections[i].detection.box;
+                    const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() });
+                    drawBox.draw(overlay);
+
+                    if (result.label !== 'unknown') {
+                        // Enviar asistencia si no se ha enviado recientemente
+                        throttleAttendance(result.label);
+                    }
+                });
+            } else if (mode === 'register' && detections.length > 0) {
+                const box = resizedDetections[0].detection.box;
+                new faceapi.draw.DrawBox(box, { label: "Listo para registrar" }).draw(overlay);
+                currentDescriptor = detections[0].descriptor;
+            } else {
+                faceapi.draw.drawDetections(overlay, resizedDetections);
+            }
+        }, 300);
+    }
+
+    let lastAttendance = {};
+    function throttleAttendance(label) {
+        const now = Date.now();
+        if (!lastAttendance[label] || (now - lastAttendance[label] > 30000)) { // 30 seg
+            lastAttendance[label] = now;
+            fetch('/api/attendance', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ label: label })
+            });
+        }
+    }
+
+    // UI Events
+    btnAttendance.addEventListener('click', () => {
+        mode = 'attendance';
+        btnAttendance.classList.add('active');
+        btnRegister.classList.remove('active');
+        registerForm.style.display = 'none';
+        btnAttendance.style.background = '#10b981';
+        btnRegister.style.background = 'rgba(255,255,255,0.05)';
+    });
+
+    btnRegister.addEventListener('click', () => {
+        mode = 'register';
+        btnRegister.classList.add('active');
+        btnAttendance.classList.remove('active');
+        registerForm.style.display = 'block';
+        btnRegister.style.background = '#38bdf8';
+        btnAttendance.style.background = 'rgba(255,255,255,0.05)';
+    });
+
+    btnSaveFace.addEventListener('click', async () => {
+        const name = userNameInput.value.trim();
+        if (!name || !currentDescriptor) {
+            alert("Escribe un nombre y asegúrate de que tu rostro es visible.");
+            return;
+        }
+
+        btnSaveFace.disabled = true;
+        btnSaveFace.innerText = "GUARDANDO...";
+
+        const response = await fetch('/api/faces', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                label: name,
+                descriptor: Array.from(currentDescriptor)
+            })
+        });
+
+        if (response.ok) {
+            alert("Rostro registrado con éxito.");
+            userNameInput.value = "";
+            await loadSavedFaces();
+            btnAttendance.click();
+        } else {
+            alert("Error al guardar.");
+        }
+        btnSaveFace.disabled = false;
+        btnSaveFace.innerText = "GUARDAR";
+    });
+
+    init();
+</script>
+
+<style>
+    .btn.active {
+        border: 1px solid white;
+    }
+
+    .controls-grid .btn {
+        padding: 1rem;
+        border-radius: 0.5rem;
+    }
+
+    input.glass::placeholder {
+        color: rgba(255, 255, 255, 0.4);
+    }
+</style>
+{% endblock %}

app/templates/base.html

@@ -37,6 +37,7 @@
             <div class="nav-links">
                 <a href="/prestamos" class="nav-item">PRÉSTAMOS</a>
                 <a href="/repos" class="nav-item">PROYECTOS</a>
+                <a href="/classroom" class="nav-item">AULAS</a>
 
                 <!-- Botón de Logout (solo si el usuario está autenticado) -->
                 {% if current_user.is_authenticated %}

app/templates/classroom.html

@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="hero section">
+    <h1>CLASSROOM MAKER</h1>
+    <p class="text-dim">Gestión inteligente de aulas y asistencia en tiempo real.</p>
+</div>
+
+<div class="card-grid">
+    <!-- Tarjeta para Toma de Asistencia -->
+    <a href="/asistencia" class="card glass" style="border-bottom: 4px solid #10b981;">
+        <i class="fas fa-user-check"></i>
+        <h2>TOMA DE ASISTENCIA</h2>
+        <p class="text-dim">Usa reconocimiento facial para registrar la asistencia del aula.</p>
+    </a>
+
+    <!-- Tarjeta para Configuración de Aula (Próximamente) -->
+    <div class="card glass" style="opacity: 0.7; cursor: not-allowed;">
+        <i class="fas fa- chalkboard"></i>
+        <h2>GESTIÓN DE AULAS</h2>
+        <p class="text-dim">Configura horarios y grupos (Próximamente).</p>
+    </div>
+</div>
+
+<div style="margin-top: 3rem; text-align: center;">
+    <a href="/" class="btn glass"><i class="fas fa-arrow-left"></i> Volver al Inicio</a>
+</div>
+{% endblock %}

app/templates/index.html

@@ -22,5 +22,12 @@
         <h2>SISTEMA PRÉSTAMOS</h2>
         <p class="text-dim">Solicita herramientas y dispositivos para tus proyectos.</p>
     </a>
+
+    <!-- Tarjeta para Classroom Maker -->
+    <a href="/classroom" class="card glass" style="border-bottom: 4px solid #10b981;">
+        <i class="fas fa-chalkboard-teacher"></i>
+        <h2>CLASSROOM MAKER</h2>
+        <p class="text-dim">Control de asistencia y gestión de aulas inteligentes.</p>
+    </a>
 </div>
 {% endblock %}