Fixes to AI samples (#1479)

* Migrate to latest summarizer API

* fix temperature to be less creative

Author: sebastianbenz

functional-samples/ai.gemini-on-device-alt-texter/background.js

@@ -8,7 +8,7 @@ chrome.runtime.onInstalled.addListener(() => {
 async function generateAltText(imgSrc) {
   // Create the model (we're not checking availability here, but will simply fail with an exception
   const session = await self.LanguageModel.create({
-    temperature: 0.8,
+    temperature: 0.0,
     topK: 1.0,
     expectedInputs: [{ type: 'image' }]
   });

functional-samples/ai.gemini-on-device-calendar-mate/background.js

@@ -84,7 +84,7 @@ function createGoogleCalendarUrl(eventDetails) {
 
 async function parseEventDetails(text) {
   const session = await LanguageModel.create({
-    temperature: 1.0,
+    temperature: 0,
     topK: 1.0
   });
 

functional-samples/ai.gemini-on-device-summarization/sidepanel/index.html

@@ -11,7 +11,7 @@
           <label for="type">Summary Type:</label>
           <select id="type">
             <option value="key-points" selected>Key Points</option>
-            <option value="tl;dr">TL;DR</option>
+            <option value="tldr">TL;DR</option>
             <option value="teaser">Teaser</option>
             <option value="headline">Headline</option>
           </select>

functional-samples/ai.gemini-on-device-summarization/sidepanel/index.js

@@ -1,3 +1,4 @@
+/* global Summarizer */
 import DOMPurify from 'dompurify';
 import { marked } from 'marked';
 
@@ -58,18 +59,31 @@ async function onContentChange(newContent) {
 
 async function generateSummary(text) {
   try {
-    const session = await createSummarizer(
-      {
-        type: summaryTypeSelect.value,
-        format: summaryFormatSelect.value,
-        length: length.value
-      },
-      (message, progress) => {
-        console.log(`${message} (${progress.loaded}/${progress.total})`);
-      }
-    );
-    const summary = await session.summarize(text);
-    session.destroy();
+    const options = {
+      sharedContext: 'this is a website',
+      type: summaryTypeSelect.value,
+      format: summaryFormatSelect.value,
+      length: length.value
+    };
+
+    const availability = await Summarizer.availability();
+    let summarizer;
+    if (availability === 'unavailable') {
+      return 'Summarizer API is not available';
+    }
+    if (availability === 'available') {
+      // The Summarizer API can be used immediately .
+      summarizer = await Summarizer.create(options);
+    } else {
+      // The Summarizer API can be used after the model is downloaded.
+      summarizer = await Summarizer.create(options);
+      summarizer.addEventListener('downloadprogress', (e) => {
+        console.log(`Downloaded ${e.loaded * 100}%`);
+      });
+      await summarizer.ready;
+    }
+    const summary = await summarizer.summarize(text);
+    summarizer.destroy();
     return summary;
   } catch (e) {
     console.log('Summary generation failed');
@@ -78,27 +92,6 @@ async function generateSummary(text) {
   }
 }
 
-async function createSummarizer(config, downloadProgressCallback) {
-  if (!window.Summarizer) {
-    throw new Error('AI Summarization is not supported in this browser');
-  }
-  const available = await window.Summarizer.availability();
-  if (available === 'unavailable') {
-    throw new Error('AI Summarization is not supported');
-  }
-  const summarizationSession = await window.Summarizer.create(
-    config,
-    downloadProgressCallback
-  );
-  if (available === 'downloadable') {
-    summarizationSession.addEventListener(
-      'downloadprogress',
-      downloadProgressCallback
-    );
-  }
-  return summarizationSession;
-}
-
 async function showSummary(text) {
   summaryElement.innerHTML = DOMPurify.sanitize(marked.parse(text));
 }