Visual Right is an interactive learning platform designed to enhance the understanding of Artificial Intelligence (AI), data structures, and algorithms. By leveraging visualization and simulation techniques, this platform enables users to engage with and explore AI concepts through hands-on experimentation.
- Ms. Punnapa Thianchai (Student ID: 64090500405)
- Mr. Awirut Phusaensaart (Student ID: 64090500409)
- Mr. Jittapat Chanyarungroj (Student ID: 64090500426)
- Dr. Wittawin Susutti
- Artificial Intelligence (AI)
- Visualization
- Simulation
- Interactive Learning
- Data Structure
- Algorithms
Artificial Intelligence (AI) has revolutionized industries by enabling machines to simulate human intelligence, making complex decisions, and efficiently processing data. As AI continues to grow in prominence, understanding its principles is essential for students and professionals alike.
Interactive visual simulations have been shown to enhance the learning experience by providing users with tangible ways to experiment with systems and observe outcomes. According to research by Mouhib Alnoukari et al., such simulations help students better grasp technical content and improve their problem-solving accuracy.
This project proposes an interactive AI learning playground where users can explore AI concepts, data structures, and algorithms through visual simulations. The platform aims to bridge the gap between theoretical knowledge and practical application.
- Node.js (version 18 or higher)
- Yarn package manager
-
Clone the repository
git clone <repository-url> cd ptojext
-
Install dependencies using Yarn
yarn install
-
Development mode
yarn dev
This will start the development server with Turbopack at
http://localhost:3000 -
Build for production
yarn build
-
Run production build
yarn start
/src/app- Next.js application routes and pages/src/components- Reusable UI components/src/simulations- Interactive simulation components/public- Static assets
- Frontend Framework: Next.js with TypeScript
- UI Libraries:
- TailwindCSS for styling
- Shadcn UI components (
npx shadcn@latest add [component name]) - HeroUI components
- Framer Motion for animations
- Visualization: Three.js, Pixi.js, Matter.js
- State Management: Zustand
- Mathematics: KaTeX for mathematical formulas
- Charts: Chart.js with React-ChartJS-2
- Develop an interactive AI learning platform.
- Enable users to visualize and understand the functioning of AI, data structures, and algorithms step-by-step.
- A functional and user-friendly interactive learning platform for AI concepts.
- Enhanced comprehension of AI, data structures, and algorithms through real-time visualizations and interactions.
- Interactive Simulations: Users can manipulate inputs and parameters to see how AI algorithms respond.
- Visualization Tools: Step-by-step breakdown of data structures and algorithms in action.
- Experiential Learning: Hands-on environment for experimenting with AI models and their outcomes.