玩转 AI · 思考过程可视化

我们在开发 AI 的思维链 / 处理流时，难免遇到耗时较长的流程，如果遇到处理过慢的，用户什么也看不到可能丧失使用兴趣，对于这种情况，一个巧妙的产品思维就是呈现处理进度。

示例

其实完成这个页面，展示处理进度、处理耗时、预估耗时、这一些列操作，在 Spring Boot 中只需10行代码！

pom.xml 引入依赖

xml 复制代码

<dependency>
    <groupId>cn.itlym</groupId>
    <artifactId>shoulder-batch</artifactId>
    <version>1.1.0</version>
</dependency>
<dependency>
    <groupId>cn.itlym</groupId>
    <artifactId>shoulder-starter</artifactId>
    <version>1.1.0</version>
</dependency>

开发代码

编辑流程并注册

java 复制代码

public enum MyAiFlow implements BatchActivityEnum<MyAiFlow> {
    TASK_1("👂", "识别用户意图", 0, 0),
    TASK_2("🧠", "改写查询、扩写查询", 0, 0),
    TASK_3("🔍", "查找相关数据", 0, 0),
    TASK_4("🧠", "总结信息", 0, 0),
    ;
    // 省略实现方法

将这个枚举注册进 Spring 上下文

java 复制代码

@Configuration
public class BatchConfiguration {
    @Bean
    public BatchActivityEnumRepositoryCustomizer batch() {
        return repository -> repository.register(MyAiFlow.class, "AI 思考过程");
    }
}

直接查看页面

启动后访问
http://localhost:8080/ui/activities/page.html?progressId=_shoulderMockAndTest&activityId=MyAiFlow

数一下刚刚的Java代码，不算大括号，确实10行代码 👍

控制流程处理进度

原文档里通过自定义枚举的 start、finish 即可方便的控制处理进度。

我更推荐使用 setTotalAndStart、addSuccess 来控制任务开始与结束，毕竟一个步骤可能多个子任务。

java 复制代码

public class DemoController {

    @GetMapping("chat")
    public String chat(String userInput) {
        String progressId = UUID.randomUUID().toString();
        // 开启异步线程处理，并直接返回处理进度页面
        Threads.execute("enhancedAiProcess", () -> enhancedAiProcess(userInput, progressId));
        return "redirect:/ui/activities/page.html?progressId=" + progressId + "&activityId=MyAiFlow";
    }

    public String enhancedAiProcess(String userInput, String progressId) {
        // 收到用户输入，解析用户意图
        MySimpleTaskEnum.TASK1.startOneStageTask(progressId);
        String userIntent = AiClient.analyzeUserIntent(userInput);
        MySimpleTaskEnum.TASK1.addSuccess(progressId);

        // 改写查询、扩写查询
        MySimpleTaskEnum.TASK2.startOneStageTask(progressId);
        String rewriteQuery = AiClient.rewriteUserInput(userInput, userIntent);
        MySimpleTaskEnum.TASK2.addSuccess(progressId);

        // 让 AI 去网上搜索
        MySimpleTaskEnum.TASK3.setTotalAndStart(progressId, 3);
        String aiWithSearchedResult = AiClient.chatWithTools(rewriteQuery, List.of("WebSearchTool"));
        MySimpleTaskEnum.TASK3.addSuccess(progressId);
        Thread.sleep(300);//模拟一个个网页搜索
        MySimpleTaskEnum.TASK3.addSuccess(progressId);
        Thread.sleep(300);//模拟一个个网页搜索
        MySimpleTaskEnum.TASK3.addSuccess(progressId);

        // 根据用户输入、意图、查找结果 总结信息返回用户
        MySimpleTaskEnum.TASK3.startOneStageTask(progressId);
        String finalOutput = AiClient.summary(aiWithSearchedResult, userIntent, userInput);
        MySimpleTaskEnum.TASK3.addSuccess(progressId);

        return finalOutput;
    }
}

高级：并行流程

修改后面的数字就可以自定义任意流程，这是我写的一个示例

java 复制代码

public enum CurrentFlow implements BatchActivityEnum<CurrentFlow> {
    // 这两个任务在 第1个块，第1列（列数相同代表顺序布局）
    TASK_BLOCK1_MAIN_1("1.1.1", "任务1", 1, 1),
    TASK_BLOCK1_MAIN_2("1.1.2", "任务2", 1, 1),

    // 这个任务在 第2个块，第1列
    TASK_BLOCK1_MAIN_3("2.1.1", "任务3.1", 2, 1),

    // 这两个任务在 第2个块，第2列
    TASK_BLOCK1_MAIN_4("2.2.1", "任务3.2.1", 2, 2),
    TASK_BLOCK1_MAIN_5("2.2.2", "任务3.2.2", 2, 2),

    // 这个任务在 第3个块
    TASK_BLOCK1_MAIN_10("3.1.1", "任务3", 3, 0),
    ;

    // 别忘了注册 BatchActivityEnumRepositoryCustomizer

自定义 UI 页面

把自己的 html 文件命名为 activityPage.html.config 放在 resources/shoulder/pages 目录下就好。

评价

⚡方便快速 ：10行代码，即可实现页面开发与可视化，这比 DeepSeek 写代码都快好多。

⚙ 轻量低耦合 ：业务代码编写中几乎只依赖了 Spring 的类，或者开发者自己定义的类，体现了设计者的巧妙构思。

🔧功能丰富：除了本文所写的，这个模块还有很多有意思的功能，比如导入、导出，上传校验等也有同样的有点。

参考

Ai 流程可视化
 开源代码 Demo2