之前一直有朋友在群里问酒馆SillyTavern到底能不能做成网页版能不能不用本地电脑打开浏览器就能进去聊其实这个问题我琢磨了很久也在服务器上踩了不少坑。后来我干脆把自己的一套 SillyTavern 实例做成了在线服务顺便搭了一个简单的角色卡集市让手机、平板、公司电脑都能随时访问。这篇文章会把整个“在线酒馆”的搭建思路、核心原理、配置步骤和常见坑点完整拆开来讲。内容偏实战适合想自己部署一个网页版 SillyTavern 的开发者也适合刚接触酒馆、想了解它怎么跑起来的新手。文中涉及的代码和配置都会尽可能给全你照着一步步操作基本能在自己服务器上复现一套可用的在线酒馆。1. 在线酒馆是什么SillyTavern 网页化项目的背景1.1 SillyTavern 是什么它解决了什么问题SillyTavern 是一个开源的前端 AI 聊天界面社区里习惯叫它“酒馆”。它本身不提供大模型推理能力而是作为一个统一的前端入口把各种大模型 API 接进来提供角色扮演、人物设定、对话历史管理、角色卡导入导出等功能。简单说SillyTavern 解决了三个问题角色设定管理每个角色可以拥有独立的姓名、性格、开场白、对话示例不需要每次手动重复提示词。多模型切换同一套界面可以切换接入不同的大模型后端比如 OpenAI 兼容接口、Claude、本地部署的 Ollama、KoboldAI 等。对话体验增强支持流式输出、参数调节、世界观设定、上下文长度控制比在模型官网聊天窗口里更容易玩角色扮演。但默认的 SillyTavern 是一个“本地运行”的应用。你需要在自己电脑上安装 Node.js下载源码运行node server.js然后在浏览器里打开localhost:8000使用。这种模式对个人折腾来说没问题但它有几个明显限制电脑关机或休眠酒馆就访问不了。手机和电脑不在同一局域网时没法直接访问。角色卡分散在本地文件里分享给朋友很麻烦。1.2 为什么要做在线酒馆我做在线酒馆的初衷很简单把 SillyTavern 从“本地程序”变成“网页服务”。在服务器上部署 SillyTavern 之后整个酒馆变成了一个常驻的 Web 服务。用户不用安装任何客户端打开浏览器输入域名就能进入对话界面。只要有网络手机 4G/5G、办公室电脑、平板都能直接使用。这种模式尤其适合以下场景几个人一起用同一个酒馆服务各自开不同的对话房间。想把角色卡集中管理、统一分享给朋友。想在手机上流畅使用而不是依赖电脑做为中转。我搭建的角色卡集市也是基于同样的思路把角色卡从“本地 PNG 文件”变成“网页卡片”浏览、预览、一键导入全部在浏览器里完成。1.3 在线酒馆与传统本地酒馆的区别下面用一个表格直观对比一下对比维度本地酒馆在线酒馆网页版使用入口本地 localhost公网域名 / IP访问设备本机浏览器任意设备浏览器依赖条件电脑开机、本地运行服务器常驻运行角色卡管理本地文件导入网页集市一键获取部署难度低中需要服务器适合人群个人单机使用多人共享、移动端使用在线酒馆并不是把本地功能砍掉重做而是基于 SillyTavern 本身的能力做了一层“服务化改造”。你依然是使用酒馆的前端界面只是底层从localhost换成了远程服务器。2. 环境准备与项目结构设计2.1 服务器与运行环境选择SillyTavern 本质是一个 Node.js 服务端 浏览器前端的应用所以对服务器性能要求并不高。真正吃性能的是大模型 API 调用而不是酒馆本身。我现在的部署环境如下可以作为参考操作系统LinuxUbuntu 22.04CPU2 核内存4GB磁盘40GB SSDNode.js 版本18 以上反向代理Nginx版本需要根据你的项目实际情况调整本文示例以常见环境为例重点演示配置思路。如果你只是自己一个人用云服务器的 2 核 4G 配置完全够用。如果角色卡集市访问量比较大可以先用 CDN 加速静态资源暂时不需要升级服务器配置。2.2 涉及的核心技术在线酒馆涉及的技术栈并不复杂核心包括SillyTavern开源的 AI 聊天前端项目主目录。Node.jsSillyTavern 的运行环境同时也是角色卡集市静态服务的运行环境。Nginx反向代理负责把公网 80/443 端口请求转发到本地的 8000 端口。pm2(可选) Node.js 进程守护工具保证酒馆服务崩溃后自动重启。HTML CSS JavaScript实现角色卡集市页面和后端接口。这些技术组合起来非常轻量没有引入额外的数据库。角色卡集市用 JSON 文件做索引对中小规模使用完全足够。2.3 整体架构拆解在线酒馆的整体结构可以简化为下面的流程用户浏览器 → Nginx443端口 → SillyTavern Node服务8000端口 → 大模型API ↓ 角色卡文件目录用户浏览器访问域名加载酒馆前端界面。Nginx处理 HTTPS 和反向代理把请求转发给本地酒馆服务。SillyTavern Node 服务提供聊天界面、对话保存、角色卡加载等核心能力。大模型 API真正生成回复的推理引擎。角色卡目录存放png或json格式的角色卡文件供酒馆和集市调用。需要说明的是SillyTavern 不同版本对配置文件的命名和字段会有些差异本文以常见的config.yaml配置为例具体字段请以你实际安装的版本为准。3. SillyTavern 核心原理角色卡与 API 配置3.1 角色卡是什么角色卡Character Card是酒馆生态里最核心的数据格式。一张角色卡通常是一个 PNG 图片文件但里面隐藏了一段 JSON 格式的角色数据。这种做法的巧妙之处在于角色头像和角色设定被封装在同一个文件里。所以你分享一张角色卡 PNG 图片就等于同时分享了角色的立绘和完整的角色属性。角色卡中的常见字段包括字段含义name角色名称description角色描述包括性格、外貌、背景personality性格特征摘要scenario场景设定first_mes角色的第一条开场白mes_example对话示例用于给模型演示语气和风格system_prompt系统提示词SillyTavern 加载角色卡时会读取 PNG 文件中的tEXt数据块解析出 JSON然后自动填充到对话环境中。这也是为什么你只需要导入一张图片就能完整还原一个角色的原因。3.2 前端界面与后端服务的通信方式SillyTavern 启动后内部会开启一个 HTTP 服务。浏览器访问http://服务器IP:8000时实际上是加载 SillyTavern 的静态前端资源此后前端通过 Socket.IO 长连接或 HTTP 接口与后端通信。这里有一点需要特别提醒不要把酒馆服务直接裸奔到公网。SillyTavern 虽然本身也支持登录但对普通用户来说前面套一层 Nginx 反代 基础认证会更稳妥后面我会在实战部分详细说明。3.3 模型 API 的接入思路SillyTavern 本身不生成回复它只是一个前端壳。要实现真正的对话必须在酒馆设置中配置一个大模型 API。常见的配置方式有OpenAI 兼容接口适用于各类中转服务、GateWay、One API 等聚合平台。Anthropic Claude 接口适用于 Claude 系列模型。本地 Ollama在服务器上运行 Ollama通过http://localhost:11434接入。KoboldAI / TextGenWebUI适合本地运行的开源模型。在配置 API 时核心是三要素API 地址API Base URL模型接口的访问地址。API 密钥API Key调用接口的认证凭据。模型名称Model Name实际使用的模型 ID。这三项在酒馆的设置界面里都可以找到对应输入框。不同版本位置会有一点区别但整体逻辑一致。4. 从零搭建在线酒馆完整实战4.1 安装依赖与下载源代码首先需要确保服务器上已经安装 Node.js 和 Git。以 Ubuntu 22.04 为例# 更新软件源 sudo apt update # 安装 Node.js 和 npm sudo apt install -y nodejs npm # 验证版本 node -v npm -v # 安装 Git sudo apt install -y git如果系统自带的 Node.js 版本过低建议通过 NodeSource 或 nvm 安装较新的版本。SillyTavern 不同版本对 Node.js 的版本要求不太一样具体以官方文档为准。接下来下载 SillyTavern 源码# 在 /opt 下创建工作目录 cd /opt sudo mkdir sillytavern sudo chown $USER:$USER sillytavern # 克隆源码 git clone https://github.com/SillyTavern/SillyTavern.git . # 进入项目目录 cd /opt/sillytavern # 安装依赖 npm installnpm install需要一些时间实际耗时取决于服务器网络情况。安装完成后项目目录下会看到server.js、public、config.yaml等关键文件和目录。4.2 首次启动与基础配置先直接启动一次确保服务能跑起来node server.js如果一切正常终端会显示酒馆服务地址默认是http://localhost:8000。首次启动后项目目录下会生成config.yaml配置文件。不同版本的配置项会有差异常见的关键配置思路如下# config.yaml 核心配置示例字段名请以实际版本为准 listen: true # 是否监听所有网卡 port: 8000 # 服务端口 whitelistMode: false # 是否开启 IP 白名单再次强调具体字段请以你安装的版本为准不要盲抄。重点是理解listen和port这两个概念。为了方便日常维护我推荐使用 pm2 来守护酒馆进程# 全局安装 pm2 npm install -g pm2 # 启动酒馆服务 pm2 start server.js --name sillytavern # 设置开机自启 pm2 startup systemd pm2 save使用 pm2 之后即使服务崩溃或服务器重启酒馆也能自动恢复运行。4.3 接入大模型 API服务起来之后浏览器访问http://服务器IP:8000进入酒馆界面。接下来需要配置模型 API。注意如果config.yaml中没有开启listen: true那么你在服务器外是无法直接通过http://服务器IP:8000访问的。这一点比较容易踩坑。在酒馆界面中找到 API 连接区域选择你使用的接入方式。以 OpenAI 兼容接口为例输入你的API 地址。填入你的API 密钥。选择或填写模型名称。点击连接测试看到成功提示即可。完成配置后新建一个对话随便发送一条消息确认模型能正常回复。这里需要特别说明在使用任何大模型 API 时请遵守模型服务商的使用条款确保你的内容合规、合法不要用于违法或恶意用途。4.4 使用 Nginx 反代并开启 HTTPS直接通过 IP 加端口访问酒馆有两个问题端口号不美观。HTTP 明文传输不安全API 密钥有被窃取的风险。所以更推荐用 Nginx 做反向代理配置一个域名并启用 HTTPS。安装 Nginxsudo apt install -y nginx新建配置文件/etc/nginx/conf.d/sillytavern.conf# /etc/nginx/conf.d/sillytavern.conf server { listen 80; server_name tavern.example.com; location / { proxy_pass http://127.0.0.1:8000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 300s; } }这里有几个关键点proxy_pass指向本地酒馆的 8000 端口。Upgrade和Connection两个 header 对 WebSocket 支持很重要SillyTavern 前端实时通信依赖它。proxy_read_timeout调大一些避免长对话生成过程中连接被中断。配置完成后重载 Nginxsudo nginx -t sudo systemctl reload nginx此时访问http://tavern.example.com就能看到酒馆界面了。HTTPS 证书方面可以使用 Let’s Encrypt它提供免费证书。以certbot为例sudo apt install -y certbot python3-certbot-nginx sudo certbot --nginx -d tavern.example.com按照提示操作certbot 会自动续期证书并修改 Nginx 配置。开启 HTTPS 之后浏览器访问https://tavern.example.com连接全程加密更安全。4.5 加一道基础访问认证在线酒馆是面向公网的服务任何人知道域名都能访问这会有两个风险API 密钥被他人读取。服务器资源被滥用。所以我在 Nginx 层增加一道 HTTP Basic Auth 基础认证虽然简单但能挡住大多数路人访问。# 安装 htpasswd 工具 sudo apt install -y apache2-utils # 创建用户密码文件 sudo htpasswd -c /etc/nginx/.htpasswd admin然后修改 Nginx 配置server { listen 443 ssl; server_name tavern.example.com; # 开启基础认证 auth_basic Restricted Access; auth_basic_user_file /etc/nginx/.htpasswd; location / { proxy_pass http://127.0.0.1:8000; # ... 其余配置保持一致 } }重载配置后再访问酒馆时浏览器会弹出用户名密码输入框只有输入正确的账号密码才能进入。4.6 手机端访问验证在线酒馆的一个核心亮点是手机也能玩。这里说的手机访问不是让浏览器强制显示成 HTML5 游戏那种适配而是让用户主动选择使用 Web App 模式。iPhone 用户可以使用 Safari 打开酒馆域名然后点击“分享”按钮选择“添加到主屏幕”。之后桌面就会多出一个酒馆图标点开就是全屏模式体验接近原生 App。Android 用户使用 Chrome 打开域名在右上角菜单中点击“安装应用”或“添加到主屏幕”同样可以生成桌面入口。我自己实际使用下来手机端在普通聊天场景下体验不错输入、发送、流式回复都正常。唯一需要注意的是手机屏幕小角色卡描述文字多的场景会比较拥挤。移动网络延迟高时长回复的等待时间会更明显。部分 UI 按钮在窄屏下需要横屏才能完整显示。这些不是功能问题而是使用环境的限制。如果手机端使用频率高可以考虑在酒馆设置中调大 UI 缩放比例或者使用“竖屏模式”相关插件。5. 角色卡集市功能的实现5.1 角色卡目录结构与索引设计在线酒馆只解决“接入了能聊”的问题但“聊什么角色”同样关键。很多时候用户进入酒馆后第一句问的是哪里可以找到角色卡为了让用户方便地获取角色卡我实现了一个简单的角色卡集市。集市的核心思路是把角色卡 PNG 文件放在指定目录同时维护一个 JSON 索引文件供前端展示。目录结构如下/opt/sillytavern/ ├── data/ │ └── character-cards/ │ ├── 角色A.png │ ├── 角色B.png │ └── index.json └── server.jsindex.json的格式可以设计得很简单[ { id: character-a, name: 角色A, author: 作者名, tags: [冒险, 奇幻], description: 这是一个示例角色的简短描述, file: 角色A.png, downloadUrl: /cards/角色A.png }, { id: character-b, name: 角色B, author: 作者名, tags: [日常, 校园], description: 这是另一个示例角色, file: 角色B.png, downloadUrl: /cards/角色B.png } ]5.2 集市页面开发示例集市页面本质是一个静态网页通过 JavaScript 请求 JSON 索引渲染角色卡片列表。下面是一个最小可运行的前端示例思路清晰你可以在此基础上扩展。!-- 文件路径public/market.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title角色卡集市/title style body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; background: #1a1a2e; color: #eee; margin: 0; padding: 20px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; } .card { background: #16213e; border-radius: 12px; padding: 16px; transition: transform 0.2s; } .card:hover { transform: translateY(-4px); } .card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; } .card h3 { margin: 12px 0 4px; font-size: 18px; } .card .author { color: #888; font-size: 13px; } .card .desc { font-size: 14px; color: #bbb; margin: 8px 0; } .card .btn { background: #0f3460; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; } .card .btn:hover { background: #533483; } /style /head body h1角色卡集市/h1 div classgrid idcardGrid/div script async function loadCards() { const res await fetch(/cards/index.json); const cards await res.json(); const grid document.getElementById(cardGrid); cards.forEach(card { const div document.createElement(div); div.className card; div.innerHTML img src${card.downloadUrl} alt${card.name} h3${card.name}/h3 div classauthor作者${card.author || 未知}/div div classdesc${card.description || }/div button classbtn onclickdownloadCard(${card.id})获取角色卡/button ; grid.appendChild(div); }); } function downloadCard(id) { // 这里的实际下载逻辑可以根据你的做酒馆自定义 alert(点击角色卡文件下载后在酒馆中导入即可使用); // 实际项目里可以跳转到酒馆的上传页面或者直接触发文件下载 } loadCards(); /script /body /html需要注意的是如果你希望读取酒馆自己的data/character-cards目录需要通过一个后端接口来返回文件列表。SillyTavern 不同版本对静态目录的访问策略不同不建议直接把整个数据目录暴露成静态资源否则可能存在信息泄露风险。更稳妥的做法是单独写一个轻量的 Express 接口暴露集市数据比如/api/cards返回 JSON 索引/api/cards/download?idxxx检查权限后返回对应角色卡文件。这样角色卡的访问可以走独立控制不会误开酒馆的完整文件目录。5.3 引入下载与导入流程在在线酒馆中角色卡的获取路径可以有两种用户下载 PNG 文件然后在酒馆界面里手动上传导入。通过酒馆的“角色卡导入”功能直接粘贴角色卡 JSON 内容。我实现的集市采用的是第一种方式用户点击下载角色卡 PNG再回到酒馆聊天界面点击角色管理上传该图片。整个过程不需要依赖第三方图床或网盘因为角色卡本身就是一张图片天然适合这种分发模式。这里要提一个细节不要把角色卡集市的下载逻辑做得太复杂。初期直接用静态目录 Nginx 访问控制就够了不要上来就引入数据库和用户系统。等访问量确实上来了再考虑增加用户上传、审核、评论、点赞等功能。6. 常见问题与排查思路在线酒馆上线之后最常遇到的问题基本集中在网络访问、依赖安装、模型配置三个方面。我把这些问题整理成了一个排查表格问题现象常见原因解决思路服务器外访问不了酒馆config.yaml中 listen 未开启设置listen: true并重启服务启动时报 Node.js 版本错误Node 版本过低使用 nvm 安装新版 Node.jsnpm install 卡住或失败网络原因切换 npm 镜像源后重试手机流量访问很慢无 HTTPS 或服务器带宽小启用 HTTPS检查服务器带宽对话无回复浏览器控制台报 CORS 错误API 服务端不允许跨域检查 API 服务商是否允许跨域或使用服务端代理刷新页面后对话丢失没有保存会话检查酒馆设置中的自动保存选项导入 PNG 角色卡后角色为空角色卡文件损坏或不是标准格式用其他角色卡测试确认文件未损坏Nginx 反代后页面能开但聊天不回复WebSocket 未正确代理确认配置了Upgrade和Connectionheader登录认证后页面样式错乱Basic Auth 与 Nginx 静态资源缓存冲突清理浏览器缓存或调整认证范围这里挑几个重点问题展开说明。问题一服务启动成功但外网无法访问。这是最常见的坑。很多人下载 SillyTavern 后在本地一切正常但放到服务器上就访问不了。排查步骤在服务器上执行curl http://localhost:8000看是否有响应。查看config.yaml中listen是否为true。检查云服务商的安全组是否放行了 8000 端口。如果使用 Nginx 反代检查 Nginx 配置和防火墙。不要把 8000 端口直接暴露到公网更推荐通过 Nginx 反代访问。问题二npm install 安装依赖失败。SillyTavern 的依赖体积不算小在服务器网络不佳的时候很容易失败。推荐使用国内镜像源npm config set registry https://registry.npmmirror.com npm install如果仍然失败可以查看报错日志逐个排查缺少的系统依赖。问题三手机端可以打开页面但对话很慢。这通常不是因为酒馆本身慢而是因为模型 API 响应慢或者手机网络的 RTT 延迟高。可以尝试在酒馆中开启流式输出Streaming让回复一个字一个字显示使用体验会好很多。减少上下文长度减少每次请求携带的历史消息数量。检查 API 服务的地区节点是否离你较远。7. 在线酒馆的最佳实践与工程建议7.1 访问安全与权限控制是底线把 SillyTavern 部署成在线服务首先要想清楚一件事这个服务是给谁用的如果只是自己一个人用Nginx 层的 Basic Auth 基本就够用。但如果要分享给多个朋友使用建议在前端加入更完善的用户认证体系而不是依赖浏览器弹窗。另外永远不要把 SillyTavern 的 API 密钥明明白白地显示在页面上供所有人读取。酒馆的设置页有 API Key 查看功能但这意味着任何能进入酒馆的人都能看到你的 Key。如果你开放给陌生人使用这会有比较大的安全隐患。一个可行的折中方案是服务端通过环境变量注入 API Key。使用 Nginx 层代理 API 请求对用户隐藏真实 Key。只开放必要的功能禁止用户修改 API 配置。7.2 备份与版本管理在线酒馆运行过程中角色卡、聊天记录、全局设置都是重要数据。不要等数据丢了才想起备份。建议至少做两件事将 SillyTavern 的data目录定时不同步到其他位置。每次升级 SillyTavern 前先完整备份一次配置文件和data目录。一个简单的 crontab 备份命令示例# 每天凌晨3点备份 data 目录 0 3 * * * tar -czf /backup/sillytavern-$(date \%Y\%m\%d).tar.gz -C /opt sillytavern/data定期清理过期备份避免磁盘空间被慢慢占满。7.3 内容安全与版权意识这一点必须认真对待。在线酒馆本质上是一个开放式的 AI 聊天前端用户可以接任意模型、聊任意内容。作为服务提供者你需要在力所能及的范围内做好内容审核和风险提示避免酒馆被用于违法违规的内容生产。具体来说在酒馆登陆页或使用说明中明确禁止违法内容。如果做角色卡集市建议人工审核上架角色卡不要把爬虫抓来的角色卡直接开放下载。尊重角色卡作者的版权。很多角色卡是社区作者花费精力制作的公开分享前需要确认授权范围。涉及真实人物、知名 IP 的角色卡要谨慎处理避免肖像权和知识产权风险。从工程角度来看这也是保护自己的方式。不要等出了问题才后悔。7.4 性能优化与稳定性在线酒馆的性能瓶颈通常不在 Node 服务本身而在以下三处大模型 API 的响应速度。静态资源的加载速度。服务器带宽。对于静态资源Nginx 默认的处理能力已经不错。你可以通过开启 gzip 压缩来减小前端资源体积gzip on; gzip_types text/plain text/css application/json application/javascript;对于对话等待时间可以在酒馆设置中开启流式输出并适当降低上下文长度。这会显著改善用户的等待体验。进程稳定性方面pm2 已经帮我们解决了崩溃自动重启的问题。建议配合日志轮转工具避免日志文件无限增长。7.5 升级时保持谨慎SillyTavern 迭代速度很快每次升级都可能改变配置结构、角色卡格式或 UI 布局。升级前一定先看 Release Notes了解变更点。在测试环境验证没问题之后再应用到生产服务器。如果你有很多用户在用升级窗口尽量选在低峰期并提前公告。8. 写在最后这篇文章从 SillyTavern 是什么讲起完整拆解了把一个本地酒馆改造为在线网页服务的全过程。核心知识点可以归纳为三条SillyTavern 本身是一个 Node.js Web 服务部署到服务器并配置好 Nginx 反代后天然就具备了“网页版”的能力。手机端访问不需要额外写客户端利用浏览器的“添加到主屏幕”功能就可以获得接近 App 的体验。角色卡集市本质上是一个静态资源索引页面关键在于设计好角色卡文件的组织结构和访问控制。做在线酒馆的过程中我自己踩得最深的一个坑是在安全方面。最初我图省事直接把酒馆服务暴露在公网结果没过几天就有人在页面上乱改配置。后来加上 Nginx 反代、HTTPS、Basic Auth才把这个口子堵住。如果你要部署在线酒馆我建议你从第一天就把安全配置做好而不是等出了问题再补救。下一步你可以继续探索的方向包括给在线酒馆接入更完善的用户系统支持多用户注册登录。基于角色卡集市扩展出用户上传、评分、评论功能。增加运营监控统计日活、对话次数、API 消耗等指标。探索更多模型后端接入方式让在线酒馆支持不同模型之间的快速切换。酒馆这类的 AI 对话前端本质上是在“模型能力”和“用户使用方式”之间搭一座桥。把桥建在网页上让更多人通过浏览器轻松使用是一件既有技术乐趣也有实用价值的事情。希望你也能把你自己的在线酒馆跑起来。