Improving navigation settings and tutorials descriptions

app/main.py

@@ -43,6 +43,17 @@ app = Flask(__name__)
 app.config['SECRET_KEY'] = os.getenv("SECRET_KEY", "maker-secret-key")
 socketio = SocketIO(app, cors_allowed_origins="*")
 
+# DEBUG: Verificar si los modelos existen
+try:
+    model_path = os.path.join(app.root_path, 'static', 'models')
+    if os.path.exists(model_path):
+        print(f"[DEBUG] Models directory found at: {model_path}")
+        print(f"[DEBUG] Files: {os.listdir(model_path)}")
+    else:
+        print(f"[DEBUG] ERROR: Models directory NOT found at {model_path}")
+except Exception as e:
+    print(f"[DEBUG] Error checking models: {e}")
+
 # --- GESTIÓN DE USUARIOS (Flask-Login) ---
 login_manager = LoginManager()
 login_manager.init_app(app)
@@ -701,6 +712,22 @@ def asistencia():
 def tutoria():
     return render_template('tutoria.html', title="Tutoría y Guías")
 
+@app.route('/guia/registro')
+def guia_registro():
+    return render_template('guia_registro.html', title="Guía de Registro")
+
+@app.route('/guia/herramientas')
+def guia_herramientas():
+    return render_template('guia_herramientas.html', title="Guía de Herramientas")
+
+@app.route('/guia/asistencia')
+def guia_asistencia():
+    return render_template('guia_asistencia.html', title="Guía de Asistencia")
+
+@app.route('/guia/gestion')
+def guia_gestion():
+    return render_template('guia_gestion.html', title="Guía de Gestión")
+
 @app.route('/api/faces', methods=['GET', 'POST'])
 def api_faces():
     if request.method == 'POST':

app/templates/asistencia.html

@@ -64,7 +64,10 @@
     async function init() {
         try {
             // Usar modelos locales con path dinámico de Flask
-            const MODEL_URL = "{{ url_for('static', filename='models') }}";
+            // Forzar slash final para que no concatene mal (ej: ...modelsmanifest.json)
+            const MODEL_URL = "{{ url_for('static', filename='models') }}" + "/";
+            console.log("Loading models from:", MODEL_URL);
+
             await Promise.all([
                 faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
                 faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
@@ -75,7 +78,8 @@
             startVideo();
         } catch (err) {
             console.error("Error inicializando Face API:", err);
-            alert("No se pudieron cargar los modelos de IA.");
+            // Mostrar error detallado para depuración
+            alert("Error cargando modelos de IA: " + err.message + "\nRuta intentada: " + "{{ url_for('static', filename='models') }}");
         }
     }
 

app/templates/guia_asistencia.html

@@ -0,0 +1,35 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="hero section">
+    <h1>ASISTENCIA CON IA</h1>
+    <p class="text-dim">Registro automático mediante reconocimiento facial.</p>
+</div>
+
+<div class="glass" style="padding: 2rem; border-radius: 1rem; max-width: 800px; margin: 0 auto;">
+    <div style="margin-bottom: 2rem;">
+        <h2>1. Registro de Rostro (Primera vez)</h2>
+        <p> Antes de usar el sistema, la IA debe aprender a reconocerte.</p>
+        <ol style="margin-left: 1.5rem; margin-top: 1rem; color: var(--text-dim);">
+            <li>Ve al apartado de <strong>Asistencia</strong>.</li>
+            <li>Selecciona la opción <strong>REGISTRAR ROSTRO</strong>.</li>
+            <li>Escribe tu nombre completo.</li>
+            <li>Mira a la cámara hasta que el recuadro te detecte y pulsa "GUARDAR".</li>
+        </ol>
+    </div>
+
+    <div style="margin-bottom: 2rem;">
+        <h2>2. Marcar Asistencia Diaria</h2>
+        <p>Simplemente entra al modo asistencia.</p>
+        <ul style="margin-left: 1.5rem; margin-top: 1rem; color: var(--text-dim);">
+            <li>La cámara detectará tu rostro y mostrará tu nombre.</li>
+            <li>El sistema registrará tu entrada automáticamente (una vez cada 30 segundos máximo).</li>
+            <li>Recibirás una confirmación visual en pantalla.</li>
+        </ul>
+    </div>
+
+    <button onclick="window.location.href='/tutoria'" class="btn glass">
+        <i class="fas fa-arrow-left"></i> Volver a Tutorías
+    </button>
+</div>
+{% endblock %}

app/templates/guia_gestion.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="hero section">
+    <h1>GESTIÓN DE PRÉSTAMOS</h1>
+    <p class="text-dim">Guía para maestros y administradores del Maker Space.</p>
+</div>
+
+<div class="glass" style="padding: 2rem; border-radius: 1rem; max-width: 800px; margin: 0 auto;">
+    <div style="margin-bottom: 2rem;">
+        <h2>1. Recepción de Solicitudes</h2>
+        <p>Las solicitudes de los alumnos llegan por dos vías:</p>
+        <ul style="margin-left: 1.5rem; margin-top: 1rem; color: var(--text-dim);">
+            <li><strong>Telegram:</strong> Recibirás un mensaje con los detalles y botones para Aceptar/Rechazar.</li>
+            <li><strong>Panel Web:</strong> En la sección de Préstamos verás la lista de solicitudes pendientes.</li>
+        </ul>
+    </div>
+
+    <div style="margin-bottom: 2rem;">
+        <h2>2. Proceso de Aprobación</h2>
+        <ol style="margin-left: 1.5rem; margin-top: 1rem; color: var(--text-dim);">
+            <li>Revisa la disponibilidad del material solicitado.</li>
+            <li>Si todo está correcto, pulsa <strong>Aceptar</strong>. El alumno será notificado.</li>
+            <li>Cuando el alumno devuelva el material, marca la solicitud como <strong>ENTREGADO</strong>.</li>
+        </ol>
+    </div>
+
+    <button onclick="window.location.href='/tutoria'" class="btn glass">
+        <i class="fas fa-arrow-left"></i> Volver a Tutorías
+    </button>
+</div>
+{% endblock %}

app/templates/guia_herramientas.html

@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="hero section">
+    <h1>SOLICITUD DE HERRAMIENTAS</h1>
+    <p class="text-dim">Cómo pedir prestado equipo del inventario.</p>
+</div>
+
+<div class="glass" style="padding: 2rem; border-radius: 1rem; max-width: 800px; margin: 0 auto;">
+    <div style="margin-bottom: 2rem;">
+        <h2>1. Realizar una Solicitud</h2>
+        <p>Desde la sección de <strong>Préstamos</strong> puedes ver el catálogo disponible.</p>
+        <ol style="margin-left: 1.5rem; margin-top: 1rem; color: var(--text-dim);">
+            <li>Selecciona las herramientas que necesitas (Arduino, Impresora 3D, Herremientas manuales, etc.).</li>
+            <li>Define la <strong>Hora de Salida</strong> y <strong>Hora de Retorno</strong> estimada.</li>
+            <li>Envía la solicitud. Esta llegará inmediatamente al grupo de Telegram de los maestros.</li>
+        </ol>
+    </div>
+
+    <div style="margin-bottom: 2rem;">
+        <h2>2. Aprobación y Entrega</h2>
+        <p>Espera a que un maestro apruebe tu solicitud.</p>
+        <ul style="margin-left: 1.5rem; margin-top: 1rem; color: var(--text-dim);">
+            <li>Verás el estado de tu préstamo cambiar a <span style="color:#10b981">ACEPTADO</span>.</li>
+            <li>Acércate al encargado para recibir el material.</li>
+            <li>Al terminar, asegúrate de devolver todo en el mismo estado.</li>
+        </ul>
+    </div>
+
+    <button onclick="window.location.href='/tutoria'" class="btn glass">
+        <i class="fas fa-arrow-left"></i> Volver a Tutorías
+    </button>
+</div>
+{% endblock %}

app/templates/guia_registro.html

@@ -0,0 +1,35 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="hero section">
+    <h1>PRIMEROS PASOS</h1>
+    <p class="text-dim">Guía básica para nuevos miembros del Maker Space.</p>
+</div>
+
+<div class="glass" style="padding: 2rem; border-radius: 1rem; max-width: 800px; margin: 0 auto;">
+    <div style="margin-bottom: 2rem;">
+        <h2>1. Registro en la Plataforma</h2>
+        <p>Para acceder a las herramientas y registrar tu asistencia, necesitas una cuenta activa.</p>
+        <ol style="margin-left: 1.5rem; margin-top: 1rem; color: var(--text-dim);">
+            <li>Ve a la página de <strong>Login</strong> y selecciona "Registrarse".</li>
+            <li>Ingresa tu nombre completo y un correo electrónico válido.</li>
+            <li>Tu cuenta quedará en estado <strong>Pendiente</strong> hasta que un maestro la apruebe.</li>
+            <li>Recibirás una notificación (o podrás intentar entrar) una vez seas aprobado.</li>
+        </ol>
+    </div>
+
+    <div style="margin-bottom: 2rem;">
+        <h2>2. Normas del Espacio</h2>
+        <p>El Maker Space es un lugar de colaboración y respeto.</p>
+        <ul style="margin-left: 1.5rem; margin-top: 1rem; color: var(--text-dim);">
+            <li>Mantén el área limpia y ordenada.</li>
+            <li>Pide ayuda si no sabes usar una herramienta.</li>
+            <li>Registra siempre tu asistencia al entrar.</li>
+        </ul>
+    </div>
+
+    <button onclick="window.location.href='/tutoria'" class="btn glass">
+        <i class="fas fa-arrow-left"></i> Volver a Tutorías
+    </button>
+</div>
+{% endblock %}

app/templates/tutoria.html

@@ -26,22 +26,28 @@
                     <h3>🚀 Primeros Pasos</h3>
                     <p class="text-dim">Cómo registrarte y acceder al espacio.</p>
                 </div>
-                <button class="btn glass">Ver Guía</button>
+                <button onclick="window.location.href='/guia/registro'" class="btn glass">Ver Guía</button>
             </li>
             <li class="repo-item glass">
                 <div style="flex: 1;">
                     <h3>🛠 Solicitud de Herramientas</h3>
                     <p class="text-dim">Proceso para pedir prestada una herramienta.</p>
                 </div>
-                <button onclick="window.location.href='/prestamos'" class="btn glass">Ir a Préstamos</button>
+                <div style="display: flex; gap: 0.5rem;">
+                    <button onclick="window.location.href='/guia/herramientas'" class="btn glass">Guía</button>
+                    <button onclick="window.location.href='/prestamos'" class="btn glass">Ir a Préstamos</button>
+                </div>
             </li>
             <li class="repo-item glass">
                 <div style="flex: 1;">
                     <h3>🤖 Asistencia (IA)</h3>
                     <p class="text-dim">Registra tu asistencia usando reconocimiento facial.</p>
                 </div>
-                <button onclick="window.location.href='/asistencia'" class="btn glass"
-                    style="background: rgba(16, 185, 129, 0.2); border-color: #10b981;">Registrar</button>
+                <div style="display: flex; gap: 0.5rem;">
+                    <button onclick="window.location.href='/guia/asistencia'" class="btn glass">Guía</button>
+                    <button onclick="window.location.href='/asistencia'" class="btn glass"
+                        style="background: rgba(16, 185, 129, 0.2); border-color: #10b981;">Registrar</button>
+                </div>
             </li>
         </ul>
     </div>
@@ -53,7 +59,10 @@
                     <h3>📦 Aprobación de Préstamos</h3>
                     <p class="text-dim">Administrar solicitudes de equipo de los miembros.</p>
                 </div>
-                <button onclick="window.location.href='/prestamos'" class="btn glass">Administrar</button>
+                <div style="display: flex; gap: 0.5rem;">
+                    <button onclick="window.location.href='/guia/gestion'" class="btn glass">Guía</button>
+                    <button onclick="window.location.href='/prestamos'" class="btn glass">Administrar</button>
+                </div>
             </li>
         </ul>
     </div>