Format markdown output

functional-samples/ai.gemini-on-device-summarization/package.json

@@ -13,6 +13,8 @@
     "@mozilla/readability": "0.5.0",
     "@rollup/plugin-commonjs": "26.0.1",
     "@rollup/plugin-node-resolve": "15.2.3",
+    "dompurify": "^3.1.6",
+    "marked": "^14.1.2",
     "rollup": "4.18.1",
     "rollup-plugin-copy": "^3.5.0"
   }

functional-samples/ai.gemini-on-device-summarization/rollup.config.mjs

@@ -2,22 +2,35 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import copy from 'rollup-plugin-copy';
 
-export default {
-  input: 'scripts/extract-content.js',
-  output: {
-    dir: 'dist/scripts',
-    format: 'cjs'
+export default [
+  {
+    input: 'sidepanel/index.js',
+    output: {
+      dir: 'dist/sidepanel',
+      format: 'es',
+    },
+    plugins: [
+      commonjs(),
+      nodeResolve(),
+      copy({
+        targets: [
+          {
+            src: ['manifest.json', 'background.js', 'sidepanel', 'images'],
+            dest: 'dist'
+          }
+        ]
+      })
+    ]
   },
-  plugins: [
-    commonjs(),
-    nodeResolve(),
-    copy({
-      targets: [
-        {
-          src: ['manifest.json', 'background.js', 'sidepanel', 'images'],
-          dest: 'dist'
-        }
-      ]
-    })
-  ]
-};
+  {
+    input: 'scripts/extract-content.js',
+    output: {
+      dir: 'dist/scripts',
+      format: 'es'
+    },
+    plugins: [
+      commonjs(),
+      nodeResolve(),
+    ]
+  }
+];

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

@@ -1,3 +1,6 @@
+import DOMPurify from '../node_modules/dompurify/dist/purify.es.mjs';
+import { marked } from '../node_modules/marked/marked.min';
+
 // The underlying model has a context of 1,024 tokens, out of which 26 are used by the internal prompt,
 // leaving about 998 tokens for the input text. Each token corresponds, roughly, to about 4 characters, so 4,000
 // is used as a limit to warn the user the content might be too long to summarize.
@@ -42,7 +45,7 @@ async function onContentChange(newContent) {
 
 async function generateSummary(text) {
   try {
-    let session = await createSummarizationSession((message, progress) => {
+    let session = await createSummarizer((message, progress) => {
       console.log(`${message} (${progress.loaded}/${progress.total})`);
     });
     let summary = await session.summarize(text);
@@ -55,39 +58,32 @@ async function generateSummary(text) {
   }
 }
 
-async function createSummarizationSession(downloadProgressCallback) {
+async function createSummarizer() {
   if (!window.ai || !window.ai.summarizer) {
     throw new Error('AI Summarization is not supported in this browser');
   }
   const canSummarize = await window.ai.summarizer.capabilities();
-  if (canSummarize.available === 'no') {
-    throw new Error('AI Summarization is not availabe');
-  }
-
-  const summarizationSession = await window.ai.summarizer.create();
-  if (canSummarize.available === 'after-download') {
-    if (downloadProgressCallback) {
-      summarizationSession.addEventListener(
-        'downloadprogress',
-        downloadProgressCallback
-      );
+  let summarizer;
+  if (canSummarize && canSummarize.available !== 'no') {
+    if (canSummarize.available === 'readily') {
+      // The summarizer can immediately be used.
+      summarizer = await window.ai.summarizer.create();
+    } else {
+      // The summarizer can be used after the model download.
+      summarizer = await window.ai.summarizer.create();
+      summarizer.addEventListener('downloadprogress', (e) => {
+        console.log('Downloading model', e.loaded, e.total);
+      });
+      await summarizer.ready;
     }
-    await summarizationSession.ready;
+  } else {
+    throw new Error(`AI Summarizer not available (${canSummarize.available})`);
   }
-
-  return summarizationSession;
+  return summarizer;
 }
 
 async function showSummary(text) {
-  // Make sure to preserve line breaks in the response
-  summaryElement.textContent = '';
-  const paragraphs = text.split(/\r?\n/);
-  for (const paragraph of paragraphs) {
-    if (paragraph) {
-      summaryElement.appendChild(document.createTextNode(paragraph));
-    }
-    summaryElement.appendChild(document.createElement('BR'));
-  }
+  summaryElement.innerHTML = DOMPurify.sanitize(marked.parse(text));
 }
 
 async function updateWarning(warning) {