NOTE: The project is now rebooted as a modern monorepo using pnpm workspaces. All active code is organized under the
/packagesstructure:
packages/contracts: Smart contracts and onchain logicpackages/frontend: Web UI and client logicpackages/functions: Off-chain AI scoring and backend services
cd packages/contracts
pnpm install
pnpm build # Compile contracts, generate types
pnpm deploy # Deploy to Polygon Mumbai (set .env vars)Artifacts and deployed addresses/ABIs are saved in deployments/mumbai.json.
cd packages/functions
pnpm install
pnpm build # Build with tsup
pnpm dev # Run with netlify dev (requires netlify-cli)Edit .env as needed. Functions build to dist/ and are auto-routed by Netlify.
cd packages/frontend
pnpm install
pnpm dev # Start local dev server
pnpm build # Build for productionEdit .env with your function URL and contract addresses.
Netlify will deploy the frontend from packages/frontend/dist and route functions from packages/functions/dist.
Legacy code and documentation below may be outdated. See the /packages folders for current development.
PoseDance is your friendly TikTok trainer. It uses embedded videos downloaded from TikTok with PoseNet running on top, enabling the drawing of a 'skeleton' as each frame of a video is analyzed. Match your webcam's output to the video and get a high score!
This project is built using Vue.js with PoseNet installed as an npm package. This allows use of the TensorFlow-built models to be used via TensorFlow.js in the web app. It also makes the app PRETTY BIG, especially as you need to analyze two models, one for the video from TikTok, and one for your webcam.
For its backend it also uses PlayFab, a great PAAS for games. Register and login to record your high score!
It's hosted on Azure Static Web Sites, a nice way to host your static web apps and SPAS like this one.
You can read more about how to build and host Azure Static Sites on the Microsoft Docs. You can also walk through how to publish your static sites to Azure on Microsoft Learn.
This repo has a Code Tour! What's a Code Tour, you ask? It's a neat little Visual Studio Code extension that, if installed locally, will allow you to view the code tour that I created to step through the code. Install that extension in VS Code and give it a try! Dance with us here: https://wonderful-ocean-007be220f.1.azurestaticapps.net/
Watch a video explanation of the technology behind the silliness.
Download a PowerPoint presentation on this project here.
Learn more about PoseNet here.
Where can I learn more about TensorFlow.js?
Check out their docs and try some tutorials and CodeLabs. Its roadmap is interesting as well. Good blogposts are available as well.
Does TensorFlow.js support GPU?
There's a TFJS webgpu backend library you can try here.
What about WASM?
There's a new TFJS WASM backend as well!
cd app && npm install
npm run serve
npm run build
npm run lint