In ENVISAGE, you and your friends can compete against each other over multiple rounds to create the best AI generated masterpieces. At the beginning of the first round, you are given a picture from the category you choose and an image style as a requirement. Your task is to generate an image as close as possible to the requirements. At the end of each round, you get to vote on your favorite picture (not your own!) and the best picture is given as the prompt for the next round with a different style requirement. The process continues till the final round is completed and a winner is declared based on the accumulated votes.
You can play Envisage here.
- React
- CSS
- HTML
- JavaScript
- APIs: DALL-E, Met Collection API
- Hosted on GCP
Where it all begins - You can choose to either join an existing lobby or create new lobby. On the lobby configuration page a lobby can be customized to your liking. An explanation of how the game works can be found on each of the three pages by clicking on the blue arrow beneath the slide show.
Everything related to lobbies - As a player of ENVISAGE, you can create a default lobby and claim the "control" over the lobby - each round of the game will then be started by you. All other non-lobby-creators can see the updating status of the lobby (for example how many more people needed to start a game) and wait for the lobby creator to start the game. Further, during the waiting periods before and after voting, you are in a waiting lobby area, where the scoreboard is being refreshed dynamically. At the end of the game, the looby will present a final scoreboard, with the winners (or multiple winners) declared.
The most important component - On the game page you can describe the given image taking the style requirement into account. After submitting your text, you will by navigated to the voting page. On the vote page you get to vote on the images of your co-players after each round, not your own ofc! Make sure to accumulate votes to increase your score and potentially be the winner displayed at the very end on top of the scoreboard.
In the exhibition view at the end of the game, you can see all images which were generated with your inputs. In the winning image view, the winning image of each round is displayed.
Clone the client repository:
git clone [email protected]:sopra-fs23-group-15/envisage-client.gitFor your local development environment, you will need Node.js. All other dependencies, including React, get installed with:
npm installThe following library needs to be installed as well:
npm install @mui/icons-material @mui/material @emotion/styled @emotion/reactRun this command before you start your application for the first time. Next, you can start the app with:
npm run devAfter these steps you can open http://localhost:3000 in your browser to view it.
Use different browsers to play the game locally
Run the tests with:
npm run testFor macOS user running into a 'fsevents' error: jest-community/vscode-jest#423
Run the following command to build the application:
npm run buildThe app is hosted on Google App Engine. A push to the main will automatically lead to the deployment to the Google App Engine.
The following diagram shows the flow of our interfaces.
- Play with anyone in the world by introducing waiting lobbies
- Ability to download your images
- Accounts to save player stats and their generated images
- Disappearing Mode (images disappear after a while and are not displayed for the entire round duration)
- Marion Andermatt - marion-an
- Moritz Mohn - moritzmohn
- Nikita Amitabh - nikita-uzh
- Shantam Raj - armsp
- Xue Wang - xueswang
We would like to thank our mentor Valentin Hollenstein - v4lentin1879 for supporting us throughout the project.
This project is licensed under Apache-2.0 license.