Interactive AI, Machine Learning, and Computational Science Playground
Actife is an interactive web platform designed to explore and visualize concepts in Artificial Intelligence, Machine Learning, Computer Vision, Signal Processing, and Computational Imaging.
Built with React, Vite, and Tailwind CSS, the platform provides hands-on demonstrations and real-time visualizations that help users understand complex algorithms through interactive simulations.
The project serves as an educational and experimental environment for exploring AI/ML techniques through visual tools and real-time interaction.
- Interactive neural network visualization using PyTorch
- Real-time training visualization
- Loss curve and decision boundary display
- Customizable network architecture (3-5-5-1)
- Multi-dimensional regression demonstrations
- 2D, 3D, and 4D regression visualization
- Weather dataset integration (BMKG)
- Logistic regression classification examples
- Hierarchical JPEG compression simulation
- Discrete Cosine Transform (DCT) visualization
- Progressive image decoding
- Interactive compression quality control
- Real-time hand landmark detection
- Hand gesture recognition
- Object detection demonstrations
- Image classification
- Camera-based real-time interaction
- Interactive ML algorithm demonstrations
- Model training visualization
- Performance metric analysis
- Fourier transform demonstrations
- Signal spectrum analysis
- Digital filtering simulations
- Real-time signal visualization
- Color space transformations:
- RGB
- CMY
- SMPTE
- Color theory exploration
- Interactive color manipulation tools
Note: Radio-navigation simulations (Loran-C & eLoran) have moved to the dedicated standalone project SIMULORAN (GitHub repository).
- Step-by-step explanations of AI/ML concepts
- Educational modules with code demonstrations
- Interactive visual learning
- React 19
- Vite
- Tailwind CSS
- Python
- PyTorch
- TensorFlow
- OpenCV
- MediaPipe
- Chart.js
- Matplotlib
- Plotly
- Vite
- ESLint
- Node.js
ai_ml/
├── src/
│ ├── components/
│ │ ├── Navbar.jsx # Navigation component
│ │ ├── Home.jsx # Landing page
│ │ ├── Tutorials.jsx # Tutorials section
│ │ ├── NeuralNetwork.jsx # NN visualization
│ │ ├── LinearRegression.jsx # Regression demos
│ │ ├── ImageProcessing.jsx # Image processing tools
│ │ ├── MachineLearning.jsx # ML algorithms
│ │ ├── SignalProcessing.jsx # Signal processing demos
│ │ ├── ColorScience.jsx # Color science tools
│ │ ├── MediaPipe.jsx # Computer vision demos
│ │ └── CardNav.jsx # Navigation card component
│ ├── assets/ # Static assets
│ ├── App.jsx # Main app component
│ ├── main.jsx # App entry point
│ └── index.css # Global styles
├── asset/ # Public assets (images, icons)
├── random/ # Miscellaneous files
├── requirements.txt # Python dependencies
├── package.json # Node.js dependencies
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration
└── README.md # Project documentation
- Node.js (v18+)
- Python 3.8+
- npm or yarn
-
Clone the repository
git clone https://github.com/rhaffle87/actife.git cd actife -
Install Node.js dependencies
npm install
-
Install Python dependencies
pip install -r requirements.txt
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
npm run build
npm run preview- Overview of all available AI/ML tools and sections
- Quick navigation to different modules
- Access step-by-step guides for AI/ML concepts
- Interactive learning modules with code examples
- Navigate to the Neural Network section
- View the interactive training visualization
- Adjust parameters and see real-time updates
- Explore decision boundaries and loss curves
- Choose from 2D, 3D, or 4D regression examples
- View scatter plots and fitted lines/planes
- Experiment with different datasets
- Upload images for JPEG compression
- Adjust quality settings
- See hierarchical decoding in action
- Explore comprehensive ML algorithm demonstrations
- Interactive model training and evaluation
- View performance metrics and visualizations
- Analyze signals using Fourier transforms
- Apply various filtering techniques
- Real-time signal processing demonstrations
- Experiment with color space conversions
- Learn color theory through interactive tools
- Manipulate colors in different spaces (RGB, CMY, SMPTE)
- Enable camera permissions for real-time demos
- Try hand gesture recognition
- Test object detection capabilities
The project uses Tailwind CSS v4 with PostCSS. Configuration is in tailwind.config.js.
Build configuration is in vite.config.js. Hot reload is enabled for development.
Python scripts are executed separately. Ensure all dependencies in requirements.txt are installed.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- PyTorch for neural network implementations
- MediaPipe for computer vision capabilities
- React and Vite communities
- Academic sources for algorithm implementations
This AI/ML Interactive Toolkit was developed by Rafli Alif as a comprehensive platform for exploring machine learning algorithms, image processing techniques, and computer vision applications.
Developer: Rafli Alif
- GitHub: rhaffle87
- Email: rhaffle87@gmail.com
For questions or suggestions, please open an issue on GitHub.