Move node samples to top level, restore web samples (#206)

google-gemini · Jul 11, 2024 · 02a9a26 · 02a9a26
1 parent 23f5fdb
commit 02a9a26
Show file tree

Hide file tree

Showing 31 changed files with 546 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ const { GoogleGenerativeAI } = require("@google/generative-ai");
 
 const genAI = new GoogleGenerativeAI(process.env.API_KEY);
 
-const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash-latest" });
+const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
 ```
 
 1. Run a prompt
@@ -72,11 +72,14 @@ access and utilize the Gemini model for various use cases.
 1. [Obtain an API key](https://makersuite.google.com/app/apikey) to use with
  the Google AI SDKs.
 
-1. cd into the `samples/node` folder and run `npm install`.
+2. cd into the `samples` folder and run `npm install`.
 
-1. Assign your API key to an environment variable: `export API_KEY=MY_API_KEY`.
+3. Assign your API key to an environment variable: `export API_KEY=MY_API_KEY`.
 
-1. Run the sample file you're interested in. Example: `node simple-text.js`.
+4. Open the sample file you're interested in. Example: `text_generation.js`.
+ In the `runAll()` function, comment out any samples you don't want to run.
+
+5. Run the sample file. Example: `node text_generation.js`.
 
 ## Documentation
 

diff --git a/packages/main/README.md b/packages/main/README.md
@@ -41,7 +41,7 @@ const { GoogleGenerativeAI } = require("@google/generative-ai");
 
 const genAI = new GoogleGenerativeAI(process.env.API_KEY);
 
-const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash-latest" });
+const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
 ```
 
 1. Run a prompt
@@ -72,11 +72,14 @@ access and utilize the Gemini model for various use cases.
 1. [Obtain an API key](https://makersuite.google.com/app/apikey) to use with
  the Google AI SDKs.
 
-1. cd into the `samples/node` folder and run `npm install`.
+2. cd into the `samples` folder and run `npm install`.
 
-1. Assign your API key to an environment variable: `export API_KEY=MY_API_KEY`.
+3. Assign your API key to an environment variable: `export API_KEY=MY_API_KEY`.
 
-1. Run the sample file you're interested in. Example: `node simple-text.js`.
+4. Open the sample file you're interested in. Example: `text_generation.js`.
+ In the `runAll()` function, comment out any samples you don't want to run.
+
+5. Run the sample file. Example: `node text_generation.js`.
 
 ## Documentation
 

diff --git a/samples/node/README.md → samples/README.md b/samples/node/README.md → samples/README.md
@@ -1,10 +1,12 @@
-# Google Generative AI Sample for Node.js (Javascript)
+# Google Generative AI Samples for JavaScript
 
 These samples demonstrate how to use state-of-the-art
 generative AI models (like Gemini) to build AI-powered features and applications.
 
 To try out these samples, you'll need Node.js v18+.
 
+For some samples of how to adapt this to web, see the `web/` subdirectory.
+
 ## Requirements
 
 Follow the instructions on Google AI Studio [setup page](https://makersuite.google.com/app/apikey) to obtain an API key.

diff --git a/samples/node/cache.js → samples/cache.js b/samples/node/cache.js → samples/cache.js
diff --git a/samples/node/chat.js → samples/chat.js b/samples/node/chat.js → samples/chat.js
diff --git a/samples/node/code_execution.js → samples/code_execution.js b/samples/node/code_execution.js → samples/code_execution.js
diff --git a/samples/node/controlled_generation.js → samples/controlled_generation.js b/samples/node/controlled_generation.js → samples/controlled_generation.js
diff --git a/samples/node/count_tokens.js → samples/count_tokens.js b/samples/node/count_tokens.js → samples/count_tokens.js
diff --git a/samples/node/embed.js → samples/embed.js b/samples/node/embed.js → samples/embed.js
diff --git a/samples/node/files.js → samples/files.js b/samples/node/files.js → samples/files.js
diff --git a/samples/node/function_calling.js → samples/function_calling.js b/samples/node/function_calling.js → samples/function_calling.js
diff --git a/samples/node/media/Big_Buck_Bunny.mp4 → samples/media/Big_Buck_Bunny.mp4 b/samples/node/media/Big_Buck_Bunny.mp4 → samples/media/Big_Buck_Bunny.mp4
diff --git a/samples/node/media/a11.txt → samples/media/a11.txt b/samples/node/media/a11.txt → samples/media/a11.txt
diff --git a/samples/node/media/firefighter.jpg → samples/media/firefighter.jpg b/samples/node/media/firefighter.jpg → samples/media/firefighter.jpg
diff --git a/samples/node/media/jetpack.jpg → samples/media/jetpack.jpg b/samples/node/media/jetpack.jpg → samples/media/jetpack.jpg
diff --git a/samples/node/media/piranha.jpg → samples/media/piranha.jpg b/samples/node/media/piranha.jpg → samples/media/piranha.jpg
diff --git a/samples/node/media/samplesmall.mp3 → samples/media/samplesmall.mp3 b/samples/node/media/samplesmall.mp3 → samples/media/samplesmall.mp3
diff --git a/samples/node/model_configuration.js → samples/model_configuration.js b/samples/node/model_configuration.js → samples/model_configuration.js
diff --git a/samples/node/package.json → samples/package.json b/samples/node/package.json → samples/package.json
diff --git a/samples/node/safety_settings.js → samples/safety_settings.js b/samples/node/safety_settings.js → samples/safety_settings.js
diff --git a/samples/node/system_instruction.js → samples/system_instruction.js b/samples/node/system_instruction.js → samples/system_instruction.js
diff --git a/samples/node/text_generation.js → samples/text_generation.js b/samples/node/text_generation.js → samples/text_generation.js
diff --git a/samples/node/utils/check-samples.js → samples/utils/check-samples.js b/samples/node/utils/check-samples.js → samples/utils/check-samples.js
diff --git a/samples/web/README.md b/samples/web/README.md
@@ -0,0 +1,25 @@
+# Google Generative AI Sample for Web (Javascript)
+
+This sample app demonstrates how to use state-of-the-art
+generative AI models (like Gemini) to build AI-powered features and applications.
+
+To try out this sample app, you'll need a modern web browser and a local http server.
+
+## Requirements
+
+Follow the instructions on Google AI Studio [setup page](https://makersuite.google.com/app/apikey) to obtain an API key.
+
+It’s strongly recommended that you do not check an API key into your version control system. Instead, you should use a secrets store for your API key.
+
+The Node.js http server provided alonside this app (`http-server.js`) assumes that you're providing an `API_KEY` environment variable.
+
+## Features
+
+This sample showcases the following API capablilites:
+
+- `index.html` - demonstrates the Text and MultiModal feature from the SDK
+- `chat.html` - demonstrates the Multi-turn Conversations feature from the SDK
+
+## Documentation
+
+- [Quickstart: Get started with the Gemini API in web apps](https://ai.google.dev/tutorials/web_quickstart)
diff --git a/samples/web/chat.html b/samples/web/chat.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<!--
+ * @license
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <link rel="shortcut icon" type="image/svg+xml" href="favicon.svg" />
+ <link rel="stylesheet" href="utils/main.css" />
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,700"
+ rel="stylesheet"
+ type="text/css"
+ />
+ <title>Generative AI - Chat</title>
+ </head>
+
+ <body>
+ <header>Generative AI - Chat</header>
+ <div class="container">
+ <div id="chat-history"></div>
+ </div>
+ <div class="form-container">
+ <form id="form">
+ <input id="prompt" />
+ <button type="submit">Send</button>
+ </form>
+ <template id="thumb-template">
+ <img class="thumb" />
+ </template>
+ </div>
+
+ <script type="module">
+ import {
+ getGenerativeModel,
+ scrollToDocumentBottom,
+ updateUI,
+ } from "./utils/shared.js";
+
+ const promptInput = document.querySelector("#prompt");
+ const historyElement = document.querySelector("#chat-history");
+ let chat;
+
+ document
+ .querySelector("#form")
+ .addEventListener("submit", async (event) => {
+ event.preventDefault();
+
+ if (!chat) {
+ const model = await getGenerativeModel({ model: "gemini-1.5-flash" });
+ chat = model.startChat({
+ generationConfig: {
+ maxOutputTokens: 100,
+ },
+ });
+ }
+
+ const userMessage = promptInput.value;
+ promptInput.value = "";
+
+ // Create UI for the new user / assistant messages pair
+ historyElement.innerHTML += `<div class="history-item user-role">
+ <div class="name">User</div>
+ <blockquote>${userMessage}</blockquote>
+ </div>
+ <div class="history-item model-role">
+ <div class="name">Model</div>
+ <blockquote></blockquote>
+ </div>`;
+
+ scrollToDocumentBottom();
+ const resultEls = document.querySelectorAll(
+ ".model-role > blockquote",
+ );
+ await updateUI(
+ resultEls[resultEls.length - 1],
+ () => chat.sendMessageStream(userMessage),
+ true,
+ );
+ });
+ </script>
+ </body>
+</html>
diff --git a/samples/web/favicon.svg b/samples/web/favicon.svg
diff --git a/samples/web/http-server.js b/samples/web/http-server.js
@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import fs from "fs";
+import http from "http";
+import path from "path";
+import url from "url";
+
+// Local port for http server to listen on
+const PORT = 9000;
+
+// Get your API key from https://makersuite.google.com/app/apikey
+// Access your API key as an environment variable
+const API_KEY = process.env.API_KEY;
+
+if (!API_KEY) {
+ throw new Error("API_KEY environment variable not set");
+}
+
+// Maps file extention to MIME types
+// Full list can be found here: https://www.freeformatter.com/mime-types-list.html
+const mimeType = {
+ ".html": "text/html",
+ ".js": "text/javascript",
+ ".mjs": "text/javascript",
+ ".css": "text/css",
+};
+
+http
+ .createServer((req, res) => {
+ console.log(` ${req.method} ${req.url}`);
+
+ // Parse URL
+ const parsedUrl = url.parse(req.url);
+
+ // Extract URL path
+ // Avoid https://en.wikipedia.org/wiki/Directory_traversal_attack
+ let sanitizedPath = path
+ .normalize(parsedUrl.pathname)
+ .replace(/^(\.\.[\/\\])+/, "")
+ .substring(1);
+
+ if (sanitizedPath === "API_KEY") {
+ res.end(API_KEY);
+ return;
+ }
+
+ if (sanitizedPath === "") {
+ sanitizedPath = "index.html";
+ }
+
+ // based on the URL path, extract the file extention. e.g. .js, .doc, ...
+ const ext = path.parse(sanitizedPath).ext;
+
+ try {
+ const data = fs.readFileSync(sanitizedPath);
+
+ // If the file is found, set Content-Type and send data
+ if (mimeType[ext]) {
+ res.setHeader("Content-Type", mimeType[ext]);
+ }
+ res.end(data);
+ } catch (err) {
+ // If the file is not found, return 404
+ res.statusCode = 404;
+ res.end();
+ }
+ })
+ .listen(parseInt(PORT));
+
+console.log(
+ `Server listening. Pages:\n - http://localhost:${PORT}\n - http://localhost:${PORT}/chat.html`,
+);
diff --git a/samples/web/index.html b/samples/web/index.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<!--
+ * @license
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <link rel="shortcut icon" type="image/svg+xml" href="favicon.svg" />
+ <link rel="stylesheet" href="utils/main.css" />
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,700"
+ rel="stylesheet"
+ type="text/css"
+ />
+ <title>Generative AI - Text and Image</title>
+ </head>
+
+ <body>
+ <header>Generative AI - Text and Image</header>
+ <div class="form-container">
+ <form id="form">
+ <input type="file" id="file'" multiple />
+ <input id="prompt" />
+ <button type="submit">Send</button>
+ </form>
+ <div id="thumbnails"></div>
+ </div>
+ <div class="container">
+ <blockquote id="result"></blockquote>
+ </div>
+
+ <script type="module">
+ import {
+ getGenerativeModel,
+ fileToGenerativePart,
+ updateUI,
+ } from "./utils/shared.js";
+
+ async function run(prompt, files) {
+ const imageParts = await Promise.all(
+ [...files].map(fileToGenerativePart),
+ );
+
+ const model = await getGenerativeModel({
+ model: "gemini-1.5-flash",
+ });
+
+ return model.generateContentStream([...imageParts, prompt]);
+ }
+
+ const fileInputEl = document.querySelector("input[type=file]");
+ const thumbnailsEl = document.querySelector("#thumbnails");
+
+ fileInputEl.addEventListener("input", () => {
+ thumbnailsEl.innerHTML = "";
+ for (const file of fileInputEl.files) {
+ const url = URL.createObjectURL(file);
+ thumbnailsEl.innerHTML += `<img class="thumb" src="${url}" onload="window.URL.revokeObjectURL(this.src)" />`;
+ }
+ });
+
+ document
+ .querySelector("#form")
+ .addEventListener("submit", async (event) => {
+ event.preventDefault();
+
+ const promptEl = document.querySelector("#prompt");
+ const resultEl = document.querySelector("#result");
+
+ updateUI(
+ resultEl,
+ () => run(promptEl.value, fileInputEl.files),
+ true,
+ );
+ });
+ </script>
+ </body>
+</html>
diff --git a/samples/web/package.json b/samples/web/package.json
@@ -0,0 +1,10 @@
+{
+ "type": "module",
+ "scripts": {
+ "start": "node http-server.js",
+ "http-server": "node http-server.js"
+ },
+ "dependencies": {
+ "@google/generative-ai": "*"
+ }
+}