diff --git a/quickstarts-js/Guesstheshape.txt b/quickstarts-js/Guesstheshape.txt new file mode 100644 index 000000000..8aad5c7f0 --- /dev/null +++ b/quickstarts-js/Guesstheshape.txt @@ -0,0 +1,135 @@ +/* Markdown (render) +# Guess the shape: Triangle, square, pentagon, ? + +This notebook provides a quick code example showing how to use multiple images in the same prompt with the Gemini API. You'll show the model a sequence of shapes (a triangle, a square, and a pentagon) and ask it to guess the shape that comes next. + +## Setup +### Install SDK and set-up the client + +### API Key Configuration + +To ensure security, avoid hardcoding the API key in frontend code. Instead, set it as an environment variable on the server or local machine. + +When using the Gemini API client libraries, the key will be automatically detected if set as either `GEMINI_API_KEY` or `GOOGLE_API_KEY`. If both are set, `GOOGLE_API_KEY` takes precedence. + +For instructions on setting environment variables across different operating systems, refer to the official documentation: [Set API Key as Environment Variable](https://ai.google.dev/gemini-api/docs/api-key#set-api-env-var) + +In code, the key can then be accessed as: + +```js +ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY }); +``` +*/ + +// [CODE STARTS] +module = await import("https://esm.sh/@google/genai@1.4.0"); +GoogleGenAI = module.GoogleGenAI; +ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY }); + +MODEL_ID = "gemini-2.5-flash" // ["gemini-2.5-flash-lite", "gemini-2.5-flash", "gemini-2.5-pro"] +// [CODE ENDS] + +// [CODE STARTS] +triangleUrl = "https://storage.googleapis.com/generativeai-downloads/images/triangle.png"; +squareUrl = "https://storage.googleapis.com/generativeai-downloads/images/square.png"; +pentagonUrl = "https://storage.googleapis.com/generativeai-downloads/images/pentagon.png"; +// [CODE ENDS] + +// [CODE STARTS] +async function fetchImageAsBase64(url) { + response = await fetch(url); + blob = await response.blob(); + return await new Promise((resolve) => { + reader = new FileReader(); + reader.onloadend = () => resolve(reader.result.split(',')[1]); // only base64 part + reader.readAsDataURL(blob); + }); +} + + +(async () => { + triangleBase64 = await fetchImageAsBase64(triangleUrl); + squareBase64 = await fetchImageAsBase64(squareUrl); + pentagonBase64 = await fetchImageAsBase64(pentagonUrl); + + console.log("Triangle:"); + console.image(triangleBase64); + + console.log("Square:"); + console.image(squareBase64); + + console.log("Pentagon:"); + console.image(pentagonBase64); +})(); +// [CODE ENDS] + +/* Output Sample + +Triangle: + + + +Square: + + + +Pentagon: + + + +*/ + +// [CODE STARTS] +prompt = ` +Look at this sequence of three shapes. What shape should come as the fourth shape? Explain +your reasoning with detailed descriptions of the first shapes. +`; +// [CODE ENDS] + +// [CODE STARTS] +response = await ai.models.generateContent({ + model: MODEL_ID, + contents: [ + prompt, + { inlineData: { data: triangleBase64, mimeType: "image/png" } }, + { inlineData: { data: squareBase64, mimeType: "image/png" } }, + { inlineData: { data: pentagonBase64, mimeType: "image/png" } }, + ], +}); + +console.log(response.text); +// [CODE ENDS] + +/* Output Sample + +This sequence of shapes follows a clear pattern based on the number of sides (and vertices) of each polygon. + +Here's a detailed description of the first shapes and the reasoning for the fourth: + +1. **First Shape:** This is a **triangle**. + * It is a polygon with **3 sides** and **3 vertices** (corners). + +2. **Second Shape:** This is a **square** (or a rectangle). + * It is a polygon with **4 sides** and **4 vertices**. + +3. **Third Shape:** This is a **pentagon**. + * It is a polygon with **5 sides** and **5 vertices**. + +**Reasoning:** +The pattern observed is that each subsequent shape in the sequence is a polygon with one more side (and one more vertex) than the previous shape. + +* Triangle (3 sides) +* Square (4 sides) - 3 + 1 = 4 +* Pentagon (5 sides) - 4 + 1 = 5 + +**Therefore, the fourth shape should be a polygon with 5 + 1 = 6 sides.** + +The fourth shape should be a **hexagon**. + +*/ + +/* Markdown (render) +## Further reading + +In this notebook, you included images directly in the prompt. This is fine for small images. If your prompts will exceed 20MB in size, you can use the [Files API](https://github.com/google-gemini/cookbook/tree/main/quickstarts/file-api) to upload your images (and other media types) in advance. +*/ \ No newline at end of file