Imagic

Engage in a collaborative web-based, AI-enabled game which visualizes your responses to our fun prompts.

Comment

Inspiration

Coming from the same residence halls, the game “PSYCH!” (by Ellen DeGeneres) was a weekly tradition for us. Given the opportunity to work on a project together, we decided to use this hackathon to make our tradition even better. By adding our own creative twist to the widely loved game, we built “Imagic”, an immersive web based trivia game.

What it does -

Imagic is a web-based game in which upto 5 players can join and type answers to fun prompts generated by us. Every player’s response to the prompt gets converted to an image. At the end of every round, the players vote on what’s the funniest/wittiest/most appropriate image to the corresponding prompt.

The more votes a player gets with each round, the higher they rank on the leaderboard. The player with the most total points at the end of all rounds wins!

How we built it

We built our web-application on top of the MERN stack and our RESTful API on Flask. The web app displays fun prompts from a predefined JSON to the users in a game room and collects the respective responses from the users. It sends POST requests to our API which leverages OpenAI’s DALL-E 2 to return artificially generated images based on the user responses. After API processing, we store all the data including game ID, player ID, image URLs on MongoDB and then display it to the players in the game room.

Challenges we ran into

Being able to access DALL-E 2 wasn’t easy because it is not officially public yet. We found a workaround by accessing an unofficial python based API wrapper around it. This may be a hack-y way to begin the development but it works perfectly for our use-case until our API request gets approved.

Since we are using an unofficial wrapper, we had to figure out its working by a lot of bruteforcing and trial & error. The wrapper isn’t well documented but we made it work for our usecase.

Finding an optimal way to store the generated images in a database and display them in the webpage was also a challenge at first. Eventually, we were able to integrate the two by generating the image URLs instead of base64 encoding of images.

Accomplishments that we're proud of

We are proud of the fact that we were able to leverage an existing technology to enhance an existing software in a fun and meaningful way. By combining our dynamic web-app with a text-to-image AI algorithm, we were able to push the limits of the game “PSYCH!”. Players now have a more visual medium to express their answers to prompts!

Also, we designed a minimal user interface with a unique logo and app name. “Imagic” is a portmanteau for “Images” and “Magic” which signifies that we magically (read: artificially) generate images out of natural language.

We are also extremely proud of finding a hack around the official DALL-E 2 API because it is not publicly available yet.

What we learned

None of us have ever worked with MongoDB; storing and retrieving data from there is a useful skill that we will continue using in our future projects. We also learnt about OpenAI’s DALL-E and found a unique application for it in our software. Since we spent a lot of time debugging our API, we learnt about many API Gateway Request errors like CORS.

What's next for Imagic

In the near future, we want to enhance the interface of our application. Also, we want to create a business model and marketing strategy for our application by understanding the target audience and demographic for the game.

Share this project:

Updates