👾 Simple ML Hub

This is a sandbox where you can play with a variety of ML algorithms, designed to give users a better understanding of how they work in practice.

📦 Technologies

• TypeScript
• Nx
• NestJS
• React
• Vite
• Server-Sent Events
• SCSS

🧬 Models and algorithms

• Supervised learning: Image classification using a multilayer perceptron.
• Modern Hopfield network: Image Reconstruction Using a Continuous Associative Memory Model.
• Travelling Salesman: Finding the optimal route using a genetic algorithm.
• Q-learning: Finding the optimal strategy in a grid-based world using Q-learning.

🧬 Models and algorithms

• Supervised learning: Image classification using a multilayer perceptron.
• Modern Hopfield network: Image Reconstruction Using a Continuous Associative Memory Model.
• Travelling Salesman: Finding the optimal route using a genetic algorithm.
• Q-learning: Finding the optimal strategy in a grid-based world using Q-learning.

1️⃣ Supervised Learning

A Multilayer Perceptron (MLP), a class of feedforward artificial neural networks, is implemented for image classification. The network learns to map input images to their correct labels by iteratively adjusting its internal weights through supervised training.

Core Steps:

1. Initialization: The network's weights and biases are initialized with small random values.
2. Forward Propagation: An input image is passed through the network's layers. Each neuron applies an activation function to the weighted sum of its inputs to generate a prediction.
3. Loss Evaluation: The predicted output is compared against the actual target label to calculate the loss.
4. Backpropagation: The algorithm calculates the gradient of the loss function with respect to each weight by the chain rule, measuring how much each weight contributed to the error.
5. Weight Update: The network's weights are adjusted in the opposite direction of the gradient using an optimizer and a defined learning rate to minimize future errors.
6. Iteration: This process is repeated over multiple epochs until the network's accuracy converges and the loss is minimized.

2️⃣ Modern Hopfield Network

A continuous associative memory model is used for pattern recognition and image reconstruction. Unlike standard discrete Hopfield networks, this model uses continuous states and an attention-like mechanism to achieve a drastically higher memory capacity and precise retrieval of corrupted inputs.

Core Steps:

1. Pattern Storage: A set of reference images is memorized by the network, forming its associative memory.
2. Initialization: A corrupted, noisy, or incomplete image is presented to the network as the initial state.
3. Similarity Computation: The network calculates the similarity between the current state and all stored patterns using an energy function.
4. State Update: The current state is iteratively updated to minimize the system's energy. The state is pulled closer to a weighted combination of the stored patterns, with the closest match heavily dominating.
5. Convergence: The network stabilizes when the state no longer changes, successfully retrieving and reconstructing the original image from memory.

3️⃣ Travelling Salesman

A genetic algorithm is used to address the Traveling Salesman Problem (TSP). By simulating natural selection, it evolves a set of possible routes over time, gradually improving them to find an efficient solution.

Core Steps:

1. Initialization: A starting population of random routes is generated.
2. Fitness Evaluation: Each route is evaluated based on its total distance. Shorter paths are considered more "fit".
3. Selection (Elitism): A defined percentage of the best routes is automatically carried over to the next generation.
4. Crossover: Offspring are created by combining genetic material from two parents. The algorithm employs an Order Crossover technique, which takes a sub-path from one parent and fills the remaining cities from the other parent in the order they appear, ensuring valid routes without duplicates.
5. Mutation: To maintain genetic diversity, random swaps of two cities occur within a route based on the mutation rate.
6. Termination: The simulation stops when a fixed number of generations is reached or via the Until Last Alive mode. In Until Last Alive mode, the algorithm automatically halts when over 50% of the population has converged to the same route distance.

4️⃣ Q-Learning

The Q-learning algorithm is implemented to find the optimal strategy for an agent navigating a grid-based world. The agent learns the value of specific actions in specific states through trial and error, balancing exploration of the environment with the exploitation of known rewards.

Core Steps:

1. Initialization: A Q-table is created to store a value for every possible state-action pair, initially set to zero.
2. Observation: The agent observes its current state (position) within the grid world.
3. Action Selection: The agent selects an action based on an epsilon-greedy strategy. It either explores a random action to discover new paths or exploits the best-known action based on current Q-values.
4. Execution & Reward: The agent performs the chosen action, moves to a new state, and receives a reward or a penalty.
5. Q-Value Update: The algorithm updates the Q-value for the previous state-action pair using the Bellman equation. This update factors in the immediate reward received and the maximum expected future reward of the new state, scaled by a learning rate and discount factor.
6. Iteration: The agent repeats this process across many episodes until the Q-values converge, resulting in an optimal pathing strategy.

📍 The Process

While developing this app, I had the opportunity to explore various machine learning algorithms and their applications, which was both interesting and educational.

🏗️ System Architecture

The system is built as a unified React frontend and multiple NestJS backend microservices managed within an Nx monorepo:

• Backend APIs (NestJS): A suite of independent microservices (genetic-algorithms, associative-memory-models, intelligent-agents, perceptron-based-models) that handle core logic, and state management for each specific machine learning model (I hope in the future multiple models).
• Real-time Stream (Server-Sent Events): Dedicated unidirectional channels that stream updates (like generation progress or training epochs) from the backend services to the client in real-time.
• Client (React): A centralized frontend application that provides interactive interfaces, visualizations, and dynamic controls for all implemented algorithms.

📂 Project Structure

This monorepo project is organized into the following key areas:

• apps/client - Main React frontend application built with Vite.

  • src/app/pages/ - Contains dedicated pages for each algorithm.

• apps/<backend-name> - Backend NestJS applications.

  • src/app/<name>.algorithm.ts - Core logic implementation of the specific algorithm.

• libs/shared-types - Shared TypeScript definitions.

  • src/lib/ - Common interfaces and types used by both the client and corresponding backend services to ensure type safety.

ℹ️ Environment

PERCEPTRON_BASED_MODELS_PORT=3010
ASSOCIATIVE_MEMORY_MODELS_PORT=3020
GENETIC_ALGORITHMS_PORT=3030
INTELLIGENT_AGENTS_PORT=3040

🚦 Running the Project

1. Clone the repository
2. Install dependencies: npm ci
3. Start the applications:

Client

npx nx serve client

Server

Option A: Development Mode

npx nx serve <service-name>

Option B: Docker Mode

Build:

docker build -f apps/<service-directory>/Dockerfile -t <service-name>

Run:

docker run -p <service-port>:<service-port> --env-file .env  <service-name>

Option C: Docker Compose

docker compose up -d

4. Open http://localhost:4200 in your browser

Tip

Highly recommend installing the Nx Console extension for VS Code.

🎞️ Preview

simple-ml-hub.mp4