当前位置： 首页 > news >正文

WebLLM Chat：无服务器、私密的AI聊天体验

news 2026/2/10 19:15:36

在这里插入图片描述

简介

什么是 Web-LLM ?

Web-LLM 是一个高性能的浏览器内语言模型推理引擎，允许用户在没有服务器支持的情况下直接在网页浏览器中进行语言模型推理。它利用 WebGPU 进行硬件加速，从而实现强大的 LLM 操作。Web-LLM 完全兼容 OpenAI API，支持流式处理、JSON 模式生成以及自定义模型集成等功能，为开发者提供了构建 AI 助手和交互式应用的灵活性。通过简单的 npm 包，用户可以快速集成 Web-LLM 到他们的网页应用中。

主要特点包括：

  1. 浏览器内推理：用户可以直接在浏览器中运行大型语言模型，无需服务器支持。
  2. 隐私保护：所有数据处理均在本地进行，确保用户的对话和数据不离开设备。
  3. 兼容 OpenAI API：支持与 OpenAI API 兼容的功能，如流式输出和 JSON 模式生成。
  4. 多模型支持：WebLLM 支持多种语言模型，用户可以根据需要选择和集成。
  5. 易于集成：开发者可以通过 npm 包轻松将 WebLLM 集成到自己的应用中。

什么是 Web-LLM Chat ？

Web-LLM Chat 是一个私有的 AI 聊天界面，结合了 WebLLM 的强大功能，允许用户在浏览器中本地运行大型语言模型（LLM）。它利用 WebGPU 加速，实现无须服务器支持的 AI 对话，确保用户的隐私和数据安全。该应用支持离线使用、图像上传和交互，提供友好的用户界面，具有 Markdown 支持和深色模式等功能。

WebLLM Chat 功能演示

构建镜像

如果你不想自己构建，可以跳过，直接阅读下一章节

官方提供了 Dockerfile，但没有提供编译好的镜像，需要自己编译

构建镜像和容器运行的基本命令如下👇

# 下载代码
git clone https://github.com/mlc-ai/web-llm-chat.git# 进入目录  
cd web-llm-chat# 构建镜像
docker build -t wbsu2003/webllmchat:v1 .# 运行容器
docker run -d \--name webllmchat \-p 3013:3000 \wbsu2003/webllmchat:v1

反向代理

如果使用 http 协议访问，页面上会有错误，导致页面卡死

Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR

在这里插入图片描述

假设访问地址为： https://webllmchat.laosu.tech

域名局域网地址备注
webllmchat.laosu.techhttp://192.168.0.197:3013WebLLM Chat 的访问地址

如果你和老苏一样，没有具有公网 IP 的 vps，也是一样可以实现局域网用 https://域名 访问的

文章传送门：用自定义域名访问tailscale节点

在 npm 中的设置

在这里插入图片描述

SSL 都勾选了

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 webllmchat ，选择第一个 wbsu2003/webllmchat，版本选择 latest。

在这里插入图片描述

端口

本地端口不冲突就行，不确定的话可以用命令查一下

# 查看端口占用
netstat -tunlp | grep 端口号
本地端口容器端口
30133000

命令行安装

如果你熟悉命令行，可能用 docker cli 更快捷

# 运行容器
docker run -d \--restart unless-stopped \--name webllmchat \-p 3013:3000 \wbsu2003/webllmchat

也可以用 docker-compose 安装，将下面的内容保存为 docker-compose.yml 文件

version: '3'services:webllmchat:image: wbsu2003/webllmchatcontainer_name: webllmchatrestart: unless-stoppedports:- 3013:3000

然后执行下面的命令

# 新建文件夹 webllmchat 和 子目录
mkdir -p /volume1/docker/webllmchat# 进入 webllmchat 目录
cd /volume1/docker/webllmchat# 将 docker-compose.yml 放入当前目录# 一键启动
docker-compose up -d

在这里插入图片描述

运行

在浏览器中输入 https://webllmchat.laosu.tech 就能看到主界面，会有一个加载的过程

在这里插入图片描述

完成之后就可以开始提问了

在这里插入图片描述

提问后，会开始下载模型

  1. 一旦模型文件下载完成，会被缓存，以便后续使用时能够更快地加载和运行。这种设计确保了用户在享受本地推理的同时，也能减少重复下载的时间和带宽消耗；
  2. 下载的模型在浏览器的开发者工具 --> Application --> Cache storage --> webllm/model 中找到；

在这里插入图片描述

下载完成后还需要加载，然后就能回答问题了

在这里插入图片描述

点模型，可以选择其他的模型

在这里插入图片描述

试试国产的 qwen2.5

在这里插入图片描述

可以看到模型已经切换了

在这里插入图片描述

第一次还是需要下载，然后加载

在这里插入图片描述

看得出来，启用了浏览器的 WebGPU

在这里插入图片描述

虽然台式机也比较古老，但是比用来跑群晖的笔记本平台还是性能强

在这里插入图片描述

虽然慢一点，但起码 7b 也能跑起来

在这里插入图片描述

参考文档

mlc-ai/web-llm: High-performance In-browser LLM Inference Engine
地址：https://github.com/mlc-ai/web-llm

mlc-ai/web-llm-chat: Chat with AI large language models running natively in your browser. Enjoy private, server-free, seamless AI conversations.
地址：https://github.com/mlc-ai/web-llm-chat

WebLLM | Home
地址：https://webllm.mlc.ai/

WebLLM Chat
地址：https://chat.webllm.ai/

WebGPU Report
地址：https://webgpureport.org/

相关文章：

WebLLM Chat：无服务器、私密的AI聊天体验

简介 什么是 Web-LLM ? Web-LLM 是一个高性能的浏览器内语言模型推理引擎，允许用户在没有服务器支持的情况下直接在网页浏览器中进行语言模型推理。它利用 WebGPU 进行硬件加速，从而实现强大的 LLM 操作。Web-LLM 完全兼容 OpenAI API，支持…...

编程日记 2024/12/9 23:11:51

C#中的模拟服务器与客户端建立连接

创建一个控制台项目，命名为Server，模拟服务器端。在同一个解决方案下，添加新项目，命名为Client，模拟客户端。在服务器端与客户端之间建立TCP连接，并在客户端发送消息，在服务器端输出。 Server项…...

编程日记 2024/12/9 23:07:47

【深度学习】利用Java DL4J 构建和训练医疗影像分析模型

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c=1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编程，高并发设计，Springboot和微服务，熟悉Linux，ESXI虚拟化以及云原生Docker和K8s…...

编程日记 2024/12/9 23:04:43

application.yml 和 bootstrap.yml

在 Spring Boot 中，application.yml 和 bootstrap.yml 都是用来配置应用程序的属性文件，通常用于环境配置、服务配置等。但是，它们有一些不同的用途和加载顺序。以下是它们之间的主要区别： 1. application.yml： 主要…...

编程日记 2024/12/9 23:01:39

使用uniapp开发小程序场景：在百度地图上调用接口返回的设备相关信息并展示

首先在百度地图开发者平台注册微信小程序开发密钥下载百度地图SDK-bmap-wx.min.js,下载地址在项目入口index.html页面进行引入页面中进行调用&#xff0c;代码示例如下<map id"map" longitude"108.95" latitude"34.34" scale"3" :m…...

编程日记 2024/12/9 22:58:34

ubuntu22.04 使用可以用的镜像源获取你要的镜像

默认的是不行的 不管pull啥镜像 仍然会出现这个错误 Error response form daemon:Get "https://registry-1.docker.io/v2": net/http: request canceled while waiting for connection (Client.Timeout exceeded while await) 操作方法是 如果在目录没有/etc/docker…...

编程日记 2024/12/9 22:57:33

Flume——sink连接hdfs的参数配置（属性参数+时间参数）

这可不是目录 配置文件官网说明属性参数时间参数 配置文件官网说明 可以参考官网的说明 属性参数 属性名称默认值说明channel-type-组件类型名称&#xff0c;必须是hdfshdfs.path-HDFS路径&#xff0c;例如&#xff1a;hdfs://mycluster/flume/mydatahdfs.filePrefixFlumeDa…...

编程日记 2024/12/9 22:54:30

python+docker实现分布式存储的demo

test.py代码 #test.py from flask import Flask, request, jsonify import requests import sys import threadingapp Flask(__name__)# 存储数据 data_store {}# 节点列表&#xff0c;通过环境变量传入 nodes [] current_node Noneapp.route(/set, methods[POST]) def …...

编程日记 2024/12/9 22:51:26

go-blueprint create exit status 1

1. 异常信息 2024/12/06 10:59:19 Could not initialize go.mod in new project exit status 1 2024/12/06 10:59:19 Problem creating files for project. exit status 1 Error: exit status 12. 排查思路 手动进行go mod init查看手动的报错解决报错 3. 解决问题 发现是GO11…...

编程日记 2024/12/9 22:49:23

如何更改Git用户名 - 本地与全局设置指南

在开发过程中&#xff0c;当使用Git作为版本控制系统时&#xff0c;可能会遇到需要更改用户名的情况&#xff0c;适时更新Git配置是保持项目管理效率的重要环节。更改Git用户名可以帮助确保您的提交反映了当前的用户身份&#xff0c;这对于项目的协作和历史记录跟踪至关重要。 …...

编程日记 2024/12/9 22:46:19

Node.js JWT认证教程

Node.js JWT认证教程 1. 项目介绍 JSON Web Token (JWT) 是一种安全的跨域身份验证解决方案&#xff0c;在现代Web应用中广泛使用。本教程将详细讲解如何在Node.js中实现JWT认证。 2. 项目准备 2.1 初始化项目 # 创建项目目录 mkdir nodejs-jwt-auth cd nodejs-jwt-auth# …...

编程日记 2024/12/9 22:42:13

【青牛科技】应用于音频信号处理系统的D258 是由两个独立的高增益运算放大器组成

概述&#xff1a; D258是由两个独立的高增益运算放大器组成。可以是单电源工作&#xff0c;也可以是双电源工作,电源的电流消耗与电源电压大小无关。应用范围包括变频放大器、DC增益部件和所有常规运算放大电路。 主要特点&#xff1a; ● 可单电源或双电源 工作 ● 在一个封…...

编程日记 2024/12/9 22:40:11

HTML Input 文件上传功能全解析:从基础到优化

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2024/12/9 22:37:07

小程序 —— Day1

组件 — view和scroll-view view 类似于HTML中的div&#xff0c;是一个块级元素 案例&#xff1a;通过view组件实现页面的基础布局 scroll-view 可滚动的视图区域&#xff0c;用来实现滚动列表效果 案例&#xff1a;实现纵向滚动效果 scroll-x属性&#xff1a;允许横向滚动…...

编程日记 2024/12/9 22:33:03

4.5 TCP 报文段的首部格式

欢迎大家订阅【计算机网络】学习专栏&#xff0c;开启你的计算机网络学习之旅&#xff01; 文章目录 前言1 TCP 报文段的基本结构2 固定部分2.1 源端口与目的端口2.2 序号2.3 确认号2.4 数据偏移2.5 保留字段2.6 控制位2.7 窗口2.8 检验和2.9 紧急指针 3 可变部分3.1 选项3.2 填…...

编程日记 2024/12/9 22:31:00

SQL 获取今天的当月开始结束范围:

使用 GETDATE() 结合 DATEADD() 和 DATEDIFF() 函数来获取当前月的开始和结束时间范围。以下是实现当前月时间范围查询的 SQL&#xff1a; FDATE > DATEADD(MONTH, DATEDIFF(MONTH, 0, GETDATE()), 0) FDATE < DATEADD(MONTH, DATEDIFF(MONTH, 0, GETDATE()) 1, 0) …...

编程日记 2024/12/9 22:25:54

Qt复习学习

https://www.bilibili.com/video/BV1Jp4y167R9/?spm_id_from333.999.0.0&vd_sourceb3723521e243814388688d813c9d475f https://subingwen.cn/qt/qt-primer/#1-4-Qt%E6%A1%88%E4%BE%8B https://subingwen.cn/qt/ https://download.qt.io/archive/qt/1.1Qt的特点 1.2QT中的…...

编程日记 2024/12/9 22:24:51

Leetcode经典题5--轮转数组

题目描述 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 输入输出示例 &#xff1a; 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右…...

编程日记 2024/12/9 22:23:48

C++的一些经典算法

以下是C的一些经典算法&#xff1a; 一、排序算法 冒泡排序&#xff08;Bubble Sort&#xff09; 原理&#xff1a; 它重复地走访过要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换…...

编程日记 2024/12/9 22:22:47

Windows环境中Python脚本开机自启动及其监控自启动

1 开机自启动 Windows 10/Windows Server 201X具有一个名为“启动”的已知文件夹&#xff0c;系统每次启动开始自动运行应用程序、快捷方式和脚本时都会检查该文件夹&#xff0c;而无需额外配置。 要在Windows启动时运行脚本&#xff0c;先使用WindowsR快捷键打开“运行”对话…...

编程日记 2024/12/9 22:21:46

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/29 17:54:05

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2026/2/8 21:52:30

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2026/1/23 0:14:48

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

编程新知 2026/2/6 2:33:44

基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…...

编程新知 2026/2/6 5:58:36

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

编程新知 2026/2/10 1:48:49

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...

编程新知 2025/8/18 19:05:00