Misc cleanup, send errors to web interface, update readmes, caveat the onRequest sample

Author: jenh

Node/call-vertex-remote-config-server/README.md

@@ -1,32 +1,57 @@
-# Use server-side Remote Config with Cloud Functions and Vertex AI
+Call the Vertex AI Gemini API with Remote Config and App Check
+==============================================================
 
-This Cloud Function (`generateWithVertex`) demonstrates how to generate text
-using Google's Vertex AI Gemini API, protected by Firebase App Check. It uses
-the Firebase Admin SDK for Node.js and Remote Config to manage model parameters,
-safety settings, and feature flags.
+Introduction
+------------
 
-## Setting up the sample
+This is a sample callable function that authenticates calling apps with App
+Check and then sends queries to Gemini using the Vertex AI Gemini API. Vertex
+AI model parameters are controlled using the Remote Config server
+functionality provided by the Firebase Admin SDK for Node.js. Use the client
+provided in `client/` to access the function through basic web page.
 
-Follow the [User server-side Remote Config with Cloud Functions and Vertex AI
-guide](https://firebase.google.com/docs/remote-config/solution-server) to:
+- [Read more about Remote Config for servers](https://firebase.google.com/docs/remote-config/server).
+- [Read more about App Check](https://firebase.google.com/docs/app-check).
+- [Read more about the Vertex AI Node.js Client library](https://cloud.google.com/nodejs/docs/reference/aiplatform/latest).
 
-* Set up your Firebase project.
-* Enable required APIs and SDKs.
-* Configure IAM permissions.
-* Test your function in the Firebase emulator.
-* Deploy your function.
-
-Important:  App Check, Vertex AI and Cloud Functions require a billing
-account. Review
+Important:  Vertex AI and Cloud Functions require a billing account. Review
 [Vertex AI pricing](https://cloud.google.com/vertex-ai/pricing) and
 [Firebase pricing](https://firebase.google.com/pricing) before running
 this function. If you're new to Firebase and Google Cloud, check to see if
 you're eligible for a
 [$300 credit](https://firebase.google.com/support/faq#pricing-free-trial) and
 a Free Trial Cloud Billing account.
 
-## Next steps
+Get Started
+---------------
+
+ 1. Follow the instructions in client/README.md to create a Firebase project,
+    enable ReCAPTCHA Enterprise, enable Firebase App Check, and add your
+    Firebase config and ReCAPTCHA Enterprise key to the client config.
+ 2. Enable [recommended Vertex AI APIs](https://console.cloud.google.com/vertex-ai).
+ 3. Configure a Remote Config server template on the Firebase console. Use the template
+    described in
+    [Use server side Remote Config with Cloud Functions and Vertex
+    AI](https://firebase.google.com/docs/remote-config/solution-server#implementation-create-template),
+    which contains all of the parameters used in the function sample.
+ 4. Install dependencies: `cd functions && npm install`
+ 5. If you haven't already done so, install firebase-tools: `npm i firebase-tools@latest`
+ 6. Log into Firebase: `firebase login`
+ 7. Deploy the function. We recommend testing in the
+    [Firebase emulator](https://firebase.google.com/docs/remote-config/solution-server#implementation-deploy-and-test-in-emulator).
+ 8. If testing in the emulator, verify that `testMode` is set to `true` in
+   `client/main.ts`, then start the client: `cd public && npm run dev`
+ 9. Open the [client app in a browser](http://localhost:5173) and enter a
+    prompt. To access the Vertex AI Gemini API, make sure that you have
+    set the `is_vertex_enabled` boolean parameter in your Remote Config
+    server template to `true`.
+
+Support
+-------
+
+- [Firebase Support](https://firebase.google.com/support/)
+
+License
+-------
 
-Learn more about Remote Config server implementations at
-[Use Remote Config in server
-environments](https://firebase.google.com/docs/remote-config/server).
+© Google, 2024. Licensed under an [Apache-2](../../LICENSE) license.

Node/call-vertex-remote-config-server/client/README.md

@@ -1,37 +1,50 @@
-Test client for Remote Config server with Vertex AI and Firebase App Check callable function
-============================================================================================
+Test client for call-vertex-remote-config-server
+================================================
 
 Introduction
 ------------
 
-This is a sample app to run with the Remote Config server with Vertex AI Node.js SDK, secured
-with Firebase App Check. 
+This is a basic web app that calls the `callVertexWithRC` function. The
+function uses values stored in Remote Config server templates with
+the Firebase Admin SDK to change Vertex AI Gemini API parameters on the
+fly. Access is controlled using Firebase App Check.
 
-<!-- Introduction
-------------
+- [Read more about Remote Config for servers](https://firebase.google.com/docs/remote-config/server).
+- [Read more about App Check](https://firebase.google.com/docs/app-check).
+- [Read more about the Vertex AI Node.js Client library](https://cloud.google.com/nodejs/docs/reference/aiplatform/latest).
 
-[Read more about Remote Config for servers](https://firebase.google.com/docs/remote-config/server).
+Important:  Vertex AI and Cloud Functions require a billing account. Review
+[Vertex AI pricing](https://cloud.google.com/vertex-ai/pricing) and
+[Firebase pricing](https://firebase.google.com/pricing) before running
+this function. If you're new to Firebase and Google Cloud, check to see if
+you're eligible for a
+[$300 credit](https://firebase.google.com/support/faq#pricing-free-trial) and
+a Free Trial Cloud Billing account.
 
-Getting Started
+Get started
 ---------------
 
- 1. Create your project on the [Firebase Console](https://console.firebase.google.com).
- 2. Create a ReCAPTCHA Enterprise key in the same project.
- 3. Enable App Check in the Firebase console with the ReCAPTCHA Enterprise site key you created.
- 4. Copy your Firebase project config and your ReCAPTCHA Enterprise site key into the appropriate places in `config.ts` in this directory.
- 5. Set up the function as described in the readme in the ../functions directory.
- 5. In this directory, run `npm install`
- 6. In this directory, run `npm run dev`
-
-To run this app against the generateWithVertex function running in an emulator, set
-`testMode` to true.
- 
-<!-- Support
+ 1. Create a [Firebase project and register a web app](https://firebase.google.com/docs/web/setup#create-firebase-project-and-app).
+ 2. [Create a ReCAPTCHA Enterprise key](https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider#project-setup)
+    in the same project.
+ 3. [Enable App Check](https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider)
+    in the Firebase console with the ReCAPTCHA Enterprise site key you created.
+ 4. Copy your Firebase project config and your ReCAPTCHA Enterprise site key
+    into the appropriate places in `config.ts` in this directory.
+ 5. In this directory, run `npm install`.
+ 6. Set up the function as described in [../README.md](../README.md).
+ 7. In this directory, run `npm run dev` to run the client.
+
+We recommend running and testing functions locally before deploying to Google
+Cloud. To run this app against the `callVertexWithRC` function running in an
+emulator, set `testMode` to true.
+
+Support
 -------
 
-- [Firebase Support](https://firebase.google.com/support/) -->
+- [Firebase Support](https://firebase.google.com/support/)
 
 License
 -------
 
-© Google, 2024. Licensed under an [Apache-2](../LICENSE) license.
+© Google, 2024. Licensed under an [Apache-2](../../../LICENSE) license.

Node/call-vertex-remote-config-server/client/index.html

@@ -1,11 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Client app for Remote Config server function with Vertex AI and App Check</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f2f2f2;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 70px;
+    }
+
+    h1 {
+      margin-bottom: 20px;
+    }
+
+    .container {
+      background-color: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      max-width: 400px;
+      width: 100%;
+      text-align: center;
+    }
+
+    input[type="text"],
+    input[type="submit"] {
+      width: 35%;
+      padding: 10px;
+      margin-bottom: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+
+    input[type="submit"] {
+      background-color: #FFA500;
+      color: white;
+      border: none;
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    input[type="submit"]:hover {
+      background-color: #45a049;
+    }
+
+    #waitingMessage,
+    #generatedText,
+    #errorMessage {
+      margin-top: 20px;
+      text-align: left;
+    }
+  </style>
 </head>
+
 <body>
+  <div>
+    <h1>Client app for Remote Config server function with Vertex AI and App Check</h1>
+    <br />
+  </div>
   <script type="module" src="main.ts"></script>
 </body>
-</html>
+
+</html>

Node/call-vertex-remote-config-server/client/main.ts

@@ -28,7 +28,7 @@ import {
 } from "firebase/functions";
 
 // Set to true to test in emulator.
-const testMode = false;
+const testMode = true;
 
 // Use showdown to convert Gemini-provided Markdown to HTML
 import { Converter } from "showdown";
@@ -46,8 +46,8 @@ initializeAppCheck(app, {
   provider: new ReCaptchaEnterpriseProvider(RECAPTCHA_ENTERPRISE_SITE_KEY),
 });
 
-// Define generateWithVertex as a call to the generateWithVertex function.
-const generateWithVertex = httpsCallable(getFunctions(), "generateWithVertex", {
+// Define callVertexWithRC as a call to the callVertexWithRC function.
+const callVertexWithRC = httpsCallable(getFunctions(), "callVertexWithRC", {
   limitedUseAppCheckTokens: true,
 });
 
@@ -60,14 +60,16 @@ if (testMode) {
 
 // Generate body for index.html.
 document.body.innerHTML += `
+    
+    <div id="waitingMessage"></div>
+    <div id="generatedText"></div>
+    <div id="errorMessage"></div>
+    <br/>
     <form id="promptForm">
-        <label for="promptInput">Prompt:</label><br>
+        <label for="promptInput">Ask Gemini a question!</label><br>
         <input type="text" id="promptInput" name="prompt"><br><br>
         <input type="submit" value="Submit">
     </form>
-    <br/>
-    <p id="generatedText"></p>
- 
 `;
 
 const promptForm = document.getElementById("promptForm") as HTMLFormElement;
@@ -79,15 +81,22 @@ promptForm.addEventListener("submit", async (event) => {
   ) as HTMLInputElement;
   const prompt = promptInput.value;
 
+  const waitingMessageElement = document.getElementById("waitingMessage");
+  waitingMessageElement.textContent = "Waiting for response...";
+
   try {
-    const { data } = await generateWithVertex({ prompt });
+    const { data } = await callVertexWithRC({ prompt });
     const generatedTextElement = document.getElementById("generatedText"); // Access the element
     const htmlContent = converter.makeHtml(data);
-    if (!generatedTextElement){
+    if (!generatedTextElement) {
       throw new Error("Missing generated text.");
     }
     generatedTextElement.innerHTML = htmlContent; // Set the element's content
+    waitingMessageElement.textContent = "";
+
   } catch (error) {
-    console.error("Error calling generateWithVertex:", error);
+    const errorMessageElement = document.getElementById("errorMessage");
+    errorMessageElement.textContent = "Error calling generateWithVertex: " + error.message;
+    waitingMessageElement.textContent = "";
   }
 });

Node/call-vertex-remote-config-server/client/package.json

@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@firebase/functions": "^0.11.5",
-    "@types/firebase": "^3.2.1",
     "firebase": "^10.12.1",
     "showdown": "^2.1.0"
   }

Node/call-vertex-remote-config-server/client/vite.config.js

@@ -1,10 +1,10 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  base: '/',
+  base: '',
   build: {
     rollupOptions: {
-      input: ['index.html'],
+      input: ['index.html','main.ts'],
     },
   },
   logLevel: 'info',

Node/call-vertex-remote-config-server/firebase.json

@@ -9,8 +9,24 @@
         "firebase-debug.log",
         "firebase-debug.*.log",
         "*.local",
-        "*.bak",
+        "*.bak"
       ]
     }
-  ]
+  ],
+  "emulators": {
+    "functions": {
+      "port": 5001
+    },
+    "ui": {
+      "enabled": true
+    },
+    "singleProjectMode": true
+  },
+  "hosting": {
+    "public": "client/dist",
+    "ignore": [
+      "firebase.json",
+      "**/node_modules/**"
+    ]
+  }
 }