Living Canvas: A web-based puzzle game powered by Generative AI

This is a demo app that shows how to build an AI-powered web game using Angular, PhaserJS, Gemini, Imagen, Veo and Firebase App Hosting.

Explore the demo and its underlying concepts in more detail on the solutions page at https://developers.google.com/solutions/learn/living-canvas

Living Canvas is a web-based puzzle game where users draw on the screen to bring objects to life. The drawings are analysed with Gemini and transformed into higher fidelity graphics using Gemini, Imagen and Veo before dropping the graphics into the game world with gameplay properties attached by Gemini.

This project is intended for demonstration purposes only. It is not intended for use in a production environment.

We recommend trying out this project in Firebase Studio. Click this button to launch the project in Firebase Studio and follow the steps below to get started.

1. A new Firebase project
   • We recommended using a new Firebase project for this demo. This simplifies cleanup to avoid incurring on-going costs after trying out this demo app.
2. Activate billing on your Google Cloud / Firebase Project
3. Enable Vertex AI and recommended APIs in the Google Cloud console.
4. Get a Gemini API key for your project in Google AI Studio.

1. Open the project in Firebase Studio.
2. When prompted, log in with your account.
3. Add your Google Cloud Project details (project ID, region and API key) to the file .idx/dev.nix.
   • Follow the steps under Prerequisites to set up your Google Cloud project.
4. Rebuild the environment when prompted.
5. The app is now ready! Switch to the Web Preview to see it in action.

You can deploy the backend and the frontend directly from Firebase Studio. Follow the on the "Firebase Studio" screen to deploy the app to Firebase App Hosting.

Create an apphosting.yaml file and configure it based on the example.apphosting.yaml file in the root of the project.

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

To avoid continued billing for the resources that you have created as part of trying out this demo app, delete the Firebase project or disable the deployed services.

If you have created a new project to test this app, follow these steps to delete the project through the Firebase console.

Alternatively, if you followed the steps to deploy Cloud Firestore, Functions and Cloud Storage for Firebase to an existing project, follow these steps to remove them manually through the console:

• Delete data from Cloud Firestore
• Delete Cloud Functions
• Delete Cloud Storage
• Delete Cloud Run services

This app is not an officially supported Google Product.