Trigger.dev项目实战：基于ReactFlow构建人机交互工作流-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00008/article/details/148394096

Trigger.dev项目实战：基于ReactFlow构建人机交互工作流

trigger.dev ✨ Trigger.dev is the open source background jobs framework for TypeScript. With features like API integrations, webhooks, scheduling and delays. 项目地址: https://gitcode.com/gh_mirrors/tr/trigger.dev

项目概述

本文将介绍如何使用Trigger.dev结合ReactFlow构建一个包含人工审核环节的工作流系统。该系统能够自动生成新闻文章的音频摘要，并在关键节点引入人工审核机制，确保输出内容的质量。

技术架构

这个示例项目采用了现代化的技术栈组合：

前端框架：使用Next.js构建Web应用
工作流可视化：采用ReactFlow实现工作流节点的可视化展示
实时通信：利用Trigger.dev的Realtime功能订阅任务运行状态
人工审核机制：通过Trigger.dev的waitpoint tokens实现人工介入流程
AI能力：集成OpenAI API生成文章摘要
语音合成：使用ElevenLabs将文本转换为语音

核心功能解析

1. 工作流任务分解

系统将整个流程分解为多个独立的Trigger.dev任务：

文章摘要生成：调用OpenAI API对输入文章进行智能摘要
文本转语音：通过ElevenLabs API将摘要转换为音频文件并存储
摘要审核：关键的人工审核环节，需要用户确认摘要质量
工作流编排：主任务负责协调各个子任务的执行顺序和数据传递

2. ReactFlow节点设计

系统实现了三种自定义节点类型：

输入节点：工作流起点，接收文章URL输入
动作节点：实时显示Trigger.dev任务的执行状态
审核节点：展示摘要结果并等待用户确认，使用Realtime API获取审核状态

3. 工作流编排实现

工作流的整体编排由Flow组件负责，主要功能包括：

节点布局与连接关系定义
任务运行状态的实时订阅
将运行详情传递给各个节点

关键技术：Waitpoint Tokens

Waitpoint Tokens是Trigger.dev提供的重要特性，用于实现人工审核流程：

// 创建等待令牌
const reviewWaitpointToken = await wait.createToken({
  tags: [workflowTag],
  timeout: "1h",
  idempotencyKey: `review-summary-${workflowTag}`,
});

// 完成令牌（当用户完成审核后）
await wait.completeToken<ReviewPayload>(
  { id: tokenId },
  {
    approved: true,
    approvedAt: new Date(),
    approvedBy: user,
  }
);

这种机制允许工作流在特定节点暂停执行，等待人工干预后再继续后续流程，非常适合需要质量控制的场景。