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

渡星匣

348人浏览 · 2026-05-24 14:23:36

渡星匣 · 2026-05-24 14:23:36 发布

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

一、本期核心任务

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

二、需求分析

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

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

典型场景：生成企业官网需同时收集内容图片、插画、架构图、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. 三种并发方案对比

对比维度	方案1：CompletableFuture	方案2：LangGraph4j并发	方案3：LangGraph4j子图
实现复杂度	中等	中等	高
可维护性	中等	高	最高
状态管理	手动维护	框架自动	框架自动
可视化	单节点展示	多节点分支	子图结构展示
适用场景	简单并发需求	工作流标准化项目	大型模块化、可复用项目

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

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

1. 数据模型定义

（1）图片收集计划模型

@Data
public class ImageCollectionPlan implements Serializable {
    // 内容图片搜索任务
    private List<ImageSearchTask> contentImageTasks;
    // 插画图片搜索任务
    private List<IllustrationTask> illustrationTasks;
    // 架构图生成任务
    private List<DiagramTask> diagramTasks;
    // Logo生成任务
    private List<LogoTask> logoTasks;

    public record ImageSearchTask(String query) implements Serializable {}
    public record IllustrationTask(String query) implements Serializable {}
    public record DiagramTask(String mermaidCode, String description) implements Serializable {}
    public record LogoTask(String description) implements Serializable {}
}

（2）工作流上下文扩展

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

// 图片收集计划
private ImageCollectionPlan imageCollectionPlan;
// 各类图片临时存储
private List<ImageResource> contentImages;
private List<ImageResource> illustrations;
private List<ImageResource> diagrams;
private List<ImageResource> logos;

2. AI图片计划服务开发

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

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

（2）AI服务接口与工厂

public interface ImageCollectionPlanService {
    ImageCollectionPlan planCollection(String userPrompt);
}

@Configuration
public class ImageCollectionPlanFactory {
    @Resource
    private ChatModel chatModel;

    @Bean
    public ImageCollectionPlanService createImageCollectionPlanService() {
        return AiServices.builder(ImageCollectionPlanService.class)
                .chatModel(chatModel)
                .build();
    }
}

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

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

@Slf4j
public class ImageCollectorNode {
    public static AsyncNodeAction<MessageState, String> create() {
        return node_async(state -> {
            WorkflowContext context = WorkflowContext.getContext(state);
            String originalPrompt = context.getOriginalPrompt();
            List<ImageResource> collectedImages = new ArrayList<>();

            // 1. 获取图片收集计划
            ImageCollectionPlanService planService = SpringContextUtil.getBean(ImageCollectionPlanService.class);
            ImageCollectionPlan plan = planService.planCollection(originalPrompt);

            // 2. 并发执行所有收集任务
            List<CompletableFuture<List<ImageResource>>> futures = new ArrayList<>();

            // 并发收集内容图片
            if (plan.getContentImageTasks() != null) {
                ImageSearchTool imageSearchTool = SpringContextUtil.getBean(ImageSearchTool.class);
                plan.getContentImageTasks().forEach(task -> 
                    futures.add(CompletableFuture.supplyAsync(() -> 
                        imageSearchTool.searchContentImages(task.query())
                    ))
                );
            }

            // 并发收集插画、架构图、Logo（逻辑同上）
            // ...

            // 3. 等待所有任务完成并汇总
            CompletableFuture.allOf(futures.toArray(new CompletableFuture[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("图片收集");
            return WorkflowContext.saveContext(context);
        });
    }
}

五、前端与增强能力开发

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

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

public Flux<String> executeWorkflowWithFlux(String originalPrompt) {
    return Flux.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 (Exception e) {
                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）配置类

@Configuration
public class LangGraphStudioConfig extends AbstractLangGraphStudioConfig {
    private final LangGraphFlow flow;

    public LangGraphStudioConfig() throws GraphStateException {
        StateGraph<MessageState, String> workflow = CodeGenWorkflow.createWorkflow().stateGraph();
        this.flow = LangGraphFlow.builder()
                .title("AI工作流调试")
                .stateGraph(workflow)
                .build();
    }

    @Override
    public LangGraphFlow getFlow() {
        return flow;
    }
}