Electron.js/TensorFlow.js based desktop app behind the popular music streaming service mood.gg
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
css
tf
.gitignore
README.md
index.html
main.js
opencv.js
package-lock.json
package.json
renderer.js
screenshot.png
template.jpg
yarn.lock

README.md

Mood Desktop for Overwatch

This repo readme mainly discusses how to run the code. If you don't know what mood.gg is or don't know what the point of the desktop app is please read the blog post here and check out the actual website here :).

lol

To actually run the app locally, simply pull the repo and do npm install && npm start within the root directory. Make sure you have node installed!

So why is this desktop app special? Well, it uses the very recently release TensorFlow.js for a pretty interesting task. To detect + predict what character a person is playing in Overwatch all in real-time and all within the browser. No Python, no crazy dependencies.

It detects the character a person is playing in Overwatch by taking screenshots while they are in a game and runs them through my DeepOverwatch model. But, DeepOverwatch is all Keras based, which is written in Python. For this desktop app, I converted my trained Keras/Python based DeepOverwatch model to a TensorFlow.js model. I then load that model within TensorFlow.js and run the user's live gameplay screenshots, which are taken with this library, through the TensorFlow.js predict function to find out the character a person is playing! That means I never use Python within the actual desktop app anywhere. I just use the converted TensorFlow.js model :). Awesome!

All the TensorFlow.js magic happens at renderer.js. It is very straightforward, so just take a look at it starting at loadModel() :).

I also use OpenCV.js to cover an edge case. When the Play of the Game screen is shown, the UI will change completely to mimic the overlay of the original player. That means the desktop app thinks that the actual user switched characters so it will switch playlists. But thats not true! The overlay just changes! To fix this, I do a quick template match to check and see if the user is on the Play of the Game screen before switching playlists.