往期开发(已经完成)

今日后端开发过程

  • 完善 AI 接口代码

    • 使用 AI 的 SDK

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      /**
      * AI 对话
      *
      * @param message
      * @return
      */
      public String doChat(String message) {
      DevChatRequest devChatRequest = new DevChatRequest();
      devChatRequest.setModelId(1659171950288818178L);
      devChatRequest.setMessage(message);
      BaseResponse<DevChatResponse> response = yuCongMingClient.doChat(devChatRequest);
      if (response == null) {
      throw new BusinessException(ErrorCode.SYSTEM_ERROR, "AI 响应错误");
      }
      return response.getData().getContent();
      }
    • AI 消息的发送

      1
      2
      3
      4
      5
      String content = aiManager.doChat(userMessageBuilder.toString());
      String[] splits = content.split("【【【【【");
      if (splits.length != 3) {
      throw new RuntimeException("AI 生成错误");
      }
    • AI 消息的结果获取以及封装和存入

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      BiResponse biResponse = new BiResponse();
      Chart chart = new Chart();
      chart.setUserId(loginUser.getId());
      chart.setExecMessage(userMessageBuilder.toString());
      chart.setGoal(goal);
      chart.setName(name);
      chart.setChartType(chartType);
      chart.setChartData(dataStr);
      chart.setGenResult(splits[2].trim());
      chart.setGenChart(splits[1].trim());
      boolean isSave = chartService.save(chart);
      ThrowUtils.throwIf(!isSave, ErrorCode.SYSTEM_ERROR, "图表保存失败!");
      biResponse.setGenChart(splits[1].trim());
      biResponse.setGenResult(splits[2].trim());
      biResponse.setChartId(chart.getId());

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57

      - #### 最终的代码效果

      ```java
      /**
      * AI对话分析
      *
      * @param multipartFile
      * @param genChartByAiRequest
      * @param request
      * @return
      */
      @PostMapping("/gen")
      public BaseResponse<BiResponse> genChartByAI(@RequestPart("file") MultipartFile multipartFile,
      GenChartByAiRequest genChartByAiRequest, HttpServletRequest request) {
      // 第二天内容
      // 参数获取
      String goal = genChartByAiRequest.getGoal();
      String name = genChartByAiRequest.getName();
      String chartType = genChartByAiRequest.getChartType();
      // 参数校验
      ThrowUtils.throwIf(StringUtils.isEmpty(goal), ErrorCode.PARAMS_ERROR, "目标不能为空");
      ThrowUtils.throwIf(StringUtils.isEmpty(chartType), ErrorCode.PARAMS_ERROR, "类型不能为空");
      ThrowUtils.throwIf(StringUtils.isEmpty(name), ErrorCode.PARAMS_ERROR, "图表名称不能为空");
      // 判断是否登录
      User loginUser = userService.getLoginUser(request);
      ThrowUtils.throwIf(Objects.isNull(loginUser), ErrorCode.NOT_LOGIN_ERROR);
      // 用户消息拼接
      StringBuilder userMessageBuilder = new StringBuilder();
      userMessageBuilder.append("分析需求:").append("\n");
      String newGoal = goal + ",请使用" + chartType;
      userMessageBuilder.append(newGoal).append("\n");
      userMessageBuilder.append("原始数据:").append("\n");
      String dataStr = ExcelUtils.excelToCsv(multipartFile);
      userMessageBuilder.append(dataStr);
      String content = aiManager.doChat(userMessageBuilder.toString());
      String[] splits = content.split("【【【【【");
      if (splits.length != 3) {
      throw new RuntimeException("AI 生成错误");
      }
      BiResponse biResponse = new BiResponse();
      Chart chart = new Chart();
      chart.setUserId(loginUser.getId());
      chart.setExecMessage(userMessageBuilder.toString());
      chart.setGoal(goal);
      chart.setName(name);
      chart.setChartType(chartType);
      chart.setChartData(dataStr);
      chart.setGenResult(splits[2].trim());
      chart.setGenChart(splits[1].trim());
      boolean isSave = chartService.save(chart);
      ThrowUtils.throwIf(!isSave, ErrorCode.SYSTEM_ERROR, "图表保存失败!");
      biResponse.setGenChart(splits[1].trim());
      biResponse.setGenResult(splits[2].trim());
      biResponse.setChartId(chart.getId());
      return ResultUtils.success(biResponse);
      }
  • 今天后端收获

初次使用 AI 进行对数据的智能分析,并封装 AI 返回的结果,进行包装后返回给前端进行渲染,但存在一个比较严重的问题就是接口调用 AI 响应时间长,用户体验差,存在的问题可以再进行优化,自行感觉可以使用异步的方法来加快多个用户同时访问时候的响应速度问题。

今日前端开发过程

  • 1.昨天已经设计好表单数据,后端已经初步完成智能分析的过程。重新使用前端的 openAPI 功能重构 service 代码

  • 2.对接后端的接口代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    const onFinish = async (values: any) => {
    if (submitting) return;
    setSubmitting(true);
    setChartResult(undefined);
    setChartData(undefined);
    const params = {
    ...values,
    file: undefined,
    };
    try {
    const res = await genChartByAIUsingPOST(params, {}, values?.file[0]?.originFileObj);
    if (res?.data) {
    message.success('分析成功!');
    if (res.data?.genChart) {
    setChartData(JSON.parse(res.data?.genChart));
    }
    setChartResult(res.data?.genResult);
    } else {
    message.error('AI分析错误!');
    }
    } catch (e: any) {
    message.error('分析失败!');
    }
    setSubmitting(false);
    };
  • 3.输入数据之后,点击智能分析,效果图如下:

    效果图

  • 4.等待一分钟过后渲染到页面上,效果图如下:

    效果图

  • 5.至此对接渲染已完成

  • 6.今日前端收获

如何使用 ant desgin 进行布局,设计一些细节加载过程,增加用户体验,但存在一个很大的问题,分析速度慢,当多个人同时点击时候,后端可能造成堵塞,响应速度很慢,也有可能多次点击,造成多次重复的分析。