TensorFlow.js Full-Stack Starter Kit

Kickstart Your AI Project with TensorFlow-Stack-TS

Ethan Ram

4 min read

·

Oct 23, 2018

--

Listen

Share

Press enter or click to view image in full size

Starting a new AI project there are lots of things to consider, and getting a proof-of-concept going with whatever-bunch-of-tools-you-come-across is, probably, the way to go. But once this phase of the project is over you’ll need to think engineering! Get a testbed to work on, or better yet — an applicative environment to develop your application 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 latest-and-greatest libraries found working for me, as a new full-stack template. After seeing how useful it is for my projects, I’ve now open-sourced it.

What is it good for?

Google’s TensorFlow.js is run here on the backend, on a NodeJS environment — V8 single-threaded Javascript engine that is HW-accelerated with eighter WebGL or CUDA binaries. It seems that training a complex model with a large dataset on this environment is a no-go. A more reasonable direction is to (1) 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 as needed. Using it to (2) explore a model, visualize it and adjust it’s parameters is a good candidate. Regardless of the AI engine here, this is (3) a nicely integrated set of libraries and a modern development environment to jumpstart any web/mobile/native project.

What’s in the box?

A well integrated, full-stack working sample:

• TensorFlow.js backend engine preloaded with a simple model to see it in action.
• Visualization library integrated into a responsive web/mobile application: a dashboard to exercise the above model and visualize its predictions.
• One coding language across the stack — TypeScript/Javascript fully ES6 with async/await across all code.
• Latest APIs based on a GraphQL schema.
• Modern dev tools with hot-reload on changes, linting, unit testing, and code coverage reports. Well integrated into VSCode as an IDE and debugger.
• Keep it simple philosophy across! I’ve saved a ton of learning-curve time by not including a bunch of libs that I found old-fashioned or cumbersome: REST, yarn, Babel, Redux, Apollo server/client, Enzym, Winston/Bunyan, Relay…

Main integrated libraries in the stack

Backend side

• TensorFlow.js engine
• GraphQL based API to feed the — Node.JS/Typescript environment and tooling with mondemon/hot-reloading TFJS engine
• KoaJS web-server, middleware and health-checks
• typegql — Simplified GraphQL schema based on TypeScript annotations
• GraphiQL in-browser IDE for exploring GraphQL schema
• Dotenv-expand for environment-based config (see .env file)
• Jest — unit tests with good coverage
• VSCode launch settings

Client side

• Vega-lite — for charting and visualizations
• Ant Design/Typescript React components — responsive dashboard
• LESS/LCSS — better styling
• ts-fsm — simplified state managenent for React
• graphql-request — simplified GraphQL client
• Jest — React-based unit tests
• Node.JS/Typescript tooling, including webpack with babel and hot-module-replacement (HMR)
• Client is based on react-create-app with antd-demo scripts and is not ejected.

Main POIs

The mono-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.

1. TensorFlow model is implemented in 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.
2. The client side of the model is implemented in 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.
3. The Backend API implements on a GraphQL Schema in src/graphqlApi and served with a Schema Browser (dev builds only).
4. The client side of the API is implemented as a general-purpose GraphQL client in client/src/utils/graphqlQuery and a bunch of interfaces in client/src/components/graphql-types.
5. Performance: As noted above, TensorFlow.js on the backend a very different animal than the “standard” TF-Python based environment. I could not find good benchmarks. Happy if you refer me on the comments below.

The project can be cloned from my Github — here

Happy to get comments, assistance with beefing up the project etc. If you need some consultation with your project — talk to me. You are welcome to star/clap/like/share to show me how awesome you are and help others find this story ;-)

Cheers!

eram at weblegions dot com

Originally published on Github