Skip to content
Oct 2025Team Leader

NeuralNet

Visual Deep Learning Architecture Studio & Code Compiler

152 Stars42 Forks2.3K Views

NeuralNet is a full-stack visual deep learning studio where you design neural networks with drag-and-drop nodes, compile to Keras, train with real TensorFlow metrics, and deploy secure prediction APIs.

VISUAL TOOLINGML
ROLETeam Leader & Full-Stack System Architect
TIMELINE3 months
TEAM STRUCTURELead of 3-student engineering team
YEAR2025
NeuralNet primary interface
Architectural Ownership

What Jayant Potdar Built & Owned

Led the project from conception to working prototype: created the interactive node-graph canvas using React Flow, engineered the topological sorting graph compiler in FastAPI that converts node JSON into valid TensorFlow/Keras Python scripts, and built the WebSocket-backed training monitoring interface that streams live epoch loss curves.

Key Technical Decisions:

  • Topological sort compiler converting arbitrary directed acyclic graphs into clean, PEP-8 compliant Keras code.
  • Real-time tensor shape validation catching dimensional mismatches before training begins.
  • WebSocket streaming of training metrics (loss, accuracy, validation loss) rendered with live charts.
  • One-click export of saved `.keras` models accompanied by an auto-generated FastAPI inference endpoint.

Core System Features & Capabilities:

  • ✓Drag-and-drop layer nodes and connect them to design a model visually.
  • ✓Converts the visual graph into executable TensorFlow/Keras model code.
  • ✓Supports built-in datasets like MNIST, Fashion-MNIST, CIFAR-10, CIFAR-100, and custom dataset uploads.
  • ✓Lets users configure training and view metrics such as loss and accuracy over epochs in real time.
  • ✓Trained models can be deployed as production API endpoints with generated API keys.
  • ✓Provides an in-browser UI to test deployed models by sending inference requests and viewing predictions.
the challenge

Translating a visual DAG (directed acyclic graph) into valid sequential or functional Keras code requires strict validation: cyclic loops must be blocked, branching tensor dimensions must align, and layer parameters must typecheck.

NeuralNet challenge illustration
NeuralNet alternative view
architectural approach

I implemented client-side connection constraints in XYFlow, and built a backend validation engine that performs topological sorting on the graph JSON. The compiler constructs a clean Keras script, executes local training in an isolated process, and pushes real-time epoch statistics over WebSockets.

NeuralNet technical architecture and implementation
interface gallery & screenshots

Detailed interface walkthrough, diagnostic panels, and feature screenshots for NeuralNet.

NeuralNet screenshot 1
NeuralNet — Screen #01View 1
NeuralNet screenshot 2
NeuralNet — Screen #02View 2
NeuralNet screenshot 3
NeuralNet — Screen #03View 3
NeuralNet screenshot 4
NeuralNet — Screen #04View 4
the results & metrics

The working prototype lets users compose Dense, Conv2D, MaxPooling, and Dropout layers visually, train models on standard classification datasets, and instantly generate a production-ready Python inference endpoint.

VisualDAG GRAPH COMPILER
LiveWEBSOCKET METRICS
Zero CodeMODEL TO API
Technical Deep Dive

Building a Visual Deep Learning Studio: Compiling Graph JSON to Executable Keras Code

Transforming interactive React Flow DAGs into topologically sorted TensorFlow models with live WebSocket training.

Read the engineering note (8 min read)
more projects

LET'S TALK

Got a project, a hard engineering problem, or just want to say hi? Send it over. I read every message.

Jayant Potdar

Jayant Potdar

Open to new opportunities — let's build something memorable and interesting.

1

let's make something together

CONTACTdrop a line