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

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

news 2026/2/10 20:46:06

在这里插入图片描述

简介

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

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/23 8:33:56

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2026/2/1 3:12:03

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/11/13 2:37:01

第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

编程新知 2026/1/31 20:22:32

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

编程新知 2025/9/23 9:23:07

2025年- H71-Lc179--39.组合总和(回溯,组合）--Java版

1.题目描述 2.思路 当前的元素可以重复使用。 &#xff08;1&#xff09;确定回溯算法函数的参数和返回值&#xff08;一般是void类型&#xff09; &#xff08;2&#xff09;因为是用递归实现的&#xff0c;所以我们要确定终止条件 &#xff08;3&#xff09;单层搜索逻辑 二…...

编程新知 2026/1/22 15:25:26