RecomAI: A Real-Time Full-Stack Product Recommendation Engine Based on TensorFlow.js

RecomAI is a full-stack product recommendation engine built on TensorFlow.js. Its core features include: learning co-purchase patterns from users' purchase history via neural networks, generating real-time product recommendations based on current shopping cart content, and enabling real-time visualization of the training process using Socket.io. This project is maintained by csaantana on GitHub, with the original link at https://github.com/csaantana/RecomAI, released on June 2, 2026.

Project Source

• Original author/maintainer: csaantana (GitHub)
• Source platform: GitHub
• Original project title: RecomAI
• Original link: https://github.com/csaantana/RecomAI
• Release date: June 2, 2026

Project Overview

RecomAI uses a tech stack of TensorFlow.js, Node.js, and Socket.io, and is a complete product recommendation system. Its core is a neural network model that learns co-purchase patterns from users' purchase history, provides real-time product recommendations based on current shopping cart content, and offers real-time visualization of the training process via Socket.io to help developers intuitively observe the model's learning process.

Neural Collaborative Filtering Model

It uses the neural collaborative filtering method, with the network architecture as follows: Input layer (36 dimensions) → Fully connected layer (128 neurons, ReLU activation) → Batch normalization → Dropout (0.3) → Fully connected layer (64 neurons, ReLU activation) → Dropout (0.2) → Fully connected layer (32 neurons, ReLU activation) → Output layer (1 neuron, Sigmoid activation), which is used to predict the matching probability between candidate products and the current shopping cart.

Feature Engineering and Data Augmentation

• Product features: 18-dimensional vector (6-dimensional category one-hot encoding, 1-dimensional normalized price, 11-dimensional color one-hot encoding).
• Data augmentation: For each user's N purchase records, generate all subsets of size k (1 ≤ k ≤ N-1) as shopping cart contexts. Positive samples are the remaining purchased products, and negative samples are 3 times the number of random unpurchased products. About 3000 balanced training samples are generated from data of 10 users.

Real-Time Training Visualization

During the 60 training epochs, loss values and accuracy are pushed to the frontend via Socket.io at the end of each epoch, and a line chart is updated in real-time using Chart.js to show the training progress.

System Architecture

It adopts the MVC architecture:

• Model layer: StateModel manages in-memory states (shopping cart, training model), and RecommendationModel encapsulates TensorFlow.js model logic;
• Controller layer: ProductController handles product queries, UserController manages users and shopping carts, ModelController is responsible for training and recommendation endpoints;
• View layer: A single-page application based on Bootstrap5, integrated with Chart.js for visualization.

Recommendation Flow

1. Load users' historical purchase records as the initial shopping cart, supporting manual addition/removal of products;
2. Trigger training: Read JSON data to generate about 3000 samples, start 60 epochs of training, and push metrics in real-time;
3. Generate recommendations: Calculate the mean of product features in the shopping cart as the context vector, predict the matching probability of candidate products, sort them in descending order of scores (products already in the cart are pushed to the bottom), and present the results in product grids, top recommendation labels, and checkout suggestion cards.

Technology Selection

• Machine learning: TensorFlow.js (@tensorflow/tfjs);
• Backend: Node.js + Express (RESTful API), Socket.io (real-time communication);
• Frontend: Bootstrap5 (responsive UI), Chart.js 4 (visualization);
• Development tools: BrowserSync (frontend auto-refresh), Nodemon (backend hot reload).

The current project has the following limitations and improvement directions:

1. Data persistence: Uses in-memory states and JSON files; Redis cache and databases need to be introduced for production environments;
2. Data scale: Only 10 users and 30 products; data pipelines and distributed training need to be expanded for real-world scenarios;
3. Feature dimensions: Only uses shallow features such as category, price, and color; multi-modal features like product images and description texts can be introduced to improve recommendation quality.

RecomAI demonstrates a complete machine learning application pipeline from data preprocessing, feature engineering, neural network modeling to real-time visualization, making it an excellent reference project for learning the application of TensorFlow.js in recommendation scenarios. Its progressive training strategy, real-time visualization feedback mechanism, and clear MVC architecture are worth referencing in practical projects.