Fabric 如何启动内置 Web 界面本地运行 Svelte 应用并连上 REST 服务【免费下载链接】FabricFabric is an open-source framework for augmenting humans using AI. It provides a modular system for solving specific problems using a crowdsourced set of AI prompts that can be used anywhere.项目地址: https://gitcode.com/GitHub_Trending/fa/FabricFabric 是一个开源的 AI 增强框架除了命令行客户端仓库的web/目录里附带一个基于 Svelte 的 Web App作为命令行之外的图形界面。这个界面不是独立应用页面上的 pattern 列表、模型列表、会话与聊天请求都来自 Fabric 内置的 REST API 服务器所以正确顺序是先用fabric --serve在本地把 API 跑起来再在web/目录启动 Svelte 应用。完成本文需要 Node.js ≥18 和已全局安装的 Fabric用fabric --version检查。前置条件先确认三件事Fabric 已全局安装并完成初始化。新装之后运行fabric --setup配置目录结构和 AI 供应商的 API keyfabric --setupNode.js ≥18。这是 web/README.md 中明确写出的要求。Fabric 仓库在本地。Web 应用在仓库的web/目录里且启动脚本依赖仓库内的相对路径见下文predev说明所以命令都要在仓库的web/目录中执行。第一步启动 REST 服务在一个单独的终端里启动 Fabric 的 REST API 服务器fabric --serve服务器默认监听:8080即http://localhost:8080见 docs/rest-api.md。用下面的请求验证服务已经就绪curl http://localhost:8080/patterns/names这个端点返回全部 pattern 的名称列表。这个进程要一直开着Web 页面的数据全部经过它。文档给出的服务器选项如下按需选用标志说明默认值--serve启动 REST API 服务器---address服务器地址和端口:8080--api-key启用 API key 认证无首次本地使用不加任何参数即可。注意认证边界一旦设置了--api-key所有请求都必须携带X-API-Key请求头没有设置 key 时服务器接受所有请求但会记录一条警告。是否启用认证在启动前想好。第二步安装依赖并启动 Svelte 应用进入仓库的web/目录安装依赖npm install或者用 pnpm官方 README 推荐理由是速度更快pnpm install这一步会安装 Svelte、PDF 转 Markdown 库等全部依赖并执行必要的 setup 任务。然后启动开发服务器npm run dev或者pnpm run dev浏览器打开http://localhost:5173文档标注的默认端口能看到带 pattern 输入/输出区的 Web App 仪表板即文章开头配图所示界面。有一个细节值得知道web/package.json 里定义了predev钩子在dev之前自动执行mkdir -p static/data cp ../scripts/pattern_descriptions/pattern_descriptions.json static/data/也就是把仓库里的 pattern 描述数据复制进static/data/。这个相对路径只有在仓库内的web/目录才成立所以不要把web/单独拷出来别处运行。验证 Web 应用与 REST 服务的连接前端并没有硬编码后端地址。web/vite.config.ts 从环境变量FABRIC_BASE_URL读取后端基址缺省为http://localhost:8080并由 Vite 开发服务器把两类请求代理到该后端以/api开头的请求去掉/api前缀后转发给后端匹配^/(patterns|models|sessions)/names的请求直接转发。REST 服务一侧也做了配合服务器为本地开发返回Access-Control-Allow-Origin: http://localhost:5173的 CORS 头页面从 5173 端口发起的跨域请求因此被允许见 docs/rest-api.md 的 CORS 一节。可以分三层验证整条链路后端 APIcurl http://localhost:8080/patterns/names返回 pattern 名称。Swagger 交互文档浏览器访问http://localhost:8080/swagger/index.html可以浏览全部端点、请求/响应 schema 并直接在页面里测试调用。即使开启了--api-keySwagger 文档端点仍然公开可访问只有实际 API 端点需要认证。Web 页面打开http://localhost:5173能加载出 pattern 与模型列表说明代理链路已通。页面拉不到 pattern 或模型列表时怎么办如果页面请求/api/...或/patterns/names失败先确认fabric --serve进程是否还活着。Vite 代理对后端不可达有明确的处理逻辑见 web/vite.config.ts/api请求返回 HTTP 500 和纯文本Something went wrong. The backend server may not be running.patterns/models/sessions的 names 请求返回 JSON{error: Backend server not running, names: []}。在终端或浏览器网络面板看到上面这两种输出之一说明原因在 REST 服务进程本身——没启动、已退出或者不在 8080 端口上——重新执行fabric --serve即可。可选让 Web 应用指向其他后端端口如果 8080 被占用你把服务器改绑到别的端口例如fabric --serve --address :9090那么需要同步告诉 Svelte 应用否则它会继续去连默认的 8080FABRIC_BASE_URLhttp://localhost:9090 npm run dev代理目标、以及注入到前端构建中的__FABRIC_CONFIG__.FABRIC_BASE_URL都取自这个环境变量。至此fabric --serve提供 API、5173 端口打开图形界面两端通过 Vite 代理与 CORS 头连通。后续在页面里选 pattern、填输入执行任务时走的都是这套已经验证过的本地 REST 服务。【免费下载链接】FabricFabric is an open-source framework for augmenting humans using AI. It provides a modular system for solving specific problems using a crowdsourced set of AI prompts that can be used anywhere.项目地址: https://gitcode.com/GitHub_Trending/fa/Fabric创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考