Styles and config

* Some CSS love with open props * Make summary configurable
GoogleChrome · Nov 8, 2024 · bae0dde · bae0dde
1 parent 42a5574
commit bae0dde
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 36 deletions.
diff --git a/functional-samples/ai.gemini-on-device-summarization/sidepanel/index.css b/functional-samples/ai.gemini-on-device-summarization/sidepanel/index.css
@@ -1,22 +1,52 @@
+@import 'https://unpkg.com/open-props';
+
+@import 'https://unpkg.com/open-props/normalize.min.css';
+@import 'https://unpkg.com/open-props/buttons.min.css';
+
 :root {
-  --bg-secondary: #e6e2d9;
-  --bg-primary: #d4e7dd;
-  --bg-error: #f89696;
+  --font-size-00: 0.6rem;
 }
+
 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: #fffbff;
-  font-size: 16px;
-  padding: 8px;
+  margin: auto;
+  padding: var(--size-2);
+  font-size: var(--font-size-2);
+}
+
+:where(ol, ul) {
+  padding: 0 var(--size-3);
+}
+
+[hidden] {
+  display: none !important;
+}
+
+fieldset > * {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--size-2);
+}
+
+.card {
+  flex-basis: var(--size-content-1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-2);
+  background: var(--surface-3);
+  border: 1px solid var(--surface-1);
+  padding: var(--size-4);
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-2);
+  margin-bottom: var(--size-2);
+}
+
+.card > h5 {
+  line-height: var(--font-lineheight-1);
 }
 
 .warning {
-  background: #ffc6c6;
-  padding: 16px;
-  border-radius: 8px;
-  margin: 16px 0;
+  background-color: var(--red-6);
 }
 
 .result {

diff --git a/functional-samples/ai.gemini-on-device-summarization/sidepanel/index.html b/functional-samples/ai.gemini-on-device-summarization/sidepanel/index.html
@@ -4,8 +4,37 @@
     <link rel="stylesheet" type="text/css" href="index.css" />
   </head>
   <body>
-    <div class="warning" hidden id="warning"></div>
-    <p class="result" id="summary">Nothing to show...</p>
+    <div class="card">
+      <fieldset>
+        <legend>Settings</legend>
+        <div>
+          <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="teaser">Teaser</option>
+            <option value="headline">Headline</option>
+          </select>
+        </div>
+        <div>
+          <label for="length">Length:</label>
+          <select id="length">
+            <option value="short" selected>Short</option>
+            <option value="medium">Medium</option>
+            <option value="long">Long</option>
+          </select>
+        </div>
+        <div>
+          <label for="format">Format:</label>
+          <select id="format">
+            <option value="markdown" selected>Markdown</option>
+            <option value="plain-text">Plain text</option>
+          </select>
+        </div>
+      </fieldset>
+    </div>
+    <div class="warning card" hidden id="warning"></div>
+    <div class="card" id="summary">Nothing to show...</div>
     <script src="index.js" type="module"></script>
   </body>
 </html>
diff --git a/functional-samples/ai.gemini-on-device-summarization/sidepanel/index.js b/functional-samples/ai.gemini-on-device-summarization/sidepanel/index.js
@@ -10,6 +10,19 @@ let pageContent = '';
 
 const summaryElement = document.body.querySelector('#summary');
 const warningElement = document.body.querySelector('#warning');
+const summaryTypeSelect = document.querySelector('#type');
+const summaryFormatSelect = document.querySelector('#format');
+const summaryLengthSelect = document.querySelector('#length');
+
+function onConfigChange() {
+  const oldContent = pageContent;
+  pageContent = '';
+  onContentChange(oldContent);
+}
+
+[summaryTypeSelect, summaryFormatSelect, summaryLengthSelect].forEach((e) =>
+  e.addEventListener('change', onConfigChange)
+);
 
 chrome.storage.session.get('pageContent', ({ pageContent }) => {
   onContentChange(pageContent);
@@ -45,10 +58,17 @@ async function onContentChange(newContent) {
 
 async function generateSummary(text) {
   try {
-    let session = await createSummarizer((message, progress) => {
-      console.log(`${message} (${progress.loaded}/${progress.total})`);
-    });
-    let summary = await session.summarize(text);
+    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();
     return summary;
   } catch (e) {
@@ -58,28 +78,26 @@ async function generateSummary(text) {
   }
 }
 
-async function createSummarizer() {
+async function createSummarizer(config, downloadProgressCallback) {
   if (!window.ai || !window.ai.summarizer) {
     throw new Error('AI Summarization is not supported in this browser');
   }
   const canSummarize = await window.ai.summarizer.capabilities();
-  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;
-    }
-  } else {
-    throw new Error(`AI Summarizer not available (${canSummarize.available})`);
+  if (canSummarize.available === 'no') {
+    throw new Error('AI Summarization is not supported');
+  }
+  const summarizationSession = await window.ai.summarizer.create(
+    config,
+    downloadProgressCallback
+  );
+  if (canSummarize.available === 'after-download') {
+    summarizationSession.addEventListener(
+      'downloadprogress',
+      downloadProgressCallback
+    );
+    await summarizationSession.ready;
   }
-  return summarizer;
+  return summarizationSession;
 }
 
 async function showSummary(text) {