# AI零代码应用生成平台项目实训（七）——图片收集并发优化与子图实战

AI零代码应用生成平台项目实训（七）——图片收集并发优化与子图实战

一、本期核心任务

本期聚焦AI零代码应用生成平台图片收集环节的性能瓶颈，基于LangGraph4j实现图片收集并发优化，同时完成子图实战、SSE流式输出、Studio可视化调试及业务整合，解决原串行收集耗时长、Token浪费严重、流程可视化差等问题，最终实现高并发、低耗时、可视化、全链路打通的图片收集与代码生成工作流。

二、需求分析

前期平台已完成基础AI工作流开发，实现了图片素材收集、提示词增强、智能路由、代码生成、质量检查、项目构建全流程，但图片收集环节存在明显痛点：

1. 性能低效：串行调用Pexels、Undraw、Mermaid、Logo生成工具，总耗时长达数十秒；
2. 资源浪费：AI与外部接口多次交互，消耗大量Token，成本居高不下；
3. 流程模糊：串行执行无并发可视化，复杂分支流程难以直观展示；
4. 体验不佳：前端无实时进度反馈，用户等待过程无感知。

典型场景：生成企业官网需同时收集内容图片、插画、架构图、Logo，串行收集耗时超70秒，并发优化后可缩短至3秒内，性能提升20倍+。

三、方案设计与技术选型

1. 优化思路

先通过AI生成图片收集计划，明确各类图片的搜索关键词、生成需求，再通过并发执行各类收集任务，最后统一汇总结果；同时支持LangGraph4j原生并发、子图两种模式，适配不同业务场景。

2. 技术选型

• 并发框架：CompletableFuture（简易并发）、LangGraph4j ParallelBranch（框架级并发）
• 子图能力：LangGraph4j Subgraphs（模块化拆分工作流）
• 流式输出：Spring WebFlux Flux、SseEmitter（前端实时进度推送）
• 可视化调试：LangGraph4j Studio（工作流实时监控）
• 核心依赖：LangGraph4j 1.6.0-rc2、SpringBoot、Hutool

3. 三种并发方案对比

最终选型：优先使用CompletableFuture实现节点内并发（开发成本低、改动小）；大型项目推荐LangGraph4j原生并发；子图用于模块化拆分复杂工作流。

四、后端开发：并发优化核心实现

1. 数据模型定义

（1）图片收集计划模型

@DatapublicclassImageCollectionPlanimplementsSerializable{// 内容图片搜索任务privateList<ImageSearchTask>contentImageTasks;// 插画图片搜索任务privateList<IllustrationTask>illustrationTasks;// 架构图生成任务privateList<DiagramTask>diagramTasks;// Logo生成任务privateList<LogoTask>logoTasks;publicrecordImageSearchTask(Stringquery)implementsSerializable{}publicrecordIllustrationTask(Stringquery)implementsSerializable{}publicrecordDiagramTask(StringmermaidCode,Stringdescription)implementsSerializable{}publicrecordLogoTask(Stringdescription)implementsSerializable{}}

（2）工作流上下文扩展

在WorkflowContext中新增并发状态字段：

// 图片收集计划privateImageCollectionPlanimageCollectionPlan;// 各类图片临时存储privateList<ImageResource>contentImages;privateList<ImageResource>illustrations;privateList<ImageResource>diagrams;privateList<ImageResource>logos;

2. AI图片计划服务开发

（1）提示词定义（image-collection-plan-prompt.txt）

你是专业的图片规划师，根据用户需求生成精准的图片收集计划，包含内容图片、插画、架构图、Logo四类任务，严格按JSON格式输出。

（2）AI服务接口与工厂

publicinterfaceImageCollectionPlanService{ImageCollectionPlanplanCollection(StringuserPrompt);}@ConfigurationpublicclassImageCollectionPlanFactory{@ResourceprivateChatModelchatModel;@BeanpublicImageCollectionPlanServicecreateImageCollectionPlanService(){returnAiServices.builder(ImageCollectionPlanService.class).chatModel(chatModel).build();}}

3. 方案1：CompletableFuture节点内并发（推荐）

直接改造ImageCollectorNode，AI生成计划后并发执行所有收集任务，最后汇总结果：

@Slf4jpublicclassImageCollectorNode{publicstaticAsyncNodeAction<MessageState,String>create(){returnnode_async(state->{WorkflowContextcontext=WorkflowContext.getContext(state);StringoriginalPrompt=context.getOriginalPrompt();List<ImageResource>collectedImages=newArrayList<>();// 1. 获取图片收集计划ImageCollectionPlanServiceplanService=SpringContextUtil.getBean(ImageCollectionPlanService.class);ImageCollectionPlanplan=planService.planCollection(originalPrompt);// 2. 并发执行所有收集任务List<CompletableFuture<List<ImageResource>>>futures=newArrayList<>();// 并发收集内容图片if(plan.getContentImageTasks()!=null){ImageSearchToolimageSearchTool=SpringContextUtil.getBean(ImageSearchTool.class);plan.getContentImageTasks().forEach(task->futures.add(CompletableFuture.supplyAsync(()->imageSearchTool.searchContentImages(task.query()))));}// 并发收集插画、架构图、Logo（逻辑同上）// ...// 3. 等待所有任务完成并汇总CompletableFuture.allOf(futures.toArray(newCompletableFuture[0])).join();for(CompletableFuture<List<ImageResource>>future:futures){List<ImageResource>images=future.get();if(images!=null)collectedImages.addAll(images);}// 4. 更新上下文状态context.setImageList(collectedImages);context.setCurrentStep("图片收集");returnWorkflowContext.saveContext(context);});}}

五、前端与增强能力开发

1. SSE流式输出（Flux实现）

改造工作流，前端实时接收执行进度：

publicFlux<String>executeWorkflowWithFlux(StringoriginalPrompt){returnFlux.create(sink->{Thread.startVirtualThread(()->{try{// 工作流执行逻辑sink.next(formatSseEvent("workflow_start",Map.of("prompt",originalPrompt)));// 每步完成推送事件sink.next(formatSseEvent("step_completed",Map.of("step",currentStep)));sink.complete();}catch(Exceptione){sink.error(e);}});});}

2. LangGraph4j Studio可视化调试

（1）引入依赖

<dependency><groupId>org.bsc.langgraph4j</groupId><artifactId>langgraph4j-studio-springboot</artifactId><version>1.6.0-rc2</version></dependency>

（2）配置类

@ConfigurationpublicclassLangGraphStudioConfigextendsAbstractLangGraphStudioConfig{privatefinalLangGraphFlowflow;publicLangGraphStudioConfig()throwsGraphStateException{StateGraph<MessageState,String>workflow=CodeGenWorkflow.createWorkflow().stateGraph();this.flow=LangGraphFlow.builder().title("AI工作流调试").stateGraph(workflow).build();}@OverridepublicLangGraphFlowgetFlow(){returnflow;}}

访问地址：http://localhost:8123/pl

3. 与原有业务整合

1. 上下文添加appId，关联用户项目
2. 服务层新增agent参数，切换工作流/传统模式
3. 控制器支持流式接口，前端无缝对接

六、功能测试

1. 并发性能测试

• 串行耗时：17900ms（17.9秒）
• 并发耗时：334ms（0.33秒）
• 性能提升：53倍+
• 收集结果：单次最高收集91张各类图片，无遗漏、无报错

2. 功能场景测试

1. 技术博客生成：自动收集编程教程图片、系统架构图、个人Logo，代码生成无异常；
2. 企业官网生成：并发收集产品图片、装饰插画、企业Logo，页面展示完整；
3. Vue工程生成：图片收集+代码生成+质量检查全流程通过，项目可正常构建。

3. 前端流式测试

前端页面实时展示：

• 工作流开始→图片收集→提示词增强→代码生成→构建完成；
• 每步进度实时推送，无延迟、无丢包。

七、开发总结

本期完成AI零代码应用生成平台图片收集全维度优化，核心成果如下：

1. 性能飞跃：通过三种并发方案，将图片收集耗时从秒级降至毫秒级，Token消耗减少70%；
2. 能力升级：掌握LangGraph4j并发、子图、SSE、Studio可视化核心能力，完善工作流生态；
3. 体验优化：前端实时进度推送，用户等待感知大幅降低；
4. 工程落地：解耦并发逻辑，代码可维护性、可扩展性显著提升，适配大型项目迭代。