Pic Blitz!

Home screen
Loading screen
Example

Inspiration

My friend and I were discussing what to base the project on. I suggested we make a project in which the user themselves have to be creative. My idea was that an AI suggests a prompt, the user paints it, and can publish it to a gallery. My friend then built off my idea and suggested we get an AI art generator to make an image, and the user has to guess the keywords of the image. We both were immediately interested in the project idea and started working on the game, Pic Blitz!

What it does

The AI generates an image based on three random words. Then the website shows that image and the user has to guess what those three words were. The user has to solve the keywords for as many images as possible in under 60 names, hence the name Pic Blitz.

How we built it

We generated the image from DALL-E's API in a Python file. Each image is generated with a specific template: "Clear image of {noun} {verb} in {setting}."

*An example of this can be "Clear image of {man} {walking} in {church}." *

The image and the keywords are then sent to the JavaScript file, in the methods getImage() and getKeyWords(). The game itself is programmed in JavaScript. In our JavaScript File, we set a timer for 60 seconds and detect user input. Each time a user types a word, it'll compare it to the keyword, if it's correct the user moves down a row. Once the user gets the last word correct, the program generates a new image. The game ends after 60 seconds have passed.

Challenges we ran into

A problem I would often have was coding the input boxes themselves. I'm not very experienced with JavaScript, so it took several hours in order to make the boxes as well as enter the letters into their corresponding box when the user types. After some trial and error, we were able to successfully record user input.

Accomplishments that we're proud of

This hackathon was a journey for us, as we were able to achieve many things. For one, we were able to create the input boxes, which is greater for user experience compared to using plain textbooks. Another accomplishment, was my the UI design. The UI is one of the instances in our program we are most proud of, as it seems to look professional as if a true video game corporation created the website. It's minimalistic, but very impressive, in our opinions, for something we created given limited time.

What we learned

We learnt several things throughout this hackathon, which we will definitely incorporate in the future. For example, we learned the logic behind using user input to enter letters into rows and columns. We also learnt a very cool web design which we will be able to recreate in the future now that we now how to make it. Another major attribute we learned was the use of OpenAi's API. OpenAI's API is incredibly useful as it is light weight and easy to learn, so it'll be useful to know in our futures in coding.

What's next for Pic Blitz!

We were really pleased with our progress in Pic Blitz, so we will definitely work on it as a fun project soon. One idea we have is to make it multiplayer. In multiplayer, a group of users will be in a session, having their own game and after everyone is finished, points will be distributed evenly. For example, 1st place given 5 points, 2nd place given 4 points, etc. Users will be able to track and save scores, as well as publish it on a global leaderboard.