ai-security-trainer-2026

# AI Security Trainer v2026 Skill > Skill by [ara.so](https://ara.so) — Security Skills collection. ## Overview AI Security Trainer v2026 is a browser-based cybersecurity education platform that provides interactive security training through guided lessons, quizzes, gamified progression, and adaptive learning scenarios. The platform is built with HTML/JavaScript frontend and Flask backend, offering features like XP systems, badges, leaderboards, skills mapping, and user profile management. ## Installation ### Local Setup ```bash # Clone the repository git clone https://github.com/dylanhwiireed3200/ai-security-trainer-2026.git cd ai-security-trainer-2026 # Install Python dependencies (typically requires Flask) pip install -r requirements.txt # Start the Flask application python app.py # or flask run # Access the platform at http://localhost:5000 ``` ### Docker Deployment ```bash # Build the Docker image docker build -t ai-security-trainer:2026 . # Run the container docker run -d -p 5000:5000 \ -v $(pwd)/data:/app/data \ --name security-trainer \ ai-security-trainer:2026 # Access at http://localhost:5000 ``` ## Project Structure ``` ai-security-trainer-2026/ ├── app.py # Flask application entry point ├── static/ │ ├── css/ # Styling (dark theme) │ ├── js/ # Frontend logic │ └── images/ # Assets and avatars ├── templates/ │ ├── index.html # Main interface │ ├── lessons.html # Lesson content │ ├── dashboard.html # User progress │ └── skills.html # Skills map ├── data/ # User data and progress storage ├── lessons/ # Lesson content files ├── Dockerfile └── requirements.txt ``` ## Core Concepts ### User Progression System The platform tracks learning through: - **XP (Experience Points)**: Earned by completing lessons and quizzes - **Levels**: Automatic progression based on accumulated XP - **Badges**: Achievement milestones for completing challenges - **Leaderboard**: Competitive ranking system ### Lesson Structure Lessons follow a structured format with: - Learning objectives - Interactive content - Embedded quizzes - Practical scenarios - Progress checkpoints ## Key Features Implementation ### Creating Custom Lessons ```javascript // static/js/lesson-creator.js const Lesson = { id: "sql-injection-basics", title: "SQL Injection Fundamentals", category: "web-security", difficulty: "intermediate", xpReward: 150, content: [ { type: "text", content: "SQL injection allows attackers to manipulate database queries..." }, { type: "code", language: "sql", content: "SELECT * FROM users WHERE username = '' OR '1'='1' --" }, { type: "quiz", question: "What does the SQL comment operator '--' do?", options: [ "Starts a multi-line comment", "Comments out the rest of the query", "Ends the SQL statement", "Escapes special characters" ], correctAnswer: 1 } ], scenario: { type: "interactive", description: "Identify vulnerable SQL code", challenge: "Find the SQL injection vulnerability in the following code", solution: "The user input is directly concatenated into the query" } }; // Add lesson to the system function addLesson(lesson) { fetch('/api/lessons', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('authToken')}` }, body: JSON.stringify(lesson) }) .then(response => response.json()) .then(data => { console.log('Lesson created:', data.lessonId); }); } ``` ### User Profile Management ```javascript // static/js/profile.js class UserProfile { constructor() { this.userId = localStorage.getItem('userId'); this.profile = null; } async loadProfile() { const response = await fetch(`/api/users/${this.userId}/profile`); this.profile = await response.json(); return this.profile; } async updateAvatar(avatarFile) { const formData = new FormData(); formData.append('avatar', avatarFile); const response = await fetch(`/api/users/${this.userId}/avatar`, { method: 'POST', body: formData }); return await response.json(); } async getProgress() { const response = await fetch(`/api/users/${this.userId}/progress`); return await response.json(); } calculateLevel(xp) { // Level calculation: level = sqrt(xp / 100) return Math.floor(Math.sqrt(xp / 100)); } } // Usage const profile = new UserProfile(); await profile.loadProfile(); console.log(`Level: ${profile.calculateLevel(profile.profile.xp)}`); ``` ### Quiz System Implementation ```javascript // static/js/quiz-engine.js class QuizEngine { constructor(lessonId) { this.lessonId = lessonId; this.currentQuestion = 0; this.score = 0; this.answers = []; } async loadQuiz() { const response = await fetch(`/api/lessons/${this.lessonId}/quiz`); this.quiz = await response.json(); return this.quiz; } submitAnswer(questionIndex, answerIndex) { const question = this.quiz.questions[questionIndex]; const isCorrect = answerIndex === question.correctAnswer; this.answers.push({ questionIndex, answerIndex, isCorrect, timestamp: Date.now() }); if (isCorrect) { this.score += question.points || 10; } return { isCorrect, explanation: question.explanation, correctAnswer: question.correctAnswer }; } async completeQuiz() { const result = { lessonId: this.lessonId, score: this.score, totalQuestions: this.quiz.questions.length, answers: this.answers, completedAt: new Date().toISOString() }; const response = await fetch('/api/quiz/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(result) }); return await response.json(); } } ``` ### Skills Map Tracking ```javascript // static/js/skills-map.js class SkillsMap { constructor() { this.skills = { 'web-security': ['XSS', 'SQL Injection', 'CSRF', 'SSRF'], 'network-security': ['Packet Analysis', 'Firewall Rules', 'VPN'], 'cryptography': ['Symmetric', 'Asymmetric', 'Hashing', 'PKI'], 'incident-response': ['Detection', 'Analysis', 'Containment', 'Recovery'] }; } async getUserSkills(userId) { const response = await fetch(`/api/users/${userId}/skills`); return await response.json(); } calculateSkillProgress(category, completedLessons) { const totalSkills = this.skills[category].length; const masteredSkills = completedLessons.filter( lesson => lesson.category === category && lesson.score >= 80 ).length; return { category, total: totalSkills, mastered: masteredSkills, percentage: (masteredSkills / totalSkills) * 100 }; } renderSkillsMap(userProgress) { const categories = Object.keys(this.skills); const skillsData = categories.map(cat => this.calculateSkillProgress(cat, userProgress) ); // Render visualization (radar chart, progress bars, etc.) return skillsData; } } ``` ## Flask Backend Implementation ### Main Application Setup ```python # app.py from flask import Flask, render_template, request, jsonify, session from flask_cors import CORS import json import os from datetime import datetime app = Flask(__name__) app.secret_key = os.environ.get('SECRET_KEY', 'dev-secret-key') CORS(app) # Configuration app.config['UPLOAD_FOLDER'] = 'static/uploads/avatars' app.config['MAX_CONTENT_LENGTH'] = 2 * 1024 * 1024 # 2MB max app.config['DATA_FOLDER'] = 'data' # Ensure directories exist os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True) os.makedirs(app.config['DATA_FOLDER'], exist_ok=True) @app.route('/') def index(): return render_template('index.html') @app.route('/api/lessons', methods=['GET', 'POST']) def lessons(): if request.method == 'GET': lessons_file = os.path.join(app.config['DATA_FOLDER'], 'lessons.json') with open(lessons_file, 'r') as f: lessons = json.load(f) return jsonify(lessons) elif request.method == 'POST': lesson_data = request.json lesson_data['id'] = generate_lesson_id() lesson_data['created_at'] = datetime.utcnow().isoformat() # Save lesson lessons_file = os.path.join(app.config['DATA_FOLDER'], 'lessons.json') with open(lessons_file, 'r+') as f: lessons = json.load(f) lessons.append(lesson_data) f.seek(0) json.dump(lessons, f, indent=2) return jsonify({'lessonId': lesson_data['id']}), 201 @app.route('/api/users/<user_id>/progress', methods=['GET', 'POST']) def user_progress(user_id): progress_file = os.path.join(app.config['DATA_FOLDER'], f'user_{user_id}_progress.json') if request.method == 'GET': if os.path.exists(progress_file): with open(progress_file, 'r') as f: return jsonify(json.load(f)) return jsonify({'xp': 0, 'level': 1, 'completedLessons': [], 'badges': []}) elif request.method == 'POST': progress_data = request.json with open(progress_file, 'w') as f: json.dump(progress_data, f, indent=2) return jsonify({'success': True}) @app.route('/api/quiz/submit', methods=['POST']) def submit_quiz(): quiz_data = request.json user_id = session.get('user_id') # Calculate XP based on score xp_earned = calculate_xp(quiz_data['score'], quiz_data['totalQuestions']) # Update user progress progress_file = os.path.join(app.config['DATA_FOLDER'], f'user_{user_id}_progress.json') with open(progress_file, 'r+') as f: progress = json.load(f) progress['xp'] += xp_earned progress['completedLessons'].append({ 'lessonId': quiz_data['lessonId'], 'score': quiz_data['score'], 'completedAt': quiz_data['completedAt'] }) # Check for level up new_level = calculate_level(progress['xp']) if new_level > progress.get('level', 1): progress['level'] = new_level progress['badges'].append({ 'type': 'level_up', 'level': new_level, 'earnedAt': datetime.utcnow().isoformat() }) f.seek(0) json.dump(progress, f, indent=2) return jsonify({ 'xpEarned': xp_earned, 'totalXp': progress['xp'], 'level': progress['level'], 'leveledUp': new_level > progress.get('level', 1) }) def calculate_xp(score, total): percentage = (score / total) * 100 base_xp = 100 return int(base_xp * (percentage / 100)) def calculate_level(xp): import math return math.floor(math.sqrt(xp / 100)) def generate_lesson_id(): import uuid return str(uuid.uuid4())[:8] if __name__ == '__main__': app.run(debug=True, host='0.0.0.0', port=5000)