{"id":13588676,"url":"https://github.com/eram/tensorflow-stack-ts","last_synced_at":"2025-04-12T00:32:04.626Z","repository":{"id":41807940,"uuid":"152551708","full_name":"eram/tensorflow-stack-ts","owner":"eram","description":"TensorFlow.js Full-Stack Starter Kit","archived":false,"fork":false,"pushed_at":"2023-01-04T15:33:12.000Z","size":1979,"stargazers_count":37,"open_issues_count":29,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-08T17:54:56.880Z","etag":null,"topics":["artificial-intelligence","example-project","graphql","koajs","machine-learning","model","nodejs","reactjs","starter-kit","tensorflow","typescript","vega","vega-lite","webpack"],"latest_commit_sha":null,"homepage":"https://tensorflow-stack-ts.appspot.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eram.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-11T07:44:40.000Z","updated_at":"2025-02-07T17:03:49.000Z","dependencies_parsed_at":"2023-02-02T17:45:16.177Z","dependency_job_id":null,"html_url":"https://github.com/eram/tensorflow-stack-ts","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eram%2Ftensorflow-stack-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eram%2Ftensorflow-stack-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eram%2Ftensorflow-stack-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eram%2Ftensorflow-stack-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eram","download_url":"https://codeload.github.com/eram/tensorflow-stack-ts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248501409,"owners_count":21114674,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["artificial-intelligence","example-project","graphql","koajs","machine-learning","model","nodejs","reactjs","starter-kit","tensorflow","typescript","vega","vega-lite","webpack"],"created_at":"2024-08-01T15:06:51.579Z","updated_at":"2025-04-12T00:32:03.871Z","avatar_url":"https://github.com/eram.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# TensorFlow-Stack-TS - Kickstart Your AI Project\nTensorFlow.js Full-Stack Starter Kit\n\n![TensorFlow.js Full-Stack Starter Kit](public/img/tensorflow-stack-ts-tagline.png)\n\n## Motivation \nComing to work on an AI project there are [lots of things to consider](https://www.slideshare.net/ethanram/why-so-many-data-science-projects-fail-112757707), 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](http://mean.io/)-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. \n\n## Use cases?\nGoogle'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](https://github.com/tensorflow/tfjs-converter), and use this backend to serve clients' requests. It's easy to run such an app on the cloud/K8S and scale it horizontally.  \nRegardless 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.\n\n## What's in the box?\nA well integrated, full-stack working sample:\n- TensorFlow.js backend engine preloaded with a simple model to see it in action.\n- Visualization library integrated into a responsive web/mobile application: a dashboard to exercise the above model and visualize its predictions.\n- One coding language across the stack - TypeScript/Javascript fully ES6 with async/await across all code.\n- Latest APIs based on a GraphQL schema.\n- Modern dev tools with hot-reload on changes, linting, unit testing, and code coverage reports. Well integrated into VSCode as an IDE and debugger.\n- [Keep it simple philosophy across](https://www.slideshare.net/ethanram/kissts-the-keep-it-simple-software-stack-for-2017-82329212)! I've saved a ton of learning-curve time by **not** including a bunch of libs that I found old-fashioned or cumbersome: Redux, Apollo server/client, Enzym, REST, yarn, Babel, Winston/Bunyan, Relay... \n- As a bonus, you get the trivial Todo application integrated here as well. So this can work for you \"even\" if this is not an AI-based project.\n\n![TensorFlow-Stack-TS - Kickstart Your AI Project - TensorFlow.js Full-Stack Starter Kit](public/img/screenshot1.png)\n\n## Main integrated libraries in the stack\n\n### Backend side\n- [TensorFlow.js](https://js.tensorflow.org/) engine\n- [GraphQL](http://graphql.org/) based API to feed the - [Node.JS](https://nodejs.org/en/)/[Typescript](https://www.typescriptlang.org/) environment and tooling with [mondemon](https://nodemon.io/)/hot-reloading\nTFJS engine\n- [KoaJS](https://koajs.com/) web-server, middleware and health-checks\n- [typegql](https://prismake.github.io/typegql/) - Simplified GraphQL schema based on TypeScript annotations\n- [GraphiQL](https://github.com/graphql/graphiql) in-browser IDE for exploring GraphQL schema\n- [Dotenv-expand](https://github.com/motdotla/dotenv-expand) for environment-based config (see ```.env``` file)\n- [Jest](https://basarat.gitbooks.io/typescript/docs/testing/jest.html) - unit tests with good coverage\n- [VSCode](https://code.visualstudio.com/) launch settings\n\n### Client side\n- [Vega-lite](https://vega.github.io/vega-lite/) - for charting and visualizations\n- [Ant Design/Typescript](https://ant.design/docs/react/introduce) React components - responsive dashboard\n- [LESS/LCSS](http://lesscss.org/) - better styling\n- [ts-fsm](https://github.com/eram/ts-fsm) - simplified state managenent for React\n- [graphql-request](https://github.com/prisma/graphql-request) - simplified GraphQL client \n- [Jest](https://jestjs.io/docs/en/tutorial-react) - React-based unit tests\n- Node.JS/Typescript tooling, including [webpack with babel and hot-module-replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)\n- Client is based on react-create-app with [antd-demo](https://ant.design/docs/react/use-with-create-react-app) scripts and is not ejected.\n\n## Main POIs\nThe 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.\n1. TensorFlow model is implemented in ```src/tensorFlowProvider``` folder as a 'Model Provider'. It follows a simple init \u003e\u003e train \u003e\u003e compile \u003e\u003e predict workflow. It is easy to implement a similar provider based on some other AI engine if a different one is needed.\n1. 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](https://vega.github.io/editor/#/examples/vega-lite/point_2d).\n1. The Backend API implements on a GraphQL Schema in ```src/graphqlApi``` and served with a Schema Browser (dev builds only).\n1. 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```.\n1. 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 or test yourself.\n\n## Prerequisites\n- NodeJS 8+ installed locally\n- Git, VSCode or just a terminal\n- ```npm install -g create-react-app react-app-rewired```\n\n## Start developing!\n\n```\n\u003e git clone https://github.com/eram/tensorflow-stack-ts.git stack\n\u003e cd stack\n\u003e npm install \n\u003e npm build:live\n\u003e cd client\n\u003e npm install\n\u003e npm start\n```\n\n## Todo:\n- [x] Hoveron and zoom in chart\n- [ ] Add model training page next to dashboard\n- [ ] TFJS to use tfjs-node (canvas/WebGL based) and/or CUDA libraries\n- [ ] Load client input from csv/file upload\n- [x] Join client and server into one repo.\n- [ ] TLS cert and serve https\n- [ ] Add DB model based on  for backend input/output stores\n- [ ] Add DB interafce (SQLite for local-dev, PostgreQLs for prod)\n- [ ] Dockerize and integrate into Google devops stack\n- [ ] PM2 config script and PMX integration: cluster manager, central logging, central counters, hot environment changes and health-checks.\n- [ ] User management and JWT\n- [ ] Implement error-chain across API data-flow instead of using throws.\n- [ ] Auto patch level versioning on build\n- [ ] Replace nodemon with ts-node-dev (don't restart the server on file change).\n\n## Troubleshhting - escalation path\n_!!! In general, I highly advise you not to mess around with the json conf files. it's fragile... better UNDO!_\n```\n\u003e npm run clean\n\u003e npx jest --clearCache\n\u003e rimraf node_modules\n\u003e rimraf package-lock.json\n\u003e Slide back to a known-to-be-working time and ``npm install``\n\u003e npm cache clean --force\n```\n\nHappy to get remarks, assistance with getting the todos done, [issues and pull-requests](https://github.com/eram/tensorflow-stack-ts/issues). Also happy to share admin and get more devs on board. If you need some consultation with your project - talk to me. \n\nCheers!\n\neram at weblegions dot com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feram%2Ftensorflow-stack-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feram%2Ftensorflow-stack-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feram%2Ftensorflow-stack-ts/lists"}