Merge pull request #10 from HYACCCINT/main

"Planning with the Gemini API" - a Firebase AI sample app

Author: rainshen49

README.md

@@ -1,68 +1,69 @@
-# Make It So
+# "Planning with the Gemini API" - a Firebase AI sample app
 
-Welcome to the _Make It So_ sample app, an AI-powered web app for to-do lists!
-It's an [Angular](https://angular.io/) app built using the Gemini API and Firebase.
+Welcome to the _Planning with the Gemini API_ sample app, an AI-powered web app
+for to-do lists! It's an [Angular](https://angular.io/) app built using the
+Gemini API and Firebase.
 
 The [Gemini API](https://ai.google.dev/gemini-api) gives you access to Google's latest
-generative AI models – the Gemini family of multimodal models. This _Make It So_ web app
-calls the Gemini API to generate a task list from either text or an image provided by
-the end user.
+generative AI models – the Gemini family of multimodal models.
+This _Planning with the Gemini API_ web app calls the Gemini API to generate a task list
+from either text or an image provided by the end user.
 
-The backend of _Make It So_ is powered by [Firebase](https://firebase.google.com/),
-which is Google's platform for building fullstack multi-platform apps. This app uses
+The backend of _Planning with the Gemini API_ is powered by
+[Firebase](https://firebase.google.com/), which is Google's platform for
+building fullstack multi-platform apps. This app uses
 [Firebase Authentication](https://firebase.google.com/products/auth) for signing-in
 and authorizing end users. It also uses
 [Firestore](https://firebase.google.com/products/firestore) – a NoSQL realtime database –
 to store the to-do list items.
 
-> [!CAUTION]
-> **In its default state, this sample app is for _experimentation and prototyping only_.**
+> [!CAUTION] > **In its DEFAULT state, this sample app is for _EXPERIMENTATION and PROTOTYPING ONLY_.**
 > It uses the [Google AI SDK for JavaScript](https://ai.google.dev/gemini-api/docs/quickstart?lang=web)
 > directly from the client-side which means that you risk potentially exposing your
 > Gemini API key to malicious actors if you deploy this app.
-> 
+>
 > If you want to deploy this sample app or use it as a base for a production app,
 > **we strongly recommend that you
 > [migrate to use the Vertex AI in Firebase SDK](https://github.com/FirebaseExtended/make-it-so-angular/main/README.md#migrate-to-use-vertex-ai-in-firebase),
 > which offers security options against unauthorized clients.**
 
 ## Explore the app's codebase
 
-* In `src/environments/environments.ts`, you can find important configuration values:
+- In `src/environments/environments.ts`, you can find important configuration values:
 
-  * Within `firebase`, find the values needed to connect your app to Firebase
+  - Within `firebase`, find the values needed to connect your app to Firebase
     (most importantly `apiKey`, `projectId`, and `appId`).
-  * Find your Gemini API key (`gemini_api_key`).
+  - Find your Gemini API key (`gemini_api_key`).
 
   Note that if you
   [run the sample app in IDX](https://github.com/FirebaseExtended/make-it-so-angular/main/README.md#set-up-and-run-the-app),
   then these config values will be automatically populated into the file for you.
 
-* In `src/app/services/task.service.ts`, you can explore how to make a basic call to
+- In `src/app/services/task.service.ts`, you can explore how to make a basic call to
   the Gemini API, including:
 
-  * Importing the Google AI package: `google/generative-ai`.
-  * Initializing the Google AI service and the generative model.
-  * Calling `generateContent` to send the request to Gemini with the provided prompt
+  - Importing the Google AI package: `google/generative-ai`.
+  - Initializing the Google AI service and the generative model.
+  - Calling `generateContent` to send the request to Gemini with the provided prompt
     (and image, if provided).
 
-* In `src/app/app.config.ts` and `src/app/services/task.service.ts`, you can explore
+- In `src/app/app.config.ts` and `src/app/services/task.service.ts`, you can explore
   how to use Firebase, including:
 
-  * Using Firebase Authentication's
+  - Using Firebase Authentication's
     [anonymous authentication method](https://firebase.google.com/docs/auth/web/anonymous-auth)
     to create an authenticated user account.
-  * Using Firestore to write and read to-do tasks and subtasks generated by Gemini.
+  - Using Firestore to write and read to-do tasks and subtasks generated by Gemini.
 
 ## Set up and run the app
 
 You can either run the sample app in IDX (recommended) or locally.
 
 ### Option 1: Run in IDX _(recommended)_
 
-This _Make It So_ web app is best experienced by running it in [IDX](https://idx.dev/),
-which is Google's browser-based workspace for building, shipping, and managing
-full-stack multiplatform apps.
+This _Planning with the Gemini API_ web app is best experienced by running it in
+[IDX](https://idx.dev/), which is Google's browser-based workspace for
+building, shipping, and managing full-stack multiplatform apps.
 
 Firebase provides a custom workflow using IDX to help you quickly experiment with the sample app.
 This workflow automatically sets up a new Firebase project with Authentication and Firestore
@@ -75,61 +76,62 @@ You can also kick-off this custom workflow from the Firebase console in the
 _Build with Gemini_ section (find the "Experiment with a Gemini sample app" banner).
 
 Here's some additional information about this custom workflow:
-* To somewhat protect your Gemini API key, the workflow has imposed a quota limit on the
+
+- To somewhat protect your Gemini API key, the workflow has imposed a quota limit on the
   API key of 10 RPM.
-* This workflow creates a new IDX workspace. If you run out of workspace quota, go to
+- This workflow creates a new IDX workspace. If you run out of workspace quota, go to
   [idx.google.com](idx.google.com) to delete an old workspace.
 
 ### Option 2: Run locally
 
-You can also run this _Make It So_ web app locally. You'll just need to complete some
-manual setup steps.
+You can also run this _Planning with the Gemini API_ web app locally. You'll just need
+to complete some manual setup steps.
 
 #### Prerequisites
 
-* Node.js v20+
-* npm v10+
-* Angular CLI 18+
+- Node.js v20+
+- npm v10+
+- Angular CLI 18+
 
 #### Setup instructions
 
 1.  Set up Firebase:
-    1.  Create a new Firebase project in the
-        [Firebase console](https://console.firebase.google.com/).
-        You can skip setting up Google Analytics.
-    1.  Enable [Firestore](https://console.firebase.google.com/u/0/project/_/firestore)
-        and [anonymous authentication](https://console.firebase.google.com/u/0/project/_/authentication)
-        in your new project.
-    1.  Create a new Firebase web app in your new project.
-        You can skip setting up Firebase Hosting.
-    1.  Copy your Firebase config object, and replace the placeholder values in the
-        `src/environments/environments.ts` file of the sample app.
-
-1.  Set up the Gemini API:
-    1.  [Get a Gemini API key](https://aistudio.google.com/app/apikey) in Google AI Studio.
-        Use the Firebase project you just created.
-    1.  Add your Gemini API key into the `src/environments/environments.ts` file of the sample app.
-
-1.  Run `npm install` to install the app's dependencies.
-
-1.  Serve the app:
-    1.  Run `ng serve` to start the Angular development server.
-    1.  Open your browser and navigate to `http://localhost:4200`.
+    a. Create a new Firebase project in the
+    [Firebase console](https://console.firebase.google.com/).
+    You can skip setting up Google Analytics.
+    b. Enable [Firestore](https://console.firebase.google.com/u/0/project/_/firestore)
+    and [anonymous authentication](https://console.firebase.google.com/u/0/project/_/authentication)
+    in your new project.
+    c. Create a new Firebase web app in your new project.
+    You can skip setting up Firebase Hosting.
+    d. Copy your Firebase config object, and replace the placeholder values in the
+    `src/environments/environments.ts` file of the sample app.
+
+2.  Set up the Gemini API:
+    a. [Get a Gemini API key](https://aistudio.google.com/app/apikey) in Google AI Studio.
+    Use the Firebase project you just created.
+    b. Add your Gemini API key into the `src/environments/environments.ts` file of the sample app.
+
+3.  Run `npm install` to install the app's dependencies.
+
+4.  Serve the app:
+    a. Run `ng serve` to start the Angular development server.
+    b. Open your browser and navigate to `http://localhost:4200`.
 
 ## Interact with the app
 
 1.  Create a new task.\
     Click the "New task" button on the left to initiate the creation of a new task.
     Gemini suggests a task title. Edit the title as desired.
 
-1.  Generate subtasks.\
+2.  Generate subtasks.\
     Gemini can generate a list of subtasks based either on your title and/or an uploaded image.
 
-1.  Save the task to add it to the dashboard of to-do tasks.
+3.  Save the task to add it to the dashboard of to-do tasks.
 
 ## Migrate to use Vertex AI in Firebase
 
-**In its default state, this sample app is for _experimentation and prototyping only_.**
+**In its DEFAULT state, this sample app is for _EXPERIMENTATION and PROTOTYPING ONLY_.**
 It uses the [Google AI SDK for JavaScript](https://ai.google.dev/gemini-api/docs/quickstart?lang=web)
 directly from the client-side which means that you risk potentially exposing your Gemini API key
 to malicious actors if you deploy this app.
@@ -152,31 +154,32 @@ your Firebase project (as described below).
     and then click the _Vertex AI in Firebase_ card to launch a workflow that helps you
     do the following tasks (if they're not already done):
 
-    * Upgrade your project to use the
+    - Upgrade your project to use the
       [pay-as-you-go Blaze pricing plan](https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered).
-    * Enable the following two APIs for your project:\
-      [aiplatform.googleapis.com](https://console.cloud.google.com/apis/library/aiplatform.googleapis.com?project=_)
+    - Enable the following two APIs for your project:\
+      [Vertex AI API](https://console.cloud.google.com/apis/library/aiplatform.googleapis.com?project=_)
       and
-      [firebaseml.googleapis.com](https://console.cloud.google.com/apis/library/firebaseml.googleapis.com?project=_)
+      [Firebase ML API](https://console.cloud.google.com/apis/library/firebaseml.googleapis.com?project=_)
 
-1.  As soon as you start seriously developing your app,
+2.  As soon as you start seriously developing your app,
     [set up Firebase App Check](https://firebase.google.com/docs/vertex-ai/app-check)
     to protect your app from abuse by unauthorized clients.
 
-1.  Follow security best practices by cleaning up your Firebase project and sample app:
+3.  Follow security best practices by cleaning up your Firebase project and sample app:
+
+    - If you're no longer using your Gemini API key, then delete it.
 
-    * If you're no longer using your Gemini API key, then delete it.
-      * In the [**API keys** section of Google AI Studio](https://aistudio.google.com/app/apikey),
+      - In the [**API keys** section of Google AI Studio](https://aistudio.google.com/app/apikey),
         view and delete your Gemini API key.
-      * In the sample app's codebase, delete references to the Gemini API key in the following places:
-        * `google_apikeys_key` resource entry in `main.tf`
-        * `gemini_api_key` in both `src/environments/environments.ts` and `src/environments/environments.ts.tmpl`
+      - In the sample app's codebase, delete references to the Gemini API key in the following places:
+        - `google_apikeys_key` resource entry in `main.tf`
+        - `gemini_api_key` in both `src/environments/environments.ts` and `src/environments/environments.ts.tmpl`
 
-    * If you're no longer using the Google AI Gemini API, then disable it in your project
+    - If you're no longer using the Google AI Gemini API, then disable it in your project
       and delete references to it in your sample app's codebase:
-      * Disable the API in the Google Cloud console:
+      - Disable the API in the Google Cloud console:
         [generativelanguage.googleapis.com](https://console.cloud.google.com/apis/library/generativelanguage.googleapis.com?project=_)
-      * Delete references to `generativelanguage.googleapis.com`, including the
+      - Delete references to `generativelanguage.googleapis.com`, including the
         `google_service_usage_consumer_quota_override` resource entry in `main.tf`.
 
 ## Troubleshooting
@@ -189,9 +192,9 @@ compute: Received 500
 This error happens because authentication has timed-out. Here's how to resolve it:
 
 1.  In Project IDX, open a new terminal.
-1.  In the terminal, run `terraform apply --auto-approve`, and then click continue when prompted to log in.
-1.  Wait until the command succeeds.
-1.  Reload the web preview, if necessary.
+2.  In the terminal, run `terraform apply --auto-approve`, and then click continue when prompted to log in.
+3.  Wait until the command succeeds.
+4.  Reload the web preview, if necessary.
 
 ```
 Error loading Gemini API key. Please rerun Terraform with terraform apply --auto-approve"
@@ -201,27 +204,27 @@ This error happens because Terraform failed to provision some resources
 during initialization, such as API keys. Here's how to resolve it:
 
 1.  In Project IDX, open a new terminal.
-1.  In the terminal, run `terraform apply --auto-approve`, and then click
+2.  In the terminal, run `terraform apply --auto-approve`, and then click
     continue when prompted to log in.
-1.  Wait until the command succeeds.
-1.  Reload the web preview, if necessary.
+3.  Wait until the command succeeds.
+4.  Reload the web preview, if necessary.
 
 ```
 Check Firestore permissions in Firebase Console: link
 ```
 
 This error happens because
 [Firestore security rules](https://firebase.google.com/docs/firestore/security/get-started)
-are blocking requests from your app.  Here's how to resolve it:
+are blocking requests from your app. Here's how to resolve it:
 
 1.  Go to the Firebase console using the link provided in the error message.
-1.  Check that the security rules are what you expect. In particular,
+2.  Check that the security rules are what you expect. In particular,
     `timestamp.date` should be in the future.
-1.  Reload the web preview, if necessary.
+3.  Reload the web preview, if necessary.
 
 ## Docs
 
-* [Firebase Support](https://firebase.google.com/support)
-* [Google AI Gemini API documentation](https://ai.google.dev/gemini-api/docs/quickstart?lang=web)
+- [Firebase Support](https://firebase.google.com/support)
+- [Google AI Gemini API documentation](https://ai.google.dev/gemini-api/docs/quickstart?lang=web)
   (for experimentation and prototyping)
-* [Vertex AI in Firebase documentation](https://firebase.google.com/docs/vertex-ai) (for production apps)
+- [Vertex AI in Firebase documentation](https://firebase.google.com/docs/vertex-ai) (for production apps)

firebase.json

@@ -1 +1,5 @@
-{}
+{
+    "hosting": {
+      "public": "dist/firebase-ai-angular/browser"
+    }
+}

idx-template.json

@@ -1,5 +1,5 @@
 {
-    "name": "Firebase: Make It So - with AI!",
+    "name": "Planning with the Gemini API",
     "description": "A sample web app that demonstrates how to experiment with Firebase and Gemini AI",
     "categories": [
         "AI & ML",