DeFlock内容管理进阶：用Directus扩展+GPT-4o-mini自动提取新闻数据

DeFlock 是一个开源的群众参与式工具，用于定位和举报 ALPR（自动车牌识别）摄像头。除了地图数据，它还需要持续记录各地社区抵制 ALPR 的胜利新闻——而 DeFlock 的 "Recent Victories" 板块正是从新闻文章里逐条录入城市、时间、结果等字段的。本文带你看看 DeFlock 如何用Directus 扩展 + GPT-4o-mini，把"粘贴新闻链接 → 自动生成结构化数据"变成一次点击的事。

为什么需要"新闻数据自动提取"？

DeFlock 的 City Council 页面有一块 Recent Victories 表格，展示各城市"拒绝/取消 ALPR 合同"的最新进展，字段包括：

新闻稿是这些记录的原始素材——传统做法是运营人员手动阅读文章、逐个字段填写，既慢又容易出错。

这些数据存放在 Directus 内容管理系统中，前端通过 blogService.ts 和 cmsService.ts 等 API 服务读取。DeFlock 用 Directus 管理博客、章节（chapters）、供应商（lprVendors）等内容，而"胜利记录"的录入效率就是本文要解决的问题。

整体架构：一个 Directus Bundle 扩展搞定

核心方案是仓库中的 import-win 扩展，它是一个标准的 Directusbundle，同时打包了两类扩展：

1. Endpoint（后端接口）：/import-win，负责抓取新闻正文并调用 GPT-4o-mini 提取字段
2. Interface（前端控件）：win-importer，一个"粘贴 URL + 点 Import"的界面组件

城市终止 ALPR 合同的场景，正是这个扩展要自动归档的数据类型。

在 package.json 中可以看到，扩展通过directus:extension字段声明了两个入口，依赖只有cheerio（解析 HTML）和openai（调用模型），非常轻量。

后端：GPT-4o-mini 提示词设计是灵魂

后端逻辑在 src/api/index.js，流程分三步：

第一步：抓取并清洗文章正文

接口用fetch抓取 URL（带浏览器 User-Agent，15 秒超时），再用 cheerio 移除script / style / nav / footer / header / aside等噪音标签，只留纯文本（截取前 12000 字符）。

第二步：用系统提示词约束输出

系统提示词 定义了提取任务的"游戏规则"：

• 要求模型只返回合法 JSON（配合response_format: { type: 'json_object' }）
• 明确 6 个字段：year、month、city、state、outcome、description
• outcome只能是三选一：Contract Canceled/Contract Rejected/Cameras Deactivated，并给出每种的判定定义
• 特别要求description中用<a>标签包裹关键动词短语并链回原文，例如：

The council <a href="ARTICLE_URL" target="_blank">canceled their contract</a> by a 6-2 vote.

这个细节很关键——前端表格的展开行就是用v-html渲染description，用户可以直接从摘要跳回新闻原文，无需运营人员手动加链接。

第三步：转换成 CMS 字段格式

模型输出再经toCmsPayload()映射为 CMS 实际字段，例如把year/month拼成"June 2025"、把city + state拼成"Denver, CO"，直接对应 Directus 集合中的字段名。

接口还做了基本的健壮性处理：未登录返回401、缺参数返回400、服务端未配置OPENAI_API_KEY返回500、抓取失败返回422。

前端：一键 Import 的界面体验

界面组件 用 Vuetify 实现，只有两个元素：

• 一个 URL 输入框（placeholder="https://example.com/article"）
• 一个带 loading 状态的Import按钮

点击后组件调用api.post('/import-win', { url })，拿到结果后对 4 个字段逐一emit('setFieldValue', ...)，自动填充 Directus 数据表对应的输入框。如果请求失败，错误信息（如OPENAI_API_KEY is not configured on the server）会直接显示在按钮下方，运营人员立即可见原因。

这些数据最终服务于"说服城市议会"这一场景——Council 页面同时提供演讲模板、谈资库等工具。

整个界面扩展在 src/interface/index.js 中注册，hideLabel/hideLoader设为 true，让控件在 Directus 编辑页中不占额外空间，只留一行输入框。

数据如何流到 DeFlock 网站

运营人员在 Directus 后台保存记录后，数据会通过 CMS API 被前端消费：

• CouncilView.vue 中的fetchRecentWins()拉取最新胜利记录，按monthYear倒序渲染到 Recent Victories 表格
• 展开行用v-html渲染带原文链接的摘要，配合mdi-check-bold图标展示结果

此外，仓库里还有一个配套扩展 purge-cf-cache：它监听 Directus 的items.create / items.update / items.delete动作，自动调用 Cloudflare API 清除对应内容的缓存前缀，保证新录入的新闻数据能实时出现在生产网站上，而不是被 CDN 缓存住。

本地部署：三步跑起来

DeFlock 的 CMS 用 Docker Compose 编排，配置文件见 cms/docker-compose.yml。本地运行只需：

1. 在cms/目录准备环境变量，关键是SECRET、OPENAI_API_KEY（以及缓存扩展用的CF_API_KEY、CF_ZONE_ID）
2. 执行docker compose up -d，Directus 11.5.1 会挂载本地./extensions目录到容器内
3. 由于配置了EXTENSIONS_AUTO_RELOAD: true，import-win 扩展 的代码修改会自动热加载，开发时无需重启容器

💡小贴士：扩展源码在 cms/extensions/import-win/src/，修改提示词或字段映射后，配合EXTENSIONS_AUTO_RELOAD即可立即生效，非常适合快速调优提取效果。

这套方案值得借鉴的 3 个点

1. 提示词即 Schema：把目标字段、取值枚举、格式要求全部写进系统提示词，模型输出即可直接入库，省去二次清洗
2. JSON Mode + 前端校验：response_format: json_object保证输出可解析，接口层再逐层 try/catch，错误信息对运营人员友好
3. CMS 原生扩展 > 独立脚本：用 Directus 的 Endpoint + Interface 机制，让 AI 能力直接长在数据录入界面里，非技术背景的内容维护者也能零学习成本使用

DeFlock 的全国地图界面——内容管理层的每次更新，最终都会服务于这张众包地图背后的数据生态。

常见问题 FAQ

Q：为什么选 GPT-4o-mini 而不是更大的模型？新闻摘要+字段提取属于结构化信息抽取，mini 级别模型完全胜任，且延迟和成本都低得多。对高频录入场景，"够用+快"比"更强"更重要。

Q：如果文章抓取失败怎么办？接口会返回422 Failed to fetch article: ...，常见原因是网站反爬或 URL 失效，换个可访问的报道链接即可。

Q：outcome 三分类不够用，想加新类别怎么办？只需同步修改 SYSTEM_PROMPT 中的枚举定义 和 Directus 集合的字段选项，两处保持一致即可。

通过import-win这个不到百行的 Directus 扩展，DeFlock 把"读新闻—抄字段—加链接"的重复劳动压缩成了一次粘贴，这就是 LLM 与内容管理系统结合的最小可行范式：提示词定规则，CMS 管数据，扩展做桥梁。