当前位置：首页 > news >正文

玩转 AI · 思考过程可视化

news 2025/7/2 21:08:30

玩转 AI · 思考过程可视化

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

示例

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

pom.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>

开发代码

编辑流程并注册

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

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

@Configuration
public class BatchConfiguration {@Beanpublic 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 来控制任务开始与结束，毕竟一个步骤可能多个子任务。

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;}
}

高级：并行流程

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

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 的类，或者开发者自己定义的类，体现了设计者的巧妙构思。
🔧功能丰富：除了本文所写的，这个模块还有很多有意思的功能，比如导入、导出，上传校验等也有同样的有点。