browser-ai-summarizer 1.0.0

package/dist/browser-ai-summarizer.umd.js

@@ -0,0 +1,408 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.AISummarizer={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=`ai-summarizer-styles`;function n(e){if(document.getElementById(t))return;let n=document.createElement(`style`);n.id=t,n.textContent=r(e),document.head.appendChild(n)}function r(e){let t={buttonBg:e.buttonBg??`#111111`,buttonColor:e.buttonColor??`#f7f3ed`,buttonRadius:e.buttonRadius??`3px`,buttonFont:e.buttonFont??`system-ui, -apple-system, sans-serif`,accentColor:e.accentColor??`#111111`,cardBg:e.cardBg??`#faf8f5`,cardHeaderBg:e.cardHeaderBg??`#f3ede5`,cardBorder:e.cardBorder??`#e4ddd4`,cardFont:e.cardFont??`system-ui, -apple-system, sans-serif`,zIndex:e.zIndex??1};return`
+/* ── AI Summarizer Widget ────────────────────────────────── */
+.ais-root {
+  --ais-btn-bg:        ${t.buttonBg};
+  --ais-btn-color:     ${t.buttonColor};
+  --ais-btn-radius:    ${t.buttonRadius};
+  --ais-btn-font:      ${t.buttonFont};
+  --ais-accent:        ${t.accentColor};
+  --ais-card-bg:       ${t.cardBg};
+  --ais-card-head-bg:  ${t.cardHeaderBg};
+  --ais-card-border:   ${t.cardBorder};
+  --ais-card-font:     ${t.cardFont};
+  --ais-z:             ${t.zIndex};
+}
+
+/* ── Trigger ── */
+.ais-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 1.75rem 0 0;
+  flex-wrap: wrap;
+  position: relative;
+  z-index: var(--ais-z);
+}
+
+.ais-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.55rem 1.15rem;
+  background: var(--ais-btn-bg);
+  color: var(--ais-btn-color);
+  font-family: var(--ais-btn-font);
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  border: 1.5px solid var(--ais-btn-bg);
+  cursor: pointer;
+  border-radius: var(--ais-btn-radius);
+  line-height: 1;
+  transition: filter 0.15s, opacity 0.2s, transform 0.1s;
+  user-select: none;
+}
+.ais-btn:hover:not(:disabled) { filter: brightness(1.15); }
+.ais-btn:active:not(:disabled) { transform: scale(0.97); }
+.ais-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.ais-btn svg { width: 14px; height: 14px; display: block; }
+
+.ais-btn--ghost {
+  background: transparent;
+  color: #666;
+  border-color: #d5cfc7;
+}
+.ais-btn--ghost:hover:not(:disabled) { filter: none; background: #f5f5f5; }
+
+/* ── Spinner ── */
+.ais-spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 0.15em solid rgba(255,255,255,0.2);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: ais-spin 0.65s linear infinite;
+  flex-shrink: 0;
+  vertical-align: -0.125em;
+  box-sizing: border-box;
+}
+.ais-spinner--dark {
+  border-color: rgba(0,0,0,0.12);
+  border-top-color: #333;
+}
+@keyframes ais-spin { to { transform: rotate(360deg); } }
+
+/* ── Type pills ── */
+.ais-pills {
+  display: none;
+  align-items: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+  margin: 0.75rem 0 0;
+}
+.ais-pills--visible { display: flex; }
+.ais-pills__label {
+  font-family: var(--ais-btn-font);
+  font-size: 0.7rem;
+  color: #999;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-right: 0.15rem;
+}
+.ais-pill {
+  font-family: var(--ais-btn-font);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 0.22rem 0.6rem;
+  border: 1px solid #ddd;
+  border-radius: 100px;
+  background: #fff;
+  color: #777;
+  cursor: pointer;
+  transition: all 0.13s;
+  line-height: 1;
+}
+.ais-pill:hover:not(:disabled):not(.ais-pill--active) { border-color: #999; color: #333; }
+.ais-pill:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  filter: grayscale(0.5);
+}
+.ais-pill--active {
+  background: var(--ais-accent);
+  border-color: var(--ais-accent);
+  color: #fff;
+}
+
+/* ── Consent dialog ── */
+.ais-consent {
+  display: none;
+  margin: 1.1rem 0 0;
+  padding: 1.1rem 1.4rem;
+  background: #fffdf9;
+  border: 1px solid #e8e3db;
+  border-left: 3px solid #c8a96a;
+  border-radius: 0 4px 4px 0;
+  font-family: var(--ais-card-font);
+  animation: ais-fade-up 0.25s ease;
+}
+.ais-consent--visible { display: block; }
+.ais-consent__title {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #111;
+  margin: 0 0 0.4rem;
+}
+.ais-consent__body {
+  font-size: 0.82rem;
+  color: #555;
+  line-height: 1.65;
+  margin: 0 0 0.9rem;
+}
+.ais-consent__body strong { color: #333; font-weight: 600; }
+.ais-consent__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+
+/* ── Download progress ── */
+.ais-progress {
+  display: none;
+  margin: 1.1rem 0 0;
+  padding: 0.9rem 1.1rem;
+  background: var(--ais-card-bg);
+  border: 1px solid var(--ais-card-border);
+  border-radius: 4px;
+  font-family: var(--ais-card-font);
+}
+.ais-progress--visible { display: block; }
+.ais-progress__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  gap: 0.5rem;
+}
+.ais-progress__label {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.8rem;
+  color: #555;
+}
+.ais-progress__pct {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #111;
+  font-variant-numeric: tabular-nums;
+}
+.ais-progress__bar-bg {
+  height: 3px;
+  background: #e0dbd3;
+  border-radius: 2px;
+  overflow: hidden;
+}
+.ais-progress__bar {
+  height: 100%;
+  background: var(--ais-accent);
+  border-radius: 2px;
+  width: 0%;
+  transition: width 0.25s ease;
+}
+.ais-progress__size {
+  margin-top: 0.45rem;
+  font-size: 0.72rem;
+  color: #666;
+  font-variant-numeric: tabular-nums;
+}
+.ais-progress__note { margin-top: 0.35rem; font-size: 0.72rem; color: #aaa; }
+
+/* ── Summary card ── */
+.ais-card {
+  margin: 1.5rem 0 0;
+  border: 1px solid var(--ais-card-border);
+  border-left: 3px solid var(--ais-accent);
+  background: var(--ais-card-bg);
+  border-radius: 0 4px 4px 0;
+  overflow: hidden;
+  font-family: var(--ais-card-font);
+  animation: ais-fade-up 0.35s ease forwards;
+}
+@keyframes ais-fade-up {
+  from { opacity: 0; transform: translateY(5px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.ais-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.8rem 1.2rem;
+  border-bottom: 1px solid var(--ais-card-border);
+  background: var(--ais-card-head-bg);
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.ais-card__title-row { display: flex; align-items: baseline; gap: 0.55rem; }
+.ais-card__title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #111;
+  margin: 0;
+  font-family: var(--ais-card-font);
+}
+.ais-card__badge {
+  font-size: 0.63rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #888;
+  border: 1px solid #d5cfc7;
+  padding: 0.1rem 0.38rem;
+  border-radius: 2px;
+  background: #fff;
+  white-space: nowrap;
+}
+.ais-card__actions { display: flex; gap: 0.25rem; align-items: center; }
+.ais-icon-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.28rem;
+  color: #aaa;
+  border-radius: 3px;
+  line-height: 0;
+  transition: color 0.13s, background 0.13s;
+}
+.ais-icon-btn:hover { color: #333; background: rgba(0,0,0,0.06); }
+.ais-icon-btn svg { width: 14px; height: 14px; display: block; }
+
+.ais-card__body { padding: 1.1rem 1.4rem 0.9rem; }
+.ais-card__content {
+  font-size: 0.89rem;
+  color: #2a2a2a;
+  line-height: 1.78;
+  min-height: 1.5rem;
+}
+.ais-card__content ul {
+  list-style: none;
+  padding: 0; margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.ais-card__content li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding: 0.5rem 0.75rem;
+  background: #fff;
+  border: 1px solid #ece7df;
+  border-radius: 3px;
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: #333;
+}
+.ais-card__content li::before {
+  content: '›';
+  color: #999;
+  font-size: 1.05rem;
+  line-height: 1.45;
+  flex-shrink: 0;
+}
+.ais-card__content li span {
+  flex: 1;
+}
+.ais-card__content p { margin: 0 0 0.6rem; }
+.ais-card__content p:last-child { margin: 0; }
+.ais-card__content strong { font-weight: 600; color: #111; }
+
+/* Streaming cursor */
+.ais-cursor {
+  display: inline-block;
+  width: 2px; height: 0.85em;
+  background: #666;
+  vertical-align: text-bottom;
+  margin-left: 2px;
+  animation: ais-blink 0.85s step-end infinite;
+}
+@keyframes ais-blink { 50% { opacity: 0; } }
+
+.ais-card__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.55rem 1.4rem;
+  border-top: 1px solid #ece7df;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.ais-card__note {
+  font-size: 0.68rem;
+  color: #bbb;
+  letter-spacing: 0.03em;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+.ais-card__note-dot {
+  width: 3px; height: 3px;
+  background: #ccc; border-radius: 50%; flex-shrink: 0;
+}
+
+/* ── Error ── */
+.ais-error {
+  margin: 1.1rem 0 0;
+  padding: 0.9rem 1.1rem;
+  background: #fff8f7;
+  border: 1px solid #f0cac7;
+  border-left: 3px solid #b94040;
+  border-radius: 0 4px 4px 0;
+  font-family: var(--ais-card-font);
+  font-size: 0.82rem;
+  color: #7a2a2a;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  animation: ais-fade-up 0.25s ease;
+}
+.ais-error a { color: inherit; }
+.ais-error__retry {
+  font-family: var(--ais-btn-font);
+  font-size: 0.76rem;
+  font-weight: 500;
+  color: #7a2a2a;
+  background: none;
+  border: 1px solid #f0cac7;
+  border-radius: 3px;
+  padding: 0.28rem 0.65rem;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: background 0.13s;
+}
+.ais-error__retry:hover { background: rgba(0,0,0,0.04); }
+`}var i=`preferences`,a=`userPrefs`;function o(e){return new Promise((t,n)=>{let r=indexedDB.open(e,1);r.onupgradeneeded=e=>{e.target.result.createObjectStore(i)},r.onsuccess=e=>t(e.target.result),r.onerror=()=>n(r.error)})}async function s(e){try{let t=(await o(e)).transaction(i,`readonly`).objectStore(i).get(a);return await new Promise(e=>{t.onsuccess=()=>e(t.result??null),t.onerror=()=>e(null)})}catch{return null}}async function c(e,t){try{(await o(e)).transaction(i,`readwrite`).objectStore(i).put(t,a)}catch{}}var l=3.5,u=8e3;function d(){let e=globalThis.Summarizer;if(!e)throw Error(`Summarizer API is not available in this browser.`);return e}function f(){return`Summarizer`in globalThis}async function p(e={}){return d().availability({...e,expectedInputLanguages:x(e.expectedInputLanguages),expectedContextLanguages:x(e.expectedContextLanguages)})}var m=null,h=null;function g(e){return JSON.stringify({type:e.type,length:e.length,format:e.format,preference:e.preference,sharedContext:e.sharedContext,outputLanguage:e.outputLanguage,expectedInputLanguages:e.expectedInputLanguages,expectedContextLanguages:e.expectedContextLanguages})}async function _(e){let t=g(e);return m&&h===t?m:(m&&=((await m).destroy(),null),h=t,m=v(e),m)}async function v(e){return await p(e)!==`available`&&S(),d().create({type:e.type,length:e.length,format:e.format??`markdown`,preference:e.preference,sharedContext:e.sharedContext,outputLanguage:e.outputLanguage,expectedInputLanguages:x(e.expectedInputLanguages),expectedContextLanguages:x(e.expectedContextLanguages),signal:e.signal,monitor:e.onDownloadProgress?t=>{t.addEventListener(`downloadprogress`,t=>{let n=t,r=typeof n.loaded==`number`?n.loaded:0,i=typeof n.total==`number`?n.total:0,a=!!n.lengthComputable,o=a&&i>0?Math.round(r/i*100):r<=1?Math.round(r*100):0;e.onDownloadProgress?.({pct:o,loaded:r,total:i,lengthComputable:a})})}:void 0})}function y(e,t){let n=t?Math.floor(t*l):u;if(e.length<=n)return e;let r=e.lastIndexOf(`
+
+`,n),i=r>n*.6?r:n;return e.slice(0,i)+`
+
+[… content truncated for summary]`}async function b(e){let{summarizer:t,context:n,signal:r,onChunk:i}=e,a=new TextDecoder,o=e=>{if(typeof e==`string`)return e;if(e instanceof Uint8Array)return a.decode(e);if(e instanceof ArrayBuffer)return a.decode(new Uint8Array(e));if(e&&typeof e==`object`){let t=e.text;if(typeof t==`string`)return t;let n=e.output;if(typeof n==`string`)return n;let r=e.outputText;if(typeof r==`string`)return r}return null},s=await C(e.text,t,n,r),c=async e=>{let a=t.summarizeStreaming(e,{context:n,signal:r}),s=``,c=!1;for await(let e of w(a)){if(r.aborted)break;let t=o(e);t&&(t.startsWith(s)?s=t:s+=t,c=!0,i(s))}if(!c&&t.summarize){let a=await t.summarize(e,{context:n,signal:r});return a&&i(a),a}return s};try{return await c(s)}catch(e){if(e.name===`QuotaExceededError`){let e=t.inputQuota?Math.floor(t.inputQuota*.7):void 0;return s=y(s,e),await c(s)}throw e}}function x(e){return e&&e.length>0?e:void 0}function S(){let e=globalThis.navigator;if(e?.userActivation&&!e.userActivation.isActive)throw Error(`Summarizer.create() must be called from a user gesture.`)}async function C(e,t,n,r){let i=t.inputQuota;if(!i)return y(e,void 0);if(t.measureInputUsage)try{if(await t.measureInputUsage(e,{context:n,signal:r})<=i)return e}catch{}return y(e,i)}async function*w(e){if(e&&typeof e[Symbol.asyncIterator]==`function`){yield*e;return}if(e&&typeof e.getReader==`function`){let t=e.getReader();try{for(;;){let{value:e,done:n}=await t.read();if(n)break;yield e}}finally{t.releaseLock()}return}throw Error(`Unsupported summary stream type.`)}function T(e){return e.replace(/[&<>"']/g,e=>{switch(e){case`&`:return`&amp;`;case`<`:return`&lt;`;case`>`:return`&gt;`;case`"`:return`&quot;`;case`'`:return`&#39;`;default:return e}})}function E(e){let t=e.trim().split(`
+`),n=``,r=!1;for(let e of t){let t=e.trim();if(!t){r&&=(n+=`</ul>`,!1);continue}let i=/^[-*•]\s+/.test(t),a=/^\d+\.\s+/.test(t);if(i||a){r||=(n+=`<ul>`,!0);let e=t.replace(/^([-*•]|\d+\.)\s+/,``);n+=`<li><span>${D(T(e))}</span></li>`}else r&&=(n+=`</ul>`,!1),n+=`<p>${D(T(t))}</p>`}return r&&(n+=`</ul>`),n}function D(e){return e.replace(/\*\*(.*?)\*\*/g,`<strong>$1</strong>`).replace(/__(.*?)__/g,`<strong>$1</strong>`).replace(/\*(.*?)\*/g,`<em>$1</em>`).replace(/_(.*?)_/g,`<em>$1</em>`)}function O(e,t,n){let r=document.createElement(e);return r.className=t,n!==void 0&&(r.innerHTML=n),r}function k(e){for(let t of e.split(`,`).map(e=>e.trim())){let e=document.querySelector(t);if(e)return e}return null}function A(e){let t=(k(e)??document.querySelector(`article`)??document.querySelector(`main`)??document.body).cloneNode(!0);return t.querySelectorAll(`script, style, noscript, iframe, .ads, .advertisement, nav, footer, header, aside:not(.article-content), .social-share, .comments, .related-posts`).forEach(e=>e.remove()),(t.innerText??``).replace(/[\t ]+/g,` `).replace(/\n\s*\n\s*\n+/g,`
+
+`).trim()}function j(e,t){return t===`plain-text`?T(e).replace(/\n/g,`<br>`):E(e)}var M=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width: 1.2em; height: 1.2em; vertical-align: middle;">
+  <path d="M7 2c.4 3.2 2 5.2 5.6 5.6-3.6.4-5.2 2-5.6 5.6-.4-3.6-2.4-5.6-6-6 4.4-.4 6-2 6.4-5.2z" fill="currentColor"/>
+  <path d="M13.5 1.5c.2 1.2.8 1.8 2 2-1.2.2-1.8.8-2 2-.2-1.2-.8-1.8-2-2 1.2-.2 1.8-.8 2-2z" fill="currentColor"/>
+</svg>`,N=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="5" y="5" width="9" height="9" rx="1.5" stroke="currentColor" stroke-width="1.3"/>
+  <path d="M3 11H2.5A1.5 1.5 0 0 1 1 9.5v-7A1.5 1.5 0 0 1 2.5 1h7A1.5 1.5 0 0 1 11 2.5V3"
+    stroke="currentColor" stroke-width="1.3"/>
+</svg>`,P=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>`,F=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="3" width="10" height="10" rx="1.5" fill="currentColor"/>
+</svg>`,I=`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M2.5 9.5v2a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-2M8.5 2v7M5.5 6l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`,L={"key-points":`Key Points`,tldr:`TL;DR`,teaser:`Teaser`,headline:`Headline`};function R(){let e=document.createElement(`div`);return e.className=`ais-root`,e}function z(e){let t=O(`div`,`ais-trigger`),n=O(`button`,`ais-btn`);return n.setAttribute(`aria-label`,`Summarize this article with on-device AI`),n.innerHTML=`${M} ${e}`,t.appendChild(n),{wrap:t,btn:n}}function B(e,t){e.disabled=!0,e.innerHTML=`<span class="ais-spinner" aria-hidden="true"></span> ${t}`}function V(e,t=`Regenerate`){e.disabled=!1,e.innerHTML=`${M} ${t}`}function H(e,t){let n=O(`div`,`ais-pills`);n.setAttribute(`role`,`group`),n.setAttribute(`aria-label`,`Summary style`);let r=O(`span`,`ais-pills__label`);r.textContent=`Style`,n.appendChild(r);let i=[];return Object.entries(L).forEach(([r,a])=>{let o=O(`button`,`ais-pill${r===e?` ais-pill--active`:``}`);o.textContent=a,o.dataset.type=r,o.addEventListener(`click`,()=>{o.classList.contains(`ais-pill--active`)||o.disabled||(n.querySelectorAll(`.ais-pill`).forEach(e=>e.classList.remove(`ais-pill--active`)),o.classList.add(`ais-pill--active`),t(r))}),n.appendChild(o),i.push(o)}),{wrap:n,setDisabled:e=>{i.forEach(t=>{t.disabled=e,t.setAttribute(`aria-disabled`,String(e))})}}}function U(e){e.classList.add(`ais-pills--visible`)}function W(e,t){let n=O(`div`,`ais-consent`);n.setAttribute(`role`,`dialog`),n.setAttribute(`aria-modal`,`false`),n.setAttribute(`aria-labelledby`,`ais-consent-title`),n.innerHTML=`
+    <div class="ais-consent__title" id="ais-consent-title">⬇ Download AI model to continue</div>
+    <div class="ais-consent__body">
+      Summaries run <strong>entirely on your device</strong> using Gemini Nano — no content
+      leaves your browser. Browser needs to download this model once
+      (<strong>~1–2 GB</strong>), then it's cached for all future use.
+    </div>
+    <div class="ais-consent__actions"></div>
+  `;let r=n.querySelector(`.ais-consent__actions`),i=O(`button`,`ais-btn`);i.innerHTML=`${I} Download &amp; summarize`,i.addEventListener(`click`,e);let a=O(`button`,`ais-btn ais-btn--ghost`);return a.textContent=`Not now`,a.addEventListener(`click`,t),r.appendChild(i),r.appendChild(a),n}function G(e){e.classList.add(`ais-consent--visible`)}function K(e){e.classList.remove(`ais-consent--visible`)}function q(){let e=O(`div`,`ais-progress`);e.setAttribute(`role`,`status`),e.setAttribute(`aria-live`,`polite`),e.innerHTML=`
+    <div class="ais-progress__top">
+      <div class="ais-progress__label">
+        <span class="ais-spinner ais-spinner--dark" aria-hidden="true"></span>
+        Downloading Gemini Nano…
+      </div>
+      <span class="ais-progress__pct">0%</span>
+    </div>
+    <div class="ais-progress__bar-bg">
+      <div class="ais-progress__bar"></div>
+    </div>
+    <div class="ais-progress__size">Exact size hidden by the browser</div>
+    <div class="ais-progress__note">One-time download · cached in Browser for future use</div>
+  `;let t=e.querySelector(`.ais-progress__bar`),n=e.querySelector(`.ais-progress__pct`),r=e.querySelector(`.ais-progress__size`),i=e=>{if(!Number.isFinite(e)||e<=0)return`0 B`;let t=[`B`,`KB`,`MB`,`GB`,`TB`],n=e,r=0;for(;n>=1024&&r<t.length-1;)n/=1024,r+=1;let i=n>=100?0:n>=10?1:2;return`${n.toFixed(i)} ${t[r]}`};return{wrap:e,setProgress:a=>{let o=Math.max(0,Math.min(100,Math.round(a.pct)));t.style.width=`${o}%`,n.textContent=`${o}%`,a.lengthComputable&&a.total>1?r.textContent=`${i(Math.min(a.loaded,a.total))} / ${i(a.total)}`:a.loaded>1?r.textContent=`${i(a.loaded)} downloaded`:r.textContent=`Exact size hidden by the browser`,e.classList.add(`ais-progress--visible`)}}}function J(e){e.classList.remove(`ais-progress--visible`)}function Y(e,t,n){let r=O(`div`,`ais-card`);r.id=`ais-card`,r.setAttribute(`role`,`region`),r.setAttribute(`aria-label`,`AI-generated article summary`);let i=O(`div`,`ais-card__head`),a=O(`div`,`ais-card__title-row`),o=O(`h2`,`ais-card__title`);o.textContent=`AI Summary`;let s=O(`span`,`ais-card__badge`);s.textContent=`${L[e]} · ${t}`,a.appendChild(o),a.appendChild(s);let c=O(`div`,`ais-card__actions`),l=O(`button`,`ais-icon-btn`);l.setAttribute(`title`,`Copy summary`),l.setAttribute(`aria-label`,`Copy summary to clipboard`),l.innerHTML=N;let u=O(`button`,`ais-icon-btn ais-stop-btn`);u.setAttribute(`title`,`Stop generating`),u.setAttribute(`aria-label`,`Stop generating summary`),u.innerHTML=F;let d=O(`button`,`ais-icon-btn`);d.setAttribute(`title`,`Dismiss`),d.setAttribute(`aria-label`,`Dismiss summary`),d.innerHTML=P,c.appendChild(u),c.appendChild(l),c.appendChild(d),i.appendChild(a),i.appendChild(c);let f=O(`div`,`ais-card__body`),p=O(`div`,`ais-card__content`);p.innerHTML=`<span class="ais-cursor" aria-hidden="true"></span>`,f.appendChild(p);let m=O(`div`,`ais-card__foot`),h=O(`span`,`ais-card__note`);h.innerHTML=`<span class="ais-card__note-dot" aria-hidden="true"></span>On-device · Gemini Nano · Browser Summarizer API`,m.appendChild(h),r.appendChild(i),r.appendChild(f),r.appendChild(m);let g=``;l.addEventListener(`click`,async()=>{if(g)try{await navigator.clipboard.writeText(g),l.innerHTML=`✓`,l.style.color=`#4a9a5c`,setTimeout(()=>{l.innerHTML=N,l.style.color=``},2e3)}catch{}}),d.addEventListener(`click`,()=>r.remove());let _=e=>{let t=p.querySelector(`.ais-cursor`);e&&!t&&p.insertAdjacentHTML(`beforeend`,`<span class="ais-cursor" aria-hidden="true"></span>`),e||t?.remove()};return{card:r,contentEl:p,stopBtn:u,setCursor:_,setContent:e=>{g=e,p.innerHTML=j(e,n),_(!1)},streamChunk:e=>{g=e,p.innerHTML=j(e,n),_(!1)},finalize:()=>{_(!1),u.hidden=!0}}}function X(e,t){let n=O(`div`,`ais-error`);n.id=`ais-error`,n.setAttribute(`role`,`alert`);let r=O(`span`,``);if(r.innerHTML=`⚠ ${e}`,n.appendChild(r),t){let e=O(`button`,`ais-error__retry`);e.textContent=`Retry`,e.addEventListener(`click`,()=>{n.remove(),t()}),n.appendChild(e)}return n}var Z=`.gh-content, .post-content, .article-body, article .content, .entry-content`,ee=`.gh-article-header, .post-header, .article-header, header.article`,te=`This is a news article or blog post. Avoid jargon, use correct grammar, focus on clarity, and ensure the reader can grasp the core ideas quickly.`,ne=new Set([`en`,`es`,`ja`]);function re(e){let t=e?.trim().toLowerCase();if(!t)return`en`;let n=t.split(`-`)[0];return ne.has(n)?n:`en`}var Q=class{opts;abortController=null;root=null;mounted=!1;isSummarizing=!1;constructor(e={}){this.opts={contentSelector:e.contentSelector??Z,anchorSelector:e.anchorSelector??ee,defaultType:e.defaultType??`key-points`,defaultLength:e.defaultLength??`medium`,format:e.format??`markdown`,preference:e.preference??`auto`,sharedContext:e.sharedContext??te,outputLanguage:re(e.outputLanguage),expectedInputLanguages:e.expectedInputLanguages??[],expectedContextLanguages:e.expectedContextLanguages??[],buttonLabel:e.buttonLabel??`Summarize with AI`,showTypeSwitcher:e.showTypeSwitcher??!0,requireDownloadConsent:e.requireDownloadConsent??!0,dbName:e.dbName??`ai-summarizer`,theme:e.theme??{},onSummary:e.onSummary,onError:e.onError,onUnsupported:e.onUnsupported}}async mount(){if(this.mounted)return;if(this.mounted=!0,!f()){this.opts.onUnsupported?.();return}n(this.opts.theme);let e={type:(await s(this.opts.dbName))?.type??this.opts.defaultType},t=k(this.opts.anchorSelector),r=k(this.opts.contentSelector)??document.querySelector(`article`)??document.querySelector(`main`);if(!r)return;this.root=R();let i=this.buildUI(e);this.root.appendChild(i.triggerWrap),i.pillsEl&&this.root.appendChild(i.pillsEl),this.root.appendChild(i.consentEl),this.root.appendChild(i.progressEl),i.triggerBtn.addEventListener(`click`,async()=>{this.clearSummary(),K(i.consentEl),await this.preflightAndRun(e,i,!1)}),t?t.insertAdjacentElement(`afterend`,this.root):r.insertAdjacentElement(`beforebegin`,this.root),this.warmup(e).catch(()=>{})}async warmup(e){if(!f())return;let{expectedInputLanguages:t,expectedContextLanguages:n}=this.getLanguageHints();try{await _({type:e?.type??this.opts.defaultType,length:this.opts.defaultLength,format:this.opts.format,preference:this.opts.preference,sharedContext:this.opts.sharedContext,outputLanguage:this.opts.outputLanguage,expectedInputLanguages:t,expectedContextLanguages:n})}catch{}}buildUI(e){let{wrap:t,btn:n}=z(this.opts.buttonLabel),{wrap:r,setProgress:i}=q(),a={},o=null,s=()=>{};if(this.opts.showTypeSwitcher){let{wrap:t,setDisabled:n}=H(e.type,async t=>{this.isSummarizing||(e.type=t,await c(this.opts.dbName,e),this.clearSummary(),await this.preflightAndRun(e,a,!1))});o=t,s=n}let l=W(async()=>{K(l),await this.preflightAndRun(e,a,!0)},()=>K(l));return a.triggerWrap=t,a.triggerBtn=n,a.pillsEl=o,a.setPillsDisabled=s,a.progressEl=r,a.progressSetProgress=i,a.consentEl=l,a}setSummarizingState(e,t){this.isSummarizing=t,e.setPillsDisabled(t)}async summarize(){this.root||await this.mount(),this.root?.querySelector(`.ais-btn`)?.click()}destroy(){this.abortController?.abort(),this.root?.remove(),this.root=null,this.mounted=!1}clearSummary(){this.root?.querySelector(`#ais-card`)?.remove(),this.root?.querySelector(`#ais-error`)?.remove()}showError(e,t){this.clearSummary();let n=X(e,t);this.root?.appendChild(n)}getLanguageHints(){return{expectedInputLanguages:this.opts.expectedInputLanguages?.length?this.opts.expectedInputLanguages:void 0,expectedContextLanguages:this.opts.expectedContextLanguages?.length?this.opts.expectedContextLanguages:void 0}}async runSummarizer(e,t,n,r){let{triggerBtn:i,pillsEl:a,progressEl:o,progressSetProgress:s,consentEl:l}=t,{expectedInputLanguages:u,expectedContextLanguages:d}=this.getLanguageHints();this.abortController?.abort(),this.abortController=new AbortController;let f=this.abortController.signal;this.setSummarizingState(t,!0),B(i,`Preparing…`),this.clearSummary(),K(l),J(o);let p=n===`downloadable`||n===`downloading`,m=null,h=null;try{p||(h=setTimeout(()=>{f.aborted||B(i,`Loading model…`)},1200)),m=await _({type:e.type,length:this.opts.defaultLength,format:this.opts.format,preference:this.opts.preference,sharedContext:this.opts.sharedContext,outputLanguage:this.opts.outputLanguage,expectedInputLanguages:u,expectedContextLanguages:d,signal:f,onDownloadProgress:p?e=>{s(e),B(i,`Downloading… ${e.pct}%`)}:void 0}),h!==null&&(clearTimeout(h),h=null),J(o),B(i,`Summarizing…`);let n=A(this.opts.contentSelector);if(!n||n.length<80)throw Error(`Not enough article text found to summarize.`);let r=Y(e.type,this.opts.defaultLength,this.opts.format);this.root?.appendChild(r.card),r.card.scrollIntoView({behavior:`smooth`,block:`nearest`}),r.stopBtn.addEventListener(`click`,()=>{this.abortController?.abort(),r.finalize(),this.setSummarizingState(t,!1),V(i,this.opts.buttonLabel)});let l=document.title??``,g=await b({summarizer:m,text:n,context:`Article title: "${l}". Provide a clear, accurate summary.`,signal:f,onChunk:e=>r.streamChunk(e)});r.finalize(),a&&U(a),V(i,`Regenerate`),g&&this.opts.onSummary?.(g,e.type),await c(this.opts.dbName,e)}catch(n){if(n.name===`AbortError`){V(i,this.opts.buttonLabel);return}J(o);let a=n instanceof Error?n:Error(String(n));this.opts.onError?.(a),this.showError(`Summary failed: ${a.message||`Unknown error.`}`,()=>this.preflightAndRun(e,t,r)),V(i,this.opts.buttonLabel)}finally{h!==null&&clearTimeout(h),this.setSummarizingState(t,!1)}}async preflightAndRun(e,t,n){let{expectedInputLanguages:r,expectedContextLanguages:i}=this.getLanguageHints(),a=null;try{a=await p({type:e.type,length:this.opts.defaultLength,format:this.opts.format,preference:this.opts.preference,sharedContext:this.opts.sharedContext,outputLanguage:this.opts.outputLanguage,expectedInputLanguages:r,expectedContextLanguages:i})}catch(e){let t=e instanceof Error?e:Error(String(e));this.showError(`Failed to check model availability: ${t.message}`);return}if(!a||a===`unavailable`){this.showError(`Gemini Nano is not available on this device. See <a href="https://developer.chrome.com/docs/ai/summarizer-api#hardware_requirements" target="_blank" rel="noopener">hardware requirements ↗</a>.`);return}if((a===`downloadable`||a===`downloading`)&&this.opts.requireDownloadConsent&&!n){G(t.consentEl);return}await this.runSummarizer(e,t,a,n)}};function $(){let e=document.querySelector(`[data-ai-summarizer]`);if(!e)return;let t={},n=e.getAttribute(`data-ai-summarizer`);if(n&&n!==``&&n!==`true`)try{t=JSON.parse(n)}catch{}new Q(t).mount()}typeof document<`u`&&(document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,$):$()),e.AISummarizer=Q});

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "browser-ai-summarizer",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "preview": "vite preview"
+  },
+  "main": "dist/browser-ai-summarizer.cjs.cjs",
+  "module": "dist/browser-ai-summarizer.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/browser-ai-summarizer.esm.js",
+      "require": "./dist/browser-ai-summarizer.cjs.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0"
+  }
+}