【项目实训】基于大模型的小学语数英辅助教育平台 | 基于大模型的中文作文（文本）修改

        模型训练阶段任务完成后，我主要负责作文修改功能的实现，包括后端与大模型接口交互、数据处理以及前端页面和可视化展示。

        作文修改部分主要关注语言和输入形式，语言包括中文英文、输入形式包括文本输入和图像输入。本节主要介绍中文文本输入的作文批改。

一、概述

        中文文本作文修改主要是根据用户选择的年级（一年级二年级等） ，对其输入的文本形式的作文内容进行打分、评价和修改。从主题、结构、好词好句等多个方面进行打分和评价，并针对具体语句给出修改建议。     

        前端部分主要包括一些页面的设计、参数的传递和数据接收并展示，后端涉及到将输入数据传递给大模型并接收返回数据，处理后传递给前端。

二、前端

（一）页面基础样式

        1.主界面

        点击按钮后跳转到对应组件，右边部分显示对应部分的界面

<template>
  <div class="chatHome">
    <div class="chatLeft">
      <div class="title">
        <br/>
        <br/>
        <h1>作文修改</h1>
      </div>
      <div class="options">
        <div
          class="option"
          v-for="option in options"
          :key="option.label"
          :class="{ active: option.active }"
          @click="loadComponent(option)"
        >
          {{ option.label }}
        </div>
      </div>
    </div>
    <div class="chatRight">
      <component v-if="currentComponent" :is="currentComponent.component"></component>
      <div class="showIcon" v-else>
        <span class="iconfont icon-snapchat"></span>
        <!-- <img src="@/assets/img/snapchat.png" alt="" /> -->
      </div>
    </div>
    <!-- <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> -->
  </div>
</template>
<script>
import EnglishTextChat from "./englishtextchat.vue";
import EnglishImageChat from "./englishimagechat.vue";
import ChineseTextChat from "./chinesetextchat.vue";
import ChineeImageChat from "./chineseimagechat.vue";
import {generateUUID} from "@/util/util.js"
export default {
  name: "App",
  components: {
    EnglishTextChat,
    EnglishImageChat,
    ChineseTextChat,
    ChineeImageChat
  },

  data() {
      return {

        options: [
          { label: '英语作文（文本）', component: 'EnglishTextChat' },
          { label: '英语作文（图片）', component: 'EnglishImageChat' },
          { label: '中文作文（文本）', component: 'ChineseTextChat' },
          { label: '中文作文（图片）', component: 'ChineeImageChat' }
        ],
        currentComponent: null
      };
  },
  mounted() {
    if(localStorage.getItem("chats")!=null){
      let chats = JSON.parse(localStorage.getItem("chats"));
      for(let i =0;i<chats.length;i++){
        if(chats[i].type == 0){
          this.personList.push(chats[i]);
        }
    }
    }
    // getFriend().then((res) => {
    //   console.log(res);
    //   this.personList = res;
    // });
  },
  methods: {
      loadComponent(componentName) {
        this.currentComponent = componentName;

        this.options.forEach(option => {
        option.active = false;
      });

      selectedOption.active = true;
      }
  }
};
</script>

        2.中文作文（文本）页面

        该页面实现用户输入文本作文、选择等级，点击修改后在右边显示结果

（二）参数传递和接收

        前端需要给后端传入用户输入的文本和等级信息，这个用两个变量保存，用户输入时将值保存到对应变量中，点击修改后将两个值以字典形式传递，并用correctionData存储返回值。correctionData是一个字典类型，可以通过键访问到具体的值用于展示

submitCorrection() {
      // 检查是否输入了文本、选择了语言和难度
      if (!this.textInput.trim() || !this.selectedLanguage || !this.selectedDifficulty) {
        this.$message.error('请确保已选择语言、难度并上传了需要修改的文本！');
        return;
      }

      // 构建要发送到后端的数据对象
      let payload = {grade:this.selectedDifficulty,text:this.textInput};
      console.log(payload)

      // console.log('Sending data:', payload);

      // 根据选择的语言进行处理
      if (this.selectedLanguage === 'Chinese') {
        Chinese_text_modify(payload)
          .then(response => {
            // 将返回的修改后的文本放入 correctionResult 中
            this.correctionData = response.data;
            this.correctionLoaded = true;
            console.log(response.data)
          })
          .catch(error => {
            console.error('Error in English text modification:', error);
            this.correctionLoaded = false;
            this.$message.error('文本修改出错，请稍后再试！');
          });
      } else {
        // 对于非中文文本，直接将输入文本显示为批改后的结果
        this.correctionData = `批改后的文本内容: ${this.textInput}`;
      }
    },

（三）数据展示

        展示的数据包括了评分、评价和修改建议。其值均可利用循环和键值访问形式获取

<el-col :span="12">
            <div class="panel">
              <div v-if="correctionLoaded">
                <div class="score-display">
                    <!-- 总分显示 -->
                    <div class="total-score-circle">
                        {{ correctionData.totalScore }}分
                    </div>
                    <!-- 分类得分 -->
                    <div class="category-scores">
                      <div>主题明确: {{ correctionData.themeExplicit }}</div>
                      <div>符合题意: {{ correctionData.satisfyRequirement }}</div>
                      <div>结构严谨: {{ correctionData.sentimentSincerity }}</div>
                      <div>感情真挚: {{ correctionData.structureStrict }}</div>
                      <div>语言流畅: {{ correctionData.essayFluence }}</div>
                      <div>好词好句: {{ correctionData.goodSent }}</div>
                    </div>
                </div>
                <!-- 详细反馈 -->
                <div class="detailed-feedback">
                    <div>整体点评: {{ correctionData.comment }}</div>
                </div>
                <div class="sentence-corrections">
                    <table>
                      <thead>
                        <tr>
                          <th>原句</th>
                          <th>修改为</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(item, index) in correctionData.sentences" :key="index">
                          <td>{{ item.originalSentence }}</td>
                          <td>{{ item.correctedSentence }}</td>
                        </tr>
                      </tbody>
                    </table>
                </div>
              </div>
              <div v-else>
                  <p style="color: #B0B0B0;">修改结果</p>
              </div>
              <div class="controls">
                <el-row gutter="10">
                  <el-col :span="6">
                    <el-button type="primary" @click="clearInput">重新批改</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>

二、后端

（一）前后端接口函数

        使用 axios 以及 FormData 来处理和发送表单数据

// 中文作文修改
  export const Chinese_text_modify = params => {
    const formData = new FormData();
    formData.append('grade', params.grade);
    formData.append('text',params.text)
//    for (let [key, value] of formData.entries()) {
//    console.log(key, value);
//}

    return axios({
      method: 'post',
      url: `http://localhost:8088/essay/Chinese_text`,
      data: formData,
      headers: {
//        'Content-Type': 'application/json',
        'Authorization': `Bearer xxxxx`,
      }
    }).then(res => res.data)
  }

（二）后端处理函数

        后端拿到两个参数， 将请求头和数据一起传给模型接口并接收数据，接收到的数据是JSON格式，包括很多内容，需要根据需要进一步处理，然后返回将结果返回。这里需要注意FormData的数据接收方式

        数据处理就是根据需要将需要的数据以键值对存储后返回

        返回的数据也是键值对形式