整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果在浏览器网页中直接本地运行一个聊天机器人，无需连接任何服务器，也不需要手动下载安装，岂不是更好吗？因为不需要上传任何数据到服务器，可以保护自己本地的隐私，而且还能减轻服务器的压力。
在本期视频中，我们来介绍一个名为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小时内与您取得联系。
