German Diaz
germanbochelli
AI & ML interests
None yet
Recent Activity
new activity about 1 month ago
DevQuasar/nicoboss.Hermes-3-Llama-3.1-405B-Uncensored-GGUF:Update README.md new activity about 1 month ago
DevQuasar/nicoboss.Hermes-3-Llama-3.1-405B-Uncensored-GGUF:Update README.mdOrganizations
None yet
<!DOCTYPE html> <html lang="es-CL"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Planificador Académico Chile | Dashboard Año Escolar con IA</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <style> body { transition: background-color 0.3s ease, color 0.2s ease; } .card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-hover:hover { transform: translateY(-3px); box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.15); } .microphone-btn:active { transform: scale(0.97); } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; } .dark ::-webkit-scrollbar-track { background: #1e293b; } .dark ::-webkit-scrollbar-thumb { background: #475569; } </style> </head> <body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 font-sans"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4"> <div> <h1 class="text-3xl font-bold tracking-tight bg-gradient-to-r from-red-700 to-blue-700 bg-clip-text text-transparent dark:from-red-400 dark:to-blue-400">📘 Planificador Académico Chile + IA</h1> <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Tu éxito escolar impulsado por Inteligencia Artificial | Sistema 1.0 a 7.0</p> </div> <div class="flex items-center gap-3"> <button id="darkModeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition"> <i class="fas fa-moon dark:hidden text-lg"></i> <i class="fas fa-sun hidden dark:inline-block text-lg"></i> </button> <div class="text-sm font-medium bg-white dark:bg-gray-800 px-3 py-1 rounded-full shadow-sm border border-gray-200 dark:border-gray-700"> <i class="fas fa-calendar-alt mr-1 text-red-600"></i> <span id="fechaActual"></span> </div> </div> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="lg:col-span-2 space-y-6"> <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-md p-5 card-hover"> <div class="flex justify-between items-center flex-wrap border-b border-gray-200 dark:border-gray-700 pb-3 mb-4"> <h2 class="text-xl font-semibold"><i class="fas fa-chart-line text-blue-600 mr-2"></i> Gestor de Notas (ponderaciones Chile)</h2> <div class="flex gap-2"> <button id="voiceInputBtn" class="microphone-btn bg-red-600 hover:bg-red-700 text-white text-sm px-3 py-1.5 rounded-full shadow flex items-center gap-1 transition"><i class="fas fa-microphone"></i> Dictar Nota</button> </div> </div> <div class="overflow-x-auto"> <table class="min-w-full text-sm"> <thead class="bg-gray-100 dark:bg-gray-700 rounded-lg"> <tr class="text-left"> <th class="px-4 py-2">Asignatura</th> <th class="px-4 py-2">Nota (1.0-7.0)</th> <th class="px-4 py-2">Porcentaje %</th> <th class="px-4 py-2">Aporte</th> <th class="px-4 py-2"></th> </tr> </thead> <tbody id="tablaNotasBody"></tbody> </table> </div> <div class="mt-4 flex justify-end"> <button id="agregarMateriaBtn" class="text-sm bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-3 py-1.5 rounded-lg hover:bg-blue-200 transition"><i class="fas fa-plus mr-1"></i> Agregar materia</button> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-5 pt-3 border-t border-gray-200 dark:border-gray-700"> <div class="bg-blue-50 dark:bg-blue-900/30 p-3 rounded-xl text-center"> <p class="text-xs uppercase font-semibold">Promedio General</p> <p id="promedioGeneralVal" class="text-2xl font-bold">0.0</p> </div> <div class="bg-purple-50 dark:bg-purple-900/30 p-3 rounded-xl text-center"> <p class="text-xs uppercase font-semibold">NEM Simulado (1° a 4° Medio)</p> <p id="nemSimuladoVal" class="text-2xl font-bold">-</p> </div> <div class="bg-emerald-50 dark:bg-emerald-900/30 p-3 rounded-xl text-center"> <p class="text-xs uppercase font-semibold">Estado Académico</p> <p id="estadoAcademico" class="text-xl font-bold">-</p> </div> </div> </div> <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-md p-5 card-hover"> <h2 class="text-xl font-semibold mb-3"><i class="fas fa-calendar-check text-green-600 mr-2"></i> Control de Asistencia (mínimo 85%)</h2> <div class="flex flex-wrap gap-5 items-center"> <div class="flex-1 min-w-[180px]"> <label class="block text-sm font-medium">Días asistidos</label> <input type="number" id="asistenciaDias" class="w-full mt-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700" value="170" step="1"> <label class="block text-sm font-medium mt-2">Total días hábiles clase</label> <input type="number" id="totalDias" class="w-full mt-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700" value="200" step="1"> <button id="actualizarAsistencia" class="mt-3 w-full bg-green-600 hover:bg-green-700 text-white py-1.5 rounded-lg text-sm transition">Actualizar % Asistencia</button> </div> <div class="flex-1 text-center"> <div class="relative inline-flex items-center justify-center"> <svg width="140" height="140" viewBox="0 0 140 140"> <circle cx="70" cy="70" r="60" fill="none" stroke="#e2e8f0" stroke-width="12" /> <circle id="gaugeCircle" cx="70" cy="70" r="60" fill="none" stroke="#3b82f6" stroke-width="12" stroke-dasharray="377" stroke-dashoffset="377" stroke-linecap="round" transform="rotate(-90 70 70)" /> <text x="70" y="80" text-anchor="middle" class="text-2xl font-bold fill-current dark:fill-white" id="porcentajeAsistenciaTexto">85%</text> </svg> </div> <p class="text-sm mt-1 font-medium">Asistencia actual</p> <p id="mensajeAsistencia" class="text-xs text-gray-500"></p> </div> <div class="flex-1"> <div id="riesgoBox" class="p-3 rounded-xl text-center text-sm font-semibold shadow-inner">✅ Sin riesgo aparente</div> </div> </div> </div> <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-md p-5 card-hover"> <h2 class="text-xl font-semibold mb-2"><i class="fas fa-chart-simple text-indigo-500 mr-2"></i> Tendencia de Notas</h2> <canvas id="notasChart" width="400" height="200" class="max-h-56 w-full"></canvas> </div> </div> <div class="space-y-6"> <div class="bg-gradient-to-br from-indigo-900 to-slate-900 text-white rounded-2xl shadow-xl p-5 border border-indigo-700"> <h2 class="text-xl font-bold mb-2 flex items-center gap-2"> <i class="fas fa-brain text-purple-400 animate-pulse"></i> Tutor IA Escolar (Chile) </h2> <p class="text-xs text-indigo-200 mb-4">Pregúntale a la IA cómo salvar el año. Ella analizará tus notas automáticamente.</p> <div id="chatIARespuesta" class="bg-slate-800/80 p-3 rounded-xl border border-indigo-950/50 text-sm h-48 overflow-y-auto mb-3 space-y-2 text-slate-200"> <p class="text-xs text-purple-300">✨ <strong>Tutor IA:</strong> ¡Hola! Veo tus notas cargadas en el sistema. Haz clic en el botón de abajo para que analice tu estado académico actual o hazme una pregunta personalizada.</p> </div> <div class="space-y-2"> <input type="text" id="preguntaIAInput" placeholder="Ej: ¿Cómo subo el promedio de Mate?" class="w-full p-2 text-sm rounded-lg bg-slate-800 border border-indigo-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"> <div class="flex gap-2"> <button id="btnAnalizarEstadoIA" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white text-xs py-2 rounded-lg font-semibold transition flex items-center justify-center gap-1"> <i class="fas fa-wand-magic-sparkles"></i> Analizar Mis Notas </button> <button id="btnPreguntarIA" class="bg-indigo-600 hover:bg-indigo-700 text-white text-xs px-4 py-2 rounded-lg font-semibold transition"> Enviar </button> </div> </div> </div> <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-md p-5 card-hover"> <h2 class="text-xl font-semibold mb-3"><i class="fas fa-tasks text-teal-600 mr-2"></i> Compañero de Estudio</h2> <div class="mb-3 flex gap-2"> <input type="text" id="nuevaTareaInput" placeholder="Ej: Ensayo de Matemáticas" class="flex-1 p-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700"> <button id="agregarTareaBtn" class="bg-teal-600 hover:bg-teal-700 text-white px-3 rounded-lg text-sm"><i class="fas fa-plus"></i></button> </div> <ul id="listaTareas" class="space-y-2 max-h-32 overflow-y-auto text-sm"></ul> </div> </div> </div> </div> <script> let materias = [ { nombre: "Matemáticas", nota: 5.5, porcentaje: 30 }, { nombre: "Lenguaje", nota: 3.8, porcentaje: 25 }, { nombre: "Ciencias", nota: 5.0, porcentaje: 25 }, { nombre: "Historia", nota: 4.2, porcentaje: 20 } ]; let tareas = ["📘 Estudiar función cuadrática", "📝 Ensayo de Lenguaje - miércoles"]; let asistencia = { asistidos: 170, total: 200 }; let chartInstance = null; function calcularPromedioPonderado() { let sumaPonderada = 0; let sumaPorcentajes = 0; materias.forEach(m => { sumaPonderada += (m.nota * (m.porcentaje / 100)); sumaPorcentajes += m.porcentaje; }); if (sumaPorcentajes === 0) return 0; return (sumaPonderada / (sumaPorcentajes / 100)); } function calcularPorcentajeAsistencia() { if (asistencia.total === 0) return 0; return (asistencia.asistidos / asistencia.total) * 100; } function determinarEstadoGlobal() { let promedio = calcularPromedioPonderado(); let asistPorc = calcularPorcentajeAsistencia(); if (promedio >= 4.0 && asistPorc >= 85) return { texto: "✅ APROBANDO", color: "text-green-600 dark:text-green-400" }; if (promedio < 4.0 && asistPorc < 85) return { texto: "⚠️ RIESGO DE REPETIR", color: "text-red-600" }; if (promedio < 4.0) return { texto: "📉 RIESGO POR NOTAS", color: "text-orange-600" }; return { texto: "⚠️ RIESGO ASISTENCIA", color: "text-yellow-600" }; } function actualizarUI() { const tbody = document.getElementById("tablaNotasBody"); tbody.innerHTML = ""; materias.forEach((m, idx) => { const row = tbody.insertRow(); row.className = "border-b border-gray-100 dark:border-gray-700"; row.innerHTML = ` <td class="px-4 py-2 font-medium">${m.nombre}</td> <td class="px-4 py-2"><input type="number" step="0.1" min="1.0" max="7.0" value="${m.nota}" class="nota-input w-20 p-1 border rounded dark:bg-gray-700" data-index="${idx}"></td> <td class="px-4 py-2"><input type="number" step="5" min="0" max="100" value="${m.porcentaje}" class="porc-input w-20 p-1 border rounded dark:bg-gray-700" data-index="${idx}"> %</td> <td class="px-4 py-2">${(m.nota * (m.porcentaje/100)).toFixed(2)}</td> <td class="px-4 py-2"><button class="eliminar-materia text-red-500 hover:text-red-700" data-index="${idx}"><i class="fas fa-trash-alt"></i></button></td> `; }); document.querySelectorAll('.nota-input').forEach(inp => { inp.addEventListener('change', (e) => { let idx = e.target.dataset.index; let val = parseFloat(e.target.value); materias[idx].nota = !isNaN(val) ? Math.min(7, Math.max(1, val)) : 4.0; actualizarTodo(); }); }); document.querySelectorAll('.porc-input').forEach(inp => { inp.addEventListener('change', (e) => { let idx = e.target.dataset.index; let val = parseInt(e.target.value); materias[idx].porcentaje = !isNaN(val) ? Math.min(100, Math.max(0, val)) : 0; actualizarTodo(); }); }); document.querySelectorAll('.eliminar-materia').forEach(btn => { btn.addEventListener('click', (e) => { materias.splice(btn.dataset.index, 1); actualizarTodo(); }); }); let promedio = calcularPromedioPonderado(); document.getElementById("promedioGeneralVal").innerHTML = promedio.toFixed(2); document.getElementById("nemSimuladoVal").innerHTML = promedio > 0 ? promedio.toFixed(2) : "---"; const estado = determinarEstadoGlobal(); document.getElementById("estadoAcademico").innerHTML = `<span class="${estado.color}">${estado.texto}</span>`; let asistenciaPorc = calcularPorcentajeAsistencia(); document.getElementById("porcentajeAsistenciaTexto").innerHTML = `${Math.round(asistenciaPorc)}%`; let circumference = 2 * Math.PI * 60; if(document.getElementById("gaugeCircle")) { document.getElementById("gaugeCircle").setAttribute("stroke-dashoffset", circumference - (asistenciaPorc / 100) * circumference); } let riesgoBox = document.getElementById("riesgoBox"); if (asistenciaPorc < 85 || promedio < 4.0) { riesgoBox.innerHTML = "⚠️ ALERTA: Revisa asistencia o notas."; riesgoBox.className = "p-3 rounded-xl text-center text-sm font-semibold bg-red-100 text-red-800 dark:bg-red-900/40"; } else { riesgoBox.innerHTML = "✅ ¡Vas bien encaminado!"; riesgoBox.className = "p-3 rounded-xl text-center text-sm font-semibold bg-green-100 text-green-800 dark:bg-green-900/40"; } actualizarChart(); } function actualizarChart() { const ctx = document.getElementById('notasChart').getContext('2d'); let notasVals = materias.map(m => m.nota); const labels = materias.map(m => m.nombre.substring(0,12)); if (chartInstance) chartInstance.destroy(); chartInstance = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'Nota actual', data: notasVals, borderColor: '#f97316', backgroundColor: 'rgba(249,115,22,0.1)', tension: 0.2, fill: true }] }, options: { responsive: true, scales: { y: { min: 1, max: 7 } } } }); } function actualizarTodo() { actualizarUI(); } document.getElementById("actualizarAsistencia").addEventListener("click", () => { let asis = parseInt(document.getElementById("asistenciaDias").value); let tot = parseInt(document.getElementById("totalDias").value); asistencia.asistidos = !isNaN(asis) ? asis : 0; asistencia.total = !isNaN(tot) && tot > 0 ? tot : 1; actualizarTodo(); Swal.fire("Asistencia", "Actualizada correctamente", "success"); }); document.getElementById("agregarMateriaBtn").addEventListener("click", () => { let newName = prompt("Nombre de la asignatura:"); if (newName) { materias.push({ nombre: newName, nota: 5.0, porcentaje: 20 }); actualizarTodo(); } }); function renderTareas() { const ul = document.getElementById("listaTareas"); ul.innerHTML = ""; tareas.forEach((t, idx) => { ul.innerHTML += `<li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-2 rounded-lg"><span>${t}</span><button onclick="tareas.splice(${idx},1); renderTareas();" class="text-red-500"><i class="fas fa-times-circle"></i></button></li>`; }); } document.getElementById("agregarTareaBtn").addEventListener("click", () => { let t = document.getElementById("nuevaTareaInput").value; if(t) { tareas.push(t); document.getElementById("nuevaTareaInput").value=""; renderTareas(); } }); // RECONOCIMIENTO DE VOZ CHILE const voiceBtn = document.getElementById("voiceInputBtn"); let recognition = null; if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) { recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); recognition.lang = 'es-CL'; } voiceBtn.addEventListener("click", () => { if (!recognition) { Swal.fire("Error", "Navegador no compatible", "error"); return; } recognition.start(); Swal.fire({ title: "Escuchando...", text: "Ej: 'Me saqué un 6.5 en Matemáticas'", icon: "info", showConfirmButton: false, timer: 3000 }); recognition.onresult = (event) => { const transcript = event.results[0][0].transcript.toLowerCase(); procesarComandoVoz(transcript); }; }); function procesarComandoVoz(texto) { const notaMatch = texto.match(/(\d+[\.,]\d+|\d+)/); if (!notaMatch) { Swal.fire("Aviso", "No entendí la nota", "warning"); return; } let notaVal = parseFloat(notaMatch[0].replace(',', '.')); if(notaVal > 7) notaVal = notaVal / 10; let materiaNombre = "Asignatura"; let afterEn = texto.match(/en\s+([a-záéíóúñ]+)/i); if (afterEn) materiaNombre = afterEn[1]; let porcMatch = texto.match(/(\d+)\s*(?:%|por ciento)/); let porcentaje = porcMatch ? parseInt(porcMatch[1]) : 20; materias.push({ nombre: materiaNombre.charAt(0).toUpperCase() + materiaNombre.slice(1), nota: notaVal, porcentaje: porcentaje }); actualizarTodo(); Swal.fire("¡Nota Agregada!", `Asignatura: ${materiaNombre}`, "success"); } // ================= CONEXIÓN DE IA GRATUITA (Hugging Face API) ================= async function consultarIA(promptUsuario) { const cajaChat = document.getElementById("chatIARespuesta"); cajaChat.innerHTML += `<p class="text-xs text-indigo-400">🧠 Pensando...</p>`; cajaChat.scrollTop = cajaChat.scrollHeight; // Preparamos los datos del alumno actuales para inyectárselos a la IA const infoMaterias = materias.map(m => `${m.nombre}: nota ${m.nota} (${m.porcentaje}%)`).join(", "); const promedio = calcularPromedioPonderado().toFixed(2); const asis = calcularPorcentajeAsistencia().toFixed(0); // Contexto ultra específico chileno const contextoPrompt = `Eres un tutor de IA escolar experto en el sistema de educación de Chile (notas escala 1.0 a 7.0, aprobación con nota 4.0 y asistencia mínima obligatoria del 85%). Datos actuales del alumno: Promedio General ${promedio}, Asistencia ${asis}%. Asignaturas cargadas: [${infoMaterias}]. Pregunta o solicitud del alumno: "${promptUsuario}". Responde de manera muy motivadora, breve (máximo 3 líneas), usando modismos chilenos suaves pero amigables (como "repasar al tiro", "ojo con quedarse repitiendo", "salvar el año", "ponerle pino"). Dame solo tu respuesta final directa de tutor escolar chileno.`; try { // Usamos un endpoint público gratuito de Hugging Face para modelos rápidos de texto const respuesta = await fetch("https://api-inference.huggingface.co/models/HuggingFaceH4/zephyr-7b-beta", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ inputs: contextoPrompt, parameters: { max_new_tokens: 150, temperature: 0.7 } }) }); const data = await respuesta.json(); let textoIA = ""; if (data && data[0] && data[0].generated_text) { // Limpiamos el prompt del resultado textoIA = data[0].generated_text.replace(contextoPrompt, "").trim(); } else { textoIA = "¡Chuta! No pude conectar con el servidor central de la IA. Pero mirando tus notas, te aconsejo que te enfoques en subir los rojos de inmediato y no faltar más a clases para asegurar ese 85%."; } // Remover el mensaje de "Pensando..." y poner la respuesta real cajaChat.innerHTML = cajaChat.innerHTML.replace(`<p class="text-xs text-indigo-400">🧠 Pensando...</p>`, ""); cajaChat.innerHTML += `<p class="text-xs text-purple-300">✨ <strong>Tutor IA:</strong> ${textoIA}</p>`; cajaChat.scrollTop = cajaChat.scrollHeight; } catch (error) { cajaChat.innerHTML = cajaChat.innerHTML.replace(`<p class="text-xs text-indigo-400">🧠 Pensando...</p>`, ""); cajaChat.innerHTML += `<p class="text-xs text-red-400">❌ Error al conectar con la IA externa.</p>`; } } // Listeners de los botones de la IA document.getElementById("btnAnalizarEstadoIA").addEventListener("click", () => { consultarIA("Hazme un análisis completo de cómo voy para pasar de año con estas notas y qué tengo que hacer para salvar el semestre."); }); document.getElementById("btnPreguntarIA").addEventListener("click", () => { const input = document.getElementById("preguntaIAInput"); if (input.value.trim() !== "") { consultarIA(input.value.trim()); input.value = ""; } }); const darkToggle = document.getElementById("darkModeToggle"); darkToggle.addEventListener("click", () => document.body.classList.toggle("dark")); document.getElementById("fechaActual").innerHTML = new Date().toLocaleDateString('es-CL', { day: 'numeric', month: 'long', year: 'numeric' }); actualizarTodo(); renderTareas(); </script> </body> </html>
#2 opened about 1 month ago
by germanbochelli
Update README.md
1
#1 opened about 1 month ago
by germanbochelli
Update README.md
1
#1 opened about 1 month ago
by germanbochelli