2022项目实训“异步分布式联邦学习”第七周报告

原创已于 2022-06-12 00:27:45 修改 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #python #机器学习

于 2022-04-17 23:59:55 首次发布

在项目实训的中期检查前一周，团队向指导老师展示了前后端通讯功能的完成和前端UI优化。本周重点是前后端通信的实现及UI代码的清晰化，包括自适应折线图。下周将准备demo以迎接中期检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于时间距离项目实训的中期检查时间只剩一周，为了保证在中期检查时不出现差池，我们决定将我们目前的成果在本周向指导老师展示一下。我在这一周负责的部分依旧是前后端通讯和前端UI的完善工作，同时还承担一部分测试的环境提供任务。以下将会汇报本周的工作内容，以及下一周需要完成的工作内容。

一、本周工作报告

本周的工作内容依旧是集中于前后端通讯功能的搭设，以及前端部分UI的绘制。

1.前后端通讯功能

这周完成了将后端持续向前端发送数据的启动信号绑定在了开始训练的按钮上。由此，前后端通信的部分已经基本完全实现了。

    startTrain() {
      if (this.modelClass == null) { // 必须先选择一个模型类型才能开始进行模型训练
        ElMessage({
          message: "请选择模型类型！",
          type: "error",
          showClose: true,
          grouping: true,
        });
      }
      else {
        // 当前步骤为步骤1——“训练模型”
        this.currentStep = 1;
        // 开始训练模型，向后端发送模型参数信息
        this.websocket.send(JSON.stringify({
          model: this.modelClass,
          epoch: this.maxEpoch,
          accuracy: this.accGoal
        }));

        // // 更新训练轮数和精确度
        // this.epoch++;
        // this.acc = Math.round((this.acc + 0.1) * 100) / 100;
        // // 保存当前训练轮数和精确度到tableData中
        // this.tableData.push({
        //   epoch: this.epoch,
        //   accuracy: this.acc <= 1 ? this.acc : 1,
        // });
        // // 保存当前训练轮数和精确度到折线图数据列表中
        // this.xdata.push(this.epoch);
        // this.ydata.push(this.acc <= 1 ? this.acc : 1);
        // console.log("xdata just push" + this.epoch);
        // console.log("ydata just push" + this.acc);
        // if (this.epoch >= this.maxEpoch) {
        //   ElMessage({
        //     message: "已训练指定轮数！",
        //     type: "success",
        //     duration: 0,
        //     showClose: true,
        //     grouping: true,
        //   });
        // }
        // if (this.acc >= this.accGoal) {
        //   this.currentStep = 2;
        //   ElMessage({
        //     message: "已达到目标准确度！",
        //     type: "success",
        //     duration: 0,
        //     showClose: true,
        //     grouping: true,
        //   });
        // }
      }
    },
    cancel() { // 重置数据
      this.currentStep = 0;
      this.modelClass = null;
      this.maxEpoch = 10;
      this.accGoal = 1;
      this.epoch = 0;
      this.acc = 0;
      this.tableData = [];
      this.xdata = [];
      this.ydata = [];
      this.stepNum = 0;
    },

2.前端UI绘制

本周的前端UI绘制更多在于优化代码以及相关的可视化逻辑，而没有添加太多的组件，框架和组件的优化调整更多依赖于李东晓同学的努力，以下讲述我个人的工作部分：

首先，对于可视化界面过多的参数导致的匹配混乱问题，我加入了大量注释，并将冗余的数据清楚而将可以细化明确的数据进一步细化，这样可以增加代码的可读性，加快前端的开发效率。

      /* 组件参数 */
      // 当前步骤，0代表“初始化”，1代表“训练模型”，2代表“训练完成”
      currentStep: 0,
      activeName: 'first',
      done: false,

      /* 预设数据 */
      // 模型选项
      modelOptions: [
        { value: "Mnist_2NN", label: "Mnist_2NN" },
        { value: "Mnist_CNN", label: "Mnist_CNN" },
      ],
      // 模型类型
      modelClass: null,
      // 最大训练轮数
      maxEpoch: 10,
      // 目标准确率
      accGoal: 1,

      /* 可视化数据 */
      // 当前训练轮数
      epoch: 0,

      // 该轮模型准确率
      acc: 0,
      // 表格数据列表，存放有每轮训练后对应的模型准确率
      tableData: [],

      col: { epoch: null, accuracy: null },
      xdata: [],
      ydata: [],

      /* 图标 */
      Edit: Edit,
      Picture: Picture,
      UploadFilled: UploadFilled,

此外，我还实现了折线图y轴的自适应单位格效果。

title: { text: "精确度" },
          tooltip: {},
          xAxis: {
            data: this.xdata,
            name: "epoch",
          },
          yAxis: {
            // scale: true,
            name: "accuracy",
            min: ((Math.min(...this.ydata) - 0.1) >= 0 ? (Math.min(...this.ydata) - 0.1) : 0),
            max: ((Math.max(...this.ydata) + 0.1) <= 1 ? (Math.max(...this.ydata) + 0.1) : 1),
            interval: 0.05
          },
          series: [
            {
              name: "精确度",
              type: "line",
              data: this.ydata,
              label: {
                show: true,
                position: "top",
                textStyle: {
                  fontSize: 15,

3. 向指导老师汇报

在开发任务之外，我们还在本周与指导老师余老师对接，在老师办公室向他展示我们目前的进度。不过，由于目前疫情环境所致，老师不能来到校内，因此我们只能借助几位学长的帮助，在老师的办公室里，通过腾讯会议的方式向他汇报我们目前的成果。

为了本次汇报，我们在宿舍里测试了一个晚上（当然，这也是疫情导致的困难，没有办法）。我们原本的计划是由后端和聚合端的负责同学来测试，他们在同一个寝室，交互起来也比较方便。不过，由于他们宿舍网线网口的故障，最后改为了由我和组长两位同学来提供网口进行测试，为此花了相当多的时间在这里，让人不得不感慨疫情封校期间校内网络之差。

由于上述测试过程中的困难，我们最后在测试时，也带了网线去老师的办公室。所幸得益于上述测试中发现的诸多问题，我们在这次展示汇报的过程中没有产生过多的差池。