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

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

news 2026/2/10 22:50:27

在这里插入图片描述

简介

什么是 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

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2026/2/2 2:49:11

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2026/1/26 13:29:00

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2026/1/26 5:57:43

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2026/2/3 15:45:51

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...

编程新知 2025/11/28 10:50:12