整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果在瀏覽器網頁中直接本地運行一個聊天機器人，無需連接任何服務器，也不需要手動下載安裝，豈不是更好嗎？因為不需要上傳任何數據到服務器，可以保護自己本地的隱私，而且還能減輕服務器的壓力。
在本期視頻中，我們來介紹一個名為WebLLM的Web端JavaScript庫工具，顧名思義，它允許在網頁中運行任意流行的大語言模型。WebLLM是一個模塊化可自定義的JavaScript包，可在瀏覽器本地運行，無需服務器支持。
利用了WebAssembly和Web GPU技術，由于在瀏覽器中運行的腳本語言JavaScript無法滿足大型語言模型的高性能計算需求，而采用WebAssembly相當于在網頁中使用匯編語言，理論上可以支持大多數流行語言通過轉換的匯編語言在網頁端運行。
因此，這里需要高性能計算，通常會使用C+或Rust等高性能編程語言的代碼，這樣可以在網頁端實現高效運行程序。這還不夠，因為即使是C++等語言，它們默認的執行方式也是依賴CPU進行計算，對于大型語言模型來說，這樣的運行速度仍然太慢，所以最好利用GPU來進行并行運算。
因此，需要一種網頁版的GPU，也就是Web GPU。Web GPU并不是在瀏覽器中憑空創造了新的GPU，而是利用設備本身的GPU為網頁端的程序提供了可以執行的接口。目前這還不是Web的標準接口，但是目前不少主流瀏覽器的最新版本已經支持了Web GPU，所有基于谷歌瀏覽器內核Chromium的瀏覽器，比如微軟的Edge瀏覽器，opera瀏覽器，當然還有谷歌瀏覽器本身都已經支持了Web GPU。
有了WebAssembly和Web GPU，我們就可以高效地同時利用CPU和GPU了。現在讓我們來看看WebLLM庫，它可以選擇哪些模型？這個庫提供了一個聊天的Demo示例，在這個示例中，你可以選擇諸如Liama2、R、rapper、drama、mistreal、fi等模型。當你選擇其中任何一個模型后，在初次使用時，它會自動在后臺下載相應的模型并進行加載，因此你需要等待幾分鐘時間來完成加載。
加載完成后，模型將被緩存在本地，之后每次重新打開時，它都會直接從本地Cache加載，很快就可以開始了。但需要注意的是，由于這些模型的大小不同，因此它們對GPU存儲及顯存的需求也不同。
例如，如果我們想要使用LLAMA7B，它是LLAMA系列中的最小版本，那么它需要至少6GB的存儲，而RedPajama3B只需要3GB存儲。另外，像LLAMA270B版本，它需要至少64GB的顯存，這意味著在筆記本中，可能只有像蘋果筆記本的M系列芯片才能支持這種存儲需求。
因此，在實際使用中，如果在加載完成后出現錯誤，比如黑屏等，很可能是由于顯存大小不足，這時可以考慮加載較小的模型來使用。當然這只是一個示例，我們來看一下使用入門的代碼。
·首先，第一行就是把這個包加載進來，叫做webling。
·然后在main函數中，我們使用webling the chat model來創建一個聊天的實例。
·接著設置初始化的回調函數，用于顯示初始化的進度。
·然后是使用reload加載相應的模塊。
·接下來是使用prompt提示問題。
·然后使用generate來產生一次回答。
·再然后是第二次提問，也是類似的。
好了，這就是簡單的入門代碼了。我們也可以看到，其實這個庫并不會提供任何的UI界面的東西，只是單純地提供后臺的支持，這樣也可以作為一個基礎性的NPM包，供前端更靈活地使用。
總的來說，這只是一個實驗性的項目，還不能直接作為產品或者整合到當前的產品中去，因為它還不夠成熟，但它更像是向我們展示了一個愿景，一種可能性。將來在前端開發中也可以考慮加入這樣的語言模型，不僅僅是用于聊天機器人Dalesce，還可以用于任何涉及文字理解的場景，這是一個值得考慮采用的方向。
好了，本期視頻就到這里，我們下期見。
地存儲
1 本地存儲簡介
在客戶端存儲數據
HTML5 提供了兩種在客戶端存儲數據的新方法：
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲
之前, 這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲, 因為它們由每個對服務器的請求來傳遞, 這使得 cookie 速度很慢而且效率也不高。
HTML5 使用 JavaScript 來存儲和訪問數據。
2 語法
localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之后, 數據依然可用。
localStorage 和sessionStorage分別是本地存儲和會話存儲, 統稱本地存儲。
存儲數據：localStorage.setItem('key','value');
讀取數據：localStorage.getItem('key')
刪除指定數據：localStorage.removeItem('key');
清空所有數據：localStorage.clear()
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--
本地存儲存在自己電腦上了 他不能和服務器交互
一種：本地存儲(永久存儲不會過期)localStorage
一種：臨時會話(頁面關閉數據就沒了)sessionStorage
統稱本地存儲
二者的方法一毛一樣 咱們只以一個舉例子
cookie->可以喝服務器交互 是可以設置過期時間的
-->
<script type="text/javascript">
console.log(localStorage)
console.log(sessionStorage)
//寫入東西(隨便寫,你存儲的值)
//localStorage.setItem(key(小卡片),value(你存的包))
localStorage.setItem("key001","梁永燦");
localStorage.setItem("key002","迪麗熱巴");
localStorage.setItem("key003","楊穎");
localStorage.setItem("key004","大黃");
localStorage.setItem("key004","小黃");
//讀取
console.log(localStorage.getItem("key001"))
//console.log(localStorage)
//刪除
localStorage.removeItem("key001");
//全部刪除
localStorage.clear()
</script>
</body>
</html>本地存儲數據庫會自動的為每一個網站(IP地址)建立一個獨立的表格, 在同一個網站(IP地址)下數據是可以共享的, 但是不能跨域。
不能跨瀏覽器存儲, 每個瀏覽器都有自己的小數據庫, Chrome存儲的, 火狐看不見。
localStorage是簡單的數據庫, 沒有查詢功能, 不能用sql操作, 只能簡單的存儲、讀取k-v對。
sessionStorage 瀏覽器窗口一旦關閉, 數據就丟失了
localStorage存儲的數據, 永遠不丟失, 關機, 重啟都不會導致數據丟失, 除非清除了瀏覽器記錄
注意: 判斷localStorage和sessionStorage是否有數據使用if直接判斷
if(localStorage.getItem("key001")){
}不能使用
家好，我是 Echa。
今天來分享 Chrome DevTools 中一些非常實用的功能和調試技巧！
當我們刷新完頁面之后，通常控制臺的 Console 面板就會被清空。如果想保留控制臺的日志，就可以在設置中勾選 Preserve log 選項以保留控制臺中的日志。
我們可以打開設置，在Experiments中勾選Record coverage while performance tracing選項。
在面板下方的Coverage面板中點擊紅色按鈕以記錄頁面的代碼覆蓋率：
代碼覆蓋率使用動態分析法來收集代碼運行時的覆蓋率，讓開發者知道有代碼在頁面上真正的使用。動態分析是指在應用運行狀態下收集代碼執行數據的過程，換句話說，覆蓋率數據就是在代碼執行過程中通過標記收集到的。
在瀏覽器的開發者工具中可以通過開啟顯示重繪選項以查看頁面在執行操作時哪些元素會發生重繪。在控制臺右上角三個點中的 More tools 選項中開啟 Rendering 選項卡：
開啟 Rendering（渲染）選項后，開啟 Paint flashing：
當刷新頁面時，顯示綠色的區域就是重新繪制區域。
Chrome 的開發者工具不僅可以調試樣式，還可以調試動畫，可以在控制臺右上角三個點中的 More tools 選項中開啟 Animations 選項卡：
當頁面的動畫執行時，就會在時間軌道上查看所有的動畫，點擊其中一個動畫可以懂得執行過程以及時間軸：
我們可以在時間軸上定位到任一時刻的動畫幀，也可以拖動左右兩端的圓點來修改動畫的延遲和周期，修改之后可以在屬性面板看到對應的 CSS 樣式。
Chrome 瀏覽器內置了截圖功能，可以在瀏覽器開發者工具中使用 Ctrl+Shift+P（Windows）或者Command+Shift+P（Mac）快捷鍵打開搜索來查找screenshot：
這里有四個選項：
截圖完成后自動下載到下載目錄，打開瀏覽器的下載框或本機的下載目錄即可看到圖片。
我們可以使用本地資源覆蓋網頁所使用的資源，比如可以使用本地 CSS 文件覆蓋網頁的css文件，修改樣式。將本地的文件夾映射到網絡，在 Chrome 開發者功能里面對 CSS 樣式的修改都會直接改動本地文件，頁面重新加載，使用的資源也是本地資源，達到持久化的效果。
詳見：https://developer.chrome.com/blog/new-in-devtools-65/#overrides
Chrome瀏覽器為我們提供了全局搜索的概念，可以點擊開發者工具右上角的三個點，點擊Search選項，在Search面板中搜索所需關鍵字即可，點擊搜索結果即可跳到對應文件的代碼行：
有時應用會在用戶發生交互時出現問題，這時我們就可以添加事件監聽器添加斷點來捕獲這些事件以檢查交互時的問題。可以在Source面板右側的Event Listener Breakpoints中勾選相應的事件：
當頁面的內容發生變化時，如果想要知道是哪些腳本影響了它，就可以給DOM設置斷點。我們可以右鍵點擊需要設置斷點的DOM元素，在彈出的菜單中點擊Break on以選擇合適的斷點。
可以看到，Break on中有三個選項：
XHR breakpoints 可以用于異步請求的斷點，點擊加號即可添加斷點規則，輸入請求 的 URL 地址（片段），會在請求地址包含對應字符串的異步請求發出的位置自動停止：
在 Chrome 的管理面板中，開啟 CSS Overview 面板之后，就可以查看當前網站的樣式信息了，包括顏色信息、字體信息、媒體查詢等。當我們需要優化頁面的 CSS 時，這個功能就派上用場了。除此之外，還可以使用該功能方便地查看其他優秀網站的樣式信息。
默認情況下，該面板是不開啟的，可以通過以下步驟來開啟此功能：
那該如何使用 CSS Overview 面板呢？很簡單，只需要點擊 Capture overview 按鈕來生成頁面的 CSS overview報告即可。如果想重新運行CSS Overview，只需點擊左上角的清除圖標，然后再點擊 Capture overview 按鈕即可。
CSS Overview 報告主要由五部分組成：
（1）Overview summary： 頁面 CSS 的高級摘要
（2）Colors： 頁面中的所有顏色。顏色按背景顏色、文本顏色等用途分組。它還顯示了具有低對比度問題的文本。
每種顏色都是可點擊的。我們可以單擊它以獲取使用該顏色的元素列表。將鼠標懸停在列表中的元素上就可以突出顯示頁面中對應的元素。單擊列表中的元素就可以在“Elements”面板中打開該元素。
（3）Font info：字體信息， 頁面中的所有字體及其出現，按不同的字體大小、字體粗細和行高分組。與顏色部分類似，可以單擊以查看受影響元素的列表。
（4）Unused declarations： 未使用的聲明，包含所有無效的樣式，按原因分組。
（5）Media queries： 媒體查詢，頁面中定義的所有媒體查詢，按出現次數最高的排序。單擊可以查看受影響元素的列表。
Chrome DevTools CSP 違規斷點可以捕捉到與CSP違規有關的可能的異常，并在代碼中指出這些異常。
CSP 即內容安全策略，它允許限制網站中的某些行為以提高安全性。例如，CSP 可用于禁止內聯腳本或禁止eval，這兩者都可以減少跨站腳本 (XSS)攻擊的攻擊面。
一個特別新的 CSP 是可信類型 (TT)策略，它支持動態分析，可以系統地防止對網站的一大類注入攻擊。為了實現這一點，TT 支持網站監管其 JavaScript 代碼，只允許將某些類型的東西分配給 DOM 接收器，例如 innerHTML。
網站可以通過包含特定的 HTTP 標頭來激活內容安全策略。例如，標頭content-security-policy: require-trusted-types-for 'script'; trusted-types default激活頁面的 TT 策略。
目前，調試 TT 違規的唯一方法是在 JS 異常上設置斷點。由于強制 TT 違規將觸發異常，因此此功能可能會很有用。但是，在現實的場景中，需要對 TT 違規進行更細粒度的控制。特別是，我們希望僅在 TT 違規（而不是其他異常）上中斷，也在僅報告模式下中斷，并區分不同類型的 TT 違規。
啟用該功能將為應用程序增加一個額外的安全層，減少跨站腳本（XSS）等漏洞。
那該如何啟用該功能呢？可以通過以下步驟來開啟此功能：
當遇到有安全問題的代碼時，Chrome DevTools 甚至會顯示如何修復改問題。
Chrome DevTools 提供了一個實驗性的字體編輯器工具，可以用來改變字體設置。可以用它來改變字體、大小、粗細、行高、字符間距，并實時看到變化。
那該如何啟用該功能呢？可以通過以下步驟來開啟此功能：
通過啟用雙屏模式，可以在 Chrome DevTools 模擬器的雙屏設備上調試你的 web 應用。這對于開發要適配折疊屏手機的應用是非常有用的。
那該如何啟用該功能呢？可以通過以下步驟來開啟此功能：
通過 Chrome DevTools Accessibility Tree，可以檢查為每個DOM元素創建的可訪問性對象。這項功能與 Elements 選項卡相似，但使用它可以深入探索應用的更多可訪問性細節。
那該如何啟用該功能呢？可以通過以下步驟來開啟此功能：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
