Draw Duel

Front Page / Lobby
Local Testing

Inspiration

My main inspiration comes from Neal, the developer of neal.fun. Neal is an incredible web developer who has gone viral at least once every couple months for his browser game projects (the perfect circle game, the password game, and infinite craft are only a few of his projects that you may have heard about). One or two viral games may have been written off as a fluke, but his creativity seems to never fade.

I aspire to have that kind of creativity—the kind that captures everyone's fascination immediately, and shines so uniquely even in the sea of content on the internet. I hope that this imitation of Neal has drawn me at least a little closer to that special kind of talent.

What it does

The project is a live multiplayer browser game in which two players get to "duel" by drawing images. The images are interpreted by an image-captioning model (image-to-text), then those captions are fed into a text-to-text model that will reason about whose drawing would beat the other in a physical "duel".

For example, player 1 may draw a picture of an alligator, and player 2 may draw a picture of a house. In this instance, the result may be that player 2 wins through the reasoning that a house could easily crush an alligator.

How we built it

The front-end was made with pure html, css, and javascript! Partly because I don't know any frameworks :p

The back-end was made with node.js and express with some socket.io.

Website is hosted on my own virtual server in the Google Cloud Platform!

Challenges we ran into

My obvious challenge comes from running solo.. at my first hackathon.. as a freshman!

From the start, I knew this was going to be a full-stack web project with intensive work on both the front-end and back-end. I happened to be a mostly inexperienced amateur at both, and I had no one to rely on but myself and the frequently out-dated documentation pages.

I probably ran into about a thousand bugs and errors on the way, but the three biggest challenges were:

web sockets on back-end (first time dealing with it!)
integrating the image-to-text model (HOW ARE THERE NO MODELS WITH INFERENCE PROVIDERS OR FREE-TIER APIs)
fighting the urge to not leave the front-end as pure HTML (aesthetic is pain)

But I was able to trudge through all of them! Though I am still looking for an image-to-text model... (running one locally on my remote virtual server with 4gb of RAM is not feasible 🥲)