From 005f7caa65893a452ac7def02cfcbe9f681101d2 Mon Sep 17 00:00:00 2001 From: Sebastian Benz Date: Thu, 25 Jul 2024 10:08:13 +0000 Subject: [PATCH] add Gemini API sample (#1240) * add Gemini API sample * Simplify configuration and fix response formatting * Update wording for gemini nano sample --- .gitignore | 1 + .../ai.gemini-in-the-cloud/.gitignore | 1 + .../ai.gemini-in-the-cloud/README.md | 23 ++ .../ai.gemini-in-the-cloud/background.js | 3 + .../ai.gemini-in-the-cloud/images/icon128.png | Bin 0 -> 3949 bytes .../ai.gemini-in-the-cloud/images/icon16.png | Bin 0 -> 267 bytes .../ai.gemini-in-the-cloud/images/icon32.png | Bin 0 -> 458 bytes .../ai.gemini-in-the-cloud/images/icon48.png | Bin 0 -> 890 bytes .../ai.gemini-in-the-cloud/manifest.json | 22 ++ .../ai.gemini-in-the-cloud/package-lock.json | 288 ++++++++++++++++++ .../ai.gemini-in-the-cloud/package.json | 12 + .../sidepanel/index.css | 82 +++++ .../sidepanel/index.html | 34 +++ .../ai.gemini-in-the-cloud/sidepanel/index.js | 127 ++++++++ .../ai.gemini-on-device/README.md | 4 +- 15 files changed, 595 insertions(+), 2 deletions(-) create mode 100644 functional-samples/ai.gemini-in-the-cloud/.gitignore create mode 100644 functional-samples/ai.gemini-in-the-cloud/README.md create mode 100644 functional-samples/ai.gemini-in-the-cloud/background.js create mode 100644 functional-samples/ai.gemini-in-the-cloud/images/icon128.png create mode 100644 functional-samples/ai.gemini-in-the-cloud/images/icon16.png create mode 100644 functional-samples/ai.gemini-in-the-cloud/images/icon32.png create mode 100644 functional-samples/ai.gemini-in-the-cloud/images/icon48.png create mode 100644 functional-samples/ai.gemini-in-the-cloud/manifest.json create mode 100644 functional-samples/ai.gemini-in-the-cloud/package-lock.json create mode 100644 functional-samples/ai.gemini-in-the-cloud/package.json create mode 100644 functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css create mode 100644 functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html create mode 100644 functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js diff --git a/.gitignore b/.gitignore index 7c981e6f..742aea9b 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ node_modules # Temporary directory for debugging extension samples _debug _metadata +*.swp # vim temp files diff --git a/functional-samples/ai.gemini-in-the-cloud/.gitignore b/functional-samples/ai.gemini-in-the-cloud/.gitignore new file mode 100644 index 00000000..1521c8b7 --- /dev/null +++ b/functional-samples/ai.gemini-in-the-cloud/.gitignore @@ -0,0 +1 @@ +dist diff --git a/functional-samples/ai.gemini-in-the-cloud/README.md b/functional-samples/ai.gemini-in-the-cloud/README.md new file mode 100644 index 00000000..b260bb87 --- /dev/null +++ b/functional-samples/ai.gemini-in-the-cloud/README.md @@ -0,0 +1,23 @@ +# On-device AI with Gemini Nano + +This sample demonstrates how to use the Gemini Cloud API in a Chrome Extension. + +## Overview + +The extension provides a chat interface for the Gemini API. To learn more about the API head over to [https://ai.google.dev/](https://ai.google.dev/). + +## Running this extension + +1. Clone this repository. +2. Download the Gemini API client by running: + ```sh + npm install + ``` +3. [Retrieve an API key](https://ai.google.dev/gemini-api/docs/api-key) and update [functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js](functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js) (only for testing). +4. Compile the JS bundle for the sidepanel implementation by running: + ```sh + npm run build + ``` +5. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked). +6. Click the extension icon. +7. Interact with the prompt API in the sidebar. diff --git a/functional-samples/ai.gemini-in-the-cloud/background.js b/functional-samples/ai.gemini-in-the-cloud/background.js new file mode 100644 index 00000000..d7262b80 --- /dev/null +++ b/functional-samples/ai.gemini-in-the-cloud/background.js @@ -0,0 +1,3 @@ +chrome.sidePanel + .setPanelBehavior({ openPanelOnActionClick: true }) + .catch((error) => console.error(error)); diff --git a/functional-samples/ai.gemini-in-the-cloud/images/icon128.png b/functional-samples/ai.gemini-in-the-cloud/images/icon128.png new file mode 100644 index 0000000000000000000000000000000000000000..787906199986752376c877a99165cd7b5a9e1870 GIT binary patch literal 3949 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 P9%Arx^>bP0l+XkK{cvXg literal 0 HcmV?d00001 diff --git a/functional-samples/ai.gemini-in-the-cloud/images/icon32.png b/functional-samples/ai.gemini-in-the-cloud/images/icon32.png new file mode 100644 index 0000000000000000000000000000000000000000..838c426c8e30870c3a1e2c4f8f83d4614fd85487 GIT binary patch literal 458 zcmV;*0X6=KP)Px$gh@m}R9HvtmrG8=Fc5}kD#3;g*`&Mlk&Dm+u;2!81Wp1sfE#cGxCcrfkytbf z!ls)N)yPpNO2XJq+Kd8HvrA%oK99#U{~)w@((&T*Td5bN)D<@k5#P=bZ@lH?tLd`X zWMDFyznY9%<}ZhFIB~6S1xSMENdert7P0+DfM-7r?@VKi0P7%9#~7~99mXMRi~ZQO zaf0C>egQ}sH$hYYq>XbB1ppUt{%YDu7$l>4Wu0cQtq&&0nP^l4{d2y8bBWd+OA$5fTEecyWYvG^;=N( z_WuGnG%0lEffIm;2YSDTy(gl5EpVpd?0pN6wLAm`@Ok|Kkn!S57o@xvn2v!G&gL$dQTM|`<=c3hFj)ja@%W>`nMgd>kdlEYbR*=|Y;TS)2bIaoNZ;4W(l@h0oWVsYX ztHz|L<9)Vf<=`=iR%=hV7oDyEZqyyqA`Px&G)Y83RA@u(T3v1$F%bT|YFer71M~rcq7o=kAJg;(xk1wt1a1)214KDM1@C0B42d9_`ry0lXOWY$leJzJ>dXNC9Hzxb}_4W$WyUe-RO zK+%uOBme}crrL!v({%zswQ)@Xz!Z1AzyZi&-}Q)T0Nk9315jC?(U=AR06&rbWB@#j zNH5piqK@-Pb;KCx0kGSdbl2@;Q2q>*4ifK zGDn9L7thtTG@i_j(`n^CSf&RqHd~;Vj`Fmc00{e_xqf$v+mAQOg>(t%4F$`gbjH+! zX6yxNPBiO*t7;!t73R2j#?+INXNiiMzZXE<%6oeWfy*j!E6X^3$(b}2^d*~ZV5sB;0^kZ$^%7KzisrpF z{~-LK08D_4e)gEBk31lhmY4pshsZ*_NKBo5P;5(ow*l&oWgVzG@VZ|34aR7xZbPw# QS^xk507*qoM6N<$g15q#s{jB1 literal 0 HcmV?d00001 diff --git a/functional-samples/ai.gemini-in-the-cloud/manifest.json b/functional-samples/ai.gemini-in-the-cloud/manifest.json new file mode 100644 index 00000000..9f7574c3 --- /dev/null +++ b/functional-samples/ai.gemini-in-the-cloud/manifest.json @@ -0,0 +1,22 @@ +{ + "name": "Google Gemini Demo", + "version": "0.1", + "manifest_version": 3, + "description": "Try the Gemini Models.", + "background": { + "service_worker": "background.js" + }, + "permissions": ["sidePanel"], + "side_panel": { + "default_path": "sidepanel/index.html" + }, + "action": { + "default_icon": { + "16": "images/icon16.png", + "32": "images/icon32.png", + "48": "images/icon48.png", + "128": "images/icon128.png" + }, + "default_title": "Open Chat Interface" + } +} diff --git a/functional-samples/ai.gemini-in-the-cloud/package-lock.json b/functional-samples/ai.gemini-in-the-cloud/package-lock.json new file mode 100644 index 00000000..8aafc456 --- /dev/null +++ b/functional-samples/ai.gemini-in-the-cloud/package-lock.json @@ -0,0 +1,288 @@ +{ + "name": "Chrome Extensions Gemini Demo", + "version": "1.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "Chrome Extensions Gemini Demo", + "version": "1.0", + "devDependencies": { + "@google/generative-ai": "0.15.0", + "rollup": "4.19.0" + } + }, + "node_modules/@google/generative-ai": { + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.15.0.tgz", + "integrity": "sha512-zs37judcTYFJf1U7tnuqnh7gdzF6dcWj9pNRxjA5JTONRoiQ0htrRdbefRFiewOIfXwhun5t9hbd2ray7812eQ==", + "dev": true, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.0.tgz", + "integrity": "sha512-JlPfZ/C7yn5S5p0yKk7uhHTTnFlvTgLetl2VxqE518QgyM7C9bSfFTYvB/Q/ftkq0RIPY4ySxTz+/wKJ/dXC0w==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.19.0.tgz", + "integrity": "sha512-RDxUSY8D1tWYfn00DDi5myxKgOk6RvWPxhmWexcICt/MEC6yEMr4HNCu1sXXYLw8iAsg0D44NuU+qNq7zVWCrw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.19.0.tgz", + "integrity": "sha512-emvKHL4B15x6nlNTBMtIaC9tLPRpeA5jMvRLXVbl/W9Ie7HhkrE7KQjvgS9uxgatL1HmHWDXk5TTS4IaNJxbAA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.19.0.tgz", + "integrity": "sha512-fO28cWA1dC57qCd+D0rfLC4VPbh6EOJXrreBmFLWPGI9dpMlER2YwSPZzSGfq11XgcEpPukPTfEVFtw2q2nYJg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.19.0.tgz", + "integrity": "sha512-2Rn36Ubxdv32NUcfm0wB1tgKqkQuft00PtM23VqLuCUR4N5jcNWDoV5iBC9jeGdgS38WK66ElncprqgMUOyomw==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.19.0.tgz", + "integrity": "sha512-gJuzIVdq/X1ZA2bHeCGCISe0VWqCoNT8BvkQ+BfsixXwTOndhtLUpOg0A1Fcx/+eA6ei6rMBzlOz4JzmiDw7JQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.19.0.tgz", + "integrity": "sha512-0EkX2HYPkSADo9cfeGFoQ7R0/wTKb7q6DdwI4Yn/ULFE1wuRRCHybxpl2goQrx4c/yzK3I8OlgtBu4xvted0ug==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.19.0.tgz", + "integrity": "sha512-GlIQRj9px52ISomIOEUq/IojLZqzkvRpdP3cLgIE1wUWaiU5Takwlzpz002q0Nxxr1y2ZgxC2obWxjr13lvxNQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.19.0.tgz", + "integrity": "sha512-N6cFJzssruDLUOKfEKeovCKiHcdwVYOT1Hs6dovDQ61+Y9n3Ek4zXvtghPPelt6U0AH4aDGnDLb83uiJMkWYzQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.19.0.tgz", + "integrity": "sha512-2DnD3mkS2uuam/alF+I7M84koGwvn3ZVD7uG+LEWpyzo/bq8+kKnus2EVCkcvh6PlNB8QPNFOz6fWd5N8o1CYg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.19.0.tgz", + "integrity": "sha512-D6pkaF7OpE7lzlTOFCB2m3Ngzu2ykw40Nka9WmKGUOTS3xcIieHe82slQlNq69sVB04ch73thKYIWz/Ian8DUA==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.19.0.tgz", + "integrity": "sha512-HBndjQLP8OsdJNSxpNIN0einbDmRFg9+UQeZV1eiYupIRuZsDEoeGU43NQsS34Pp166DtwQOnpcbV/zQxM+rWA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.19.0.tgz", + "integrity": "sha512-HxfbvfCKJe/RMYJJn0a12eiOI9OOtAUF4G6ozrFUK95BNyoJaSiBjIOHjZskTUffUrB84IPKkFG9H9nEvJGW6A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.19.0.tgz", + "integrity": "sha512-HxDMKIhmcguGTiP5TsLNolwBUK3nGGUEoV/BO9ldUBoMLBssvh4J0X8pf11i1fTV7WShWItB1bKAKjX4RQeYmg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.19.0.tgz", + "integrity": "sha512-xItlIAZZaiG/u0wooGzRsx11rokP4qyc/79LkAOdznGRAbOFc+SfEdfUOszG1odsHNgwippUJavag/+W/Etc6Q==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.19.0.tgz", + "integrity": "sha512-xNo5fV5ycvCCKqiZcpB65VMR11NJB+StnxHz20jdqRAktfdfzhgjTiJ2doTDQE/7dqGaV5I7ZGqKpgph6lCIag==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/rollup": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.19.0.tgz", + "integrity": "sha512-5r7EYSQIowHsK4eTZ0Y81qpZuJz+MUuYeqmmYmRMl1nwhdmbiYqt5jwzf6u7wyOzJgYqtCRMtVRKOtHANBz7rA==", + "dev": true, + "dependencies": { + "@types/estree": "1.0.5" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.19.0", + "@rollup/rollup-android-arm64": "4.19.0", + "@rollup/rollup-darwin-arm64": "4.19.0", + "@rollup/rollup-darwin-x64": "4.19.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.19.0", + "@rollup/rollup-linux-arm-musleabihf": "4.19.0", + "@rollup/rollup-linux-arm64-gnu": "4.19.0", + "@rollup/rollup-linux-arm64-musl": "4.19.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.19.0", + "@rollup/rollup-linux-riscv64-gnu": "4.19.0", + "@rollup/rollup-linux-s390x-gnu": "4.19.0", + "@rollup/rollup-linux-x64-gnu": "4.19.0", + "@rollup/rollup-linux-x64-musl": "4.19.0", + "@rollup/rollup-win32-arm64-msvc": "4.19.0", + "@rollup/rollup-win32-ia32-msvc": "4.19.0", + "@rollup/rollup-win32-x64-msvc": "4.19.0", + "fsevents": "~2.3.2" + } + } + } +} diff --git a/functional-samples/ai.gemini-in-the-cloud/package.json b/functional-samples/ai.gemini-in-the-cloud/package.json new file mode 100644 index 00000000..8b856c61 --- /dev/null +++ b/functional-samples/ai.gemini-in-the-cloud/package.json @@ -0,0 +1,12 @@ +{ + "name": "Chrome Extensions Gemini Demo", + "version": "1.0", + "scripts": { + "build": "rollup sidepanel/index.js --file dist/sidepanel.bundle.js --format iife" + }, + "private": true, + "devDependencies": { + "@google/generative-ai": "0.15.0", + "rollup": "4.19.0" + } +} diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css new file mode 100644 index 00000000..d88a10d5 --- /dev/null +++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css @@ -0,0 +1,82 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, + Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + color: #1f1f1f; + background-color: #f2f2f2; + font-size: 16px; + padding: 8px; +} + +input, +button, +textarea, +select { + font-family: inherit; + font-size: inherit; +} + +button { + background: #333; + color: white; + border-radius: 8px; + border: none; + min-width: 100px; + padding: 8px; + margin: 16px 0; + cursor: pointer; +} + +button.primary { + background: #333; + color: white; +} + +button.secondary { + background: #ccc; + color: black; +} + +button[disabled] { + background: #ddd; + color: #aaa; +} + +input[type='range'] { + margin-top: 16px; + accent-color: black; +} + +textarea { + --padding: 32px; + width: calc(100% - var(--padding)); + max-width: calc(100% - var(--padding)); +} + +.text, +textarea { + background-color: white; + padding: 16px; + border-radius: 16px; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; + outline: none; +} + +.blink { + animation: 1s ease-in-out 1s infinite reverse both running blink; +} + +@keyframes blink { + 25% { + opacity: 0.5; + } + 50% { + opacity: 0; + } + 75% { + opacity: 0.5; + } +} + +[hidden] { + display: none; +} diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html new file mode 100644 index 00000000..9c6deff5 --- /dev/null +++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html @@ -0,0 +1,34 @@ + + + + + + +

Google Gemini

+ +
+ + +
+ + + + + + + diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js new file mode 100644 index 00000000..73f7180d --- /dev/null +++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js @@ -0,0 +1,127 @@ +import { + GoogleGenerativeAI, + HarmBlockThreshold, + HarmCategory +} from '../node_modules/@google/generative-ai/dist/index.mjs'; + +// Important! Do not expose your API in your extension code. You have to +// options: +// +// 1. Let users provide their own API key. +// 2. Manage API keys in your own server and proxy all calls to the Gemini +// API through your own server, where you can implement additional security +// measures such as authentification. +// +// It is only OK to put your API key into this file if you're the only +// user of your extension or for testing. +const apiKey = '...'; + +let genAI = null; +let model = null; +let generationConfig = { + temperature: 1 +}; + +const inputPrompt = document.body.querySelector('#input-prompt'); +const buttonPrompt = document.body.querySelector('#button-prompt'); +const elementResponse = document.body.querySelector('#response'); +const elementLoading = document.body.querySelector('#loading'); +const elementError = document.body.querySelector('#error'); +const sliderTemperature = document.body.querySelector('#temperature'); +const labelTemperature = document.body.querySelector('#label-temperature'); + +function initModel(generationConfig) { + const safetySettings = [ + { + category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, + threshold: HarmBlockThreshold.BLOCK_NONE + } + ]; + genAI = new GoogleGenerativeAI(apiKey); + model = genAI.getGenerativeModel({ + model: 'gemini-1.5-flash', + safetySettings, + generationConfig + }); + return model; +} + +async function runPrompt(prompt) { + try { + const result = await model.generateContent(prompt); + const response = await result.response; + return response.text(); + } catch (e) { + console.log('Prompt failed'); + console.error(e); + console.log('Prompt:', prompt); + throw e; + } +} + +sliderTemperature.addEventListener('input', (event) => { + labelTemperature.textContent = event.target.value; + generationConfig.temperature = event.target.value; +}); + +inputPrompt.addEventListener('input', () => { + if (inputPrompt.value.trim()) { + buttonPrompt.removeAttribute('disabled'); + } else { + buttonPrompt.setAttribute('disabled', ''); + } +}); + +buttonPrompt.addEventListener('click', async () => { + const prompt = inputPrompt.value.trim(); + showLoading(); + try { + const generationConfig = { + temperature: sliderTemperature.value + }; + initModel(generationConfig); + const response = await runPrompt(prompt, generationConfig); + showResponse(response); + } catch (e) { + showError(e); + } +}); + +function showLoading() { + hide(elementResponse); + hide(elementError); + show(elementLoading); +} + +function showResponse(response) { + hide(elementLoading); + show(elementResponse); + // Make sure to preserve line breaks in the response + elementResponse.textContent = ''; + const paragraphs = response.split(/\r?\n/); + for (let i = 0; i < paragraphs.length; i++) { + const paragraph = paragraphs[i]; + if (paragraph) { + elementResponse.appendChild(document.createTextNode(paragraph)); + } + // Don't add a new line after the final paragraph + if (i < paragraphs.length - 1) { + elementResponse.appendChild(document.createElement('BR')); + } + } +} + +function showError(error) { + show(elementError); + hide(elementResponse); + hide(elementLoading); + elementError.textContent = error; +} + +function show(element) { + element.removeAttribute('hidden'); +} + +function hide(element) { + element.setAttribute('hidden', ''); +} diff --git a/functional-samples/ai.gemini-on-device/README.md b/functional-samples/ai.gemini-on-device/README.md index 5af48fa9..a2883fc3 100644 --- a/functional-samples/ai.gemini-on-device/README.md +++ b/functional-samples/ai.gemini-on-device/README.md @@ -1,10 +1,10 @@ # On-device AI with Gemini Nano -This sample demonstrates how to use the built-in Chrome Prompt API. +This sample demonstrates how to use the experimental Gemini Nano API in Chrome. To learn more about the API and how to sign-up for the preview, head over to [Built-in AI on developer.chrome.com](https://developer.chrome.com/docs/ai/built-in). ## Overview -The extension provides a chat interface for the built-in Chrome prompt API. To learn more about the API and how to sign-up for the preview, head over to [Built-in AI on developer.chrome.com](https://developer.chrome.com/docs/ai/built-in). +The extension provides a chat interface using the prompt API with Chrome's built-in Gemini Nano model. ## Running this extension