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
Project Tasks13
Implement Theme and Structure
As a Frontend Developer, I want to implement the global color theme and structural layout from the mock design pages so that all pages look exactly identical to the mock designs. This includes applying the dark theme (#0D1117 background, #161B22 surface, #C9D1D9 text, #58A6FF accent, #8B949E muted), setting up global CSS/Tailwind config, typography, spacing, card styles, button styles, 3D card animations, progress rings, and animated transitions. Remove any pages not referenced in the SRD or user flows. Scope: Landing, Admin, Architecture, Dashboard, Report, Form pages. All scaffold pages not in scope should be removed or redirected.
Implement ML Classification Model
As an AI Engineer, I want to implement the ML classification model (model.py) using scikit-learn RandomForest so that student performance levels (Beginner, Intermediate, Advanced) can be predicted from marks, study time, and attendance. Includes loading the CSV dataset, feature engineering, label creation, model training, evaluation (accuracy score), and a predict function. Also generate a sample students.csv with subject-wise columns.
Build Landing Page
As a Frontend Developer, I want to implement the Landing page based on the existing JSX design (Landing v3) so that users can view the app introduction and navigate to the student form or admin login. The page should feature the dynamic interactive dashboard concept, dark mode aesthetic, animated transitions, and prominent CTAs linking to the Form page (for students) and Admin login (for admins). Follows the user flow: Landing → Form (Student) and Landing → Admin Login (Admin).
Build Form Page
As a Frontend Developer, I want to implement the Form page based on the existing JSX design (Form v1) so that students can input their subject-wise marks, study time, and attendance. The form should have fields for each subject's marks, study time (hours), and attendance (%), a submit button that calls the /analyze backend API, and transitions to the Dashboard page upon successful submission. Follows the user flow: Landing → Form → Dashboard.
Build Dashboard Page
As a Frontend Developer, I want to implement the Dashboard page based on the existing JSX design (Dashboard v1) so that students and admins can view predicted performance levels, personalized recommendations, and study plans. Features include 3D card flip animations showing recommendations, circular progress rings for attendance/study time/marks, a selective re-run button, and navigation to the Report page. Follows the user flow: Form → Dashboard → Report (Student) and Admin → Dashboard (Admin).
Build Admin Page
As a Frontend Developer, I want to implement the Admin page based on the existing JSX design (Admin v2) so that admins can log in, upload a CSV dataset, trigger model training, and view model accuracy. The page should include a CSV upload component, a train model button, an accuracy display section, and navigation links to Architecture and Report pages. Follows the user flow: Landing → Admin Login → Upload Dataset → Train Model → View Accuracy → Architecture → Report.
Build Architecture Page
As a Frontend Developer, I want to implement the Architecture page based on the existing JSX design (Architecture v1) so that admins can view the system architecture diagram (Frontend → Backend → ML Model → Dataset → Output) and the user interaction flow chart. The page should render both diagrams in a visually appealing format with dark theme styling. Follows the user flow: Admin → View System Design → View Flow Chart.
Build Report Page
As a Frontend Developer, I want to implement the Report page based on the existing JSX design (Report v1) so that users can view a summary report of analysis results and download it as a PDF. The page should display student performance level, subject-wise marks breakdown, recommendations, study plan, and a download button. Follows the user flow: Dashboard → Report (Student) and Admin → Report (Admin).
Implement Recommendation Engine
As an AI Engineer, I want to implement the recommendation engine so that personalized study recommendations and a simple study plan are generated based on a student's weak subjects. Includes rule-based NLP logic to detect weak subjects from marks, generate targeted feedback, and produce a structured study plan. Integrates with the ML model output.
Implement Admin Dataset Upload API
As a Backend Developer, I want to implement the Flask /upload-dataset and /train-model endpoints so that admins can upload a CSV dataset and trigger model retraining. The upload endpoint accepts a multipart CSV file, saves it, and the train endpoint retrains the model and returns the new accuracy score.
Implement Analyze API Endpoint
As a Backend Developer, I want to implement the Flask /analyze POST endpoint so that the frontend can submit student data and receive performance level, recommendations, and study plan in JSON. Integrates with the ML model and recommendation engine. Handles input validation and error responses gracefully.
Implement Report Generation API
As a Backend Developer, I want to implement the Flask /generate-report endpoint so that users can generate and download a PDF report summarizing their analysis results, recommendations, and study plan. The endpoint returns a downloadable PDF file using a library like ReportLab or WeasyPrint.
Integrate Frontend with Backend APIs
As a Frontend Developer, I want to wire all frontend pages to the corresponding backend API endpoints using axios so that the Form page submits to /analyze, the Admin page uploads to /upload-dataset and /train-model, and the Report page calls /generate-report for PDF download. Includes setting up React Router for navigation between all pages and handling loading/error states.
AI-Powered Learning, Personalized For You
Classify students into performance levels and generate personalized study recommendations using machine learning. Input your marks, study time, and attendance to unlock a smarter path to academic success.
Everything You Need to Succeed
Onyx Learning combines intelligent classification, personalized study paths, and real-time analytics to transform how students learn and grow.
Smart Classification
Our ML model automatically classifies students into Beginner, Intermediate, and Advanced levels based on marks, study time, and attendance data.
ML-PoweredPersonalized Paths
Receive tailored study recommendations and learning plans that adapt to each student's weak subjects and unique performance profile.
AdaptiveData-Driven Insights
Visualize progress through interactive dashboards with progress rings, performance trends, and downloadable reports for actionable analysis.
Analytics3D Card Animations + Progress Rings
Experience an interactive dashboard where student performance comes alive through dynamic card flips and real-time animated progress visualizations.
Amara Patel
AdvancedPersonalized Recommendations
Each student profile is rendered as a dynamic 3D card that reveals personalized AI-generated recommendations on flip. Progress rings animate in real-time to visualize attendance, study habits, and academic performance — giving students and admins an instant, intuitive snapshot of learning progress.
Two Paths, One Platform
Whether you are a student seeking personalized learning insights or an admin managing the system, onyx-learning guides you every step of the way.
Student Journey
Enter marks, study time, and attendance data through the intuitive form interface.
The ML model analyzes your data and classifies you as Beginner, Intermediate, or Advanced.
Get personalized study recommendations based on identified weak subjects and patterns.
Access a tailored study plan on your dashboard with actionable steps to improve.
Generate and download a comprehensive report summarizing your analysis and next steps.
Admin Journey
Authenticate with admin credentials to access the system management console.
Upload a CSV dataset containing student performance records for model training.
Initiate model training with scikit-learn to classify student performance levels.
Review model accuracy, precision, and recall metrics on the analytics dashboard.
Track system health, API performance, and user activity in real time.
Your Intelligent Dashboard
See how Onyx Learning classifies students, generates AI-powered recommendations, and builds personalized study plans — all in one view.
Student Performance Overview
Showing classification results for 247 students across 3 performance levels
Beginner Level
87 Students
Intermediate Level
118 Students
Advanced Level
42 Students
AI Recommendations
Focus on Mathematics fundamentals for Beginner-level students with low marks
Increase study time allocation for Science subjects by 2 hours/week
Attendance below 75% correlates with lower performance — prioritize engagement
Personalized Study Plan
Everything You Need to Transform Learning
From real-time classification to detailed reports, onyx-learning equips students and admins with powerful AI-driven tools.
Real-Time Analysis
Instantly process student marks, study time, and attendance data to classify performance levels with our trained ML model.
ML-PoweredPersonalized Recommendations
Generate tailored study plans and recommendations targeting weak subjects, adapting to each student’s unique learning profile.
AdaptiveReport Generation
Download comprehensive PDF reports summarizing performance analysis, classification results, and actionable study recommendations.
ExportableSystem Architecture Insights
Explore interactive architecture diagrams and flow charts that document the entire system pipeline from input to prediction.
DocumentationA Robust, Modern Stack
Built with industry-leading technologies to deliver a fast, intelligent, and reliable learning experience from input to insight.
React
Frontend
Powers the interactive dashboard with dynamic 3D card animations, progress rings, and smooth transitions for an engaging learning experience.
Flask
Backend
Lightweight Python framework handling API endpoints, data validation, CSV uploads, and seamless communication between the frontend and ML model.
scikit-learn
Machine Learning
Classifies students into Beginner, Intermediate, and Advanced levels using performance data to generate personalized study recommendations.
Docker
Deployment
Containerizes the entire application stack for consistent deployment, ensuring the system runs identically across development and production.
Ready to Transform Learning?
Harness the power of machine learning to classify student performance, generate personalized study plans, and unlock data-driven insights — all in one intuitive platform.
No comments yet. Be the first!