scribbly

This is the codebase of a websockets and ML focused project made as a part of the 2023 Code Network Winter Hackathon hosted by Code Network. The theme of the hackathon was build anything as long as its awesome, with our project being used as an opportunity for us to implement ML into a NextJS project.

This application is a skribblio/QuickDraw clone built with websockets to make it a 1v1 as well as allow for audience live spectating and voting.

Stack

NextJS 13 with app router was our chosen ReactJS front-end framework, using TailwindCSS with DaisyUI as a plugin for styles. Used Jotai for global state management.
Rust, using tokio and tungstenite
Bebop typesafe binary serialisation
Pytorch for machine learning and running the model

Deployment Prerequisites

Development Testing

Host your own web socket server using ngrok which should look like the following wss://{XXX-XXX-XXX...}.ngrok-free.app/ make ENV value NEXT_PUBLIC_WS
Do the same using ngrok again to host the front-end web component
Run the project using pnpm dev

How to Run (For Code Network organizers)

For any unforeseen issue, please contact us directly. Also please note that there can only be one game running at a time.

Go to the website
Prior to the game starting, have staff go to the admin page by appending "admin" to the URL as follows https://scribbly-alpha.vercel.app/admin
The admin page will display the WS server URL as well as indicate if there's any left over clients and state from the previous game. Please press "Start/Restart Game" to prepare for a fresh game. Note that doing this removes all players and removes all game state for the active game. .
After this has been done, you can navigate back to the home page to display the URL to willing participants .

TODO

Refactor rust
Fix admin portal, add toast that it worked
Clear canvas
End to end testing that votes acutally work
Use probability values instead of k values in ml

Future

TODO: completely flush out tcp websokcet connections on server side on reset (except admin)
Fix the sampling algorithm in the ai to more like https://www.kaggle.com/code/inversion/getting-started-viewing-quick-draw-doodles-etc OR simply apply all raw data to current simplification
Find outsourced ai host like huggingface,
Custom classes
Actor pattern refactor server side and making more internalMessages
Resolve TODOs
newer versions of bebop-tools (v3.0.0^) require a bebop.json instead of cmd options