在Chromium的環境中，可以直接寫JavaScript導入生成摘要的AI（Gemini Nano）： Summarizer API 。 這個 API 可以幫助生成文章或對話的重點或摘要、前導訊息、生成標題……等用途。 官方明確提出會在 Chrome 138 的版本導入此 API，但其實在很早之前就鼓勵開發者試著用Gemini Nano開發擴充功能。 在開始使用之前，可以順便閱讀 The People + AI Guidebook 與 Ameba 平台實際運用的情境 。 開始使用 查看是否支援 Summarizer API： if ('Summarizer' in self) { // The Summarizer API is supported. } Summarizer.availability() 可以判斷模型是否已準備好：它會回傳 "unavailable"（不支援）、"downloadable"（尚未下載）、"downloading"（下載中）、"available"（支援且可執行）。 而如果是 downloadable 或 downloading，可以在 Summarizer.create() 中使用 downloadprogress 查看下載進度： const summarizer = await Summarizer.create({ monitor(m) { m.addEventListener('downloadprogress', (e) => { console.log(`Downloaded ${e.loaded * 100}%`); }); } }); 呼叫 function 一般摘要： const theArticle = document.querySelector('#article').innerHTML; const summary = await summarizer.summarize(theArticle, { context: 'This article is about vtuber of ho...

不知道大家有沒有看了Apple的 WWDC25 ？先不論他們說了什麼，我只在想他們的液態玻璃（Liquid Glass）UI要如何實現（這裡討論的是靜態效果）。 部分UI改成毛玻璃樣式。 然而大部分元件則是改成不太一樣的液態玻璃樣式。 backdrop-filter 一開始當然是先想到從以前就有的毛玻璃效果（Glassmorphism），也就是用backdrop-filter來嘗試： See the Pen backdrop-filter by cj ( @cjzopen ) on CodePen . 但你可以發現，做不出底下文字或圖片扭曲的效果，於是就想到了SVG的filter。 <svg style="display: none;"> <filter id="wavy-distort"> <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="2" result="turbulence"/> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G"/> </filter> </svg> feTurbulence 我們可以先在HTML裡創造一個擁有filter的SVG，其中包含feTurbulence： type: turbulence (亂流) / fractalNoise (雲)。 baseFrequency: 雜訊圖的密度。 numOctaves: 雜訊圖疊的層數。 result: 類似 id，後續拿來引用的名稱。 再使用feDisplacementMap引用feTurbulence： ...

CSS 的 if() 搭配 變數系統 或 attr() ，讓我們能直接用 CSS 判斷條件或 HTML 屬性自動達成樣式變化，在某些情況下不再需要寫任何 JavaScript。 範例 我們可以用不同 class 搭配變數不同的值，再加上 if 和 else 判斷來自動設定 background-color 的值： :root { --color: #333; } .element { background-color: if( style(--color: #fafafa): black; style(--color: #ed5fe8): #000a75; else: white); } .dark { --color: #fafafa; } .esport { --color: #ed5fe8; } 你可以注意到，寫複數個判斷條件還可以實現「else if」的效果。 但直接使用的缺點也很明顯，就是直接判斷變數的值太不直觀了，所以我們還可以用上 attr() 來改良。 用 attr() 優化 if() 的判斷條件 這裡我們使用 attr() 搭配 if() 判斷狀態（data-status）來給不同的值，程式寫起來就會直觀很多。 <div class="container"> <div class="card" data-status="success"></div> <div class="card" data-status="warning"></div> <div class="card" data-status="success"></div> <div class="card" data-status="error"></div> <div class="card" data-status="warning"></div>...