TensorFlow.js Full-Stack Starter Kit
Coming to work on an AI project there are lots of things to consider, and getting some proof-of-concept going with a bunch of tools is the way to go. But once this phase of the project is over you want to develop an application or even just a testbed to work on. You need an applicative environment to develop on. Recently, when I tried setting up an application stack for an AI/TensoFlow based project, I found that the MEAN-based templates I used in the past are way behind and do not fully integrate the latest technologies. So I decided to put together the libraries I found working for me, as a new full-stack template.
Google's TensorFlow is run here inside a NodeJS environment - V8 single-threaded Javascript engine that is HW-accelerated with eighter WebGL or CUDA binaries. It seems that training a large-complex model on this environment is a no-go, even on a strong machine. But (1) using it to explore a model, visualize and adjust it's parameters is a good candidate. A more reasonable direction is to (2) take a large model built elsewhere, convert it, and use this backend to serve clients' requests. It's easy to run such an app on the cloud/K8S and scale it horizontally. Regardless of the AI engine here, this is a (3) nicely integrated set of libraries and a modern developement environment to jumpstart any web/mobile/native project.
A well integrated, full-stack working sample:
.env
file)The repo is divided into a server-side (backend) project and a client-side (frontend) project. The Backend runs the TensorFlow model and an API to call it. The Client is a single-page responsive-app that calls the model, thru the API, and presents a graph of the results.
src/tensorFlowProvider
folder as a 'Model Provider'. It follows a simple init >> train >> compile >> predict workflow. It is easy to implement a similar provider based on some other AI engine if a different one is needed.client/src/components/server-predict-card
. Where you can find an input-output form, a visualizations panel and a small model to drive them. The Visualization panel specification is found in VegaLiteSpec
file. You can find a bunch of examples for charting specs on the Vega site.src/graphqlApi
and served with a Schema Browser (dev builds only).client/src/utils/graphqlQuery
and a bunch of interfaces in client/src/components/graphql-types
.npm install -g create-react-app react-app-rewired
> git clone https://github.com/eram/tensorflow-stack-ts.git stack
> cd stack
> npm install
> npm build:live
> cd client
> npm install
> npm start
!!! In general, I highly advise you not to mess around with the json conf files. it's fragile... better UNDO!
> npm run clean
> npx jest --clearCache
> rimraf node_modules
> rimraf package-lock.json
> Slide back to a known-to-be-working time and ``npm install``
> npm cache clean --force
Happy to get remarks, assistance with getting the todos done, issues and pull-requests. Also happy to share admin and get more devs on board. If you need some consultation with your project - talk to me.
Cheers!
eram at weblegions dot com