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

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

news 2025/12/25 22:33:16

在这里插入图片描述

简介

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

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/12/15 11:25:33

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/12/9 18:30:35

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/12/21 9:43:13

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/12/5 3:38:11

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/12/22 9:57:58

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/12/23 13:27:38

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2025/12/19 4:24:26