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

由于时间已经接近项目实训的中期检查时间，因此这一周的工作主要集中于初步实现“异步分布式联邦学习”平台的基础功能的构建。而我负责的部分——即前后端通讯部分代码量不算特别多，同时前端的进度压力相对来说比较大，因此我在这周除了搭建前后端通讯的功能以外，还顺便负责了一部分前端UI界面的搭设工作。以下将会汇报本周的工作内容，以及下一周需要完成的工作内容。

一、本周工作报告

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

1.前后端通讯功能

前后端通讯功能的实现在上一周报告中已经有所描述，即通过websocket来实现双工持续通信，取代了原有的axios（Ajax）的三次握手单向传输方式。具体方式是在前端vue文件的<script>中，在methods中定义初始化方法initWebSocket()。

methods: {
    /* 初始化 */
    initWebSocket() {
      // 连接服务器
      this.websocket = new WebSocket("ws://127.0.0.1:8000/test/");
      // 指定事件回调
      this.websocket.onopen = this.websocketOnOpen;
      this.websocket.onmessage = this.websocketOnMessage;
      this.websocket.onerror = this.websocketOnError;
      this.websocket.onclose = this.websocketOnClose;
    },

然后在后端routing文件中对其进行声明。

from django.conf.urls import url

from . import consumers

websocket_urlpatterns = [
    url(r'^test/', consumers.TrainConsumer.as_asgi()),
]

再在后端的wsgi文件中声明。

"""
WSGI config for client_rear project.

It exposes the WSGI callable as a module-level variable named ``application``.

For more information on this file, see
https://docs.djangoproject.com/en/3.2/howto/deployment/wsgi/
"""

import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'client_rear.settings')

application = get_wsgi_application()

2.前端UI绘制

这次我主要在前端UI中添加了几个重要的组件。

首先是步骤条。

              <el-steps :space="200" :active="stepNum" finish-status="success"
                        simple style="margin-bottom: 20px;">
                <el-step title="初始化" :icon="Edit"/>
                <el-step title="训练模型" :icon="UploadFilled"/>
                <el-step title="训练完成" :icon="Picture"/>
              </el-steps>

然后是侧边导航栏。

            <el-menu
                default-active="1-1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="transparent"
                text-color="black"
                active-text-color="grey"
            >
              <el-submenu index="1">
                <el-menu-item-group>
                  <el-menu-item index="1-1">开始训练</el-menu-item>
                  <el-menu-item index="1-2">历史记录</el-menu-item>
                  <el-menu-item index="1-3">个人信息</el-menu-item>
                  <el-menu-item index="1-4">退出</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>

再然后是每轮迭代后性能的记录表格。

              <el-table :data="tableData" stripe max-height="200" style="width: 60%">
                <el-table-column prop="epoch" label="训练轮次" style="width: 50%;" />
                <el-table-column prop="accuracy" label="精确度" />
              </el-table>

最后是按钮的触发效果。

    chooseModel() {
      if (this.modelClass == null) alert("请选择模型类型！")
      else{
        this.stepNum = 1;
        // 更新训练轮数和精确度
        this.epoch++;
        this.acc = Math.round((this.acc + 0.1) * 100) / 100;
        // 保存当前训练轮数和精确度到tableData中
        let newCol = {epoch: this.epoch, accuracy: (this.acc <= 1 ? this.acc : 1)}
        this.tableData.push(newCol);
        // 保存当前训练轮数和精确度到折线图数据列表中
        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.acc >= 1) {
          this.stepNum = 2;
        }
      }
    },
    cancel() {
      this.modelClass = null;
      this.epoch = 0;
      this.acc = 0;
      this.tableData = [];
      this.xdata = [];
      this.ydata = [];
      this.stepNum = 0;
    },

二、之后的工作

下一周，我们将会开始前后端以及聚合端的同步测试，在完成了基本的数据传输和训练模型聚合模型等功能后。我将会着手编写API手册，并且对于前端的UI进行进一步的绘制。