Hamza/saqel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement Zero-Touch Autonomous Forensic AI Video & Curriculum Analyzer (Gemini timeline chaptering, strictly chronological Socratic checkpoints, and curriculum grounding)

Browse Source
This commit is contained in:
Hamza-Ayed
2026-08-28 01:42:59 +03:00
parent 54ceab1aae
commit 4d01962cf8
5 changed files with 450 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/Views/TeacherPortal.php
+19 -75
View File
@@ -446,12 +446,12 @@ class TeacherPortal
</div>
</div>
<!-- TAB 2: Courses & Dual Video Upload (API & Bunny Stream) -->
<!-- TAB 2: Zero-Touch Autonomous Video & AI Studio -->
<div id="tab_courses_content" class="studio-card" style="display: none;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px;">
<div>
<h3 style="font-size: 18px; font-weight: 900;">إدارة الحصص والفيديوهات التعليمية (Direct API & Bunny Stream) 🎬</h3>
<p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">رفع وبث الفيديوهات بالطريقتين مع التشفير وتثبيت نقاط الفحص السقراطي داخل الفيديو.</p>
<h3 style="font-size: 18px; font-weight: 900;">استوديو رفع الحصص والتحليل الجنائي للذكاء الاصطناعي 🎬</h3>
<p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">ارفع الفيديو واترك الباقي لمحرك صَقِل: تقطيع HLS، مطابقة المنهاج، وتوليد الأسئلة السقراطية آلياً.</p>
</div>
<div style="display: flex; gap: 10px;">
<button type="button" onclick="switchVideoUploadMode('api')" id="btn_mode_api" class="btn-primary" style="width: auto; padding: 8px 18px; font-size: 12px; background: linear-gradient(135deg, #0284C7, #0369A1);">1. الرفع المباشر عبر السيرفر ⚡</button>
@@ -462,8 +462,8 @@ class TeacherPortal
<!-- UPLOADER BOX 1: Direct API Upload -->
<div id="uploader_box_api" style="background: rgba(11, 19, 43, 0.85); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 18px; padding: 24px; margin-bottom: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
<h4 style="font-size: 15px; font-weight: 800; color: var(--accent-cyan);">⚡ الرفع المباشر والتلقائي عبر السيرفر (Direct API Stream)</h4>
<span style="font-size: 11px; background: rgba(56,189,248,0.1); color: var(--accent-cyan); padding: 3px 10px; border-radius: 6px; font-weight: 700;">HTTP 206 Partial Content</span>
<h4 style="font-size: 15px; font-weight: 800; color: var(--accent-cyan);">⚡ رفع مباشر ومعالجة ذكية فورية (HLS + Gemini Socratic Engine)</h4>
<span style="font-size: 11px; background: rgba(56,189,248,0.1); color: var(--accent-cyan); padding: 3px 10px; border-radius: 6px; font-weight: 700;">معالجة آلية 100% 🧠</span>
</div>
<form id="form_direct_upload" onsubmit="handleDirectVideoUpload(event)">
@@ -486,10 +486,10 @@ class TeacherPortal
<div class="form-group" style="margin-top: 12px;">
<label class="form-label">ملف الفيديو (MP4, WebM, MOV - حتى 2GB)</label>
<div style="border: 2px dashed rgba(56, 189, 248, 0.4); border-radius: 14px; padding: 24px; text-align: center; background: rgba(0,0,0,0.2); cursor: pointer;" onclick="document.getElementById('direct_video_file').click()">
<div style="font-size: 28px; margin-bottom: 8px;">🎬</div>
<div style="font-size: 13px; font-weight: 700; color: #FFFFFF;" id="file_selected_label">اضغط لاختيار ملف الفيديو أو اسحبه وأفلته هنا</div>
<div style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">يتم حفظه تلقائياً في مسار السيرفر الآمن وبثه تدفقياً عبر الـ API</div>
<div style="border: 2px dashed rgba(56, 189, 248, 0.4); border-radius: 14px; padding: 28px; text-align: center; background: rgba(0,0,0,0.2); cursor: pointer;" onclick="document.getElementById('direct_video_file').click()">
<div style="font-size: 32px; margin-bottom: 8px;">🎬</div>
<div style="font-size: 14px; font-weight: 700; color: #FFFFFF;" id="file_selected_label">اضغط لاختيار ملف الفيديو أو اسحبه وأفلته هنا</div>
<div style="font-size: 11.5px; color: var(--text-muted); margin-top: 6px;">يتولى السيرفر التقطيع إلى HLS والتحليل الجنائي وتوليد نقاط الفحص السقراطي فوراً في الخلفية</div>
<input type="file" id="direct_video_file" accept="video/mp4,video/webm,video/quicktime,video/x-matroska" style="display: none;" onchange="onVideoFileSelected(this)">
</div>
</div>
@@ -505,7 +505,7 @@ class TeacherPortal
</div>
</div>
<button type="submit" id="btn_submit_direct_upload" class="btn-primary" style="margin-top: 18px; width: auto; padding: 12px 32px; font-size: 13px;">بدء رفع وحفظ الفيديو الآن 🚀</button>
<button type="submit" id="btn_submit_direct_upload" class="btn-primary" style="margin-top: 18px; width: auto; padding: 12px 36px; font-size: 13.5px; font-weight: 800;">رفع وحفظ الحصة والتحليل الذكي الآن 🚀</button>
</form>
</div>
@@ -540,74 +540,18 @@ class TeacherPortal
<input type="number" id="bunny_duration_input" value="1800" class="input-text">
</div>
</div>
<button type="submit" id="btn_submit_bunny_link" class="btn-primary" style="margin-top: 18px; width: auto; padding: 12px 32px; font-size: 13px; background: linear-gradient(135deg, #F59E0B, #D97706);">حفظ وربط درس Bunny Stream ✓</button>
<button type="submit" id="btn_submit_bunny_link" class="btn-primary" style="margin-top: 18px; width: auto; padding: 12px 36px; font-size: 13.5px; font-weight: 800; background: linear-gradient(135deg, #F59E0B, #D97706);">حفظ وربط درس Bunny Stream ✓</button>
</form>
</div>
<!-- IN-VIDEO SOCRATIC CHECKPOINTS -->
<div style="background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border); border-radius: 18px; padding: 24px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px;">
<h4 style="font-size: 15px; font-weight: 800; color: var(--accent-cyan);">+ تثبيت نقطة فحص معرفي سقراطي (Socratic Checkpoint) في الفيديو</h4>
<span style="font-size: 11px; background: rgba(56,189,248,0.1); color: var(--accent-cyan); padding: 3px 10px; border-radius: 6px;">محرك التثبيت الصدمي والعلاجي 🧠</span>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;">
<div class="form-group">
<label class="form-label">الدرس المستهدف</label>
<select id="checkpoint_lesson_select" class="input-text">
<option value="1">الدرس 1: قواعد الاشتقاق الأساسية</option>
<option value="2">الدرس 2: مشتقات الاقترانات المثلثية</option>
</select>
</div>
<div class="form-group">
<label class="form-label">توقيت ظهور السؤال (دقيقة:ثانية)</label>
<input type="text" id="checkpoint_timestamp" value="00:15" placeholder="00:15" class="input-text" style="color: var(--accent-cyan); font-family: monospace;">
</div>
<div class="form-group">
<label class="form-label">عقوبة الإرجاع عند الخطأ</label>
<select id="checkpoint_rewind_select" class="input-text">
<option value="45">إرجاع الطالب 45 ثانية للخلف (موصى به)</option>
<option value="60">إرجاع الطالب 60 ثانية</option>
<option value="30">إرجاع الطالب 30 ثانية</option>
</select>
</div>
</div>
<div class="form-group" style="margin-top: 8px;">
<label class="form-label">نص السؤال السقراطي الفوري</label>
<input type="text" id="checkpoint_question_input" value="إذا كان f(x) = sin(3x)، فما هي قيمة المشتقة f'(x)؟" placeholder="اكتب نص السؤال لفحص فهم الفكرة..." class="input-text">
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px;">
<div class="form-group">
<label class="form-label">الخيار (أ)</label>
<input type="text" id="cp_opt_0" value="3 cos(3x)" class="input-text">
</div>
<div class="form-group">
<label class="form-label">الخيار (ب)</label>
<input type="text" id="cp_opt_1" value="cos(3x)" class="input-text">
</div>
<div class="form-group">
<label class="form-label">الخيار (ج)</label>
<input type="text" id="cp_opt_2" value="-3 cos(3x)" class="input-text">
</div>
<div class="form-group">
<label class="form-label">الخيار (د)</label>
<input type="text" id="cp_opt_3" value="3 sin(3x)" class="input-text">
</div>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; gap: 12px;">
<div class="form-group" style="margin: 0; min-width: 220px;">
<label class="form-label">الإجابة الصحيحة المعتمدة</label>
<select id="cp_correct_idx" class="input-text" style="color: var(--accent-gold); font-weight: 700;">
<option value="0">الخيار (أ) هو الصحيح ✓</option>
<option value="1">الخيار (ب) هو الصحيح ✓</option>
<option value="2">الخيار (ج) هو الصحيح ✓</option>
<option value="3">الخيار (د) هو الصحيح ✓</option>
</select>
</div>
<button type="button" id="btn_save_checkpoint" onclick="handleSaveCheckpoint()" class="btn-primary" style="width: auto; padding: 12px 32px; font-size: 13px;">تثبيت النقطة في محرك التثبيت المعرفي ✓</button>
<!-- AUTONOMOUS AI BANNER -->
<div style="background: rgba(0, 245, 212, 0.05); border: 1px solid rgba(0, 245, 212, 0.2); border-radius: 18px; padding: 20px; display: flex; align-items: center; gap: 16px;">
<div style="font-size: 32px;">🧠</div>
<div>
<h4 style="font-size: 14px; font-weight: 800; color: var(--accent-cyan); margin-bottom: 2px;">المعالجة السقراطية الذكية تعمل تلقائياً 100%</h4>
<p style="font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 0;">
لا داعي لأي جهد يدوي من المعلم. فور رفعك للملف، يطابق النظام نصوص المنهاج الوزاري، ويولد الفهرس الزمني للأفكار ونقاط الفحص السقراطي اللحظي، وتظهر فوراً للطالب في المشغل التفاعلي.
</p>
</div>
</div>
</div>