onyx-learning
Thanush HYou are an expert full-stack developer and ML engineer. I am building a hackathon project called *"AI Personalized Learning Assistant"* and I need a COMPLETE working solution using: * Frontend: React (modern UI) * Backend: Python Flask * Machine Learning: scikit-learn * Dataset: Student performance dataset (CSV) ⚠️ IMPORTANT CONSTRAINTS: * This is a 6-hour hackathon project * Keep implementation SIMPLE but IMPRESSIVE * Avoid unnecessary complexity * Everything must WORK without errors * No external paid APIs * Use dataset-based ML (not just prompts) --- # 🎯 PROJECT GOAL Build a system that: 1. Takes student marks subject wise and analysis it csv file should contain below headings: 1.student name 2.subject and its marks 3.study time 4.attendance 2. Uses ML to classify student level: * Beginner * Intermediate * Advanced 3. Provides: * Personalized recommendations * Simple study plan 4. Displays results in a modern UI dashboard 5. --- # 🧠 TECHNIQUES TO INCLUDE Explicitly implement and explain: 1. Recommendation System * Based on weak subjects 2. Classification Model * Use ML (RandomForest or similar) 3. NLP (basic) * Generate study plan using rule-based or simple logic * Use NLP to analyze student responses, detect key concepts, identify misconceptions, and provide targeted feedback based on answer quality and sentiment --- # 📁 OUTPUT REQUIREMENTS Give FULL code for: ## 1. Dataset * Provide sample CSV (students.csv) ## 2. ML Model (model.py) * Load dataset * Create labels * Train model * Predict function ## 3. Backend (Flask) * app.py with: * /analyze endpoint * JSON input/output * Integration with ML model ## 4. Frontend (React) * Modern UI (dark theme) * Components: * Form (input marks) * Dashboard * Result display * Use axios for API calls ## 5. Styling * Clean, modern, hackathon-winning UI * Cards, buttons, layout --- # 🏗️ ARCHITECTURE Include a clear explanation of: Frontend → Backend → ML Model → Dataset → Output --- # 🚀 EXECUTION STEPS Provide step-by-step instructions: * Install dependencies * Run backend * Run frontend * Test API --- # 🎤 HACKATHON EXPLANATION Also include: 1. How to explain project in 1 minute 2. Where each technique is used: * Recommendation system * Classification * NLP 3. Expected judge questions + answers --- # ⚠️ ERROR HANDLING Ensure: * No missing imports * No broken code * Works on Windows * Clear instructions --- # 🏆 FINAL OUTPUT The result should be: * Fully working ML-based web app * Clean UI * Real ML usage * Easy to demo in hackathon --- Now generate the COMPLETE solution step-by-step.
Comments (0)
Sign in to leave a comment
System Architecture
Explore the full-stack technical blueprint powering onyx-learning — a seamless pipeline from a responsive React interface through a Python Flask API to a scikit-learn classification model that delivers real-time student performance insights.
How onyx-learning Works
Four integrated layers form the complete pipeline — from student data entry through to classified performance outputs and personalised study recommendations.
React Frontend
A responsive single-page application built with React. Provides form-based data entry, a live dashboard with progress rings, and downloadable report views.
Flask Backend
Python Flask REST API handling input validation, CSV ingestion, model inference calls, and JSON response serialisation. Stateless and easily containerised.
scikit-learn Model
A trained Random Forest classifier that maps marks, study time, and attendance to performance levels: Beginner, Intermediate, or Advanced, with recommendation output.
Results & Reports
Structured JSON output rendered on the dashboard and compiled into downloadable PDF/HTML reports summarising performance classification and personalised study plans.
Full System Architecture
Hover over any node to explore component details. Connection lines trace live data flow from browser input to ML prediction and report output.
System Architecture
Component Breakdown
A detailed look at each layer of the onyx-learning stack — from the React frontend through the Flask API to the scikit-learn classification engine.
Layer 01 — UI
Frontend
A React 18 single-page application providing an intuitive interface for students and admins. Handles all data input, visualization, and report generation client-side.
Key Capabilities
- React 18 SPA with component-based architecture
- Dynamic form for student data input (marks, study time, attendance)
- Interactive dashboard with performance classification display
- Circular progress rings for subject-level metrics
- Personalized recommendation cards with flip animations
- PDF report download via jsPDF integration
- Fully responsive layout across all screen sizes
Layer 02 — API
Backend
A Python Flask REST API serving as the bridge between the React frontend and the ML model. Manages data validation, model orchestration, and structured JSON responses.
Key Capabilities
- Python Flask REST API with CORS support
- CSV dataset upload endpoint for admin model training
- Input validation and data sanitization layer
- ML model inference endpoint returning structured JSON
- Session-based re-run and selective analysis triggers
- Error handling with descriptive HTTP response codes
- Lightweight deployment with Gunicorn WSGI server
Layer 03 — Intelligence
ML Model
A scikit-learn Random Forest classifier trained on student performance data. Outputs performance level classifications (Beginner, Intermediate, Advanced) and drives personalized study plan recommendations.
Key Capabilities
- scikit-learn Random Forest classifier (primary model)
- Multi-class output: Beginner, Intermediate, Advanced
- Feature inputs: marks, study_time, attendance percentage
- Model persistence with joblib serialization
- Weak subject detection via per-feature threshold analysis
- Recommendation engine mapping classifications to study plans
- Accuracy metrics exposed via /metrics admin endpoint
Interaction Diagrams
Step-by-step flow for both Admin and Student personas — from data entry through classification to report generation.
How Student Data Flows
Trace a single student submission from raw form input through validation, preprocessing, ML inference, and final output — end-to-end in under 2 seconds.
Student submits academic data via the web form — subject marks (0–100), weekly study hours, and attendance percentage. Input is collected as a structured JSON payload and queued for validation.
Flask backend enforces schema validation — range checks on marks (0–100), attendance (0–100%), and study hours. Malformed or out-of-range fields are rejected early with structured error responses before touching the ML pipeline.
Validated data is normalized via the preprocessing pipeline — StandardScaler transforms raw features into model-ready tensors. Weak subject detection flags below-threshold marks for targeted recommendations downstream.
The trained RandomForestClassifier receives the scaled feature vector and produces a performance-level prediction — Beginner, Intermediate, or Advanced — along with per-class confidence scores used to rank study recommendations.
Results are serialized into a structured JSON response: performance tier, confidence breakdown, personalized study plan per weak subject, and a downloadable PDF report. The React frontend renders results on the Dashboard in under 2 seconds end-to-end.
Built With Modern Tools
Every layer of the onyx-learning stack is purpose-selected for performance, simplicity, and a seamless developer experience.
React
FrontendComponent-based UI library powering the student dashboard, input forms, and interactive data visualizations with real-time state management.
Flask
Backend APILightweight Python web framework handling REST endpoints for ML inference, dataset uploads, report generation, and admin operations.
scikit-learn
ML EngineTrains and runs the classification model that segments students into Beginner, Intermediate, and Advanced performance tiers with personalized recommendations.
CSV Dataset
Data LayerStructured tabular data source containing student marks, study hours, and attendance records used for model training and batch inference.
Docker
ContainerContainerizes the full application stack — React client, Flask server, and ML pipeline — ensuring consistent environments from development to deployment.
Key Metrics
Measured performance characteristics of the onyx-learning platform — from ML inference speed to system-wide availability targets.
Ready to Build?
Explore the full technical documentation of the onyx-learning stack — from the React frontend and Flask REST API to the scikit-learn classification engine. Start integrating personalized learning intelligence into your project today.
No comments yet. Be the first!