From b939ca2db93ea6b0d800fe784f3aca35ddf1e52a Mon Sep 17 00:00:00 2001
From: Thomas Steiner <tomac@google.com>
Date: Thu, 31 Oct 2024 15:46:16 +0100
Subject: [PATCH] Change on-device example to use the origin trial API (#1337)

* Add scaffolding for Prompt API OT example

* Rewrite existing example to use the OT

* Add trial token and key

* Update error message, add `minimum_chrome_version`

* Fix feature detection

* Some README refinements

* Correct instructions

* OT refinement
---
 .../ai.gemini-on-device/README.md               | 17 ++++++++++++-----
 .../ai.gemini-on-device/manifest.json           |  5 ++++-
 .../ai.gemini-on-device/sidepanel/index.js      |  8 ++++----
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/functional-samples/ai.gemini-on-device/README.md b/functional-samples/ai.gemini-on-device/README.md
index a2883fc3..94e840b4 100644
--- a/functional-samples/ai.gemini-on-device/README.md
+++ b/functional-samples/ai.gemini-on-device/README.md
@@ -1,14 +1,21 @@
 # On-device AI with Gemini Nano
 
-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).
+This sample demonstrates how to use the experimental Gemini Nano API available in the context of an origin trial in Chrome with Chrome Extensions. To learn more about the API and how to sign-up for the origin trial, 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 using the prompt API with Chrome's built-in Gemini Nano model.
+The extension provides a chat interface using the Prompt API with Chrome's built-in Gemini Nano model.
 
 ## Running this extension
 
 1. Clone this repository.
-2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
-3. Click the extension icon.
-4. Interact with the prompt API in the sidebar.
+1. Launch Chrome with the following flag, which makes sure the origin trial token in `manifest.json` is accepted by the browser. This won't be necessary once the origin trial is live.
+
+   `--origin-trial-public-key=dRCs+TocuKkocNKa0AtZ4awrt9XKH2SQCI6o4FY6BNA=`
+1. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+1. Click the extension icon.
+1. Interact with the Prompt API in the sidebar.
+
+## Creating your own extension
+
+If you use this sample as the foundation for your own extension, be sure to update the `"trial_tokens"` field [with your own origin trial token](https://developer.chrome.com/docs/web-platform/origin-trials?hl=en#extensions) and to remove the `"key"` field in `manifest.json`.
diff --git a/functional-samples/ai.gemini-on-device/manifest.json b/functional-samples/ai.gemini-on-device/manifest.json
index f5a12bcf..03d80a04 100644
--- a/functional-samples/ai.gemini-on-device/manifest.json
+++ b/functional-samples/ai.gemini-on-device/manifest.json
@@ -6,7 +6,10 @@
   "background": {
     "service_worker": "background.js"
   },
-  "permissions": ["sidePanel"],
+  "permissions": ["sidePanel", "aiLanguageModelOriginTrial"],
+  "trial_tokens": ["A6hC1yvazc5QTqSESgEo3uwIUs1KBM4VB93yiTdtgFlFlYNJjf18zmzScpaCepaYpNLaMJ4dNkDps+vbrk7oEw8AAAB9eyJvcmlnaW4iOiAiY2hyb21lLWV4dGVuc2lvbjovL2lkZm1qYmJqY21qamtoYWlvZmltbWNtY29qYmlnbmpmIiwgImZlYXR1cmUiOiAiQUlQcm9tcHRBUElGb3JFeHRlbnNpb24iLCAiZXhwaXJ5IjogMTk4OTQwNzUwMH0="],
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAi99ZKuRYfZMQ80XryBYKNA4DJTHPMEiNkiF6TLqTXMp4Cb23I/DTblxlEELWyM1vDuXeFI7jqXDuM6YVHd7zTtA1hGbGgLm9w9+d763x2wCRbxud+dXIXW4IoD4CqXpCLscDD7Vrar/I5XbcmdA9jjlCXMGS2OKNRhYMjNpaVhFCi2jzWid+92DZSpPbdM9iBODGfwnFNp16tFX8/dDx3w23FneeOVHV3JjNIWO3uT60AhZWOtcQlERuMBJmEkKAgqE8T3ZjoZe4ALupfvDxI7khP29+gBXhgF/r6T0RAbB1LfxubhyLk/X7aC/sw3umCemqvc+knvKRBLHMVl1nHQIDAQAB",
+  "minimum_chrome_version": "131",
   "side_panel": {
     "default_path": "sidepanel/index.html"
   },
diff --git a/functional-samples/ai.gemini-on-device/sidepanel/index.js b/functional-samples/ai.gemini-on-device/sidepanel/index.js
index 8c3b017e..c4ae40f5 100644
--- a/functional-samples/ai.gemini-on-device/sidepanel/index.js
+++ b/functional-samples/ai.gemini-on-device/sidepanel/index.js
@@ -14,7 +14,7 @@ let session;
 async function runPrompt(prompt, params) {
   try {
     if (!session) {
-      session = await window.ai.languageModel.create(params);
+      session = await chrome.aiOriginTrial.languageModel.create(params);
     }
     return session.prompt(prompt);
   } catch (e) {
@@ -35,11 +35,11 @@ async function reset() {
 }
 
 async function initDefaults() {
-  if (!window.ai) {
-    showResponse('Error: window.ai not supported in this browser');
+  if (!('aiOriginTrial' in chrome)) {
+    showResponse('Error: chrome.aiOriginTrial not supported in this browser');
     return;
   }
-  const defaults = await window.ai.languageModel.capabilities();
+  const defaults = await chrome.aiOriginTrial.languageModel.capabilities();
   console.log('Model default:', defaults);
   sliderTemperature.value = defaults.temperature;
   sliderTopK.value = defaults.topK;